--- import Picker from '../layouts/Picker.astro'; const roles = [ ['primary', 'Primary'], ['secondary', 'Secondary'], ['tertiary', 'Tertiary'], ['neutral', 'Neutral'], ]; // Musical intervals, smallest step first. The ratio is the multiplier between // one size and the next; the description says what that much contrast is for, // since the number alone tells nobody which to pick. const scales = [ ['minor-second', 1.067, 'Minor Second', 'Almost no contrast. For dense tools where weight and color carry hierarchy instead of size.'], ['major-second', 1.125, 'Major Second', 'A quiet step. Long documents and data screens that need many levels close together.'], ['minor-third', 1.2, 'Minor Third', 'The workhorse. Clear order without shouting, and it survives on small screens.'], ['major-third', 1.25, 'Major Third', 'Confident separation. A safe default when the page has both marketing and interface on it.'], ['perfect-fourth', 1.333, 'Perfect Fourth', 'Real jumps between levels. Landing pages where the headline has to lead.'], ['augmented-fourth', 1.414, 'Augmented Fourth', 'Sharp contrast. Editorial layouts built from few sizes used decisively.'], ['perfect-fifth', 1.5, 'Perfect Fifth', 'Display type against small text, with little in between. Poster thinking.'], ['golden-ratio', 1.618, 'Golden Ratio', 'The widest range here. Beautiful with one big statement, awkward with six levels.'], ]; // Exponent above the 16px base: P sits at the base, H1 six steps up. const scaleRows = [['H1', 6], ['H2', 5], ['H3', 4], ['H4', 3], ['H5', 2], ['H6', 1], ['P', 0]]; ---
Impeccable

Let's build your
design system.

Arrow keys to move

Add a custom font

Link a hosted stylesheet or upload a face. Nothing is checked until you finish.

{[['heading', 'Heading'], ['body', 'Body']].map(([role, label]) => (
{label}

or

))}