Glass floats. Content rests.
Poesía follows Apple's Liquid Glass model: navigation and controls are a layer of glass floating over the content; content rests on a thicker material that lets the sky tint it without ever competing with the words. Every sample below is a real component on real tokens.
Aa
Fraunces · Inter
Material
Glass floats over the page for navigation and controls; content rests on a thicker material; solid is for dense data and print. Never glass on glass.
Glass — navigation and controls
The rail and its peek, tab bars, menus and popovers. Translucent, lit at the edge, sparing: only what you touch to move around.
<PageShell.RailPeek>Content material
Thick and quiet, no rim or halo: the sky tints it, the words win. Cards, metric tiles, grouped lists, heroes.
<Card>Solid
For instruments, dense data and print. More contrast and reduced transparency collapse every pane to this.
material="solid"Colour
Chosen by role, never by hue; themes change values, never roles.
Surfaces
surface-default
surface-muted
surface-raised
surface-inverse
Content
content-default
content-muted
content-subtle
Actions
action-primary
action-secondary
action-danger
Feedback
feedback-info
feedback-success
feedback-warning
feedback-danger
Data series
series-1
series-2
series-3
series-4
series-5
series-6
series-7
series-8
Type
Inter for everything a reader works with; the Fraunces serif once per page, at the display role.
- display · serif
The quiet hour
- heading-lg
Weekly report
- heading-md
Billing
- heading-sm
Payment method
- body-lg
Calm interfaces let the content speak first.
- body
Your plan renews on 4 November.
- body-sm
Last edited 3 minutes ago
- caption
Updated hourly
Shape and depth
Three radii; elevation by role — what rests is flat, what floats casts a shadow.
Controls
rounded-controlSurfaces
rounded-surfacePills
rounded-pillMotion
Motion explains a change and never decorates. Asked first: how often, from the keyboard or not, what for (ADR-035).
Compact overlay
fast · standard · opacity + scale from 0.95
Arrives here
Tray overlay
default · standard · opacity + 4 px travel
Arrives here
Inline feedback
fast · standard · opacity
Arrives here
Leaving the canvas
slow · emphasized · opacity + travel
Arrives here
- MR1Animate transform, opacity, filter and clip-path. Never width, height, margin, padding, top or left (they reflow every frame).
- MR2Never start from scale 0. Overlays start at 0.95 to 0.96; nothing starts below 0.9.
- MR3Never ease-in for interface motion, and never the browser's default easing; use the standard or emphasized easing tokens.
- MR4Overlays grow from their trigger (transform origin at the trigger's side), not from their centre.
- MR5Sheets and panels leave on the same recipe that brought them in (symmetric exits, ADR-018). Inline content that disappears because the reader removed it may simply go.
- MR6One easing family per register; durations come from the tokens only. A new duration is a token proposal, not a literal.
- MR7Interruptible motion uses transitions, so a reversal mid-flight retargets. Exit keyframes exist only where a primitive needs them to delay unmounting (ADR-018).
- MR8No bounce or overshoot on utility controls (menus, toggles, dialogs, settings, errors).
- MR9will-change only on what is about to move, never globally; keep continuously animated layers few.
Data
The form follows the data's job; colour comes last; text never wears a series colour (ADR-036).
- Search
- Direct
- Newsletter
Sign-ups
184
- /pricing12.8K
- /docs9.3K
- /changelog3.5K