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
saved by
related reading
- Visual design rules you can safely follow every timeanthonyhobday.com
- Color / Design / Zendesk Gardengarden.zendesk.com
- RandomA11y - Accessible Color Combinationsrandoma11y.com
- Colors - Core conceptstailwindcss.com
- Realtime Colorsrealtimecolors.com
- Details That Make Interfaces Feel Betterjakub.kr
- Using Shadows Instead of Bordersjakub.kr
- Mediumblog.prototypr.io
- Tailwind CSS Colors - All colors + Custom color generatoruicolors.app
- 37 Easy Ways to Spice Up Your UI Designs – Learn UI Designlearnui.design
- Color | Apple Developer Documentationdeveloper.apple.com
- My struggle with colors, part II. Building an accessible color system… | by Zain Adeel | UX Collectiveuxdesign.cc