Foundations Overview
Foundations define the visual and structural system that every component relies on. Start here before customizing themes or building new components.
What’s Included
- Color — semantic palettes, contrast, and status colors.
- Typography — font scale, hierarchy, and readability rules.
- Spacing — the 4px rhythm and layout density.
- Grid — breakpoints and responsive layout rules.
- Icons — baseline icon set and usage guidance.
Design Tokens
All foundations are backed by design tokens in @gtcx/tokens. Tokens are the only supported path to customization.
Recommended Reading Order
- Colors
- Typography
- Spacing
- Grid
- Icons