GitHub

Sections

Packaged, prop-driven landing-page sections from @idinstudio/ui. Every component ships four distinct layouts behind one `variant` prop — all four are rendered below.

Every section reveals via `Stagger`/`Reveal`/`FadeIn` as it scrolls into view, and several (marquee bands, count-up stats, parallax media) keep animating afterward. All of it degrades to a static, fully-visible layout under `prefers-reduced-motion` — the reveal and count-up are best felt by scrolling this page slowly rather than reading a screenshot.

FeaturesSection

Four layouts for a features/services block: bento, grid, alternating rows, and an editorial icon list.

FeaturesSection · bento

Mixed-size grid — every third tile spans two columns with a gradient icon accent. The default variant.

Everything your product team needs to ship

From first sketch to production deploy — one system, zero rebuilding.

180+ accessible components

Every button, dialog, and data table ships with a11y tests and a documented contract.

Motion & gradient, built in

Scroll reveals, parallax, and magnetic hover compose from token-driven primitives.

FeaturesSection · grid

Even responsive card grid — every tile carries equal visual weight.

An even grid of peers

180+ accessible components

Every button, dialog, and data table ships with a11y tests and a documented contract.

Motion & gradient, built in

Scroll reveals, parallax, and magnetic hover compose from token-driven primitives.

FeaturesSection · alternating

Full-width copy/media rows that alternate sides down the page, each scroll-revealed independently.

How each discipline fits together

180+ accessible components

Every button, dialog, and data table ships with a11y tests and a documented contract.

Motion & gradient, built in

Scroll reveals, parallax, and magnetic hover compose from token-driven primitives.

Re-skin without touching code

Swap a brand's token values and every component re-themes automatically.

WCAG AA by default

Every severity × variant combination is contrast-checked in CI.

FeaturesSection · icon-list

Dense, editorial two-column list — no cards, no media, reads as a reference list.

A quick reference

ShowcaseSection

Four layouts for a portfolio/work block: waterfall masonry, filtered grid, snap-scroll slider, and full-bleed hover-reveal.

ShowcaseSection · masonry

Uneven waterfall grid via CSS multi-column layout — images keep their natural aspect ratio. The default variant.

Selected work

Products we designed, built, and still ship features for today.

ShowcaseSection · filtered

A single-select category toggle above a responsive grid — categories auto-derive from each project when omitted.

Filter by category

ShowcaseSection · slider

Horizontal snap-scroll carousel with edge-shadow hints and prev/next controls — no carousel dependency.

Browse the work

ShowcaseSection · hover-reveal

Full-bleed project images; the caption is always in the DOM but only slides into view on hover/keyboard focus.

Recent projects

CTASection

Four call-to-action styles, all built from the same title/description/actions shape.

CTASection · gradient-banner

Full-bleed token-driven gradient band, pinned to dark mode. The default variant — wrap the primary action in Magnetic for the pointer-follow pull.

Ship your next release with confidence.

Northwind Studio partners with product teams to design, build, and ship — from the first sketch to the last deploy.

CTASection · split

Copy on the left, actions in a bordered panel on the right — two independently-animated columns.

Ready to scope your project?

A 30-minute call — no deck, no pressure. We'll tell you honestly if we're the right fit.

CTASection · full-bleed-image

A photographic background behind a flat scrim, centered copy — the CTA counterpart to HeroImage.

Northwind Studio's open-plan office

Let's build something people don't want to leave.

Northwind Studio designs and ships product interfaces for teams that care about the details.

CTASection · minimal-centered

Quiet and restrained: a narrower container, smaller type, no background treatment.

Have a project in mind?

Tell us what you're building — we reply within one business day.

FooterSection

Four site-footer layouts sharing the same brand/columns/social/legal data.

LogosSection

Four "trusted by" treatments sharing the same logo list — a `node` wordmark stands in for a real logo mark here.

LogosSection · grid

Even, static responsive logo grid.

Trusted by product teams at
  • Northwind
  • Halcyon
  • Fernweh
  • Loomwork
  • Northstar

LogosSection · marquee

Infinite ticker, pauses on hover/focus. The default variant.

Trusted by product teams at
Northwind
Halcyon
Fernweh
Loomwork
Northstar

LogosSection · grayscale-hover

Logos rest in grayscale, restore color on hover — a classic understated trust treatment.

Trusted by product teams at
  • Northwind
  • Halcyon
  • Fernweh
  • Loomwork
  • Northstar

LogosSection · bordered-cells

A divider-gridded cell wall, each logo centered in its own cell — an editorial trust-wall look.

Trusted by product teams at
  • Northwind
  • Halcyon
  • Fernweh
  • Loomwork
  • Northstar

InfoSection

