Design systemDesign Systems
Vercel Geist
Vercel's design system: the reference for the modern developer-tool look.
What it is
Geist is Vercel's design system, with public documentation of its colours, typography (the Geist typeface), components and principles. Its aesthetic (near-black and white, thin borders, precise type, minimal colour) has become the default look of modern developer tools.
Why it’s here
Whether you love the look or think it's overused, you should understand it, because your agent is probably going to reach for it. The colour scale documentation is particularly useful for dark mode.
Best for
- developer tools
- dark mode colour scales
- minimal product UI
Can my agent use this?
Agent good agent friendlinessYes, as documentation. Link the colours or components pages and ask your agent to follow the same principles rather than copying Vercel's brand.
Good: Publicly accessible and useful to reference, but the agent will need to interpret it rather than install it.
Access methods
- Docs
- Public website
Related resources
Dark Mode Design 
Dark Mode Design
A gallery of websites that get dark interfaces right.
limited agent friendlinessGalleryFreeWeb Interface Guidelines 
Web Interface Guidelines
A concise, agent-readable checklist of what a well-built web interface must get right.
excellent agent friendlinessGuideFreeOpen sourceStaff pickUsed by meApple Human Interface Guidelines 
Apple Human Interface Guidelines
Apple's guidance on designing for iOS, macOS, watchOS and visionOS.
good agent friendlinessDesign systemFreeMaterial Design 3 
Material Design 3
Google's design system, documented in exhaustive, agent-readable detail.
good agent friendlinessDesign systemFreeOpen source