Foundations
The tokens and rules underneath every Pedantic component. If a value is not on this page, it is not part of the system.
Color
Two brand anchors — aCo Navy and Cream — plus a raspberry accent family for actions. Buttons are never blue and links are never styled as plain blue underlines; the accent carries interactive meaning. Every text/background pairing in the system is measured against WCAG 2.2 AA (4.5:1 for text, 3:1 for large text and UI indicators) and the measured ratios are published with each token.
Typography
One family, seven sizes. The stack is
"Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif —
native on every platform, no webfont download, no layout shift.
Body text is 17px with a 1.55 line height; paragraphs cap at roughly
44rem so lines stay readable. Code uses
Consolas, "SF Mono", "Liberation Mono", monospace.
| Role | Token | Size | Weight | Sample |
|---|---|---|---|---|
| Display / H1 | --pds-text-3xl | 39px | 700 | Pedantic |
| H2 | --pds-text-2xl | 31px | 700 | Pedantic |
| H3 | --pds-text-xl | 25px | 700 | Pedantic |
| Large | --pds-text-lg | 20px | 400–700 | Pedantic |
| Body | --pds-text-md | 17px | 400 | Pedantic |
| Small | --pds-text-sm | 15px | 400–600 | Pedantic |
| Caption | --pds-text-xs | 13px | 600–700 | Pedantic |
Spacing
A 4px base scale. Components take their padding and gaps from these tokens only — no one-off values.
| Token | Value | Typical use |
|---|---|---|
--pds-space-1 | 4px | Tight gaps: label to help text |
--pds-space-2 | 8px | Inline gaps: icon to label, help text to field |
--pds-space-3 | 12px | Compact padding: table cells, nav links |
--pds-space-4 | 16px | Default padding: cards, page gutters |
--pds-space-6 | 24px | Field spacing, card padding |
--pds-space-8 | 32px | Section padding |
--pds-space-12 | 48px | Space above section headings |
--pds-space-16 | 64px | Page-level separation: content to footer |
Corner radius follows the same discipline:
--pds-radius (12px) for cards, fields, and panels;
--pds-radius-pill (999px) for buttons, nav links, search
inputs, and badges.
Accessibility principles
Accessibility is aCo’s core discipline, and Pedantic encodes it as rules, not aspirations:
- Semantics first. Landmarks, headings in order,
lists for navigation, real
<button>and<a>elements. ARIA only fills gaps HTML can’t — and documented ARIA is tested ARIA. - Everything is reachable by keyboard. Logical tab order, a skip link on every page, and a visible focus ring — raspberry on light surfaces, amber on navy — that is never removed.
- Contrast is measured, not eyeballed. Text pairings meet 4.5:1 minimum; the published ratios on this page are the contract.
- Labels are visible and permanent. Every field has a visible label above it and help text under the label. Placeholder text is never a label.
- State is never color alone. Errors, required
fields, and current pages pair color with text, symbols, or
aria-current. - Motion respects the reader. Transitions are
short, and
prefers-reduced-motionturns them off. - Targets are generous. Interactive elements are at least 40px tall; primary actions are larger.