Socratic AI color system
The named palette tokens below are read from the live custom properties. Some rendered treatments also use transparency: pink glows, the pearl definition light, and transcript-link underlines at rest. The swatches show token values; representative homepage captures show the treatments in context.
Current palette
Peacoat Navy
Linked titles
Also known as Yale Navy and Socratic Navy.
Reading live token… · --socratic-navy
Linked headlines and titles in cards, lists, and indexes. First use: reading-list headlines, with Socratic pink on hover. Not for prose links, buttons, or body text.
Strawberry Milk
Number pink
Also known as Socratic Pink, the official flagship pink.
Reading live token… · --socratic-pink
Same declared value. Displayed as type on this card and as a solid field on the next.
Strawberry Milk
Opaque structural pink
Also known as Socratic Pink, the official flagship pink.
Reading live token… · --socratic-pink
Eyebrow rules, borders, and navigation hover marks. Text highlighting uses Pink Meringue.
Cotton Candy
Soft underline pink
Reading live token… · --socratic-pink-soft
The approved lighter solid for narrative and attribution underlines and the Subscribe hover fill.
That idea helped inspire the Socratic questioning feature.
Ballet Slipper
Pale blush
Reading live token… · --socratic-pink-blush
The approved Subscribe button fill and selected-text background.
Selected text remains readable.
Pink Meringue
Text highlight — selected
Reading live token… · --socratic-highlight
The preferred color for highlighting text, including the Socratic instruction in the homepage and approach-page prompts.
Highlight sample
Lipstick
Readable pink
Reading live token… · --socratic-rose
Readable form-submit text, including the Subscribe label.
Chinagraph Red
Readable red
Reading live token… · --socratic-red
Readable accents such as Copy, Download, PDF links, rules, controls, underlines, and small labels.
Grease Pencil Red
Reference red
Reading live token… · --socratic-reference-red
Reference swatch. Also called Italian Racing Red.
Cornflower
Hover blue
Reading live token… · --socratic-hover-blue
The single hover color for marketing prose links and blog links. Navigation keeps its pink hover.
Moonstone
Pearl blue
Reading live token… · --socratic-pearl-blue
The cool body of the selected G1 Reading light. Reserved for the interactive definition aura.
Opal
Pearl violet
Reading live token… · --socratic-pearl-violet
The faint outer edge of the selected G1 Reading light. Not a general site accent.
Silverpoint
Hairline gray
Reading live token… · --socratic-neutral-hairline
The one-pixel secondary CTA outline. It turns pink on hover.
Previous and selected
#FBD5E4#FDDCE7Rendered treatments
These cards show the named glow and pearl-light treatments. Transcript links also use translucent underlines at rest; for example, ChatGPT user-prompt links use Strawberry Milk at 50%, then Cornflower for text and underline on hover.
Fairy Floss
Glow and bubble pink
Reading live token… · --socratic-pink-glow
Strawberry Milk at 20%. It is used for shadows and glows, and for the writer’s bubble in the Socratic app, never for focus.
Nacre
Pearl definition light
Reading live token… · --socratic-pearl-blue
Pearl blue and pearl violet composited at low opacity for the selected pointer-responsive definition light.
Canonical controls
These examples use the production button classes and live tokens. The right column holds each approved hover state open so the exact change is visible without moving a pointer.
Paper fill, two-pixel pink outline, ink label, pink chevron.
Paper fill, one-pixel neutral hairline, ink label, pink chevron.
Filled blush with a rose label. Reserved for Subscribe.
Approved system
These are the final choices now used by the site. Earlier color decisions retain their detailed captures; newer system decisions are rendered from the live production classes and tokens below.
Narrative and attribution underlines use Cotton Candy. Text highlights use Pink Meringue; transcript-link underlines can use translucent pink instead.
The unused 7%, 9%, and 18% washes are gone. Where a callout needs structure, paper carries a pink rule.
The focus ring uses the same flagship pink as the live newsletter field and the current controls.
Current: Reading live token…
Fairy Floss is used for shadows and glows, and for the writer’s bubble in the Socratic app. Focus uses solid Strawberry Milk.
Selected text uses the approved pale blush, shared with the Subscribe form-submit fill.
Selecting text should feel quiet and inviting.
Primary CTAs use a two-pixel pink outline; secondary CTAs use a neutral hairline that turns pink on hover; Subscribe remains the one filled-blush form submit.
Marketing prose and blog links share the same approved hover blue. Navigation remains the deliberate exception: pink words with a pink underline.
On the homepage, only the pink bar beneath “Socratic” draws from left to right on load. The word remains still, and reduced-motion visitors see the completed underline immediately.