{"id":"d469cba4-c448-4a43-a033-883f8bfcdc42","name":"Anthropic","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","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","cssVariable":"--color-slate-dark"},{"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","cssVariable":"--color-ivory-light"},{"name":"Ivory Medium","hex":"#f0eee6","role":"Nav backgrounds, secondary surface level, border highlights","group":"neutral","cssVariable":"--color-ivory-medium"},{"name":"Ivory Dark","hex":"#e8e6dc","role":"Body text on dark backgrounds, dividers, subtle borders","group":"neutral","cssVariable":"--color-ivory-dark"},{"name":"Oat","hex":"#e3dacc","role":"Tertiary surface backgrounds, warm mid-tone fills","group":"neutral","cssVariable":"--color-oat"},{"name":"Cloud Medium","hex":"#b0aea5","role":"Disabled/muted borders, secondary interactive borders, subdued UI chrome","group":"neutral","cssVariable":"--color-cloud-medium"},{"name":"Cloud Light","hex":"#d1cfc5","role":"Dividers, hairline borders, inactive states","group":"neutral","cssVariable":"--color-cloud-light"},{"name":"Cloud Dark","hex":"#87867f","role":"Secondary text, meta labels, timestamps","group":"neutral","cssVariable":"--color-cloud-dark"},{"name":"Slate Medium","hex":"#3d3d3a","role":"Mid-dark borders, focus rings on light surfaces","group":"neutral","cssVariable":"--color-slate-medium"},{"name":"Slate Light","hex":"#5e5d59","role":"Tertiary text, captions, footer secondary content","group":"neutral","cssVariable":"--color-slate-light"},{"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","cssVariable":"--color-clay"},{"name":"Accent Ember","hex":"#c6613f","role":"Deeper accent state, hover/pressed clay interactions","group":"accent","cssVariable":"--color-accent-ember"},{"name":"Olive","hex":"#788c5d","role":"Thematic tag or category label color variant","group":"accent","cssVariable":"--color-olive"},{"name":"Sky","hex":"#6a9bcc","role":"Thematic tag or category label color variant","group":"accent","cssVariable":"--color-sky"},{"name":"Fig","hex":"#c46686","role":"Thematic tag or category label color variant","group":"accent","cssVariable":"--color-fig"},{"name":"Cactus","hex":"#bcd1ca","role":"Thematic tag or category label color variant","group":"accent","cssVariable":"--color-cactus"}],"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"}],"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."]}}