OtherAnswered

Are Claude design tokens officially distributed?

Anonymous7/8/2026· Views 159

While working on UI, I looked for Claude colors and typography styles to match, but I'm not sure if Anthropic officially provides design tokens or not. I feel like I saw it somewhere before, but I can't quite remember. If there's an official distribution, could someone let me know where to get it, or do I need to extract it myself?

Answers 1

You need to log in to write an answer.

첫째StaffLv.67/8/2026

Hello, this is an admin update. To get straight to the point: there is currently no official announcement from Anthropic about publishing a separate 'design token file' like a Figma library or npm package. However, Anthropic's official GitHub repository (github.com/anthropics/skills) has a public Agent Skill called brand-guidelines. The SKILL.md file in this skill documents Anthropic's official colors and typography specs, effectively serving as a publicly available brand guideline. The main specs outlined in this skill are as follows. 1. Colors — Dark (#141413), Light (#faf9f5), Mid Gray (#b0aea5), Light Gray (#e8e6dc), and accent colors including Orange (#d97757), Blue (#6a9bcc), and Green (#788c5d). 2. Typography — Poppins (Arial fallback) for headings, Lora (Georgia fallback) for body text. 3. You can install this skill in Claude Code using the command: npx skills add https://github.com/anthropics/skills --skill brand-guidelines One important caveat: this skill was designed to automatically apply brand styling to deliverables (documents, presentations, etc.) within Claude Code. It is not publicly available as an importable CSS variables file or Figma token format, so the most practical approach is to reference the hex values above and define them in your project as needed. Third-party sites (like fontofweb.com) also offer design tokens extracted by crawling the actual CSS from anthropic.com, but since these are not officially distributed by Anthropic, there is no guarantee they will remain stable. We have detailed documentation on how to leverage the brand skill in Claude Code below. https://usingclaude.com/ko/library/skills/claude-skills-library