The Style Guide page defines the core visual foundations of the design system. It documents the primary structural tokens that govern layout rhythm, typography scale, color usage, radius, and elevation - all in one place.
This page is a reference layer, not a component library. It centralizes foundational decisions so that all components and layouts derive from a consistent, predictable base. The visual logic established here is what other pages and patterns inherit.
https://www.figma.com/design/NJkfgz1fYHXZDdJt8OiqFw/Schema?node-id=8726-7129&t=TW8lHBoD4jfNjgs1-1
Each section represents a system-level rule set rather than individual UI elements.
The spacing section maps out the full scale from space-4xs through space-6xl, along with the semantic gap tokens - content-gap, grid-gap, and container-gap. These define the vertical and horizontal rhythm across all layouts. See Variable Architecture for the full Spacing collection breakdown.
Documents the heading and text size hierarchy, derived from a base size and scale multiplier. Both Desktop and Mobile values are represented, showing how type scales shift between breakpoints. See Working with Scales for how to generate and update these values.
Covers the base palette groupings (Primary, Secondary, Tertiary, Neutral, Base, Black, White) and their semantic assignments (backgrounds, text colors, utilities). The palette provides raw values; the assignments provide meaning. See Color palette and assignments for details on how these layers connect.
Shows the radius scale from radius-xs through radius-xxl plus radius-circle. These values are defined in the Borders and Dividers collection and applied consistently across components - cards, buttons, inputs, icons, and media elements.
Documents shadow and elevation styles that create depth hierarchy. These are applied at the component level to establish visual layering across the interface.
The Style Guide page also contains a set of visual instruction frames that demonstrate core concepts in context. These are reference diagrams built directly in Figma - not components, but visual explanations you can inspect.
Hold SHIFT+Y in Figma to view the annotations and measurements.
https://embed.figma.com/design/NJkfgz1fYHXZDdJt8OiqFw/Schema?node-id=8684-8034&t=3OJBsIUDnTnhfyhG-1&embed-host=notion&footer=false&theme=system