Design system
Anchor every frontend visual decision to DESIGN.md and fundamental design principles. Use when starting a UI project, writing or editing UI code, changing an existing design, or reviewing a frontend for design adherence.From its SKILL.md
npx -y skills add ethan-ngai/skills --skill design-systemAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its file declares
Copied from the file, not written here
The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.
SKILL.md
3.3 KB, 756 tokens by cl100k_base, as published. Nobody here has run it
Design system
Every visual decision anchors to DESIGN.md at the project root — the single source of truth, so each value in the code traces back to a token. See the guide for its structure.
Pick the branch:
- Starting a project, or no
DESIGN.mdexists: initialize the system. - Writing or editing UI code: build against
DESIGN.mdtokens and the design principles. - Changing an existing design: edit
DESIGN.mdper the guide and design principles, then propagate the change through the code via tokens. - Reviewing a frontend: review the code against
DESIGN.mdand the design principles.
Principles
Color
Specifications are given in light mode — invert for dark.
Reason in a tonal palette where 0 is pure black and 1000 is pure white. Prefer a perceptually uniform colorspace like OKLCH.
Dark mode. Design it alongside light mode. Space darker neutrals 2–3x farther apart, dim text by 100–200, brighten borders by ~100, and cut non-neutral saturation by ~100 (colors read more saturated in dark).
Neutrals — 65–90% of a page:
- Surfaces: 3–5 shades (background, surface, overlay) separated by 10–20; reserve pure white for text/search fields. Ghost buttons use the background shade, rising in shade with importance.
- Borders: soft contrast against background (~150).
- Text: subtext ~600, body 780–850, headings 850–900.
- Drop shadows: subtle (100–200), high blur, light mode only.
Theming — per neutral in OKLCH, drop lightness 0.03, raise chroma 0.02, then set hue to the theme.
Brand — one color as a tonal palette of 5–11 shades (50–950): main at 500/600, accent buttons 100 above main, link text 100 below.
Semantics — fix lightness and chroma in OKLCH, vary hue: info (gray), success (green–teal), warning (yellow–orange), error (red).
Typography
| Font families | Combinations |
|---|---|
| 1 | Sans-serif |
| 2 | Two sans-serifs; display heading + sans-serif body; sans-serif + serif |
Add a monospace family for machine values or code — default JetBrains Mono.
Size the scale by multiplying the smallest font by sqrt(golden ratio) recursively. Line height: body 150%, headers 110–130%. Build hierarchy from 4–7 weight+size+color combos.
Use icons where they carry established, cross-software meaning.
Animation and components
Give every interaction (hover, click) and event (popover appear/dismiss) a reaction. Reach for sleek micro-animations:
- Slide-in transform on a button's text/icon on hover or click
- Confetti on success (sparingly)
- Semantic toast notifications
- Tooltips on textless buttons
- Empty and loading states
Enforcement
Centralize control through inheritance, global styles, and token variables, so one edit propagates everywhere. In Tailwind, override @theme and use @layer.
Verify DESIGN.md formatting via npx @google/design.md lint DESIGN.md.
What ships with it: 4 files
4.2 KB alongside SKILL.md
- DESIGN_GUIDE.md2.7 KB
- INIT.md748 B
- README.md223 B
- REVIEW.md563 B
Gives 0 of the 12 instructions most design systems skills give in 756 tokens
Counted across 501 of the 520 authors here whose files we hold, read 2026-09-06
- Extract colors, typography, spacing, radii, shadows, breakpointsin 20 of 501, across 10 files
- Create a self-contained dependency-free HTML preview pagein 20 of 501, across 10 files
- Keep touch targets at least 44x44pxin 20 of 501
- Score the UI across ten dimensionsin 18 of 501, across 8 files
- Animate exclusively via transform and opacityin 18 of 501, across 15 files
- Ensure WCAG AA color contrastin 18 of 501, across 13 files
- Generate DESIGN.md with rationale for each decisionin 17 of 501, across 7 files
- Ensure proper contrast and readabilityin 15 of 501, across 10 files
- Scan the codebase for existing style patternsin 15 of 501, across 6 files
- Give every interactive element a visible focus indicatorin 15 of 501, across 13 files
- Propose a design token setin 14 of 501, across 5 files
- Create a custom theme when none fitin 14 of 501, across 9 files
Said here and by no other author read
- Anchor every visual decision to DESIGN.md
- Initialize the system when starting a project
- Build UI code against DESIGN.md tokens
- Edit DESIGN.md when changing an existing design
- Propagate design changes through code via tokens
- Review frontends against DESIGN.md and principles
Grouped from the skills themselves: near-identical wordings counted once, and counted by distinct author, so one author publishing three of these counts once. Length counted with cl100k_base; the agent that loads this file may tokenize it differently.