Foundations
App color and semantic roles
Read the effective CSS cascade: warm light surfaces, deep green-neutral dark surfaces, and restrained turquoise emphasis.
On this page
Effective values
globals.css contains several root declarations. The last warm-canvas overrides are part of the current design. The exported tokens merge those declarations in order and inherit unchanged values into dark mode. Reading only the first :root block would reproduce the old palette.
Primary roles
| Role | Light | Dark | Use |
|---|---|---|---|
| background | #faf8f1 | #171917 | Page canvas |
| background-max | #ffffff | #1c1f1c | Fields and content surfaces |
| background-deeper | #f0ede3 | #2a2d26 | Inset surfaces and tab counts |
| background-border | #e3e0d5 | #3a3f35 | Quiet borders and dividers |
| foreground | #20221f | #eef1e9 | Primary text; Save background |
| foreground-muted | #656961 | #afb7a9 | Supporting labels and hints |
| focus | #087e75 | #69d6bd | Focus outline, active outline, semantic accent text |
| selected | #e0f7ef | #1e4036 | Selected navigation and lesson rows |
Two meanings of primary
The semantic --primary variable resolves to --focus, and .text-primary uses that theme-aware color. Tailwind’s primary background remains #00E0BF. The prominent .ui-button.primary uses that turquoise with #092e27 text and a #00c8ab border. Do not replace these separate roles with one guessed accent value.
Neutral and provider scopes
Tailwind gray, neutral, slate, and zinc utilities all map to the source --neutral-* RGB channels. Their values reverse with the theme. Kit blue and Stripe purple remain provider identifiers. The gold review accent is inherited unchanged in dark mode; its text pairing has a measured contrast problem.
Source references
| File | Responsibility |
|---|---|
| src/app/globals.css | Final app cascade and interaction styles |
| tailwind.config.js | Neutral channel adapters and utility colors |
Source palette
- --background
- #faf8f1
- --background-border
- #e3e0d5
- --background-max
- #ffffff
- --foreground
- #20221f
- --foreground-muted
- #656961
- --accent-gold
- #F5C451
- --accent-gold-soft
- rgba(245, 196, 81, 0.12)
- --background-deeper
- #f0ede3
- --background-muted
- #f0ede3
- --focus
- #087e75
- --selected
- #e0f7ef
- --neutral-50
- rgb(249 249 247)
- --neutral-100
- rgb(242 242 239)
- --neutral-200
- rgb(225 226 221)
- --neutral-300
- rgb(205 207 200)
- --neutral-400
- rgb(144 148 139)
- --neutral-500
- rgb(105 110 100)
- --neutral-600
- rgb(81 86 77)
- --neutral-700
- rgb(61 66 57)
- --neutral-800
- rgb(40 45 37)
- --neutral-900
- rgb(26 30 24)
- --neutral-950
- rgb(15 18 14)
- --primary
- #087e75
Interface examples
Native TeachKit interfaces with fictional course, account, and learner records. Service responses and media are isolated demonstrations; no customer data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-22 · Revision 903bbf05ca9d · Documentation v2.0.0