Foundations
The raw design decisions that every component is built on. Understand these and the whole system becomes predictable.
8 token groups
Colors · Typography · Spacing · Radius · Shadows · Z-index · Animation · Fonts
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 core brand colors. These exact values define the visual identity and anchor the brand scales.
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.
Ground
The neutral spine. Text, borders, muted surfaces, and structural UI draw from this token family.
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 across light, mid, and dark themes. Components should use these instead of raw hex.
light
mid
dark
Typography
Font families
The exact font-family token values emitted by tokens.css.
sans
The quick brown fox jumps over the lazy dog.
Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
display
The quick brown fox jumps over the lazy dog.
Gabarito, Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
mono
The quick brown fox jumps over the lazy dog.
ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace
Type scale
Every type utility emitted by tokens.css. Use only these steps for catalog and product UI.
Step
Sample
Spec
display-xl
Bringing design to life
3rem
weight 400 · display · line 1.15
tracking 0 · transform none
Hero H1 on landing pages
display
Design System
2.25rem
weight 400 · display · line 1.15
tracking 0 · transform none
Page H1, section hero titles
heading-xl
Create, manage and organize
1.875rem
weight 400 · display · line 1.2
tracking 0 · transform none
Section headings
heading
Two platforms, one foundation
1.5rem
weight 400 · display · line 1.2
tracking 0 · transform none
Card titles, modal headings
subheading
Student Profiles
1.25rem
weight 400 · display · line 1.4
tracking 0 · transform none
Subheadings, sidebar titles
body-lg
Powering the best teams, educators, and builders.
1rem
weight 400 · sans · line 1.625
tracking 0 · transform none
Large body text, feature descriptions
body
Turn complex operations into streamlined workflows.
0.875rem
weight 400 · sans · line 1.625
tracking 0 · transform none
Default body, nav links, descriptions
body-sm
Compact inspector controls and dense metadata.
0.75rem
weight 500 · sans · line 1.625
tracking 0 · transform none
Dense UI and designer panels
caption
Enroll: 8,000+ classes
0.75rem
weight 400 · sans · line 1.625
tracking 0 · transform none
Captions, metadata, helper text
caption-xs
Soon · v2.0.0 · 2px
0.625rem
weight 400 · sans · line 1.625
tracking 0 · transform none
Tiny metadata, badges, sidebar chips
eyebrow
STUDENT PROFILES
0.75rem
weight 600 · sans · line 1
tracking 0.1em · transform uppercase
Canonical uppercase label
eyebrow-sm
PRO · BETA · NEW
0.625rem
weight 600 · sans · line 1
tracking 0.1em · transform uppercase
Compact uppercase label
overline
STUDENT PROFILES
0.75rem
weight 600 · sans · line 1
tracking 0.1em · transform uppercase
Alias of eyebrow
kicker
STUDENT PROFILES
0.75rem
weight 600 · sans · line 1
tracking 0.1em · transform uppercase
Alias of eyebrow
label
STUDENT PROFILES
0.75rem
weight 600 · sans · line 1
tracking 0.1em · transform uppercase
Legacy alias of eyebrow
Weights
Inter is variable across 100-900. Gabarito ships regular through black for display use.
font-normal
400
Regular — The quick brown fox jumps over the lazy dog
Body copy, display 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
Tokenized letter spacing appears only inside the type utilities above. Body and heading utilities use normal tracking.
eyebrow
0.1em
STUDENT PROFILES
Canonical uppercase label
eyebrow-sm
0.1em
PRO · BETA · NEW
Compact uppercase label
overline
0.1em
STUDENT PROFILES
Alias of eyebrow
kicker
0.1em
STUDENT PROFILES
Alias of eyebrow
label
0.1em
STUDENT PROFILES
Legacy alias of eyebrow
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).
base
0.5rem
Base --radius
sm
calc(0.5rem - 4px)
Derived radius token
md
calc(0.5rem - 2px)
Derived radius token
lg
calc(0.5rem + 2px)
Derived radius token
xl
calc(0.5rem + 4px)
Derived radius token
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, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06)
shadow-elevated
Modals, floating panels
0 0px 0px 1px rgba(0, 0, 0, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06), 0 6px 6px -3px rgba(0, 0, 0, 0.06), 0 12px 12px -6px rgba(0, 0, 0, 0.04), 0 24px 24px -12px rgba(0, 0, 0, 0.04), 0 24px 24px 2px rgba(0, 0, 0, 0.1)
Z-index
Layering
Semantic layering tokens for overlays, sticky UI, popovers, and tooltips.
z-dropdown
40
z-sticky
50
z-fixed
60
z-modal
100
z-popover
110
z-tooltip
120
Animation
Motion
Named animation tokens emitted as Tailwind utility values.
animate-accordion-down
accordion-down 0.2s ease-out
animate-accordion-up
accordion-up 0.2s ease-out
animate-caret-blink
caret-blink 1.25s ease-out infinite
animate-hilum-orbit
hilum-orbit 1.4s ease-in-out infinite
animate-hilum-spring-in
hilum-spring-in 180ms cubic-bezier(0.2, 0.9, 0.2, 1.15)
animate-hilum-thinking
hilum-thinking 1.1s ease-in-out infinite