Pink makes the marks. Ink carries the text. Peacoat Navy gives linked titles their depth.
A working reference for choosing colors, checking combinations, and understanding the rules. Names and roles reflect your approved decisions; design interpretation is an attributed internal draft.
Pink must never be used as a page or section background. Paper is the current page ground; white Panel is for cards and controls. Use pink for marks and explicitly approved bounded controls.
Approved system
The palette
Click a value to copy it.
Live values have not been checked.
Swatches use the live site tokens. Recorded values remain fixed until an approved decision updates the record.
Aa
Core
Strawberry Milk
Socratic Pink
Structural pink
--socratic-pink
Recorded: #FBB6CE
Pink marks and carries prose hyperlink text: rules, underlines, borders, primary-button outlines, numerals, and body links.
Uses, boundaries & source
Appears in
Prose links at rest, on marketing and blog pages
The bar under Socratic in the hero, and short pink heading rules
Definition numerals and the CTA chevron glyph
The primary CTA outline and the form-submit border
Linked titles on hover
Boundaries
Never a page or section background
Never a highlighter swipe or marker-pen texture; marks keep clean straight edges
Moonstone, Opal, and their Nacre treatment are approved only for G1 Reading light on the homepage definition. They are bounded effects, not general accents. Experimental and reference colors remain listed for identification, not permission to use them elsewhere.
Approved behavior
Two paths through the palette
The resting color tells you which kind of link you are reading. Interaction follows that role.
Use the Example state control to hold all interactive specimens in Rest, Hover, or Focus. The labeled Rest / Hover comparisons above remain fixed for comparison.
Keyboard focus is its own state.
Press Tab to inspect the controls. The approved pink focus ring is demonstrated below; against Paper it is below the 3:1 non-text contrast threshold when it is the only indicator. Reference-page utility controls use an additional Ink outline so the documentation remains operable.
Actual shared button component. These samples demonstrate appearance; they do not submit a form.
Select Focus to preview the approved pink ring.
Reading-list typography and content, with the site’s shared CTA components. This is a compact composition for comparing roles, not a screenshot or a full duplicate of the page.
Design interpretation · Codex
Why the colors work together
Pink & Peacoat Navy
Light pink and dark blue establish a strong difference in lightness. The navy gives a title weight; the pink keeps surrounding marks soft. They need no claim of mathematical “complementary harmony” to work together.
The two blues
Peacoat Navy and Cornflower occupy a similar blue hue range, with different lightness. One anchors a linked title; the other briefly emphasizes a pink prose link. Neither needs to become a page background.
Paper & Ink
The quiet foundation does most of the reading work. Its high contrast supports long text and makes a small amount of pink feel deliberate. “Warm,” “soft,” and “collegiate” remain associations, not measured properties.
The analysis concerns this composition. It does not establish a universal emotional response to a color or an association with Yale.
Measured properties · WCAG 2.x
Readability, without the fine print
Brand approval and accessibility are separate judgments. These ratios use the live, unsimulated sRGB colors.
Pink on a light ground is the unresolved limitation.
Pink prose links and the pink headline hover fall below even the large-text minimum. Cornflower on Paper falls below the normal-text minimum. A transient hover state is not automatically exempt. These are findings, not silent changes to your approved treatments.
Current text and focus combinations
Combination
Sample
Ratio
Role / minimum
Result
Ink / Paper
Aa
Requires JavaScript
Body text 4.5:1
Not calculated
Peacoat Navy / White
Aa
Requires JavaScript
Bold reading headline 3:1
Not calculated
Strawberry Milk / White
Aa
Requires JavaScript
Headline hover 3:1
Not calculated
Strawberry Milk / Paper
Aa
Requires JavaScript
Prose link at rest 4.5:1
Not calculated
Cornflower / Paper
Aa
Requires JavaScript
Normal-size prose-link hover 4.5:1
Not calculated
Lipstick / Ballet Slipper
Aa
Requires JavaScript
Subscribe label 4.5:1
Not calculated
White / Chinagraph Red
Aa
Requires JavaScript
Contact-submit label 4.5:1
Not calculated
Chinagraph Red / White
Aa
Requires JavaScript
Summary control 4.5:1
Not calculated
Strawberry Milk / Paper
Aa
Requires JavaScript
Pink focus ring alone 3:1
Not calculated
How to read these measurements
Relative luminance is computed after linearizing sRGB. Contrast = (lighter luminance + 0.05) ÷ (darker luminance + 0.05). Decisions use the unrounded ratio; the display rounds to two decimals. Normal text needs 4.5:1 at AA; large text needs 3:1 (at least 24 CSS px regular or about 18.67 CSS px bold). AA non-text contrast uses 3:1 where a visual indicator is required. A readable button label can identify the control without a contrasting border. This table is a pair check, not a conformance audit of the whole site.
Link versus surrounding Ink: requires JavaScript. That distinction alone does not resolve pink’s low contrast against Paper. The W3C technique for color-only inline links also calls for a non-color cue on hover and keyboard focus. A sitewide remedy needs a separate design decision.
Pair explorer
Aa
AI Reading List
Compare text, titles, and backgrounds.
Choose two colors to calculate their contrast. Passing contrast does not authorize a new brand role.
Visual checks
Color vision & grayscale
The preview changes below; the reference page and numerical contrast results stay in their original colors. Simulations are approximations, not a claim to reproduce everyone’s vision.
Check the light pink text and ring, as well as the distinction between the blues. Labels remain readable without relying on hue alone.
Color-vision previews use Machado, Oliveira & Fernandes (2009), severity 1.0, in linear RGB. Grayscale uses relative-luminance weights. These previews do not cover all visual impairments.
Keep body text in Ink. Preserve pink prose links and their Cornflower hover.
Avoid · intentionally incorrect
AI Reading List
Navy for every heading, paragraph, and label.
Do not turn the site blue.
A pigment’s presence in the palette does not extend its permitted role.
Use
A straight pink rule.
Keep marks crisp.
Rules and underlines have clean edges. Highlight only when the meaning is literally a reading highlight.
Avoid · intentionally incorrect
A pink wash behind every link.
Do not add a hover wash.
Pink prose links change text color to Cornflower. No wash, no new rose hover.
For implementation & handoff
Specifications
Copy live CSS or download a JSON snapshot with recorded and live values, roles, and rulings. The stable CSS and JSON endpoints export the documented record, not a browser snapshot. The transparent glow exports with alpha; it is not converted into a new opaque brand color.
The approved values define the web palette. No Socratic CMYK builds, Pantone matches, ink formulas, or paper-specific proofs have been approved in this reference. Obtain a color-managed conversion for the actual press and stock, then approve a physical proof. Yale’s print recipes are not automatically Socratic specifications because one web hex matches.
Recorded decisions
Names & decisions
Current rules appear above. This dated history preserves the choices, rejections, and later revisions behind them; earlier entries may be superseded.
Read the full decision history
Prose links rest in pink, not rose
on this page, you incorrectly put the links in rose.
http://localhost:4321/bio
where is the instruction that said to do that? we need to correct that. hyperlinks should be pink text, isn't what we had?
Your words, as recorded in the source
Flagship pink was restored to prose hyperlinks and --site-link itself was corrected, rather than covering the rose mapping with a second prose-link token; approved deep-rose control labels were separated into their own role.
I thought we said that pink should never be a background.
Your words, as recorded in the source
Pink stays limited to accents and approved bounded controls; it never serves as a page or section background. Where a callout needs structure, paper carries a pink rule.
The paper-plane and microphone glyphs were rejected and the pink chevron implemented on the primary and secondary CTA system. Primary CTA: paper fill, pink outline, ink label, pink chevron. Secondary CTA: paper fill, neutral hairline outline, ink label, pink chevron. Subscribe form submit: filled blush, rose label.
Hover states, and one hover blue for the whole site
Marketing and blog prose links rest in pink with no underline and turn --socratic-hover-blue #4A8AF0 on hover, with no wash, over 120 ms. Nav words turn pink. Button labels keep ink. No rose on hover anywhere. Rejected on the way here: a blush wash behind pink text, pink text underlined at rest, and every darker or grayer blue; the earlier pale cornflower #8FAFE0 and --socratic-blog-link-hover are retired.
afterglow is too abstract
milk > tissue paper
Opal is good
Your words, as recorded in the source
Jay gave the role tokens English display names, responding to three candidates along the way. The names are display labels only: no CSS variable was renamed and no rendered color changed.
the site bars 'red proofreader's marks everywhere' as an illustration of what Socratic AI is. (it's about eliciting ideas, not about AI 'correcting' human thought.) we can use strikethrough to illustrate a point if we want to.
Your words, as recorded in the source
Proofreader, editing, markup, and correction are rejected as visual or conceptual themes for the site. Chinagraph Red is an approved readable accent, not evidence of a proofreader motif. Strikethrough may be used to illustrate a point.
those all look terrible. did you even look at the existing site's aesthetic?
Your words, as recorded in the source
Warm ink with pink text, deep plum with paper text, and deep sage with paper text were all rejected. Specific color-level reasons were not stated, so no future use of those hues is ruled out by this comparison.
The contact page’s Drop me a note submit uses Chinagraph Red #C0261F fill, a white label and chevron, its existing Strawberry Milk 2px border, and a darker red #A81F19 hover. This replaces the earlier rose and soft-blush contact-button choices and does not change other CTA roles.
Cotton Candy restored as the name of Socratic Pink
change the name from Signal Pink to Cotton Candy everywhere. Cotton Candy is Socratic Pink, and can be specified as --socratic-pink etc.
but there is no need to call it Signal Pink
Your words, as recorded in the source
Signal Pink was retired as a display name. Socratic Pink remained the role name and --socratic-pink the CSS token; no color value changed. Later the same day the three solid pink names were reshuffled and the flagship became Strawberry Milk.
The 20 percent flagship token keeps the CSS name --socratic-pink-glow and takes the display name Fairy Floss, role label Glow and bubble pink, with its role widened to include the writer’s bubble in the Socratic app. The hairline is Silverpoint, role Hairline gray. The composite definition light is Nacre. Lipstick’s role label is Readable pink, and Chinagraph Red is unchanged. The page’s spellings are American.
The three solid pink names were reshuffled so each name’s real-world color sits in the right order: --socratic-pink #FBB6CE is Strawberry Milk, also known as Socratic Pink; --socratic-pink-soft #FBD5E4 is Cotton Candy; --socratic-pink-blush #FCE1EA is Ballet Slipper. Powder Puff is retired. Names only; no value or variable changed.
Lipstick rose is rejected for keyboard focus. The shared --socratic-focus-ring role now aliases Strawberry Milk --socratic-pink, matching the live newsletter field. Lipstick remains the approved Subscribe label color.
Pink was rejected for reading-list article headlines. The headlines were changed to ink while the serif typeface and blue hover were retained, and the search for a headline color began.
#24344B was selected for bold sans-serif article headlines after the proposed Lipstick and Chinagraph Red directions were declined. Jay then said “that navy is too dark, it just looks black”, and #3D5878 was applied for review.
Midnight blue #344B78 was selected for the reading-list headlines with a Socratic pink #FBB6CE hover. #1F3A5F superseded it later the same day, on “yes, do it”.
I like Yale blue.
good, let’s choose it.
when something is Yale blue, it should hover to pink.
if it is already pink like my hyperlinks, then it hovers to cornflower blue, that is already implemented.
Your words, as recorded in the source
#00356B, the value also published as Yale Blue, replaced #1F3A5F in the bounded linked-title role after Jay compared the candidates on the real reading-list cards at rest and hovered. Linked titles hover to Strawberry Milk; pink prose links keep their Cornflower hover.
overruled, we are calling it Peacoat Navy, aka Socratic Navy
Your words, as recorded in the source
--socratic-navy is #00356B, its display name stays Peacoat Navy, and Socratic Navy is its alias, parallel to Socratic Pink for Strawberry Milk. The former #1F3A5F shade is retired and the earlier Yale Blue display name is superseded.
we should call it peacoat navy, aka Yale navy, aka Socratic navy
Your words, as recorded in the source
Peacoat Navy is the primary display name; Yale Navy and Socratic Navy are its aliases. The value remains #00356B and the token remains --socratic-navy.
Linked headlines and titles rest in Peacoat Navy and hover to Strawberry Milk; prose links rest in Strawberry Milk and hover to Cornflower. Cornflower is the same hue as Peacoat Navy at a lighter value, so it reads as the navy lit up rather than as a second blue, and it only ever appears under the cursor.
the current one is better in both cases
the pink looks great. it is not "lost" or hard to see against the white background. the only thing that was hard to read was the pink headlines
Your words, as recorded in the source
After hovering and tabbing through the live comparison, Jay rejected the readability proposal in full. Prose links keep pink text at rest and Cornflower on hover; linked titles keep Peacoat Navy at rest and Strawberry Milk letters on hover; keyboard focus keeps the solid Strawberry Milk ring. Do not apply the proposed Ink prose links, colored-underlined title hover, or Ink focus outline. Jay deleted the comparison later on 2026-09-12 after the ruling was recorded. Do not re-propose readability changes to prose-link color, headline hover, or the focus ring unless Jay reopens the question.