One foundation.
Every surface.
Skrewww is a React and TypeScript design system paired with a matching Figma library. The same React components adapt through tokens — never forks — across shape, surface, brand, and eventually industry. Machine-readable contracts let coding agents use them from current facts instead of model memory.
Figma design files — 23 components free, 52 in Pro
Architecture
Every decision in this system is scoped to one of four layers. Status shown here is real, not aspirational.
Foundation
CompleteTokens, color, type, spacing, radius, elevation, motion, icons, accessibility.
Component Library
CompleteActions, Forms, Navigation, Feedback, Containers & Overlays, Content & Data.
Style Systems
Validated on 3 componentsShape (Sharp/Rounded/Pill/Squircle/Brand) and Surface (Flat/Gradient/Glass) — the same components, restyled through tokens.
Industry Systems
Banking pilot (3 components)Banking, Healthcare, Enterprise SaaS, and more — inheriting from the core, never forking it.
Tokens, not hex codes
Every color, radius, and shadow referenced in these docs is a real, resolvable token — not prose describing one. This is what a Button actually points to:
For developers and coding agents
Machine-readable component contracts, recipes, and a skill so coding agents build from current facts.
An offline local CLI that checks selected Skrewww claims in your project against the canonical contracts.
Orientation across foundations, components, Agent Kit, Guard, and release history.
What changed in Skrewww, newest first.