developer tools Color System
Vercel's website is the visual thesis of developer infrastructure made invisible — a design system s...
Vercel's website is the visual thesis of developer infrastructure made invisible...
Vercel uses #171717 as the primary accent for interactive elements
Carefully selected 8 colors for developer-tools applications
Uses shadow-as-border, negative letter-spacing and more
#171717
Primary text, headings, dark surface backgrounds. Not pure black — the slight warmth prevents harshness.
#ffffff
Page background, card surfaces, button text on dark.
#000000
Secondary use, `--geist-console-text-color-default`, used in specific console/code contexts.
#ff5b4f
`--ship-text`, the "ship to production" workflow step — warm, urgent coral-red.
#de1d8d
`--preview-text`, the preview deployment workflow — vivid magenta-pink.
#0a72ef
`--develop-text`, the development workflow — bright, focused blue.
#0070f3
`--geist-console-text-color-blue`, syntax highlighting blue.
#7928ca
`--geist-console-text-color-purple`, syntax highlighting purple.
/* Vercel Color System */
:root {
--vercel-vercel-black: #171717;
--vercel-pure-white: #ffffff;
--vercel-true-black: #000000;
--vercel-ship-red: #ff5b4f;
--vercel-preview-pink: #de1d8d;
--vercel-develop-blue: #0a72ef;
--vercel-console-blue: #0070f3;
--vercel-console-purple: #7928ca;
}
/* Example usage */
.vercel-button-primary {
background-color: var(--vercel-vercel-black);
color: #ffffff;
border: none;
border-radius: 8px;
padding: 8px 15px;
}Cursor's website is a study in warm minimalism meets code-editor elegance. The e...
Expo's interface is a luminous, confidence-radiating developer platform built on...
Linear's website is a masterclass in dark-mode-first product design — a near-bla...
Lovable's website radiates warmth through restraint. The entire page sits on a c...