Styling

A guide to styling components with our color system.

Overview

This UI library is optimized to work with specific color tokens that provide crisp, contrasted borders and enhanced visual depth. Our styling system builds upon shadcn/ui's CSS variables approach to ensure consistency and maintainability.

Our components use opaque borders instead of solid ones to ensure crisp, contrasted borders even when backgrounds lack sufficient contrast. These opaque borders mix with bottom shadows to create enhanced contrast and visual depth.

While this color system is optional, it's designed to provide optimal visual results. Using conventional color tokens may result in inconsistent borders and shadows that don't achieve the intended design quality.

Installation


pnpm dlx shadcn@latest add https://coss.com/ui/r/colors-zinc.json

This command will override your existing color variables. We're currently providing a default configuration based on zinc colors, but we plan to add more color variants in the future to give you more styling options while maintaining the same optimization principles.

Extended Color Variables

We've introduced additional color variables beyond the standard shadcn/ui palette to provide more control for specific components like badges and alerts:

--destructive-foreground: Foreground color for destructive actions
--info: Information state color
--info-foreground: Foreground color for information states
--success: Success state color
--success-foreground: Foreground color for success states
--warning: Warning state color
--warning-foreground: Foreground color for warning states

These additional variables ensure consistent styling across components that need to communicate different states or levels of importance.

Get Started Roadmap

On This Page

Overview Installation Extended Color Variables