A folder with a SKILL.md that Claude loads when a task matches it. Anthropic’s frontend-design skill brings taste. A brand skill brings your rules.
Updated Nov 3, 2026 · Part of how to use Claude Design
SKILL.md
---
name: dropbox-study
description: Apply the Dropbox brand study to drafts. Use for any deck, page, post or email written in this brand.
---
# Dropbox brand rules
## Color
- Dropbox Blue: #0061FE
- Coconut: #F7F5F2
- Graphite: #1E1919
- White: #FFFFFF
- Grey 600: #736C64
## Type
- DB Sharp Grotesk (Sharp Grotesk Variable for headlines). Open stand-in: Archivo
- Atlas Grotesk. Open stand-in: Public Sans
## Logo
- Full logo for partnerships and video; the Tab for compositions. The dropbox.com nav uses the Tab with the word mark beside it (desktop) and the bare glyph (phone), observed 2026-10-29
- When the Tab appears, the layout is set from it
- Your own name and logo stay more prominent than Dropbox's
- "Works with Dropbox" only in text, and only if true
## Voice
- Trim words; use strong, concrete nouns
- Say what's next and how to get there
- Write the way you talk; no jargon
- Fresh language over stock phrases
## Never
- edit, distort, recolor, rotate, stretch or rebuild the logo
- put the logo in your own logo, product or domain name
- make the name plural, possessive, a noun or a verb
- imply sponsorship or affiliation
## Before you finish
- Logo hidden: Cover the logo. It should still read as Dropbox: Coconut and Graphite planes, blue on the action in product and web pieces (campaigns may run full blue grounds), a medium-weight grotesk, an accent with its own dark.
- Swap test: Put a competitor's logo on it. If a blue-on-white SaaS page could wear it just as well, it's generic, and it goes back.
## Files
- reference/tokens.css: the colors and type above as CSS variables. Use them in any HTML or CSS you write.
- assets/: logo and font files, when present. Use them as supplied. Never redraw the logo.
## With other design skills
These rules are the brief. Where they set a color, a typeface or a voice rule, follow them exactly. Make your own choices only where they are silent.
reference/tokens.css
/* Dropbox tokens, from Unfairly's independent study at unfairly.ai/brand-guidelines/dropbox/. Not official. */
:root {
--color-dropbox-blue: #0061FE;
--color-coconut: #F7F5F2;
--color-graphite: #1E1919;
--color-white: #FFFFFF;
--color-grey-600: #736C64;
--font-display: "Archivo", sans-serif;
--font-body: "Public Sans", sans-serif;
}
assets/README.md
# Assets
This skill is built from Unfairly's independent study of Dropbox, not Dropbox's official guidelines, and is not affiliated with Dropbox.
Use it as a worked example of the format. Put your own logo and font files here.
Brand studies are Unfairly’s independent readings of what each company publishes. Not official, not affiliated. Use the format with your own brand.
frontend-design says your brief’s own words win. A brand skill is that brief, loaded every time.
frontend-designAnthropic brand skillYou Warm cream, serif display, terracotta accent
Near-black with one acid-green or vermilion accent
Broadsheet: hairline rules, square corners, dense columns
Identical rounded cards, one soft shadow, gradient washes
Template chrome: caps eyebrows, middle dots, arrows on links
From frontend-design SKILL.md, checked Nov 3, 2026. Putting your brand into Claude end to end? Read Claude brand guidelines.
All eight ship in the example-skills plugin. Anthropic publishes them as examples, for demonstration and education.
frontend-design Distinct visual design for new or reworked UI: aesthetic direction, typography, and choices that avoid templated defaults.
canvas-design Posters, art and other static designs, saved as PNG or PDF, starting from a written design philosophy.
theme-factory Styles slides, docs, reports and HTML pages with one of 10 preset color and font themes, or a new one.
brand-guidelines Applies Anthropic's own brand colors and type to an artifact.
Anthropic's brand, not yours.
web-artifacts-builder Multi-component claude.ai HTML artifacts built with React, Tailwind CSS and shadcn/ui.
algorithmic-art Generative art in p5.js with seeded randomness and interactive parameters.
slack-gif-creator Animated GIFs sized and checked for Slack.
skill-creator Creates, edits and tests skills, including evals and description tuning.
From anthropics/skills on GitHub, each skill’s own SKILL.md, checked Nov 3, 2026.
/plugin install frontend-design@claude-plugins-official
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skillsClaude Code plugins directory (claude-plugins-official), anthropics/skills on GitHub, Use skills in Claude Code
Skills run on Free, Pro, Max, Ultra, Team and Enterprise plans, with code execution on. Keep the description under 200 characters and SKILL.md under 500 lines.
Folders with a SKILL.md file that Claude loads when a task matches the skill’s description. Design skills cover visual work: interfaces, posters, themes and brand rules.
It has Claude act as a studio design lead: ground the design in the subject, plan colors, type and layout first, check that plan against generic defaults, then build and critique. Where your brief sets a direction, it follows the brief.
In Claude Code, run /plugin install frontend-design@claude-plugins-official. It also ships in the example-skills plugin from the anthropics/skills marketplace. Anthropic says its example skills are already available to paid plans in Claude.ai.
The skill is in Anthropic’s public skills repo under the Apache 2.0 license. You still need a Claude plan or API access to run it.
From Anthropic: frontend-design for interfaces, canvas-design for posters and static art, theme-factory for themed decks and docs, and skill-creator to build and test your own. Add a brand skill so the output is yours.
No. They do different jobs. frontend-design brings taste where your brief is open. A brand skill closes the choices your brand has already made.
Anthropic’s own pages and repositories, checked Nov 3, 2026.