Foundations
Marketing color and emphasis
Keep the marketing site’s light canvas and pastel storytelling treatments separate from app theme tokens.
On this page
A separate light-only scope
Marketing uses #FAF7EC for its canvas, #FFFFFF for surfaces, and #1E1E1E for text. Its commented dark media query is not implemented theme support. A dark product screenshot inside a marketing feature card does not make the page a dark theme.
Marketing roles
| Role | Value | Use |
|---|---|---|
| primary | #00E0BF | Marketing semantic role |
| background | #FAF7EC | Marketing semantic role |
| background-border | #E6E1CC | Marketing semantic role |
| background-max | #FFFFFF | Marketing semantic role |
| foreground | #1E1E1E | Marketing semantic role |
| foreground-muted | rgba(30, 30, 30, 0.5) | Marketing semantic role |
| highlight-dark | #F5C73D | Stars and strong yellow emphasis |
| highlight-medium | #fce192 | Feature panel and highlighted headline |
| highlight-light | #FFF2CB | Highlight gradient start |
| light-blue | #9FE7FF | Alternating feature panel |
| pink | #FFD1F3 | Alternating feature panel |
| green | #d5fc49 | Feature-grid panel |
Emphasis without changing the app
The home headline highlights one word with a yellow gradient. Feature blocks rotate yellow, blue, and pink backgrounds; the feature grid also includes green. These are promotional framing treatments, not new application status colors. Source CSS is available in marketing-tokens.css; tokens.json exports both scopes.
Source references
| File | Responsibility |
|---|---|
| marketing/src/app/globals.css | Marketing palette and Inter font |
| marketing/src/components/HomeHero.tsx | Headline highlight and dark CTA |
| marketing/src/components/FeatureBlock.tsx | Alternating promotional panels |
Source palette
- --primary
- #00E0BF
- --background
- #FAF7EC
- --background-border
- #E6E1CC
- --background-max
- #FFFFFF
- --foreground
- #1E1E1E
- --foreground-muted
- rgba(30, 30, 30, 0.5)
- --highlight-dark
- #F5C73D
- --highlight-medium
- #fce192
- --highlight-light
- #FFF2CB
- --light-blue
- #9FE7FF
- --pink
- #FFD1F3
- --green
- #d5fc49
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