Geist Design System | Vercel
There are two background colors for pages and UI components. In most instances, you should use Background 1—especially when color is being placed on top of the background. Background 2 should be used sparingly when a subtle background differentiation is needed. Background 1 Default element background Background 2 Secondary background These three colors are designed for UI component backgrounds. Color 1 Default background Color 2 Hover background Color 3 Active background If your UI component’s default background is Background 1, you can used Color 1 as your hover background and Color 2 as your active background. On smaller UI elements like badges, you can use Color 2 or Color 3 as the background. APR 26 15:54:21.12 /dashboard/overview APR 26 15:54:21.12 /dashboard/overview APR 26 15:54:21.12 /dashboard/overview APR 26 15:54:21.12 /dashboard/overview These three colors are designed for UI component borders. Color 4 Default border Color 5 Hover border Color 6 Active border These two colo
Colors Colors Learn how to work with our color system. Right click to copy raw values. Scales There are 10 color scales in the system. P3 colors are used on supported browsers and displays. Backgrounds Gray Gray alpha Blue Red Amber Green Teal Purple Pink Backgrounds There are two background colors for pages and UI components. In most instances, you should use Background 1—especially when color is being placed on top of the background. Background 2 should be used sparingly when a subtle background differentiation is needed. Background 1 Default element background Background 2 Secondary backgro
Explore this link on the map →saved by
related reading
- Gradientor - A minimalist, beautiful Radial Background Generatorgradientor.app
- Geistvercel.com
- Realtime Colorsrealtimecolors.com
- getdesign.md — DESIGN.md collection for AI coding agentsgetdesign.md
- Impeccable: The missing upgrade to Anthropic's impeccable skillimpeccable.style
- Color / Design / Zendesk Gardengarden.zendesk.com
- Geist Fontvercel.com
- Say precisely what you mean.index.how
- GitHub - VoltAgent/awesome-design-md: A collection of DESIGN.md files analysis by popular brand design systems. Drop one into your project and let coding agents generate a matching UI. · GitHubgithub.com
- 4,000+ Website Section Designs - Hero, CTA, Pricing & More | Unsectionunsection.com
- Coolors: The super fast color schemes generator | Product Huntproducthunt.com
- Shadersshaders.com