skrewww

Foundations

160+ variables across 6 collections. Everything else in this system is built on top of these — components never hardcode a raw value.

Primitive

132 variables

Raw values — color scales, spacing, radius, shadow, duration, easing, breakpoints. Never referenced directly by components.

Value

Semantic

25 variables

Purpose-based tokens aliased to Primitive — background, surface, text, border, action, feedback, icon.

LightDark

Component

1 variables

Controlled exceptions for specific components. Mostly still a placeholder.

Mode 1

Brand

1 variables

Brand-level overrides on top of Semantic. Electric Violet (#6C4CF2) is the confirmed brand color.

Mode 1

Shape

2 variables

Mode-per-personality radius tokens — component/radius/control and component/radius/container — proving real shape-switching across the library.

SharpRoundedPillSquircleBrand Shape

Surface

4 variables

Mode-per-personality fill/border/blur/content tokens — validated on Button, Card, and Text Input.

FlatGradientGlass

Example resolution chain

A component never points at a hex code. It points at a Semantic token, which points at a Primitive:

semantic/action/primarycolor/brand/600#6C4CF2