Skip to content
don’t make it ugly
All resources

Design systemDesign Systems

Vercel Geist

Vercel's design system: the reference for the modern developer-tool look.

Staff pickFree
Visit website (opens in a new tab)
Preview of Vercel Geist

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 friendliness

Yes, 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

  • GitHub Primer
    Preview of GitHub Primer

    GitHub Primer

    The design system that makes GitHub feel like GitHub.

    Design systemFreeOpen sourceexcellent agent friendliness
  • Dark Mode Design
    Preview of Dark Mode Design

    Dark Mode Design

    A gallery of websites that get dark interfaces right.

    GalleryFreelimited agent friendliness
  • Web Interface Guidelines
    Preview of Web Interface Guidelines

    Web Interface Guidelines

    A concise, agent-readable checklist of what a well-built web interface must get right.

    GuideFreeOpen sourceexcellent agent friendliness
    Staff pickUsed by me
  • IBM Carbon
    Preview of IBM Carbon

    IBM Carbon

    IBM's open-source enterprise design system, thorough to a fault.

    Design systemFreeOpen sourceexcellent agent friendliness