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. This document defines the unstyled component anatomy, the token contract that skins it, and the fluid layout primitives that hold it together.
- Behaviour
- Radix Primitives
- Styling
- Plain CSS + custom properties
- Distribution
- Framework-agnostic CSS package + React bindings
- Prefix
- --se-
Contents
01 / Architecture
Three layers, strictly separated
Anatomy, token contract, skin — and the rule that keeps them apart.
02 / Tokens
The contract
Sixteen subsections. Colour, type, space, corners, elevation, focus, icons, motion, breakpoints, density.
03 / Layout
Seven primitives, almost no breakpoints
A four-column base grid, then intrinsic primitives that reflow without media queries.
04 / Anatomy
Parts and states, never classes
Named DOM parts and declared state, so a skin targets attributes rather than internals.
05 / Skins
Writing a new one
What a skin may assign, what it may not touch, and four reference skins.
06 / Responsive
Four rules, in order
Intrinsic sizing first, fr for the remainder, clamp for scale, container queries for shape.
07 / Adopt
Where to start
Radix, Zag, Open Props, Style Dictionary — and the order to build in.
08 / Components
Not built yet
Buttons, inputs, overlays, data display and the builder surface. Specified in Adopt, not yet drawn.