{"id":"47cb86b6-cb2d-41c8-94ba-8607cd7c41cd","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/47cb86b6-cb2d-41c8-94ba-8607cd7c41cd","originalSiteUrl":"https://claude.ai","capturedAt":"2026-04-12T17:00:44.195Z","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":"Claude","summary":"Academic Journal on Vellum — a soft, tactile precision.","description":"This design system evokes the quiet confidence of a well-edited scientific journal, balancing approachability with precise execution. Creamy off-white backgrounds provide a soft canvas, while crisp dark gray text ensures legibility. The understated typography, particularly the lighter weights of Anthropic Serif for headings, communicates authority through clarity rather than shouting, reminiscent of an academic paper. Subtle accent colors appear mostly within the custom Anthropic icons, suggesting a sophisticated, self-contained aesthetic with minimal external decoration.","industry":"ai","colorScheme":"light","colors":[{"name":"Vellum White","hex":"#faf9f5","role":"Page backgrounds, card surfaces, navigation background. Provides a warm, inviting canvas.","group":"neutral"},{"name":"Ink Black","hex":"#141413","role":"Primary text, main headings, button text on light backgrounds. Creates high contrast and strong legibility.","group":"neutral"},{"name":"Onyx","hex":"#1f1e1d","role":"Borders, secondary text, darker accents within UI elements. Contributes to definition without harshness.","group":"neutral"},{"name":"Graphite","hex":"#3d3d3a","role":"Subtle text for secondary information like navigation links and body copy. Softer than Ink Black, but still highly readable.","group":"neutral"},{"name":"Dusty Gray","hex":"#73726c","role":"Tertiary text, descriptive labels, and subtle UI elements. Less prominent for supporting content.","group":"neutral"},{"name":"Stone","hex":"#9c9a92","role":"Placeholder text, inactive states, faint iconography. Blends into the background more for assistive elements.","group":"neutral"},{"name":"Parchment","hex":"#dedcd1","role":"Subtle borders, dividers, subtle background shades. Offers a slight visual separation without drawing attention.","group":"neutral"},{"name":"Snow White","hex":"#ffffff","role":"Input fields, selected states, and very occasional text on dark backgrounds. A brighter white for interactive elements.","group":"neutral"},{"name":"Pale Azure","hex":"#ccdbe8","role":"Border accents, subtle highlights on interactive elements. A cool, near-gray accent that adds a touch of refinement without being overtly chromatic.","group":"neutral"},{"name":"Terra Cotta","hex":"#d97757","role":"Decorative icon accents. Its vividness is contained, making it a controlled burst of warmth.","group":"accent"}],"typography":[{"role":"Primary display headings, 56px and weight 330. Its lightness commands attention through understated elegance rather than brute force, defining the site's intellectual tone.","sizes":"18px, 24px, 30px, 56px","family":"Anthropic Serif","weight":"330","lineHeight":"1.20","substitute":"Lora","letterSpacing":"normal","fontFeatureSettings":"\"liga\""},{"role":"Secondary headings, and large body text that needs emphasis. The refined serif forms add gravitas.","sizes":"18px, 24px, 30px, 56px","family":"Anthropic Serif","weight":"400","lineHeight":"1.33","substitute":"Lora","letterSpacing":"normal","fontFeatureSettings":"\"liga\""},{"role":"Body copy, button labels, navigation, captions, and all interface text. This sans-serif provides clarity and high readability across all functional elements.","sizes":"11px, 12px, 14px, 15px, 16px, 24px","family":"Anthropic Sans","weight":"400","lineHeight":"1.33","substitute":"Inter","letterSpacing":"normal"},{"role":"Used for emphasized body text or secondary labels, offering a subtle lift from regular weight.","sizes":"11px, 12px, 14px, 15px, 16px, 24px","family":"Anthropic Sans","weight":"430","lineHeight":"1.40","substitute":"Inter","letterSpacing":"normal"},{"role":"Typically used for call-to-action text, navigation items, or key data points where moderate emphasis is needed.","sizes":"11px, 12px, 14px, 15px, 16px, 24px","family":"Anthropic Sans","weight":"500","lineHeight":"1.43","substitute":"Inter","letterSpacing":"normal"},{"role":"Used sparingly for strong emphasis, such as important labels or active navigation states.","sizes":"11px, 12px, 14px, 15px, 16px, 24px","family":"Anthropic Sans","weight":"600","lineHeight":"1.50","substitute":"Inter","letterSpacing":"normal"}],"typeScale":[{"role":"caption","size":11,"lineHeight":1.33},{"role":"heading","size":18,"lineHeight":1.33},{"role":"heading-lg","size":24,"lineHeight":1.33},{"role":"display","size":56,"lineHeight":1.2}],"spacing":{"radius":{"cards":"9.6px","inputs":"9.6px","buttons":"9.6px","heroElements":"24px","jumboSeparators":"32px","largeContainers":"16px"},"elementGap":"8-24px","sectionGap":"32-40px","cardPadding":"24px"},"radius":{"cards":"9.6px","inputs":"9.6px","buttons":"9.6px","heroElements":"24px","jumboSeparators":"32px","largeContainers":"16px"},"guidelines":{"do":["Use Vellum White (#faf9f5) as the default background for all page sections and main content cards.","Apply 9.6px border-radius to all interactive elements, including buttons, input fields, and standard cards, for a consistent soft-edged feel.","Set primary headings (56px) with Anthropic Serif weight 330 to achieve an articulate, understated voice.","Ensure all body text uses Anthropic Sans weight 400 to maintain high readability across the interface.","Utilize Ink Black (#141413) for primary text and CTA button backgrounds to ensure strong contrast against Vellum White backgrounds.","Maintain a comfortable information density using an elementGap of 8-24px between smaller components, and sectionGap of 32-40px between major sections."],"dont":["Do not use dark, harsh shadows; employ subtle borders like #dedcd1 or rgba(31,30,29,0.15) for depth and separation.","Avoid overly vibrant or saturated color accents outside of the very specific design system-defined accents like Terra Cotta (#d97757).","Never use bolding (weights above 500) for headlines; the system relies on lighter weights for stylistic authority.","Refrain from using sharp, 0px border radii on buttons or cards, except for specific navigation or list item elements that require a more contained appearance.","Do not introduce new font families; strictly adhere to Anthropic Sans and Anthropic Serif to maintain brand consistency."]},"components":[{"name":"Sign-In Form Card","role":""},{"name":"Pricing Cards","role":""},{"name":"Chat / Cowork Toggle Selector","role":""},{"name":"Primary Navigation Button","role":"Main navigation items in the header."},{"name":"Secondary Button","role":"Buttons for less prominent actions, often in a secondary role."},{"name":"Primary CTA Button","role":"Key interaction buttons."},{"name":"Destructive / Prominent Button","role":"Buttons for actions demanding attention or within prominent fields."},{"name":"Call to Action - Dark Filled","role":"Main call to action, used for sign-ups or primary workflows."},{"name":"Form Input Field","role":"Standard fields for user input."},{"name":"Card - Standard","role":"Content containers for features, pricing tiers, or grouped information."},{"name":"Toggle Button Group","role":"Used for selecting between distinct options."},{"name":"Inline Navigation Link","role":"Standard text links within body content or footers."},{"name":"Icon Button","role":"Buttons primarily identified by an icon."}],"customSections":[{"title":"Agent Prompt Guide","content":"### Quick Color Reference\n- Text (Ink Black): `#141413`\n- Background (Vellum White): `#faf9f5`\n- CTA Dark Fill: `#141413`\n- Border (Parchment): `#dedcd1`\n- Accent (Terra Cotta): `#d97757`\n\n### 3-5 Example Component Prompts\n1. **Create a pricing tier card (Standard Card)**: Background Vellum White (#faf9f5), border Parchment (#dedcd1), 9.6px border-radius, 24px padding. Headline 'Free' Anthropic Serif weight 400 at 30px, color Ink Black (#141413). Body text Anthropic Sans weight 400 at 14px, color Ink Black (#141413). Bottom button is a Dark Filled CTA: background Ink Black (#141413), text Snow White (#ffffff), 9.6px border-radius, 24px vertical, 20px horizontal padding.\n2. **Generate a primary navigation bar**: Background Vellum White (#faf9f5). Left-aligned logo. Right-aligned navigation links 'Meet Claude' to 'Resources' as Primary Navigation Buttons (transparent background, text Graphite #3d3d3a, Anthropic Sans weight 400 at 15px). Followed by 'Contact sales' as a Secondary Button (transparent background, text Ink Black #141413, border rgba(31,30,29,0.3) 9.6px border-radius, 20px horizontal padding). Final button 'Try Claude' as Primary CTA (transparent background, text Snow White #ffffff, 9.6px border-radius, 20px horizontal padding, within a global Ink Black section).\n3. **Design a form input field**: Background Snow White (#ffffff), border rgba(31,30,29,0.15), 9.6px border-radius. Padding 12px horizontal. Placeholder text color Stone (#9c9a92). Text input color Ink Black (#141413), Anthropic Sans weight 400 at 15px."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1776013222707-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1776013222707-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/47cb86b6-cb2d-41c8-94ba-8607cd7c41cd-1777566873735-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/47cb86b6-cb2d-41c8-94ba-8607cd7c41cd-1777566873735-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/47cb86b6-cb2d-41c8-94ba-8607cd7c41cd-1777566873735-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/47cb86b6-cb2d-41c8-94ba-8607cd7c41cd-1777566873735-preview-detail-poster.jpg"},"similarStyleIds":["626ae2de-c402-4805-b859-2c6adca41022","43c1b150-0dab-42f9-9bce-fe0be3dde26c","ddd9ffaa-d831-4cb4-a5bf-a1efce421dca","d56508d7-c307-47f7-ad30-052e5a69f01f","68d18deb-bb09-4258-8024-001af9c844c0","d469cba4-c448-4a43-a033-883f8bfcdc42","50aa2b8e-4760-4379-a3c1-59b65d8576a7","a6950b49-8ce4-4330-9499-26ca08061599","08c8700c-f278-42bc-812e-f60dc6ce996e","fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7","461da0f0-fde6-46bc-8137-7eca006260a8","12255b63-e506-4bc1-a4cd-d05487de32f3","80d7ef36-ed7e-48bb-b558-f772eb40106f","7b083729-e694-4b66-82a3-befb08451722","2e67105f-9f9a-45b5-9281-29734e753bd6","6c0b77d3-71f9-469d-98aa-4ce1d6d76ac8","1c60b014-473b-443b-b0f5-220612feebb7","b5fdba21-fd4d-427e-b551-1e22c51e42db","62b22816-2d98-4e98-9c17-bf600ddb2fc8","75fdb89f-ca64-41b3-af36-7a78bd09448e"],"exports":{"designMdUrl":"/references/refero/47cb86b6-cb2d-41c8-94ba-8607cd7c41cd/design.md","tokensJsonUrl":"/references/refero/47cb86b6-cb2d-41c8-94ba-8607cd7c41cd/tokens.json","tailwindV4Url":"/references/refero/47cb86b6-cb2d-41c8-94ba-8607cd7c41cd/tailwind-v4.css","cssVariablesUrl":"/references/refero/47cb86b6-cb2d-41c8-94ba-8607cd7c41cd/tailwind-v4.css"}}