Style tile · this site's family
Sporty Kinetic
Every role token, type style and shell component, in one family. Families change these values only; the components never change.
Colour roles
Twelve roles, picked by their job, never their look. A family sets each one; Tailwind's own palette is removed, so nothing off-brand compiles.
canvas
The page or band
surface
Raised: cards, inputs, the header
tint
Quiet fills: chips, panels, placeholders
line
Decorative dividers
control
Boundaries that must be seen (inputs)
ink
Text
ink-muted
Secondary text
accent
The family's one colour
on-accent
Text on an accent fill
focus
The focus outline
error
Errors (always with an icon and words)
success
Confirmations (always with words)
Pairs and their contrast
Text needs 4.5:1 (shown as text); controls, focus rings and an accent used large or as a fill need 3:1 (shown as a bar). WCAG 2.2 AA, measured live.
| Foreground | on canvas | on surface | on tint |
|---|---|---|---|
| ink | Aa ink | Aa ink | Aa ink |
| ink-muted | Aa ink-muted | Aa ink-muted | Aa ink-muted |
| error | Aa error | Aa error | Aa error |
| success | Aa success | Aa success | Aa success |
| control | needs 3:1 | needs 3:1 | needs 3:1 |
| focus | needs 3:1 | needs 3:1 | needs 3:1 |
| accent | needs 3:1 | needs 3:1 | needs 3:1 |
on-accent on accent
Aa on-accent
Inverse band
The same roles, redefined for a contrasting band: the footer, a feature section.
canvas
The page or band
surface
Raised: cards, inputs, the header
tint
Quiet fills: chips, panels, placeholders
line
Decorative dividers
control
Boundaries that must be seen (inputs)
ink
Text
ink-muted
Secondary text
accent
The family's one colour
on-accent
Text on an accent fill
focus
The focus outline
error
Errors (always with an icon and words)
success
Confirmations (always with words)
Default
Hover
Focus
Pressed
Disabled
Default
Hover
Focus
Pressed
Disabled
| Foreground | on canvas | on surface | on tint |
|---|---|---|---|
| ink | Aa ink | Aa ink | Aa ink |
| ink-muted | Aa ink-muted | Aa ink-muted | Aa ink-muted |
| error | Aa error | Aa error | Aa error |
| success | Aa success | Aa success | Aa success |
| control | needs 3:1 | needs 3:1 | needs 3:1 |
| focus | needs 3:1 | needs 3:1 | needs 3:1 |
| accent | Aa accent | Aa accent | Aa accent |
on-accent on accent
Aa on-accent
Shape
Radii, the rule weight and the cut: one diagonal edge on a band, at the family's pitch. At --cut: 0 it's a rectangle.
Card: rounded-card, border-rule
Media: rounded-media on a tint placeholder
A rule at --border-rule
A band with the cut
The next section sits behind it (under-cut), so no page colour shows in the wedge.
Type
Two families (display and body). Each family sets the sizes, weight, tracking and case.
Display · type-display
Train with intent
Heading 1 · type-h1
Classes for every level
Heading 2 · type-h2
This week's timetable
Heading 3 · type-h3
Strength and conditioning
Lede · type-lede
A short opening paragraph that says what the page offers and who it's for.
Body · type-body
Body text for reading: comfortable on a phone, with a measure kept to about 65 characters by the prose container.
Small · type-small
Notes, hints and captions, never for anything essential.
Label · type-label
Eyebrow · navigation · tags
Price · type-price
0123456789 · 18:30
Actions
The button recipe (--button-*) and the radius. Each state is previewed with data-preview.
Default
Hover
Focus
Pressed
Disabled
Default
Hover
Focus
Pressed
Disabled
An inline link inside body text.
Contact actions
In a demo they open the fictional-business notice; launched, they are real links.
Form controls
3:1 control borders, 48px controls, errors as text plus an icon.
Panels
Notices and cards.
A notice
Card
A card on the surface
Cards use the card radius and a line edge.
₹25