{"id":"d469cba4-c448-4a43-a033-883f8bfcdc42","source":{"name":"Refero","url":"https://styles.refero.design/","kind":"public-design-reference"},"contributors":[{"name":"Refero","role":"reference-helper","url":"https://styles.refero.design/"}],"attributionLabel":"Referenced with help from Refero","sourceUrl":"https://styles.refero.design/style/d469cba4-c448-4a43-a033-883f8bfcdc42","originalSiteUrl":"https://anthropic.com","capturedAt":"2026-04-11T18:03:53.342Z","licenseNote":"Public design-reference facts mirrored from Refero for agent context. Keep source attribution visible and verify rights before reusing media, logos, or brand assets.","name":"Anthropic","summary":"Research journal printed on warm stone — authoritative typographic composition where word-level underlines replace color as the primary emphasis mechanism, and the only warmth comes from the paper itself.","description":"Anthropic's site runs on warm ivory parchment (#faf9f5) — not white, not gray, but the color of aged paper under good light. The palette is almost entirely achromatic, with the entire chromatic budget spent on a single earthy terracotta accent (#d97757) held in reserve in CSS tokens but largely absent from the visible UI. Two custom type families do all the personality work: Anthropic Sans drives navigation and UI at tight tracking, while Anthropic Serif delivers editorial weight in headlines and featured content — the serif-plus-grotesque pairing signals research institution, not startup. Headlines use a thick double-underline on key words (visible on 'research' and 'products') as the sole decorative device — it replaces color as the emphasis mechanism. The massive feature cards flip to near-black (#141413) background, creating hard-edged alternating surface bands with zero gradient or shadow softening.","tags":["editorial","typographic","achromatic","serif-grotesque","research","ivory","high-contrast","institutional","restrained","custom-type"],"industry":"ai","colorScheme":"light","colors":[{"name":"Slate Dark","hex":"#141413","role":"Primary text, borders, nav items, icon fills, card backgrounds — the near-black that appears on both light and dark surfaces, making it function as both foreground and background","group":"neutral"},{"name":"Ivory Light","hex":"#faf9f5","role":"Page background, button fills, light surface base — the warm off-white that gives the site its parchment character instead of clinical white","group":"neutral"},{"name":"Ivory Medium","hex":"#f0eee6","role":"Nav backgrounds, secondary surface level, border highlights","group":"neutral"},{"name":"Ivory Dark","hex":"#e8e6dc","role":"Body text on dark backgrounds, dividers, subtle borders","group":"neutral"},{"name":"Oat","hex":"#e3dacc","role":"Tertiary surface backgrounds, warm mid-tone fills","group":"neutral"},{"name":"Cloud Medium","hex":"#b0aea5","role":"Disabled/muted borders, secondary interactive borders, subdued UI chrome","group":"neutral"},{"name":"Cloud Light","hex":"#d1cfc5","role":"Dividers, hairline borders, inactive states","group":"neutral"},{"name":"Cloud Dark","hex":"#87867f","role":"Secondary text, meta labels, timestamps","group":"neutral"},{"name":"Slate Medium","hex":"#3d3d3a","role":"Mid-dark borders, focus rings on light surfaces","group":"neutral"},{"name":"Slate Light","hex":"#5e5d59","role":"Tertiary text, captions, footer secondary content","group":"neutral"},{"name":"Clay","hex":"#d97757","role":"Accent CTA elements, highlight states — warm terracotta held in reserve for moments of intentional warmth against the achromatic base","group":"accent"},{"name":"Accent Ember","hex":"#c6613f","role":"Deeper accent state, hover/pressed clay interactions","group":"accent"},{"name":"Olive","hex":"#788c5d","role":"Thematic tag or category label color variant","group":"accent"},{"name":"Sky","hex":"#6a9bcc","role":"Thematic tag or category label color variant","group":"accent"},{"name":"Fig","hex":"#c46686","role":"Thematic tag or category label color variant","group":"accent"},{"name":"Cactus","hex":"#bcd1ca","role":"Thematic tag or category label color variant","group":"accent"}],"typography":[{"role":"All UI chrome: navigation, buttons, labels, badges, footer, body copy. The custom grotesque with tight negative tracking at large sizes — at 61px with -0.02em it reads as architectural lettering, not typical web type. Used at weight 700 for the hero headline, weight 400 for body, weight 500–600 for interactive elements.","sizes":"12px, 15px, 16px, 24px, 61px","family":"Anthropic Sans","weight":"400, 500, 600, 700","lineHeight":"1.00–1.40","substitute":"Inter, DM Sans","letterSpacing":"-0.02em at display sizes (61px), -0.005em at mid sizes (24px), -0.002em at body sizes (15-16px)","fontFeatureSettings":"standard"},{"role":"Feature card headlines, editorial hero text, project titles. At 91px it dominates the dark feature cards — the serif at display scale against near-black reads as a printed broadsheet masthead. Weight 600 for emphasis within editorial contexts.","sizes":"18px, 20px, 24px, 91px","family":"Anthropic Serif","weight":"400, 600","lineHeight":"1.10–1.40","substitute":"Playfair Display, Lora","letterSpacing":"normal"},{"role":"Technical labels, metadata fields, category tags. Appears sparingly — its presence signals 'data' or 'classification' within otherwise typographic layouts.","sizes":"16px","family":"Anthropic Mono","weight":"400","lineHeight":"1.40","substitute":"JetBrains Mono, IBM Plex Mono","letterSpacing":"normal"}],"typeScale":[{"role":"caption","size":12,"lineHeight":1.3},{"role":"body-sm","size":15,"lineHeight":1.4,"letterSpacing":-0.03},{"role":"subheading","size":18,"lineHeight":1.4},{"role":"heading-sm","size":20,"lineHeight":1.4},{"role":"heading","size":24,"lineHeight":1.3,"letterSpacing":-0.12},{"role":"heading-lg","size":61,"lineHeight":1.1,"letterSpacing":-1.22},{"role":"display","size":91,"lineHeight":1.1}],"spacing":{"radius":{"cards":"8px","badges":"0px","panels":"16px","buttons":"0px","featuredCards":"24px"},"elementGap":"8-16px","sectionGap":"61px","cardPadding":"31px","pageMaxWidth":"1200px"},"radius":{"cards":"8px","badges":"0px","panels":"16px","buttons":"0px","featuredCards":"24px"},"shadows":{"philosophy":"Zero box-shadows throughout. Surface depth is achieved entirely through background color contrast — ivory (#faf9f5) vs near-black (#141413) vs oat (#e3dacc) — with hard-edged transitions and no blurring. Cards sit flush in their grid with no lift. This flat-but-high-contrast approach reads as print design transferred to screen: depth through ink density, not light simulation.","surfaces":[{"hex":"#faf9f5","name":"Page Base","level":1,"purpose":"Root page background, button fills, default surface"},{"hex":"#f0eee6","name":"Nav / Elevated Light","level":2,"purpose":"Navigation bar background, secondary card surfaces"},{"hex":"#e3dacc","name":"Oat Card","level":3,"purpose":"Tertiary card backgrounds, callout sections"},{"hex":"#141413","name":"Feature Dark","level":4,"purpose":"Editorial feature cards, inverted content blocks — maximum contrast against page base"}]},"guidelines":{"do":["Use #faf9f5 (Ivory Light) as the page base — never pure white (#ffffff) or neutral gray.","Apply borderRadius 0px to all buttons and interactive controls except the primary 'Try Claude' CTA which uses 0px 0px 8px 8px (asymmetric: flat top, rounded bottom only).","Emphasize headline keywords with a thick text-decoration underline only — never color, bold weight increase, or highlight backgrounds — as the sole decorative emphasis mechanism.","Use Anthropic Serif at display sizes (91px, weight 400) exclusively within dark (#141413) surface cards; use Anthropic Sans for all light-surface headlines.","Restrict chromatic color to the CSS accent palette (Clay #d97757, Olive #788c5d, etc.) and deploy it sparingly — one accent per section maximum; default state uses zero chromatic color.","Set dark editorial feature cards to borderRadius 24px and keep them full content-column width with hard clipping of interior imagery at the same radius.","Use Anthropic Mono 16px for metadata field labels (DATE, CATEGORY) in card footers — the mono/grotesque contrast signals structured data within editorial layout."],"dont":["Never use pure white (#ffffff) or pure black (#000000) as a surface background — all surfaces must come from the ivory/slate token range.","Never add box-shadows or drop-shadows to any component — surface contrast and border lines are the only depth signals.","Never round button corners uniformly — the 0px radius is a deliberate formal signal; avoid introducing 4px, 6px, or pill buttons.","Never use Anthropic Serif on the page's ivory background at large sizes — the serif display scale is reserved for the dark card inversion.","Never apply multiple chromatic accent colors within a single section — the palette tokens (Clay, Sky, Fig, Olive) are categorical variants, not combinable accents.","Never use background fills for badge or label components — metadata labels are pure text with no chip, pill, or capsule treatment.","Never replace the underline emphasis mechanic with color emphasis on headlines — links within headlines underline, they do not change color."]},"components":[{"name":"Latest Releases Card Grid","role":""},{"name":"Feature Card (Dark Editorial)","role":""},{"name":"Button Group — Primary, Ghost & Metadata Label","role":""},{"name":"Primary Nav Button (Try Claude)","role":"Main CTA in top navigation"},{"name":"Ghost Nav Button (Transparent)","role":"Secondary nav actions, dropdown triggers"},{"name":"Muted Ghost Button","role":"Disabled or secondary-secondary action"},{"name":"Inline Text Link with Underline Emphasis","role":"Hero-level keyword emphasis links"},{"name":"Feature Card (Dark)","role":"Full-width editorial feature sections"},{"name":"Release Card (Light)","role":"Content listing cards in the 'Latest releases' grid"},{"name":"Metadata Badge / Label","role":"Category and date labels on cards"},{"name":"Arrow Text Link","role":"Read more / announcement CTAs within cards"},{"name":"Continue Reading Button (On Dark)","role":"CTA within dark feature card"},{"name":"Top Navigation Bar","role":"Site-wide primary navigation"}],"customSections":[{"title":"Agent Prompt Guide","content":"**Quick Color Reference**\n- Page background: #faf9f5 (Ivory Light)\n- Primary text: #141413 (Slate Dark)\n- Dark card surface: #141413\n- Light card surface: #f0eee6 / #e3dacc\n- Muted / disabled: #b0aea5\n- Accent (use sparingly): #d97757 (Clay)\n- Border default: #141413 (1px solid)\n\n**Example Component Prompts**\n\n1. **Hero Section:** Ivory (#faf9f5) background. Left column: headline 'AI research and products' at 61px Anthropic Sans weight 700, #141413, letter-spacing -1.22px; the words 'research' and 'products' have a thick underline text-decoration. Right column: body text 18px Anthropic Sans weight 400, #141413, max-width ~320px. No background image. 80px top padding.\n\n2. **Dark Editorial Feature Card:** backgroundColor #141413, borderRadius 24px, padding 31px. Left: project title at 91px Anthropic Serif weight 400, #faf9f5, line-height 1.10. Subtitle at 20px Anthropic Sans weight 400, #e8e6dc. CTA button: backgroundColor #faf9f5, color #141413, border 1px solid #141413, borderRadius 0px, padding 12px 31px, Anthropic Sans 15px weight 500. Right: dark-field 3D mesh visualization image clipped to 24px radius.\n\n3. **Release Card Grid (3-col):** Each card backgroundColor #f0eee6, borderRadius 8px, padding 31px. Headline: Anthropic Sans 20px weight 600, #141413. Body: Anthropic Sans 15px weight 400, #141413, line-height 1.40. Footer row: 'DATE' label in Anthropic Mono 16px #87867f, value #141413. Arrow link 'Read announcement →' Anthropic Sans 15px #141413. No border, no shadow.\n\n4. **Top Navigation Bar:** backgroundColor #f0eee6, height 68px, full-width. Left: wordmark 'ANTHROPIC\\' Anthropic Sans 16px weight 700 #141413. Center: nav links 15px weight 400 #141413, transparent bg, 0px radius, padding 22px 12px, 1px solid #141413 border. Right: 'Try Claude' button backgroundColor #faf9f5, border 1px solid #141413, borderRadius 0px 0px 8px 8px, padding 12px 31px, Anthropic Sans 15px weight 500.\n\n5. **Metadata Label + Value Pair:** Label 'DATE' or 'CATEGORY' in Anthropic Mono 16px weight 400, #87867f, uppercase, no background, no border. Value below in Anthropic Sans 15px weight 400 #141413. Zero padding, zero border-radius — pure typographic structure."},{"title":"Typographic Emphasis System","content":"Anthropic uses underline as the primary (and only) visual emphasis device. In the hero headline, key nouns ('research', 'products') receive a thick text-decoration underline — this replaces the conventional approach of using accent color or bold weight increases for emphasis. The system's near-zero chromatic color palette makes this underline-as-accent approach necessary: with no color to draw the eye, typographic decoration carries all the semantic weight. This pattern should be applied consistently: underline selected keywords in display-scale headlines, never change their color or weight. Body text uses no emphasis decorations — only display and heading-lg scales use the underline treatment."},{"title":"Surface Alternation System","content":"Page rhythm is defined by strict light/dark alternation. Ivory (#faf9f5) page base → dark editorial cards (#141413, radius 24px) → light card grids (#f0eee6/#e3dacc, radius 8px) → repeat. Transitions are hard-edged (no gradient fade between bands). The dark cards are not full viewport-width but full content-column-width with a 24px radius creating a 'contained inversion' rather than a full-bleed band. This means the ivory background peeks around all four corners of the dark card, maintaining the sense that dark is a surface element, not a background takeover."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775930514139-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775930514139-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/d469cba4-c448-4a43-a033-883f8bfcdc42-1777557477590-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/d469cba4-c448-4a43-a033-883f8bfcdc42-1777557477590-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/d469cba4-c448-4a43-a033-883f8bfcdc42-1777557477590-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/d469cba4-c448-4a43-a033-883f8bfcdc42-1777557477590-preview-detail-poster.jpg"},"similarStyleIds":["461da0f0-fde6-46bc-8137-7eca006260a8","7b083729-e694-4b66-82a3-befb08451722","dc541737-8bf2-4b31-b729-0352f696e82f","225059ac-0450-49d3-b2b7-d0e98b7ae938","8b5cfe6d-a2bd-4edb-854e-9185cec46c09","47cb86b6-cb2d-41c8-94ba-8607cd7c41cd","f1bff240-fa05-41db-9ae1-b165ea6ea2cb","e81d4724-9615-4159-8678-cef35f986cab","2e67105f-9f9a-45b5-9281-29734e753bd6","34baa524-5d5b-4165-bbab-d01f05e6d6b9","031056ff-7af1-46db-8daa-115f731c5d26","80099f79-72b7-4367-b2e9-6a3d4a3e9e6a","607e0dbf-e2fc-45c9-b939-946b8981c156","3b6a17f0-3bdf-418c-a95e-0b89e5a8b2f8","62e8e59e-17a5-4eba-a6c6-1c7f67ded518","ddd9ffaa-d831-4cb4-a5bf-a1efce421dca","694723e9-0df7-4b9f-ba07-83fc598532d6","a1b78a21-a304-482b-8ce5-f612d95d44fe","4d4772a3-e1da-415f-a6d7-658dcefdcecd","5bfe6c1d-1b15-4f8d-b0c9-677a33291c5d"],"exports":{"designMdUrl":"/references/refero/d469cba4-c448-4a43-a033-883f8bfcdc42/design.md","tokensJsonUrl":"/references/refero/d469cba4-c448-4a43-a033-883f8bfcdc42/tokens.json","tailwindV4Url":"/references/refero/d469cba4-c448-4a43-a033-883f8bfcdc42/tailwind-v4.css","cssVariablesUrl":"/references/refero/d469cba4-c448-4a43-a033-883f8bfcdc42/tailwind-v4.css"}}