Design scale
Every size in Sveltier comes from the golden ratio, φ ≈ 1.618. Type and control sizes are powers of φ; spacing, corner radii and durations are Fibonacci numbers.
The golden ratio
Each step of a scale is a fixed power of φ larger than the one before, so values taken from different scales still relate to each other: a title is φ times the body text, and a medium control is φ² rem tall. Fibonacci numbers (2, 3, 5, 8, 13, 21, …) are the whole-number form of the same ratio: each is the sum of the two before it, and neighbours approach φ.
Sizes are in rem, so they follow the reader's font-size setting. Pick from the
tokens instead of writing raw values and your own components stay on the same scale.
Type
Font sizes are quarter steps of φ from 1rem. Headline and display grow with the viewport.
| Token | Size | φ step | Specimen |
|---|---|---|---|
--sv-text-label | 0.697rem · 11.2px | −¾ | Total balance |
--sv-text-xs | 0.7862rem · 12.6px | −½ | Total balance |
--sv-text-sm | 0.8867rem · 14.2px | −¼ | Total balance |
--sv-text-md | 1rem · 16px | 0 | Total balance |
--sv-text-lg | 1.1278rem · 18px | ¼ | Total balance |
--sv-text-xl | 1.272rem · 20.4px | ½ | Total balance |
--sv-text-title | 1.618rem · 25.9px | 1 | Total balance |
--sv-text-headline | 1.8249 – 2.3213rem | 1¼ – 1¾ | Balance |
--sv-text-display | 2.618 – 4.2361rem | 2 – 3 | Balance |
Line height
| Token | Value | φ step | Use |
|---|---|---|---|
--sv-leading-tight | 1.1278 | ¼ | Headings and controls |
--sv-leading-snug | 1.272 | ½ | Titles and tables |
--sv-leading-normal | 1.618 | 1 | Body text |
Spacing
Spacing follows the Fibonacci sequence. The suffix is the size in pixels at the default 16px
root, so --sv-space-21 is 21px.
| Token | Size | Specimen |
|---|---|---|
--sv-space-2 | 0.125rem | |
--sv-space-3 | 0.1875rem | |
--sv-space-5 | 0.3125rem | |
--sv-space-8 | 0.5rem | |
--sv-space-13 | 0.8125rem | |
--sv-space-21 | 1.3125rem | |
--sv-space-34 | 2.125rem | |
--sv-space-55 | 3.4375rem | |
--sv-space-89 | 5.5625rem | |
--sv-space-144 | 9rem |
Controls and density
Control heights are half steps of φ; md, φ² ≈ 42px, is the default. Density moves a
control a quarter step: --sv-density-compact is φ−¼ ≈ 0.887 and --sv-density-comfortable is φ¼ ≈ 1.128.
| Token | Height | φ step | Specimen |
|---|---|---|---|
--sv-control-xs | 1.618rem · 25.9px | 1 | |
--sv-control-sm | 2.0582rem · 32.9px | 1½ | |
--sv-control-md | 2.618rem · 41.9px | 2 | |
--sv-control-lg | 3.3302rem · 53.3px | 2½ | |
--sv-control-xl | 4.2361rem · 67.8px | 3 |
Theme packs
Each pack picks its corner radii and durations from the Fibonacci sequence. Maison's square corners and Milano's pill-shaped controls are the two exceptions by design.
| Pack | Radius sm · md · lg · xl | Duration fast · normal · slow |
|---|---|---|
| Monolith | 5px · 8px · 13px · 21px | 144ms · 233ms · 377ms |
| Heritage | 2px · 3px · 5px · 5px | 233ms · 377ms · 610ms |
| Aurora | 8px · 13px · 21px · 34px | 144ms · 233ms · 377ms |
| Maison | 0px · 0px · 0px · 0px | 233ms · 377ms · 610ms |
| Milano | 8px · pill · 13px · 21px | 144ms · 233ms · 377ms |
Layout
Two-column layouts split 61.8% / 38.2%. Grid tracks of 1.618fr and 1fr share the free space after the gap; --sv-golden-major and --sv-golden-minor give the same split as percentages.
/* 61.8% / 38.2% of the space left after the gap. */
.split {
display: grid;
grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
gap: var(--sv-space-21);
}
/* The same split as a width. */
.aside {
inline-size: var(--sv-golden-minor);
}