Design System
Typography tokens, color palette, and spacing utilities used across Macademia Tree.
Fonts
Serif — Source Serif 4
Aa Bb Cc Dd Ee
The quick brown fox jumps over the lazy dog
Used for headings, page titles, and the logo.
Sans — Inter
Aa Bb Cc Dd Ee
The quick brown fox jumps over the lazy dog
Used for body text, UI elements, and labels.
Logo
Brand mark
Macademia Tree
Source Serif 4 · 700 weight · tracking-tight
Heading Tokens
Hero heading
Page title
Section title
Title
Label text
Body Tokens
Large body text for hero descriptions and lead paragraphs. Used to introduce sections with prominent, readable copy.
Standard body text for paragraphs, descriptions, and general content. This is the default text style for most content across the site.
Small body text for captions, metadata, helper text, and secondary descriptions throughout the interface.
Colors
Core
Background
--background
Foreground
--foreground
Card
--card
Muted
--muted
Brand
Primary
--primary
Secondary
--secondary
Accent
--accent
Destructive
--destructive
Text
Foreground
--foreground
Muted Foreground
--muted-foreground
Primary
--primary
Destructive
--destructive
Borders
Border
--border
Border Strong
--border-strong
Input
--input
Ring
--ring
Chart
Chart 1
--chart-1
Chart 2
--chart-2
Chart 3
--chart-3
Chart 4
--chart-4
Chart 5
--chart-5
Spacing Utilities
section-padding-lg
Landing page & footer padding. Responsive: py-12 px-6 → sm:py-16 sm:px-16 → xl:py-24 xl:px-26
section-padding
Standard page padding (docs, auth, pricing). Responsive: py-8 px-6 → sm:py-10 sm:px-10 → xl:py-12 xl:px-16
docs-content
Padding for documentation content pages. Responsive: py-8 px-6 → sm:px-20 → lg:px-26