Foundations

Core visual standards shared by every component. Foundations define the palette, type ramp, surfaces, spacing scale, and icon set — components consume them, never redefine them.

Breakpoints

Responsive viewport ranges from mobile to desktop, the 1440px standard width, and column counts per breakpoint.

Explore Breakpoints >

Universal

Colors

Brand palette, neutrals, and feedback colors with hex values and usage guidance.

Iconography

The O2 icon library rendered live from Figma — UI, navigation, button, form, social, and brand dental icons with the sizing scale.

Explore Iconography >

Universal

Logos

The General Practices logo rendered live from Figma — Full Color and Inverse at all four application sizes with usage guidance.

PDSH TECH MDGP SGEN HFDN GNDT KDDT SNDT

Spacing

8-pixel scale, padding tokens, grid columns and gutters, and vertical rhythm across breakpoints.

Explore Spacing >

Universal

Typography

Universal type scale rendered live — responsive headline sizes plus body, nav, and footer styles.

PDSH TECH MDGP SGEN HFDN GNDT KDDT SNDT