Design system specification
One anatomy. Any skin.
Studio Edit is a portfolio and career platform. Every creative who publishes on it brings their own visual identity, so the system underneath cannot have one. The system is four fixed parts — the token contract, the components built on it, how they compose, and the layout that holds them. A skin sits beside those four and supplies every value, so the whole system can change appearance without a single part moving.
- Behavior
- Native elements, Radix for six patterns
- Styling
- Plain CSS + custom properties
- Distribution
- Framework-agnostic CSS package + React bindings
- Prefix
- --se-
Contents
01 / Principles
What this system believes
Twelve beliefs, and what each one tells you to do when you are building.
02 / Architecture
Four parts, and skins beside them
Contract, components, composition, layout — what governs what, and why skins sit beside them.
03 / Tokens
The contract
Sixteen subsections. Color, type, space, corners, elevation, focus, icons, motion, breakpoints, density.
04 / Layout
Seven primitives, almost no breakpoints
A four-column base grid, then intrinsic primitives that reflow without media queries. Specified, not built — the layout tokens ship, the primitives do not.
05 / Anatomy
Parts and states, never classes
Named DOM parts and declared state, so a skin targets attributes rather than internals.
06 / Skins
Writing a new one
What a skin may assign, what it may not touch, and four reference skins.
07 / Responsive
Four rules, in order
Intrinsic sizing first, fr for the remainder, clamp for scale, container queries for shape.
08 / Adopt
Where to start
Radix, Zag, Open Props, Style Dictionary — and the order to build in.
09 / Components
Thirty-two, built against the contract
Buttons, fields, overlays, data display and the builder surface. Twelve work with no JavaScript at all.