design-system
Domain package with 10 compiled Units.
Unit counts by external type
| Kind | Count |
|---|---|
| type | 4 |
| anti-pattern | 2 |
| counter-example | 2 |
| provocation | 1 |
| tool | 1 |
Sample Units
Hardcoded Pixel Values
Writing raw pixel values (`padding: 16px`, `font-size: 14px`, `border-radius: 8px`) directly into component CSS instead of referencing CSS custom properties or design tokens.…
Magic Numbers
Numeric values that have no traceable origin: `padding: 13px`, `top: 47px`, `width: calc(100% - 73px)`, `transform: translateY(-2.5rem)`.…
Counter Example Hardcoded Pixel Padding
A typical card component CSS where every dimension — padding, margin, radius, gap — is written as a raw pixel literal. Looks fine in isolation but represents the failure to extract a token layer.
Counter Example Magic Number Padding
A header layout that uses off-grid pixel values and a `calc()` expression with a bare numeric constant. The values were nudged into place visually with no underlying system.
Provocation Design System As Product
Who is the PM of the design system? (If 'no one', this is a liability not a pro…
Tool Figma Tokens Plugin
Tokens Studio for Figma is the de-facto plugin for managing design tokens inside Figma and syncing them with code repositories (GitHub, GitLab, JSON files, Style Dictionary).…
Type Color Token Shape
Schema for a color token in a design system. A color token is more than its raw value — it carries semantic meaning, mode variants (light/dark), accessibility metadata (computed contrast), and provenance (primitive vs se…
Type Component Prop Shape
Schema for a design-system component's prop API. Captures variant + size + state dimensions, polymorphic 'as' support, accessibility props, and slot composition.…
Type Design Token
Schema for a design token — a named, typed design decision that is stored as data and consumed by design tools and code. Based on the W3C Design Tokens Community Group format (draft).
Type Spacing Scale
Schema for a spacing scale — the canonical set of distance values used for padding, margin, gap, and inset across the design system.…