Foundations
Color and semantic roles
Keep the warm canvas, dark text and turquoise actions consistent across creator and learner screens.
On this page
Source palette
Seven CSS roles define background, border, white surface, foreground, muted foreground and two gold treatments. Tailwind configuration additionally supplies primary turquoise #00E0BF, kit_blue #44B1FF and stripe_purple #635bff, with soft integration fills. These utility colors are configuration values rather than exported CSS tokens.
Role mapping
| Source | Purpose | Constraint |
|---|---|---|
| --background: #FAF7EC | Warm page canvas | Retain the canvas through lesson and editor context. |
| --background-max: #FFFFFF | Fields, panels and media surfaces | Several components also use literal bg-white. |
| --background-border: #E6E1CC | Panel, field and divider borders | A subtle border alone may not distinguish interaction. |
| --foreground: #1E1E1E | Primary text and dark actions | Use for readable body text and action labels. |
| --foreground-muted: rgba(30,30,30,.5) | Hints and subordinate labels | Composited small-text contrast needs review. |
| primary: #00E0BF | Learning actions and emphasis | Prefer dark labels; white text on turquoise needs testing. |
| --accent-gold / --accent-gold-soft | Rating and selected review context | Do not imply that gold means a paid subscription. |
| kit_blue / stripe_purple | Integration identity | Connection state must also be written in text. |
Source exceptions
Save and navigation controls use dark pills. Course progress uses a literal turquoise striped gradient. ToggleField uses a literal off-state #e7e1d3. DeleteClassButton uses Tailwind red utilities. PageHeading uses neutral utilities. These are existing conventions, not evidence of a fully unified semantic token system.
Usage rules
- Use foreground text on pale surfaces; avoid deriving a new accent for each course.
- Preserve actual component colors in screenshots. The portfolio documentation shell uses its own palette.
- Check hover, focus, disabled, error and progress treatments independently.
- Consolidating literals into semantic tokens is a proposed improvement and must not be presented as implemented.
Source palette
- --background
- #FAF7EC
- --background-border
- #E6E1CC
- --background-max
- #FFFFFF
- --foreground
- #1E1E1E
- --foreground-muted
- rgba(30, 30, 30, 0.5)
- --accent-gold
- #F5C451
- --accent-gold-soft
- rgba(245, 196, 81, 0.12)
Examples from the app
Actual TeachKit UI with Thomas McGee’s course content. Session, progress and connection specimens are simulated; no student data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision d8cf23d0a329 · Documentation v0.1