Design Tokens
tokens.css and colors.css are the only places raw values are allowed to live - everything else references them via var(). Color tokens in detail: Colors & Surfaces.
Spacing
--ncss-space-3xs through --ncss-space-3xl - a fluid scale (clamp()-based), growing slightly with viewport width instead of jumping in fixed steps.
| Token | Approx. |
|---|---|
--ncss-space-3xs | 0.25rem |
--ncss-space-2xs | 0.5rem |
--ncss-space-xs | 0.75rem |
--ncss-space-sm | 1rem |
--ncss-space-md | 1.5rem |
--ncss-space-lg | 2rem |
--ncss-space-xl | 3rem |
--ncss-space-2xl | 4rem |
--ncss-space-3xl | 6rem |
Radius & Shadow
| Token | Purpose |
|---|---|
--ncss-radius-sm/-md/-lg/-full | Corner radius, -full for pills/circles |
--ncss-shadow-sm/-md/-lg | Shadow steps |
<div class="ncss-card ncss-radius-lg ncss-shadow-md ncss-border">
Border/radius/shadow combined as standalone utilities
</div>Usable as utility classes: .ncss-radius-*/.ncss-shadow-* - deliberately standalone, component-independent utilities instead of baked into individual components.
Motion
| Token | Value |
|---|---|
--ncss-motion-duration-fast | 100ms - fast entry into :active states |
--ncss-motion-duration | 200ms - normal transitions |
--ncss-motion-duration-slow | 400ms |
--ncss-motion-easing | cubic-bezier(0.4, 0, 0.2, 1) |
--ncss-motion-easing-emphasized | cubic-bezier(0.16, 1, 0.3, 1) - pronounced decelerating curve for elements ENTERING the view (e.g. .ncss-modal--slide-up), best paired with -duration-slow |
Tied to prefers-reduced-motion rather than hard-coded to 0 - base.css respects the setting globally.
Breakpoints & Container Query Thresholds
A fixed convention, not usable as var() (media/container queries don't accept custom properties in the condition itself) - documented as a comment in tokens.css. Breakpointless remains the default approach, fixed breakpoints a deliberately sparingly used escape hatch, e.g. for the nav collapse at 64rem.