Four ways to explain a concept: prose + aside, a checked feature list, a process timeline, or a single highlighted callout.

InfoSection · feature-list

Each entry gets an icon tile (defaults to a check mark) + title + description. The default variant.

Everything included, nothing outsourced

Halcyon Studio runs interior architecture, brand, and lighting design under one roof.

  • Interior architectureSpace planning through to construction drawings.
  • Brand identityNaming, mark, and a system your team can run without us.
  • Lighting designFixture selection and lux-level plans, coordinated with the electrician.

InfoSection · timeline

Vertical process steps via the Timeline primitive, revealed in sequence.

How a project runs

  1. Discovery

    Site visit, brief, and budget alignment — one week.

  2. Concept

    Two directions presented, one refined with your feedback.

  3. Documentation

    Drawings and specs ready for permit and tender.

  4. Delivery

    Site visits through handover.

InfoSection · rich-text

A prose content column, plus an optional aside card — a quote, a stat, or a related link.

One team, start to finish

Halcyon Studio has run every interior project the same way since 2014: one team, one point of contact, from the first measured drawing to the final punch list.

We don't hand a finished concept to a separate build team — the same designers who draw the plan are on site the week it's installed.

“They caught a structural clash before it became a change order.”

— Site manager, Nyhavn townhouse renovation

InfoSection · callout

A single highlighted panel with a token-driven gradient wash — for a standout claim, a guarantee, or a single strong CTA.

Fixed-fee, or the second concept is free

If the first concept misses the brief, Halcyon Studio revises it at no extra cost — written into every proposal.

ContactSection

Four contact layouts — a form beside a map or an info column, a quiet single-line band, or a booking-focused panel.

ContactSection · form-map

The form beside a map slot, split roughly two-fifths/three-fifths. The default variant.

Let's build something together

Tell us about your project — we typically reply within one business day.

Map of Meridian Studio's Copenhagen office

ContactSection · form-info

The same form beside a vertical address/email/phone column, divided by a hairline rule.

Let's build something together

Tell us about your project — we typically reply within one business day.

ContactSection · minimal-centered

A quiet, single-column band: heading, description, the first info entry as one prominent contact link.

Prefer email?

Reach us directly — a real person replies within one business day.

hello@meridian.studio

ContactSection · booking-cta

A bordered, glow-accented panel built around one big 'Book a call' action, with trust bullets underneath.

Talk to the team before you commit.

A 30-minute call to scope your project — no deck, no pressure.

Replies within one business dayhello@meridian.studio

BlogSection

Four blog/insights index layouts, all reusing `BlogPostCard` for every post.

BlogSection · grid

An even, responsive grid of post cards. The default variant.

Field notes

What we're learning building products at Meridian Studio.

BlogSection · magazine

A full-width lead story followed by a bento-style grid where every third tile runs wide — the editorial 'Insights' treatment.

Field notes

PricingSection

Four pricing layouts sharing the same tiers/billing data — the billing toggle below is genuinely wired to state.

PricingSection · cards

A responsive grid of pricing cards, ring-highlighted tier, with a live billing-period toggle. The default variant.

Simple, predictable pricing.

One tool, three plans. Pay annually for the sharpest price, or monthly if you'd rather.

Starter

Up to 10 editors. No credit card.

$0/mo
  • Included: Up to 3 projects
  • Included: Unlimited tasks
  • Included: Community support
Get started
Most popular

Pro

Sprints, timelines, and time tracking for growing teams that ship on a cadence.

$12/editor/mo
  • Included: Unlimited projects
  • Included: Sprints & burndown
  • Included: Priority support
Start 14-day trial

Business

Invoicing, SSO, and advanced analytics for agencies and revenue teams.

$24/editor/mo
  • Included: Everything in Pro
  • Included: SSO (SAML)
  • Included: Dedicated CSM
Start 14-day trial

PricingSection · comparison-table

A feature matrix: one column per tier, one row per unique feature, check/cross per cell.

Compare plans

Plan comparison
Feature
Starter
$0/mo
Get started
Most popularPro
$12/editor/mo
Start 14-day trial
Business
$24/editor/mo
Start 14-day trial
Up to 3 projectsStarter includes Up to 3 projectsPro does not include Up to 3 projectsBusiness does not include Up to 3 projects
Unlimited tasksStarter includes Unlimited tasksPro does not include Unlimited tasksBusiness does not include Unlimited tasks
Community supportStarter includes Community supportPro does not include Community supportBusiness does not include Community support
Unlimited projectsStarter does not include Unlimited projectsPro includes Unlimited projectsBusiness does not include Unlimited projects
Sprints & burndownStarter does not include Sprints & burndownPro includes Sprints & burndownBusiness does not include Sprints & burndown
Priority supportStarter does not include Priority supportPro includes Priority supportBusiness does not include Priority support
Everything in ProStarter does not include Everything in ProPro does not include Everything in ProBusiness includes Everything in Pro
SSO (SAML)Starter does not include SSO (SAML)Pro does not include SSO (SAML)Business includes SSO (SAML)
Dedicated CSMStarter does not include Dedicated CSMPro does not include Dedicated CSMBusiness includes Dedicated CSM

