Search blocks by description or jump to a page.
A systems-work section showing a shared design system as colour token swatches, a six-step type scale, and three component documentation cards.
The source for every Portfolio block is included with Pro and Team. Start a plan to copy the code.
Already on a plan? 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.