Acme Design System
Colour tokens
Colour tokens are missing semantic dark mode aliases.
Typography
Button hasn't seen updates in 6 months or more.
Adoption
Navigation hasn't been used by any team in 30 days.
Showcase
Browse design system documentation sites built with zeroheight.
Analytics
Total styleguide views: 3,847 (↑ 12% vs last period)
Documentation
The single source of truth for Acme's design language. Everything your team needs to build consistent, accessible products – all in one place.
What's new
Button v4.2 – Added loading prop and improved focus ring accessibility.
Typography
Acme uses Inter as its sole typeface across all products and platforms. The type scale is built on a 4px baseline grid for consistent vertical rhythm.
Type scale
| Size | Examples |
|---|---|
| Display | 48px / 700 / -0.5px, Hello World |
| Heading 1 | 32px / 700 / -0.4px, Page title |
| Heading 2 | 24px / 600 / -0.3px, Section header |
| Body | 16px / 400 / 1.6, The quick brown fox jumps over the lazy dog. Good design is often invisible. |
| Label | 12px / 600 / 0.06em, SECTION LABEL |
| Caption | 11px / 400 / 0, Timestamp · metadata · helper text |
Colour
The Acme colour system is built on primitive palettes and a semantic layer mapping those primitives to roles. Always use semantic tokens in components – never raw hex values.
| Color Role | Light | Dark |
|---|---|---|
| primary | #2265C9 | #3B74C9 |
| accent | #9257DB | #A09AFF |
| success | #0D735E | #34D399 |
| warning | #B26206 | #FCD34D |
| error | #E4281B | #F87171 |
Usage Guidelines
- Do: Use concise action labels.
- Don't: Use vague labels like "Click here".