Ink · Chrome · Emerald

The PrepGPT design system. Two coordinated surfaces — a cinematic dark marketing language and a calm paper-light product — both derived from one brand mark: a black squircle, a chrome “P”, an amber sparkle. The logo is the palette.

Canonical spec: DESIGN.md at the repo root.

Foundation

Five principles

Earned drama

One hero moment per screen. Everything else recedes.

Numbers are the product

Bands, scores, deadlines and money get the largest type on the page.

Chrome, not neon

Premium is restraint. One accent per composition.

Motion is information

Things animate because state changed, not for decoration.

The next action is visible

Every card ends in a verb.

Color

Two palettes, one family

Marketing lives on ink with a single emerald accent — the same green as the brand 'P'. The logged-in app lives on warm paper with the same green as its primary. One family, two moods.

Marketing · Ink

ink-950 · page

#070708

ink-900 · section

#0C0C0E

ink-850 · card

#111114

ink-800 · chip

#17171B

Emerald · the accent

emerald-300

#6EE7B7

emerald-500

#10B981

emerald-600

#047857

emerald sweep

120° gradient

Emerald is for eyebrows, icons, scores and glows — never a button fill, and never two emerald elements side by side.

Text & lines on ink

text-hi

#F7F7F5

text-mid

#A1A1AA

text-low

#6B6B74

line / line-strong

white 8% / 16%

Product · Paper & Green (app tokens)

--bg

#FAFAF7

--surface-muted

#F2F1EC

--primary

#2F8F5E

--accent

#F5C14E

Skill accents (in-app & mockups only)

Reading

#3E7AB8

Listening

#7A5EA8

Writing

#C07A2B

Speaking

#2F8F5E

Math

#B24A6F

Signature

The three gradients

Max one gradient-filled text element per viewport. The halo only ever sits behind paper mockups and final CTAs.

Chrome headline

Band 8.0

linear-gradient(180deg, #FFFFFF, #D4D4D8 55%, #8E8E96)

Emerald sweep

$72K saved

linear-gradient(120deg, #6EE7B7, #10B981 55%, #047857)

Halo glow

Sits behind hero mockups and the final CTA. Never animates.

radial-gradient(closest-side, rgba(16,185,129,.16), transparent 70%)

Typography

Geist, tight and confident

Weights 600–700 for display (never 900 except 11px eyebrows), 400/500 for body. Geist Mono for every number that matters. Source Serif 4 for reading passages.

Hero H1 · 600 · -0.03em

From mock test to admit letter.

H2 · 600 · -0.02em · 40px

Practice that feels like test day.

H3 · 600 · 18px

AI grading in seconds

Body · 400 · 16/26 · max 65ch

PrepGPT scores your practice in seconds, then turns every result into a plan — universities, scholarships, essays and interviews.

Eyebrow · 700 · 11px · 0.22em caps

Exam engine

Mono number · Geist Mono 700

7.5

Passage · Source Serif 4 · 17/29

The migration patterns of Arctic terns have long puzzled ornithologists.

Components

Buttons, pills & badges

On ink, white is the loudest color — so the primary CTA is a white pill. Emerald never fills a button.

Marketing

Start preparing free Log in

Pill badgeMost popularQ4 / 8

App (Paper · Green)

Start practiceReview answers

ReadingListeningWritingSpeakingMath

Buttons ≥ 40px (44px mobile) · focus ring-2 ring-primary/40 · cards rounded-lg p-6

Composition

Paper on ink

The signature marketing composition: a light product mockup floating on ink, lifted by an emerald halo and a deep soft shadow. Borders carry elevation on dark — shadows barely read on ink.

Writing · Task 2Graded

7.5

+0.5

Fix first: paragraph 2 states an opinion but never supports it.

Motion

Animation is information

Hover / focus

150–200ms ease-out

Enter (cards, rows)

250ms ease-out · 10px rise (pgRise)

Exit

200ms ease-in

Hero stagger

80ms between children · max 4 beats

Bottom sheet (mobile)

240ms ease-out

Test-player open

280ms zoom-up

Celebrations

one spring beat · no loops · never during a test

prefers-reduced-motion

everything collapses to opacity fades

Voice

A quietly confident coach

Never a drill sergeant, never a clown. We celebrate without confetti cannons and correct without shame.

Say

“Let's fix that together.”
“You're 2 bands from your target.”
“Three deadlines need you this week.”

Don't say

“You failed.”
“Wrong!”
“You need to work harder.”

Review checklist

Fast don'ts

Lime / neon fills — #c9f86a is retired

font-black body text or all-caps paragraphs

Two accent colors in one composition

Emerald button fills · emerald accent text below 24px

Borders heavier than 1px on dark

Rotated / tilted "sticker" cards

Shadows as the only elevation cue on ink

Decorative motion loops · animation during tests