Design System & Style Guide
A live, interactive reproduction of the four style guide sheets uploaded by the design team. Test controls, copy tokens, and verify layout rules.
Radius Architecture
Defines corner radius behaviour dependent on the column layout grid.
Large
"Large radius is applied to elements which are 1 or 2 columns in width."
Medium
"Medium radius is applied to elements which are between 2 and 3 columns in width."
Small
"Small radius is applied to elements which are smaller than 4 columns in width."
Typography Hierarchy
Heading Typeface & Body Typeface specifications across Desktop and Mobile viewports.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@#$%^&*()
20px / 1.25rem
18px / 1.125rem
16px / 1.0rem
14px / 0.875rem
12px / 0.75rem
Component System & Controls
Buttons, Text Inputs, Search, URL fields, Selects, Tags, Checkboxes, and Radios.
Button System Variants
Input & Control Archetypes (Sheet 3)
Category Tags
Checkboxes
Radio Buttons
Primitives & Global Schemes
"Primitive colors are the foundational building blocks of a design system's color palette."
Neutral Primitives
Click any color swatch to copy its CSS token value.
Global Color Schemes
"Easily manage colors of your website with global color schemes—use variables to quickly style sections."
Adaptive Design Scheme
This container instantly inherits tokens: Text color (Neutral Darkest / Neutral Lightest), Background, Border, and Accent highlights.