Card · container query
Resizes by its container
Narrow containers stack; wide ones go side by side.
01Colour
Sampled from the icon
- void
#01061a - abyss
#011039 - deep
#011657 - ultramarine-900
#011c79 - ultramarine-800
#01249d - ultramarine-700
#0130c7 - ultramarine
#013cf4 - royal
#0368f4 - azure
#0b96fa - cyan
#26befc - cyan-bright
#58d7fc - ice
#9cebfc - core
#ecfbfd - frost
#ebf9fd - frost-deep
#daf1fd - snow
#f8fdfe
Semantic, per appearance
- --color-bg
- --color-surface
- --color-surface-raised
- --color-text
- --color-text-muted
- --color-accent
- --color-success
- --color-warning
- --color-danger
- --syn-tag
- --syn-attr
- --syn-keyword
Mixed in oklch
Spacing
--space-1--space-2--space-3--space-4--space-5--space-6--space-7--space-8
Radii
xssmmdlgxl
02Buttons and tags
Lit ultramarine glass
default
:hover
:focus-visible
:active
:disabled
default
:hover
:disabled
on ticket
In this buildIn developmentNeutral≈ approximate— unavailable12New
Pick an element ⌘⇧C · toggle the inspector ⌥⌘I
03Controls
Forms that catch the light
04Surfaces
Panels, tabs and the ticket
.button-primary {
background: linear-gradient(…);
box-shadow: var(--glow-accent);
}- display
- inline-flex
- min-height
- 48px
- border-radius
- 12px
Grid and flex overlays are drawn around the picked element.
Card · :has()
Picked state
This card glows because it contains a pick ring.
Ticket
One-time purchase
The icon's material in both appearances.
01Does it follow the system appearance?
Yes. The toggle above sets data-theme to force one for screenshots.
02Where do the colours come from?
Every brand colour is sampled from the app icon.
05Box model
Margin, border, padding, content
Content 240 × 96
margin 32 / 48 · border 6 / 2 · padding 24 / 40, every side distinct.
06Depth