Brand

Design system preview · v0.1

Glass, motion,
and color in one place.

A preview of the components, materials and color options. Everything on this page is placeholder content.

Theme lab

Build a palette

Start from
Live14:02Sample

Sample headline for a featured card in the content layer

Placeholder paragraph showing body text on a solid surface. Content sits on solid cards; glass is reserved for navigation, toolbars and other controls.

Progress62%
5 items · 2 done · 1 pending

Metrics

Trend
Item one18.4k+212%
Item two6.1k+88%
Item three412−19%
Item four3.2k+3%

Notifications

  • UpdatesDaily
  • MentionsInstant
  • ReportsWeekly
  • DigestMonthly

Components

Buttons

Toggles

Hold to see the thumb stretch.

Segmented control

Slider

Value: 62

Fields

Badges

LiveSecondaryTertiary+12.4%−3.1%Draft7

Overlays

Chart series

Primary · secondary · tertiary

Progress & loading

Workspace

Trend
Series ABaseline
Live feedLive

    Data

    Total48,210▲ 12.4%
    Active1,284▲ 3.1%
    Rate0.62▼ 0.04
    Latency142 ms— steady

    Outcomes

    Updated 2m ago
    Option A62%
    Option B27%
    Option C11%

    Details

    What is this?
    An accordion for secondary detail. Placeholder text explains a concept in a sentence or two.
    How often does it update?
    Placeholder answer. Expanding rows animate their chevron with a spring.
    Where does it come from?
    Placeholder answer with a short explanation of the source.

    Content

    Featured4 min read·14:02

    Lead story headline sits large, with an image and its sources underneath

    Source ASource BSource C
    Category·13:40

    Secondary headline in a smaller card
    Category·12:15

    Another headline with a short image

    Article

    Article typography: headline, dek, byline, body and a pull quote

    The dek sits between headline and body and summarises the piece in one or two sentences.

    Alex Placeholder · 6 min read · 13 Oct

    Body text is set at 17 pixels with generous line height for long reading. Citations appear inline as small numbered tags1 that open the source.

    A pull quote breaks up long text and highlights a key line.

    Paragraphs continue in the same rhythm. Links, numbers like 18.4k and timestamps use the monospace face.

    InformationA neutral message with useful context.
    SuccessSomething finished as expected.
    WarningData may be delayed by a few minutes.
    ErrorCouldn't load this panel. Try again
    Nothing here yetEmpty states explain what will appear and offer one action.

    Forms

    Sign in

    Use your email or a provider.

    or
    By continuing you agree to the terms.
    Drop a file or click to uploadPNG or JPG, up to 5 MB
    1Profile2Interests3Done

    Plans & navigation

    Pricing

    Free
    $0 /month
    • Basic features
    • Community support
    • 1 workspace
    ProPopular
    $12 /month
    • Everything in Free
    • Unlimited workspaces
    • Priority support
    • Exports
    Team
    $29 /month
    • Everything in Pro
    • Shared spaces
    • Admin controls