/* =========================================================================== TOKENS — THE ONLY NUMBERS ANYONE IS ALLOWED TO CHOOSE FROM. WHY THIS FILE EXISTS. Without a list to pick from, every author reaches for a number that looks about right — margins at 6, 8, 10, 12, 14, 16, 18 and 22px, type at .76, .78, .8, .82, .84 and .85rem — and the result reads as untidy without any single line being wrong: two sections a hair closer here, a label a hair smaller there. A scale fixes that by removing the choice. There is no 10px. There is --space-3, and it is 12px everywhere, for ever. LOADED FIRST, so style.css can still override anything. The colours are NOT restated here: they are the look's, in theme.css. HOW TO USE IT. Never type a raw px or rem in a page. Reach for a token; if nothing fits, the answer is almost always that the design is drifting, not that the scale is short. See UI_RULES.md. =========================================================================== */ :root { /* ---- SPACING ----------------------------------------------------------- A 4px grid. Everything in the system rounds to one of these — 10px to 12px, 14px to 16px: nearest step, ties upward, so the drift is at most 2px and always in the direction of more air. Nobody will see the 2px. Everybody sees the consistency. --------------------------------------------------------------------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 56px; --space-10: 72px; /* THE RHYTHM CONSTANTS. Named by JOB rather than by size, so the day a gap between sections should change, it changes in one place and not in four hundred. These are what pages should reach for; the raw steps above are for the component layer. */ --gap-inline: var(--space-2); /* between things on one line: buttons, pills */ --gap-tight: var(--space-3); /* label to field, line to line */ --gap-content: var(--space-4); /* paragraph to paragraph inside a card */ --gap-section: var(--space-5); /* card to card, section to section */ --gap-major: var(--space-7); /* page region to page region */ /* ---- TYPE -------------------------------------------------------------- Six sizes. Sizes within a few hundredths of a rem of each other are a difference no reader can perceive and every author has to decide about. --------------------------------------------------------------------- */ --text-2xs: .72rem; --text-xs: .78rem; /* hints, table headers, captions */ --text-sm: .85rem; /* secondary text, dense tables */ --text-md: .92rem; /* buttons, controls, most UI text */ --text-base: 1rem; /* body copy */ --text-lg: 1.15rem; /* section titles */ --text-xl: 1.5rem; /* page titles */ --text-2xl: 1.9rem; /* the one big number on a dashboard */ --leading-tight: 1.25; /* headings, buttons — must survive wrapping */ --leading-body: 1.55; /* prose */ --weight-normal: 400; --weight-medium: 600; --weight-bold: 700; --weight-heavy: 800; /* ---- CONTROLS ---------------------------------------------------------- ONE HEIGHT for every button, input, and select, so a row of them lines up without anybody nudging anything. --control-h is also the floor a button may never shrink below, which is what stops a two-word label from bursting out of a box sized for one word. --------------------------------------------------------------------- */ --control-h: 40px; --control-h-sm: 32px; --control-px: var(--space-4); /* horizontal padding inside a control */ --control-px-sm: var(--space-3); /* THE SMALLEST THING A FINGER CAN HIT. Apple and Google both publish 44px; below it, taps miss. Enforced on touch devices in rules.css. */ --touch-min: 44px; /* ---- SURFACES ---------------------------------------------------------- --radius / --radius-sm / the shadows already live in style.css and are deliberately not repeated. These are the ones it lacks. --------------------------------------------------------------------- */ --card-pad: var(--space-6); /* 24px */ --card-pad-sm: var(--space-4); /* on a phone, where 24px of padding is a quarter of the screen width */ /* ---- FOCUS ------------------------------------------------------------- A visible focus ring is not decoration: it is how anybody using a keyboard knows where they are. One ring, everywhere, so it cannot be forgotten on a control somebody adds next year. --------------------------------------------------------------------- */ --focus-ring: 0 0 0 3px rgba(230, 57, 70, .28); --focus-offset: 2px; /* ---- LAYOUT ------------------------------------------------------------ --container is what .site-main already used (1100px), named so it stops being a magic number. --------------------------------------------------------------------- */ --container: 1100px; --container-pad: var(--space-5); --measure: 68ch; /* the widest a line of prose may run before it becomes hard to track back to the next line */ /* ---- DEPTH ------------------------------------------------------------- Stacking order as a named list. Invented z-index numbers are how a dropdown ends up behind the thing it drops out of. --------------------------------------------------------------------- */ --z-base: 0; --z-sticky: 100; --z-header: 200; --z-dropdown: 300; --z-overlay: 400; --z-drawer: 500; --z-modal: 600; --z-toast: 700; } /* --------------------------------------------------------------------------- BREAKPOINTS. CSS will not let a custom property be used in a media query, so these cannot be tokens — which makes writing them down here more important, not less. The whole system uses exactly these three: 860px and below: two-column grids become one; the desktop nav becomes the drawer. "Tablet, or a narrow window." 560px and below: cards lose their generous padding, toolbars stack, tables get their own scroller. "Phone." 380px and below: the last-ditch tier. Nothing NEW is designed here; it only stops the smallest phones from overflowing. Do not invent a fourth. A page that needs one is a page whose layout is fighting the grid rather than using it. --------------------------------------------------------------------------- */