Foundations

Overview

Foundations define the core design decisions that underpin the entire design system. These include the visual language and rules that all components inherit from.

Topics

• Design Tokens — The token architecture and how dark mode works
• Color — The Maryland palette, gray ramp, and semantic color roles
• Typography — Typeface, the t-* type ramp, heading scale, and body text conventions
• Spacing — The --space-* scale and the s-* spacing utilities
• Z‐Index — Stacking order guidelines for layered elements
• Icon — Icon library usage
• Link — Inline link style and usage

Building or extending the theme? See the For Developers section for how the tokens become utility classes and how to build a component that matches the system.