Primitive

Primitive is a foundation, not a finish. It provides clean, composable, utility-first building blocks with sensible accessibility baked in and almost no decorative opinion — so you can layer your own brand on top without unpicking someone else's choices first. The aesthetic is a neutral grayscale with crisp geometry, designed to be re-themed in a single place via tokens. Reach for it when you're building a design system from scratch, shipping internal tooling, or want maximum control with minimum fight.

Design principles

• Unopinionated by default. Visual styling is minimal so it never gets in the way of your brand.
• Composable over monolithic. Every element is a small, predictable building block you can combine freely.
• Accessibility is not optional. Semantic HTML, ARIA, focus management, and keyboard support ship by default.
• Token-driven theming. Every color, radius, and spacing value is a CSS variable — change once, apply everywhere.
• Utility-first. Layout and spacing come from small composable utilities rather than bespoke component CSS.
• Predictable and boring on purpose. Consistency and clarity beat cleverness.

Color

The palette is deliberately neutral so it disappears under your own theme. The background is pure white #FFFFFF with a faint #FAFAFA surface for raised areas. The primary color is near-black #171717 (used for primary buttons and emphasis), with #525252 as a secondary. The five swatches form a clean grayscale ramp — #171717, #404040, #737373, #A3A3A3, #E5E5E5 — that maps cleanly to text, icons, dividers, and disabled states. Foreground text is #0A0A0A, muted text #737373, and borders #E5E5E5.

Light-mode token reference:

• Background #FFFFFF, Surface #FAFAFA, raised surface #FFFFFF.
• Primary #171717, Primary hover #000000, Secondary #525252.
• Neutral ramp: #171717 / #404040 / #737373 / #A3A3A3 / #E5E5E5.
• Foreground #0A0A0A, Muted #737373, Border #E5E5E5, Focus ring #171717.
• Semantic slots (override-ready): Success #16A34A, Warning #CA8A04, Danger #DC2626, Info #2563EB.

In dark mode, invert the ramp: background #0A0A0A, surface #171717, foreground #FAFAFA, muted #A3A3A3, borders #262626, and a primary of #FAFAFA for high-contrast actions. Because the system is token-driven, swapping themes is a single variable set — and your brand accent slots in by overriding --primary.

Dark-mode token reference:

• Background #0A0A0A, Surface #171717, Border #262626.
• Primary #FAFAFA, Secondary #A3A3A3, Foreground #FAFAFA, Muted #A3A3A3.
• Semantic slots: Success #22C55E, Warning #EAB308, Danger #EF4444, Info #3B82F6.

Every value is exposed as a CSS custom property (--background, --primary, --radius, --space-*). Re-theming is a single override layer; the components never hardcode color.