| name | reference |
| description | Concrete design numbers and formulas for building UI — use when you need exact values for type scale / font sizes, line-height, letter-spacing, spacing and grid systems, color weight ladders (50–950), color harmony (triadic/analogous/complementary), OKLCH palette generation, contrast/WCAG ratios, shadow depth values, button/badge/card/input padding and sizing, or visual-hierarchy levers. Pulls precise tokens so designs use intentional, consistent values instead of guessed ones. Pairs with impeccable and frontend-design when implementing interfaces. |
Impeccable Rails — Reference
This skill is a lookup layer. When you need a concrete design value, read the relevant
reference file rather than guessing. All values are distilled from Design for Developers
(Twarog & Moller) and modernized for 2026 (OKLCH, fluid type, semantic dark-mode tokens,
50–950 weights, WCAG 2.2).
How to use
- Identify what you need a number for, then open the matching file in
references/:
- Color — harmony, OKLCH weight ladders (50–950), dark-mode tokens, contrast/WCAG →
references/color.md
- Typography — modular scale, fluid
clamp() sizes, line-height, letter-spacing, weights → references/typography.md
- Spacing & layout — 4/5-point systems, grids/12-col, gutters, baseline units →
references/spacing-layout.md
- Components — buttons, borders, shadows, icons, inputs, forms, labels, dividers, checkbox, radio, textarea, toggle, dropdown, submit, badges, toasts, breadcrumbs, tables, lists, tooltips, cards, accordions, tabs, iconography, avatars →
references/components.md
- Component states — the state matrix (hover/focus/active/disabled/loading, valid/error, tab/accordion/table/toast variants); ready CSS in
assets/components.css → references/states.md
- Visual hierarchy — size/contrast/proximity/alignment/negative-space, F/Z patterns →
references/visual-hierarchy.md
- Process & styleguide — wireframing rules, styleguide build order (logo→palette→type→imagery→grid→components), component states, design-system concepts →
references/process.md
- For a single machine-readable source of all default tokens, use
references/tokens.json.
Principles (so the numbers make sense)
- Pick values from a system, never ad hoc. A type scale, a spacing step, a weight on the ladder.
- Hierarchy is built from size, weight, color, and space — not decoration.
- Less is more: prefer space and subtle contrast over borders and heavy shadows.
- The numbers are defaults, not laws. They produce a coherent baseline; adjust with intent.
Modernizations applied (vs the 2024 source)
| Topic | This skill uses |
|---|
| Color generation | OKLCH steps → HEX output (book's tint/tone/shade teaching kept) |
| Responsive type | Fluid clamp() default; −10–25%/breakpoint as fallback |
| Dark mode | Semantic surface/elevation tokens (NOT weight inversion) |
| Weight ladder | 50–950 default; 100–800 kept as a mapping |
| Accessibility | WCAG 2.2, 4.5:1 unchanged; APCA noted as emerging |
