Skip to main content

​
Color Palette

Neo uses a curated set of color tokens across brand, semantic, and neutral categories. Every color has a specific role — never use raw hex values outside these tokens.

​
Brand Colors

​
Core UI Colors

​
Semantic Colors

​
Neutral / Surface Colors

Use semantic tokens (--color-destructive, --color-success) for status communication — they carry meaning independent of theme.
Never use --color-destructive (red) for non-destructive actions or decorative purposes. Red always signals danger or error.

​
Typography

Neo uses Inter as its sole typeface across all weights and sizes. All type tokens are defined as combinations of size, weight, and line-height.

​
Type Scale

Use --type-label-lg for interactive elements (buttons, tabs) and --type-body for readable content. Never use display or heading tokens inside components.

​
Spacing Scale

Spacing follows a 4px base unit. Use these tokens for all margin, padding, and gap values.
The scale skips values at 7, 9, 11, 13-15 intentionally. If you find yourself needing an in-between value, reconsider whether you are grouping content correctly.

​
Border Radius Scale

Use --radius-md (5-6px) as the default for all interactive elements — buttons, inputs, and dropdowns share this radius.
Do not mix radius tokens within the same component. A card with --radius-lg corners should not contain elements with --radius-xl.

​
Iconography

All icons in Neo follow a consistent sizing and style specification.

​
Key Icon Types

Icons always sit at 20x20 regardless of the component size. Scale the component, not the icon. The only exception is decorative hero illustrations.