Design System Display
A systems-work section showing a shared design system as colour token swatches, a six-step type scale, and three component documentation cards.
A systems-work section showing a shared design system as colour token swatches, a six-step type scale, and three component documentation cards.
The Portfolio Collection unlocks the source for every Portfolio block. All Access unlocks every Collection.
Already purchased? Log in
Design System Display presents Field Studio's shared system across four product clients as three panels: a six-token colour grid showing Background through Destructive, a six-step type scale from Display at text-4xl down to Caption at text-xs shown as a ruled list, and three component cards each with a Placeholder aspect-16/10 visual and a one-line description of the variants covered.
Colour tokens, type scale, and components are three separate arrays. Using the site's own theme tokens for the swatches is the distinctive choice: the colour panel shows real token names the installer already has, not invented hex values.
Reach for this block as the systems-work section of a design portfolio, on a dedicated case study page or as a deep-cut section on an agency about page. The installer swaps the studio name, adds their actual token set, and updates the component names and descriptions.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the shared design system overview. Other systems layouts:
Tip: a type scale only works if the token names match what engineering actually receives; keep them honest.