- A Svelte 5 component library, inspired by Vercel's Geist, thoughtfully designed to deliver + A Svelte 5 component library, inspired by Vercel's Geist, is thoughtfully designed to provide consistent and cohesive web experiences.
@@ -115,7 +80,86 @@- Learn how to work with our color system. Right click to copy raw values. + Learn how to use our color system. Hover over each color to view the corresponding colors.
{/snippet} @@ -53,7 +56,10 @@+ 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. +
+ + ++ These three colors are designed for UI component backgrounds. +
+ + ++ If your UI component’s default background is Background 1, you can use 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. +
++ These three colors are designed for UI component borders. +
+ + ++ These two colors are designed for high contrast UI component backgrounds. +
+ + ++ These two colors are designed for accessible text and icons. +
+ + +