{"id":"47cb86b6-cb2d-41c8-94ba-8607cd7c41cd","name":"Claude","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","colors":[{"name":"Vellum White","hex":"#faf9f5","role":"Page backgrounds, card surfaces, navigation background. Provides a warm, inviting canvas.","group":"neutral","cssVariable":"--color-vellum-white"},{"name":"Ink Black","hex":"#141413","role":"Primary text, main headings, button text on light backgrounds. Creates high contrast and strong legibility.","group":"neutral","cssVariable":"--color-ink-black"},{"name":"Onyx","hex":"#1f1e1d","role":"Borders, secondary text, darker accents within UI elements. Contributes to definition without harshness.","group":"neutral","cssVariable":"--color-onyx"},{"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","cssVariable":"--color-graphite"},{"name":"Dusty Gray","hex":"#73726c","role":"Tertiary text, descriptive labels, and subtle UI elements. Less prominent for supporting content.","group":"neutral","cssVariable":"--color-dusty-gray"},{"name":"Stone","hex":"#9c9a92","role":"Placeholder text, inactive states, faint iconography. Blends into the background more for assistive elements.","group":"neutral","cssVariable":"--color-stone"},{"name":"Parchment","hex":"#dedcd1","role":"Subtle borders, dividers, subtle background shades. Offers a slight visual separation without drawing attention.","group":"neutral","cssVariable":"--color-parchment"},{"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","cssVariable":"--color-snow-white"},{"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","cssVariable":"--color-pale-azure"},{"name":"Terra Cotta","hex":"#d97757","role":"Decorative icon accents. Its vividness is contained, making it a controlled burst of warmth.","group":"accent","cssVariable":"--color-terra-cotta"}],"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"}],"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."]}}