A tooling-agnostic, opinionated design system for building web interfaces. These guidelines are written to be consumed by AI coding agents and human developers alike.
A set of Markdown documents covering every design decision involved in building a web UI — from color and typography to component sizing, accessibility, and content writing. All implementation examples use plain CSS custom properties so they apply regardless of which component library, framework, or design tool you use.
- A component library. There is no code to install.
- A Figma kit or Storybook.
- Framework-specific. No references to React, Vue, Tailwind, MUI, shadcn, or any other library.
Five principles underpin every guideline:
- Flat design — hierarchy through borders and color, not shadows
- Geometric scaling — radius, gap, and insets scale with component size
- Corner alignment —
child-radius = parent-radius − parent-padding - Fixed height grid — atomic components snap to
16 | 24 | 32 | 40 | 48 | 56px - Optical padding balance —
horizontal-padding = (height − content-height) / 2
If you are an AI agent, read AGENTS.md first — it contains the core principles, quick-reference token tables, and a topic map.
If you are a human developer, start with index.md for an annotated overview of every file.
foundations/ Color, typography, spacing, sizing, radius, motion, tokens
layout/ Grid, breakpoints, page composition
components/ Buttons, inputs, navigation, overlays, data display, etc.
patterns/ Loading states, error handling, forms, data tables, empty states
accessibility/ WCAG, keyboard, screen readers, contrast
content/ Writing style, microcopy, error messages
dark-mode/ Color adaptation, elevation, implementation