Foundations
The raw design decisions that every component is built on. Understand these and the whole system becomes predictable.
5 categories
Colors · Typography · Spacing · Radius · Shadows
How To Use This Page
Foundations defines the visual language beneath every component, including color, typography, spacing, radius, and shadows.
Read this before customizing tokens or judging whether a component feels off-brand, because most visual decisions roll up from here.
How The Content Is Grouped
- The top-level Foundations page groups the catalog by subcategory, making it easier to choose a family of patterns before drilling into an implementation.
- Use the highlighted links below to start with the highest-signal areas of the section.
Colors
Brand colors
The four core brand colors. These exact values define the visual identity — every tonal scale is derived from them.
Primary
#C100F1
brand-primary
Primary actions, CTAs, focus rings
Secondary
#FFF5BF
brand-secondary
Brand secondary, warning surfaces
Primary — Purple
Built from brand.primary #C100F1. Use this scale for interactive states, focus rings, and CTA surfaces.
Secondary — Butter
Built from brand.secondary #FFF5BF. Use this scale for secondary CTAs, warning surfaces, and warm highlight moments.
Taupe
The neutral spine. Every text, border, and structural surface in the system draws from here.
Semantic
One reserved color outside the brand palette. Red is reserved exclusively for destructive and error states — it cannot be confused with any brand color.
Semantic tokens
CSS variables that map intent to palette values. Use these in components, never raw hex.
Token
Value
Usage
Typography
Font pairing
Instrument Serif for titles and display text. Inter for all UI and body copy.
Instrument Serif · Titles
The quick brown fox jumps over the lazy dog.
display-xl · display · heading-xl · heading
Inter · UI & Body
The quick brown fox jumps over the lazy dog. Consistent, accessible, and beautifully crafted.
subheading · body-lg · body · caption · label
Type scale
Nine steps from display to label. Use only these — never arbitrary font sizes.
Step
Sample
Spec
display-xl
text-5xl
Bringing design to life
3rem / 48px
weight 400 · Instrument Serif
Hero H1 on landing pages
display
text-4xl
Design System
2.25rem / 36px
weight 400 · Instrument Serif
Page H1, section hero titles
heading-xl
text-3xl
Create, manage and organize
1.875rem / 30px
weight 400 · Instrument Serif
Section headings
heading
text-2xl
Two platforms, one foundation
1.5rem / 24px
weight 400 · Instrument Serif
Card titles, modal headings
subheading
text-xl
Student Profiles
1.25rem / 20px
weight 500 · Inter
Subheadings, sidebar titles
body-lg
text-base
Powering the best teams, educators, and builders.
1rem / 16px
weight 400 · Inter
Large body text, feature descriptions
body
text-sm
Turn complex operations into streamlined workflows—and they'll feel truly effortless.
0.875rem / 14px
weight 400 · Inter
Default body, nav links, descriptions
caption
text-xs
Enroll: 8,000+ classes
0.75rem / 12px
weight 400 · Inter
Captions, metadata, helper text
label
text-xs
STUDENT PROFILES
0.75rem / 12px
weight 600 · Inter
Section labels, category tags (always uppercase)
caption-xs
text-[10px]
Soon · v0.1.0 · 2px
0.625rem / 10px
weight 400 · Inter
Tiny metadata, badges, sidebar chips
Weights
Inter uses regular, medium, and semibold. Instrument Serif is always regular (400).
font-normal
400
Regular — The quick brown fox jumps over the lazy dog
Body copy, serif headings, captions
font-medium
500
Medium — The quick brown fox jumps over the lazy dog
UI labels, nav links, metadata
font-semibold
600
Semibold — The quick brown fox jumps over the lazy dog
Emphasis, button text
Letter spacing
Four tracking values. Tighter for large display type, widest for uppercase labels only.
tracking-tighter
-0.05em
Bringing education to life
H1, display headings
tracking-tight
-0.025em
Create, manage and organize
H2, H3 headings
tracking-normal
0em
Turn complex operations into simple workflows
Body, UI labels
tracking-widest
0.1em
STUDENT PROFILES
Section labels (uppercase only)
Spacing
Scale
Tailwind's 4px base unit. Stick to these steps — consistency comes from constraint.
Token
px
Visual
Used for
0.5
2px
1
4px
icon gap
1.5
6px
tight icon gap
2
8px
inner padding (xs)
2.5
10px
badge padding
3
12px
button padding sm
4
16px
button padding default
5
20px
card padding
6
24px
section padding sm
8
32px
page padding, preview area
10
40px
section vertical gap
12
48px
16
64px
large section gap
Border Radius
Scale
Seven steps from square to full pill. The base --radius is 0.5rem (8px).
none
0px
—
sm
2px
Small chips
md
6px
Buttons, inputs, tags
lg
8px
Inner panels (--radius)
xl
12px
Cards, preview areas
2xl
16px
Large containers
full
9999px
Pills, avatars, badges
Shadows
Elevation
Two shadow levels only. shadow-natural for cards and default elevation, shadow-elevated for overlays and floating panels.
shadow-natural
Cards, default elevation
0 0px 0px 1px rgba(0,0,0,.06), 0 1px 1px -.5px rgba(0,0,0,.06), 0 3px 3px -1.5px rgba(0,0,0,.06)
shadow-elevated
Modals, floating panels
0 0px 0px 1px rgba(0,0,0,.06), 0 1px 1px -.5px rgba(0,0,0,.06), 0 3px 3px -1.5px rgba(0,0,0,.06), 0 6px 6px -3px rgba(0,0,0,.06), 0 12px 12px -6px rgba(0,0,0,.04), 0 24px 24px -12px rgba(0,0,0,.04), 0 24px 24px 2px rgba(0,0,0,.1)