PricingSection · highlight

One emphasized tier rendered large with a gradient price, remaining tiers stacked compactly beside it.

Pick your plan

Most popular

Pro

Sprints, timelines, and time tracking for growing teams that ship on a cadence.

$12/editor/mo
  • Unlimited projects
  • Sprints & burndown
  • Priority support
Start 14-day trial

Starter

Up to 10 editors. No credit card.

$0/mo
  • Included: Up to 3 projects
  • Included: Unlimited tasks
  • Included: Community support
Get started

Business

Invoicing, SSO, and advanced analytics for agencies and revenue teams.

$24/editor/mo
  • Included: Everything in Pro
  • Included: SSO (SAML)
  • Included: Dedicated CSM
Start 14-day trial

PricingSection · compact

Dense, divider-separated rows instead of cards — good for a narrow column or a pricing FAQ recap.

Starter

Up to 10 editors. No credit card.

$0/mo
Get started

Pro

Most popular

Sprints, timelines, and time tracking for growing teams that ship on a cadence.

$12/editor/mo
Start 14-day trial

Business

Invoicing, SSO, and advanced analytics for agencies and revenue teams.

$24/editor/mo
Start 14-day trial

TestimonialsSection

Four ways to wall customer quotes: an even grid, an infinite marquee, a featured carousel, or a waterfall masonry.

TestimonialsSection · grid

A responsive grid of testimonial cards. The default variant.

Loved by teams that ship fast.

A few words from customers who moved off spreadsheets and into idinstudio.

Idin Studio shipped our MVP in 4 weeks — faster than our last agency's kickoff call.
Jordan EllisCEO, Acme
The design system alone saved us two sprints of component debates.
Marco DiazHead of Product, Northstar
Support is fast and the roadmap actually reflects what we ask for.
Priya NairFounder, Loomwork

TestimonialsSection · marquee

An infinite horizontal wall, pause-on-hover, for a dense 'loved by many' impression.

Idin Studio shipped our MVP in 4 weeks — faster than our last agency's kickoff call.
Jordan EllisCEO, Acme
The design system alone saved us two sprints of component debates.
Marco DiazHead of Product, Northstar
Support is fast and the roadmap actually reflects what we ask for.
Priya NairFounder, Loomwork

TestimonialsSection · masonry

An uneven waterfall grid — varying quote lengths produce the asymmetric rhythm.

Idin Studio shipped our MVP in 4 weeks — faster than our last agency's kickoff call.
Jordan EllisCEO, Acme
The design system alone saved us two sprints of component debates.
Marco DiazHead of Product, Northstar
Support is fast and the roadmap actually reflects what we ask for.
Priya NairFounder, Loomwork

StatsSection

Four metrics-band layouts sharing the same stats data.

StatsSection · grid

A responsive grid of stat cards. The default variant.

Trusted by teams that ship.

A snapshot of what idinstudio customers hit in their first quarter.

Faster time to MVP
4.2x

vs. a from-scratch build

Uptime SLA
98%

across all managed environments

Components shipped
12k+

reused across projects

Median support response
24h

StatsSection · counter-band

A single divider-separated row of gradient-filled figures that count up from 0 once scrolled into view.

4.2x

Faster time to MVP

vs. a from-scratch build

98%

Uptime SLA

across all managed environments

12k+

Components shipped

reused across projects

24h

Median support response

StatsSection · big-number

An oversized-type grid, no card chrome — a quieter 'just the numbers' band.

4.2x

Faster time to MVP

vs. a from-scratch build

98%

Uptime SLA

across all managed environments

12k+

Components shipped

reused across projects

24h

Median support response

StatsSection · split-copy

Heading/description in a copy column beside a compact stat grid, rather than centered above a full-width row.

Numbers that back the story.

4.2x

Faster time to MVP

vs. a from-scratch build

98%

Uptime SLA

across all managed environments

12k+

Components shipped

reused across projects

24h

Median support response

FullscreenOverlayMenu

Split-screen fullscreen navigation overlay — numbered rows expand accordion-style; open it to see the motion.

FullscreenOverlayMenu

Built directly on the Base UI Dialog + Accordion primitives (not the DS Dialog/Accordion compounds) so the panel can be borderless, edge-to-edge, and split-layout. Shown here without the decorative `visual` panel — a single-column nav-only overlay.