Style
Every token and base class in the stylesheet the templates share, drawn with the real classes and the values the browser computes. Pick a look and a mode in the toolbar and every swatch and value here follows. The names are the ones you and your agent write in app CSS.
- Color
- Type
- Spacing
- Radius and shadow
- Layout primitives
- Buttons
- Forms
- Pills and badges
- Callouts
- Cards
- Tabs
- Tables
- Utilities
Color
App CSS reads the semantic tokens: --ink, --bg, --rule, --accent and the status triples. They follow the theme and flip for dark mode on their own. The ramps exist for the semantic tokens to point at; reach past them to a numbered step and that color stops following the theme. A new app starts monochrome, with --accent at --neutral-900; pick a look in the toolbar and the accent swatches show that theme's accent.
Palette
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- 950
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- 950
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- 950
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- 950
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- 950
Semantic tokens
-
--white -
--black
-
--bg -
--bg-soft -
--bg-muted -
--bg-panel -
--bg-elevated -
--bg-canvas -
--bg-inverse
-
--ink -
--ink-soft -
--ink-dim -
--ink-faint -
--ink-inverse -
--ink-soft-flow
-
--rule -
--rule-soft -
--rule-strong
-
--accent -
--accent-deep -
--accent-soft -
--accent-ink -
--accent-edge
-
--success -
--success-fill -
--success-soft -
--success-ink -
--success-edge
-
--warning -
--warning-soft -
--warning-ink -
--warning-edge
-
--danger -
--danger-fill -
--danger-soft -
--danger-ink -
--danger-edge
-
--info -
--info-fill -
--info-soft -
--info-ink -
--info-edge
-
--focus
-
--input-bg -
--input-border -
--input-border-hover -
--input-border-focus -
--input-placeholder
-
--terminal-bg -
--terminal-ink -
--terminal-dim
Type
Bare headings and paragraphs take the scale with no classes: h1 is --text-4xl, body text is --text-base on --leading-body. One sans carries titles, body and controls, and the mono carries code; a theme can change any of them. .display, .lede and .eyebrow cover the three roles a heading alone does not.
Scale
--text-2xsThe quick brown fox jumps over the lazy dog--text-xsThe quick brown fox jumps over the lazy dog--text-smThe quick brown fox jumps over the lazy dog--text-baseThe quick brown fox jumps over the lazy dog--text-mdThe quick brown fox jumps over the lazy dog--text-lgThe quick brown fox jumps over the lazy dog--text-xlThe quick brown fox jumps over the lazy dog--text-2xlThe quick brown fox jumps over the lazy dog--text-3xlElements renders the page finished--text-4xlElements UI--text-5xlElements UI--text-6xlElements UI--text-7xlElements UI--text-8xlElements UI
Families
--font-sansThe quick brown fox jumps over the lazy dog 0123456789--font-serifThe quick brown fox jumps over the lazy dog 0123456789--font-monoThe quick brown fox jumps over the lazy dog 0123456789
Weights
- Aa
--weight-thin - Aa
--weight-light - Aa
--weight-regular - Aa
--weight-medium - Aa
--weight-semibold - Aa
--weight-bold - Aa
--weight-black
Leading and tracking
--leading-none--leading-tight--leading-snug--leading-body--leading-relaxed--leading-loose
--tracking-tighter--tracking-tight--tracking-snug--tracking-normal--tracking-wide--tracking-wider--tracking-widest
Spacing
A 4px scale. Layout containers own spacing and components never set outer margins, so the space between two things comes from a .stack or .cluster gap, never from a margin on the thing itself.
--space-0--space-px--space-0-5--space-1--space-1-5--space-2--space-2-5--space-3--space-3-5--space-4--space-5--space-6--space-7--space-8--space-9--space-10--space-11--space-12--space-14--space-16--space-20--space-24--space-28--space-32--space-40--space-48--space-56--space-64
Radius and shadow
A 4px radius by default. The semantic slots say which radius a kind of surface takes: --radius-control for buttons and inputs, --radius-surface for cards, --radius-overlay for popovers, --radius-dialog for modals, --radius-tag and --radius-pill for the small things, so a theme can square the controls and round the dialogs. Shadows are quiet, and every focusable control draws the same --focus-ring.
Radius scale
-
--radius-none -
--radius-xs -
--radius-sm -
--radius-md -
--radius-lg -
--radius-xl -
--radius-2xl -
--radius-3xl -
--radius-4xl -
--radius-full
Where each radius goes
-
--radius -
--radius-control -
--radius-surface -
--radius-overlay -
--radius-dialog -
--radius-tag -
--radius-pill
Shadows
-
--shadow-xs -
--shadow-sm -
--shadow-md -
--shadow-lg -
--shadow-xl -
--shadow-2xl -
--shadow-inner -
--focus-ring -
--focus-ring-danger
Layout primitives
.page-shell is the page frame, a class you write and never a default. Pick its width by the number: is-form for most app pages, is-prose for running text, is-wide for tables. .stack, .row and .cluster lay their children out with gap and clear their margins, so a card works the same inside any of them.
Page shell widths, drawn at half size
is-narrow--container-smA sidebar or one narrow card. Not a page.is-form--container-2xlA form, a list, a settings page. The usual choice for an app page.is-prose--container-proseRunning text.is-marketing--container-5xlA landing page.(default)--container-shellA general app page.is-wide--container-wideTables and dashboards.
Stack, row, cluster
.stack flows down with a --space-4 gap. is-xs to is-2xl change it..row flows across, centered, and never wraps. is-baseline, is-start, is-end and is-stretch align it..cluster flows across and wraps, for tags, buttons and metadata.Containers
--container-xs--container-sm--container-md--container-lg--container-xl--container-2xl--container-3xl--container-4xl--container-5xl--container-6xl--container-7xl--container-prose--container-shell--container-wide--container-padding--measure
Breakpoints and layering
--bp-sm--bp-md--bp-lg--bp-xl--bp-2xl
--z-base--z-raised--z-sticky--z-fixed--z-overlay--z-modal--z-popover--z-dropdown--z-tooltip--z-toast--z-top
Motion
--duration-instant--duration-fast--duration-normal--duration-slow--duration-slower
--ease-linear--ease-out--ease-in--ease-in-out--ease-spring
--transition-colors--transition-shadow--transition-transform--transition-opacity
--opacity-disabled--opacity-muted--opacity-overlay
Buttons
A bare <button> is a finished secondary button. Each is- modifier owns one axis, intent, size, width, chrome or state, so they combine in any order. A link becomes a button with the .button class. The slots under the examples are what a theme retunes; this site sets the default height to the large one, so Default and Large match here.
Intent
Size
State
Group and block
Slots
--button-height--button-height-sm--button-height-lg--button-height-hero--button-padding-x--button-padding-x-sm--button-padding-x-lg--button-radius--button-font-size--button-font-size-lg--button-font-weight
Forms
Bare inputs, textareas and selects style themselves, checkboxes and radios too. .field wraps a label, its control and a .hint or .error under it, and form.is-grid lays fields out in two columns, with is-full spanning both. is-error and is-ok color the control; is-sm and is-lg size it.
Slots
--input-height--input-height-sm--input-height-lg--input-padding-x--input-padding-y--input-radius--input-font-size--input-bg--input-border--input-border-hover--input-border-focus--input-placeholder
Pills and badges
A .pill is a small rounded label for a status, a tag or a count. The intents color it with the matching status triple, and .pill-dot puts the status color in a dot ahead of the text.
Callouts
A left-bordered notice for a tip, a warning or a status. is-info is the default; is-success, is-warning, is-danger and is-accent recolor it with the matching soft fill and ink.
Cards
A bordered surface with .card-head, .card-body and .card-foot. The foot sits on --bg-soft and right-aligns its buttons. Each region is optional.
Profile
Body only
A card with no head and no foot is a bordered box with padding. The same card works inside any layout because it never sets a margin.
Tabs
Underline tabs. The stylesheet draws them; your template toggles is-active from the click handler and shows the matching panel with e:if. Click one.
Tables
A bare <table> is full width with small text, a rule under the header and soft rules between rows. Header cells are left-aligned and set in the soft ink; body cells align to the top. Wrap a wide table in a scrolling container on a phone.
| Template | Category | Import |
|---|---|---|
| Button | Forms | @elements/ui/button |
| ButtonGroup | Forms | @elements/ui/button-group |
| Input | Forms | @elements/ui/input |
| InputGroup | Forms | @elements/ui/input-group |
| Textarea | Forms | @elements/ui/textarea |
Utilities
Single-purpose classes in @layer utilities, so they beat the components and lose to anything your app writes. Reach for one for a one-off adjustment; for a pattern that repeats, write a class. These are the families that come up; elements man style/reference/utilities lists every name.
| Family | Classes | Does |
|---|---|---|
| Display | .flex.inline-flex.grid.block.hidden.contents | The display mode. .hidden wins over everything. |
| Flex | .items-center.items-baseline.justify-between.justify-end.flex-wrap.flex-1.shrink-0 | Alignment and growth inside a flex row. |
| Grid | .grid-cols-2.grid-cols-3.grid-cols-12.col-span-2.col-span-full | Equal columns and spans. |
| Gap | .gap-1.gap-2.gap-3.gap-4.gap-6.gap-8.gap-12 | The spacing scale as a gap, for flex and grid alike. |
| Space | .p-4.px-6.py-2.mt-4.mb-8.mx-auto.m-0 | Padding and margin from the same scale. |
| Width | .w-full.w-fit.max-w-prose.max-w-shell.max-w-md.min-w-0 | Widths, and the container scale as max-width. |
| Type | .text-sm.text-lg.font-medium.font-semibold.font-mono.uppercase.tracked-wide.leading-snug.tabular.truncate | Size, weight, family and tracking from the type tokens. |
| Color | .text-ink.text-ink-soft.text-ink-dim.text-danger.bg-soft.bg-muted.bg-inverse.bg-accent | Semantic ink and background. The filled ones set a readable ink too. |
| Border | .border.border-t.border-b.border-strong.rounded-sm.rounded-md.rounded-full | Rules and corners from the radius scale. |
| Shadow | .shadow-xs.shadow-sm.shadow-md.shadow-lg | The shadow scale. |
| Position | .relative.absolute.sticky.inset-0.z-overlay.z-modal.z-toast | Positioning and the layering tokens. |
| State | .hover:bg-muted.hover:text-ink.hover:underline.hover:shadow-md | Hover variants, for the handful that come up. |
| Responsive | .md:flex.md:grid-cols-3.md:hidden.lg:grid-cols-4.lg:hidden | md: from 768px, lg: from 1024px. |
| Reach | .sr-only.visually-hidden.select-none.pointer-events-none | Screen reader text and interaction guards. |
Token names read from @elements/ui; values as this page computes them. elements man style prints the chapter and elements man style/reference/tokens every name.