Studiov1.2.3
Studio/Patterns

Pattern Library

Reusable panes and sections with previews, token bindings, component dependencies, responsive behavior, and code/spec views.

Hero

1 patterns

Reusable section headline

A token-bound hero pane with constrained copy, action hierarchy, and responsive stacking.

Primary actionSecondary
Hero Section
Full-bleed hero with background image or gradient overlay, headline, subtext, and call-to-action buttons. Sets the visual tone for a page.
hero
Button
Image
Frame
Pane
3 variants5 token bindings3 breakpoints

Navigation

2 patterns
Start
ActiveSecondaryTertiary
Navigation Bar
Fixed top navigation with logo, desktop links, and mobile hamburger menu. Supports scroll-aware frosted glass effect.
navigation
NavBar
Button
2 variants4 token bindings3 breakpoints
Overview
Tokens
Patterns
Sidebar Navigation
Vertical sidebar with grouped links, collapsible sections, and active state indicators. Used for admin and dashboard layouts.
navigation
SidebarNav
ScrollArea
2 variants5 token bindings3 breakpoints

Layout

4 patterns
Feature
Signal
Action
Feature Grid
Responsive 2-4 column grid of feature cards, each with an icon, title, and short description. Used to present capabilities or benefits.
layout
Card
Badge
Pane
3 variants5 token bindings3 breakpoints
split content
Reusable pane preview
Split Content
50/50 horizontal split with text content on one side and image or illustration on the other. Alternates direction for visual rhythm.
layout
Button
Image
Pane
2 variants4 token bindings3 breakpoints
card grid
Reusable pane preview
Card Grid
Responsive grid of data-driven cards. Each card links to a detail page. Supports badges, metadata, and thumbnail images.
layout
Card
Badge
Pane
2 variants6 token bindings3 breakpoints
panel
Reusable pane preview
Panel
Card panel layout for dashboards and admin views. A contained surface with a header, optional divider, and scrollable content area. Suitable for data widgets, kanban columns, or settings sections.
layout
Card
Button
ScrollArea
3 variants5 token bindings3 breakpoints

Content

6 patterns
8-20%
Metric
$1.12B
Metric
5
Metric
Dual
Metric
Stats Bar
Horizontal row of 3-5 key metrics with labels. Typically placed below a hero or at the top of a dashboard. Each stat shows a number and descriptor.
content
Stat
Pane
2 variants5 token bindings3 breakpoints
timeline
Reusable pane preview
Timeline
Vertical chronological event list with date markers, titles, and descriptions. Used for project phases, changelogs, or historical records.
content
TimelineItem
TimelineTitle
TimelineDescription
2 variants5 token bindings3 breakpoints
accordion section
Reusable pane preview
Accordion Section
Collapsible content sections for FAQ, specifications, or detailed information that benefits from progressive disclosure.
content
Accordion
Card
Pane
2 variants4 token bindings3 breakpoints
testimonial carousel
Reusable pane preview
Testimonial Carousel
Rotating display of quotes or testimonials with attribution. Supports auto-play and manual navigation.
content
Carousel
Avatar
2 variants4 token bindings3 breakpoints
team grid
Reusable pane preview
Team Grid
Grid of team member cards with headshot, name, role, and optional social links. Suitable for about pages and team directories.
content
Avatar
Pane
2 variants4 token bindings3 breakpoints
Form Section
Contact or signup form section with field layout, validation feedback, and submission CTA. Suitable for contact pages, lead capture, and onboarding flows.
content
Field
Input
Textarea
Button
2 variants7 token bindings3 breakpoints

Data Display

2 patterns
pricing table
Reusable pane preview
Pricing Table
Side-by-side comparison of pricing tiers or plan features. Highlights the recommended tier. Each column shows price, features, and CTA.
data
Card
Button
Badge
2 variants6 token bindings3 breakpoints
comparison table
Reusable pane preview
Comparison Table
Two-column table comparing before/after, old/new, or problem/solution pairs. Used to present clear contrasts.
data
Table
Badge
2 variants5 token bindings3 breakpoints

Call to Action

1 patterns

Conversion pane

Short supporting line with one clear decision.

ContinueDetails
CTA Band
Full-width call-to-action strip with headline, supporting text, and 1-2 action buttons. Typically placed between content sections or at page bottom.
cta
Button
Frame
2 variants6 token bindings3 breakpoints

Footer

1 patterns
Brand
Product
Company
Legal
Footer utility row
Footer
Multi-column footer with brand identity, link groups, legal text, and optional newsletter signup. Anchors every page.
footer
Footer
2 variants4 token bindings3 breakpoints