The foundational design language for Prompt Reps — a hands-on course platform where non-developers learn by doing graded, repeated practice. Energetic and gamified, but credible enough to pay for.
Today's session
Every design decision should reinforce one idea: you get better by doing. Practice is celebrated, progress is visible, and feedback is immediate.
XP, streaks, and PASS verdicts are real, earned moments — celebrate them with snappy, springy motion.
Cream surfaces and a warm near-black keep it friendly without feeling like a toy. A manager pays for this.
One energetic accent. Coral is reserved for action, progress, and achievement — never decoration.
The mark is three “rep bars” — a rising set, like a workout. It works as a standalone glyph, locks up with the wordmark, and renders in a single flat color for stamps, favicons, and email.
Warm coral leads, on warm cream (light) or warm ink (dark). Toggle the theme in the header — every swatch and token below is live. All hexes are flat solids, safe for email.
--color-primary-700 (coral-ink) for body links and small labels. Reserve coral-500 for fills, bold ≥18px labels, icons, and highlights.On coral fills, labels must be bold and ≥18px to meet AA large-text (3:1). The token sheet enforces this via the .btn weight defaults.
Three roles: Plus Jakarta Sans for UI & display, Source Serif 4 for long lesson reading, JetBrains Mono for prompts and code. Each ships a web-safe fallback for locked-down clients like email.
Arial, Segoe UI, system-uiGeorgia, Times New RomanConsolas, Courier NewA 4px spacing base, generous rounding to match the energetic feel, warm-tinted shadows, and snappy, celebratory motion.
| Fast | 120ms | --dur-fast |
| Base | 200ms | --dur-base |
| Slow | 360ms | --dur-slow |
| Out | snappy decel | --ease-out |
| In-out | smooth | --ease-in-out |
| Spring | overshoot | --ease-spring |
Every token with its Tailwind-style name and value. Hexes below reflect light mode; dark values are in the table's right column.
| Token | Light | Dark |
|---|---|---|
--color-primary | #FF5A3C | #FF6A4D |
| Brand coral — CTAs, active, streak/XP | ||
--color-primary-700 | #C4371B | #FF9277 |
| Coral-ink — AA small text & links | ||
--color-on-primary | #FFFFFF | #1A0F0A |
| Label on coral fill | ||
--color-ink | #1F1A17 | #F6EEE7 |
| Primary text / dark surfaces | ||
--color-muted | #6B5F56 | #B0A296 |
| Secondary & meta text | ||
--color-surface | #FBF7F2 | #17120F |
| App background | ||
--color-surface-raised | #FFFFFF | #211A15 |
| Cards & sheets | ||
--color-surface-sunken | #F3ECE3 | #0F0B09 |
| Inputs, code, wells | ||
--color-border | #ECE2D6 | #352B24 |
| Hairline dividers | ||
| Token | Light | Dark |
|---|---|---|
--color-success | #18A957 | #2FBE6E |
| Graded PASS | ||
--color-success-ink | #0F7A3D | #4FD98C |
| PASS text (AA) | ||
--color-warning | #E8A317 | #F5B73D |
| Caution | ||
--color-error | #E5484D | #FF5A5F |
| Graded FAIL | ||
--color-error-ink | #C0353A | #FF8589 |
| FAIL text (AA) | ||
--color-info | #2E7CF6 | #5B9BFF |
| Informational | ||
--color-xp | #F0A21A | #F5B73D |
| XP gold | ||
--color-streak | #FF5A3C | #FF6A4D |
| Streak flame | ||
| Token | Light | Dark |
|---|---|---|
--font-display | Plus Jakarta Sans | → Arial, Segoe UI |
| UI & headings (safe fallback) | ||
--font-reading | Source Serif 4 | → Georgia |
| Lesson body (safe fallback) | ||
--font-mono | JetBrains Mono | → Consolas |
| Prompts & code (safe fallback) | ||
--text-display | 56px / 1.05 / 800 | — |
| Hero | ||
--text-h1 | 40px / 1.1 / 800 | — |
--text-reading | 19px / 1.8 / 400 · 17px desktop | — |
| Lesson body | ||
--text-base | 16px / 1.6 / 400 | — |
| Body UI | ||
--text-caption | 12px / 1.4 / 600 | — |
| Labels / eyebrow | ||
| Token | Light | Dark |
|---|---|---|
--space-{1..24} | 4 → 96px | — |
| 4px base scale | ||
--radius-md | 12px | — |
| Default control rounding | ||
--radius-lg | 16px | — |
| Cards, inputs | ||
--radius-2xl | 28px | — |
| Course cards, modals | ||
--radius-pill | 9999px | — |
| Buttons, tags, progress | ||
--shadow-sm | 0 2px 6px /.08 | — |
| Cards | ||
--shadow-primary | 0 10px 26px coral/.34 | — |
| Coral CTA glow | ||
| Token | Light | Dark |
|---|---|---|
--dur-fast | 120ms | — |
| Hover / press | ||
--dur-base | 200ms | — |
| Default | ||
--dur-slow | 360ms | — |
| Sheets / modals | ||
--ease-out | cubic-bezier(.22,1,.36,1) | — |
| Snappy decel | ||
--ease-spring | cubic-bezier(.34,1.56,.64,1) | — |
| Celebratory overshoot | ||
The machine-readable source lives in apps/web/styles/tokens.css — imported by the app and mapped into tailwind.config.ts. Email templates should use the flat hex values and the *-safe font stacks.
The lesson reader uses .reader + .progress + .btn; lesson body text is tokenized prose; quizzes use .quiz-opt and the .graded feedback panel. Progressive-reveal uses .lesson-footer, .step-chip, .reveal-cta, .prompt-block, .spoiler, and .tryit. All reflow in dark mode via tokens.
Body copy renders with the tokenized typography theme — links use the primary token and inline code gets a chip.
Write something about our launch.
You're our PR lead. Draft a 60-word launch note for existing customers announcing our scheduling feature. Tone: warm but factual.
This content is locked until the learner completes the preceding step. The ghost treatment signals what is coming without revealing the full text.
You are a helpful writing coach.
Rewrite the paragraph below to be clearer and more concise.Select all that apply.
At ≥1024px the lesson reader becomes a two-pane .lesson-shell grid; this step rail replaces the bottom progress bar; the reading column relaxes to 17px / 720px via the desktop token layer in tokens.css; below 1024px nothing changes; see ADR-0009.
Six archetypes for lesson diagrams — text-only props, zero client JS. Authors never set colors or geometry. See ADR-0011 and content/AUTHORING.md.
Stat pills (.xp, .streak) used on /me, the public .certificate block used on /certificates/[code], and the .callout--error variant used on /admin.
Verify code: 9b775c8dea32b160
Side-panel chat: a fixed .fab opens a .drawer that slides in from the right (.is-open). No backdrop — content stays readable. Shown here statically; live on every lesson page.
Showing the model a couple of worked examples before your real ask. A good example pair has:
tone: warmNew utility classes added in .glow, .dot-grid, .icon-sticker, .outline-numeral, .stat-tile, .ribbon-underline, and .lift. This section is the living visual-regression reference for all seven additions.
Destructive actions only (account deletion). Error tokens, same geometry as every other button.
A radial coral tint bleeds in from the top-right corner. Parent requires position:relative; overflow:hidden (built into the class).
An amber tint bleeds in from the bottom-left corner. Same positional requirements as .glow--tr.
14 px dot pattern using --color-border. Works on any background — the dots adapt in dark mode to a 1 px radius.
.icon-sticker.icon-sticker--amber.icon-sticker--successPlace inside any position:relative container. The giant stroke-only digit sits behind step content as a decorative layer.
.stat-tile (default).stat-tile--amber.stat-tile--successA gradient pill (--color-primary to --color-warning) placed directly after an h3-level heading as a decorative accent.
Rises 2 px with a stronger shadow on pointer hover — decorative only; no information is hover-gated.
Rises 2 px with a stronger shadow on pointer hover — decorative only; no information is hover-gated.
Full-card anchor overlay for cards that also contain an interactive child (buy button, form). The card auto-becomes the positioning context via :has(> .card__cover-link) — no inline position: relative needed. .card__cta lifts the interactive child above the overlay (z-index 2). The focus ring uses outline-offset: -4px so it draws inside the clipping card boundary.
Signed-in identity chip in the app nav: Google avatar (.avatar-chip__img) or the email initial. Links to /me; replaces the Sign in button once a session exists.
Two new classes used on the landing page: .faq is a native-<details> accordion with a +/× chevron; .cta-banner is the closing coral block.
The minimal, zero-JS chart primitives used on /admin/analytics: .funnel__bar/.funnel__fill for per-step conversion bars and .daychart/.daychart__bar for the events-per-day column chart. Both fill with the brand coral over a sunken track.