W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Figma
Figma is a browser-based design and prototyping platform — and since the 2024 expansion, also a sites/dev-mode/AI surface — owned by Adobe. The brand voice is collaborative, playful, and developer- adjacent. Visually, Figma is recognized by its five-color mark (orange, coral, purple, blue, green) and its clean white-canvas marketing surfaces with near-black body text. Where competitors pick one signature color, Figma's identity IS the five-color composition.
1 palette 3 fonts 0 assets 8 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/figma/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/figma/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Figma
Figma is a browser-based design and prototyping platform — and since the 2024 expansion, also a sites/dev-mode/AI surface — owned by Adobe. The brand voice is collaborative, playful, and developer- adjacent. Visually, Figma is recognized by its five-color mark (orange, coral, purple, blue, green) and its clean white-canvas marketing surfaces with near-black body text. Where competitors pick one signature color, Figma's identity IS the five-color composition.
Tags: saas, design-tools, figma, adobe, collaboration
Atoms
Palette
Figma · [email protected] · Proprietary — All Rights Reserved
Figma's brand palette, anchored on the five colored shapes of the Figma mark: orange-red (#F24E1E), coral (#FF7262), purple (#A259FF), cyan-blue (#1ABCFE), and green (#0ACF83), set on a clean white canvas with near-black text. The five mark colors form the brand's primary accent system; the orange-red reads as the signature when a single brand color is required.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
figma-orange |
Figma Orange | #F24E1E |
figma-coral |
Figma Coral | #FF7262 |
figma-purple |
Figma Purple | #A259FF |
figma-blue |
Figma Blue | #1ABCFE |
figma-green |
Figma Green | #0ACF83 |
figma-white |
Figma White | #FFFFFF |
figma-black |
Figma Black | #000000 |
figma-canvas-dark |
Figma Canvas Dark | #1E1E1E |
figma-surface-dark |
Figma Surface Dark | #2C2C2C |
figma-surface-light |
Figma Surface Light | #F5F5F5 |
figma-text-secondary |
Figma Text Secondary | #757575 |
figma-text-tertiary |
Figma Text Tertiary | #B3B3B3 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
figma-white |
#FFFFFF |
surface |
figma-surface-light |
#F5F5F5 |
surface-elevated |
figma-white |
#FFFFFF |
text-primary |
figma-black |
#000000 |
text-secondary |
figma-text-secondary |
#757575 |
text-tertiary |
figma-text-tertiary |
#B3B3B3 |
primary |
figma-blue |
#1ABCFE |
primary-hover |
figma-blue |
#1ABCFE |
accent |
figma-orange |
#F24E1E |
accent-hover |
figma-coral |
#FF7262 |
warning |
figma-orange |
#F24E1E |
warning-hover |
figma-coral |
#FF7262 |
error |
figma-orange |
#F24E1E |
success |
figma-green |
#0ACF83 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
figma-canvas-dark |
#1E1E1E |
surface |
figma-surface-dark |
#2C2C2C |
surface-elevated |
figma-surface-dark |
#2C2C2C |
text-primary |
figma-white |
#FFFFFF |
text-secondary |
figma-text-tertiary |
#B3B3B3 |
text-tertiary |
figma-text-secondary |
#757575 |
primary |
figma-blue |
#1ABCFE |
primary-hover |
figma-blue |
#1ABCFE |
accent |
figma-orange |
#F24E1E |
accent-hover |
figma-coral |
#FF7262 |
warning |
figma-orange |
#F24E1E |
warning-hover |
figma-coral |
#FF7262 |
error |
figma-orange |
#F24E1E |
success |
figma-green |
#0ACF83 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
figma-orange |
#F24E1E |
on-identity |
figma-white |
#FFFFFF |
primary |
figma-blue |
#1ABCFE |
primary-hover |
figma-blue |
#1ABCFE |
accent |
figma-orange |
#F24E1E |
accent-hover |
figma-coral |
#FF7262 |
mark-orange |
figma-orange |
#F24E1E |
mark-coral |
figma-coral |
#FF7262 |
mark-purple |
figma-purple |
#A259FF |
mark-blue |
figma-blue |
#1ABCFE |
mark-green |
figma-green |
#0ACF83 |
success |
figma-green |
#0ACF83 |
warning |
figma-orange |
#F24E1E |
error |
figma-orange |
#F24E1E |
background-light |
figma-white |
#FFFFFF |
background-dark |
figma-canvas-dark |
#1E1E1E |
surface-light |
figma-surface-light |
#F5F5F5 |
surface-dark |
figma-surface-dark |
#2C2C2C |
text-primary-light |
figma-black |
#000000 |
text-primary-dark |
figma-white |
#FFFFFF |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (6)
colorChoice → logo.mark
- allowed: figma-orange, figma-coral, figma-purple, figma-blue, figma-green, figma-white, figma-black
- forbidden: any-non-brand-color
The five mark colors are the documented composition; only the neutral black/white monochrome variants are permitted as alternates. Figma's brand guidance forbids modifying the mark into other hues.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, on-busy-photo, fragmented-into-other-identities, integrated-with-other-marks
Figma's brand guidelines explicitly prohibit modifying the marks or integrating parts of them into other identities. The mark is a fixed composition of five colored shapes.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
WCAG 2.1 Level AA contrast minimum for body text. Figma Black (#000000) on Figma White (#FFFFFF) clears AA comfortably.
variantSelection → logo
- use:
logo-light - when:
backgroundColorScheme="dark"
On dark surfaces, use Figma's documented light-on-dark mark variant; do not invert the five-color SVG on the fly.
contextRestriction → roles.colors.identity
- forbiddenContexts: product-of-competitor, merchandise, endorsement-implication, company-name-or-domain
Figma's brand guidelines forbid use of "Figma" in third-party company names, product names, domain names, and social-media handles, and forbid uses that imply affiliation.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Figma-skinned surfaces must clear AA on body text.
⚠️ warning (1)
enumMembership → typography.heading.fontWeight
- allowed: 500, 600, 700
Inter on figma.com renders headings in the 500–700 band; lighter weights compromise the bold, confident voice of the marketing surface.
💡 recommendation (1)
compositionConstraint → roles.colors.mark-orange
- pairsWith: figma-white, figma-black
When a single Figma color is used as accent, it pairs cleanly with white or black. Combining it with another mark color outside the canonical composition risks reading as a corrupted mark.
Provenance
- Source: https://www.figma.com/using-the-figma-brand/
- License:
Proprietary — All Rights Reserved - Attribution: Figma and the Figma logo are trademarks of Figma, Inc. (an Adobe company). The five mark colors are verified by reading the published Figma logo SVG on Wikimedia Commons; the primary orange-red (#F24E1E) is independently cross-referenced by the simple-icons brand database, which cites figma.com/using-the-figma-brand/ as the source.
- Imported:
2026-05-17 - Notes: Figma's brand guidance explicitly prohibits modifying the mark, embedding fragments of it into other identities, or implying affiliation. brand-atoms catalogues the five mark colors as the documented palette; consumers building Figma-adjacent surfaces should treat the mark composition as fixed. Inter is referenced here as the primary face — Inter is widely deployed on Figma's marketing surfaces and is in the brand-atoms catalog.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Figma
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Figma
A clear hierarchy in Figma's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ figma-orange #F24E1E accent-hover
→ figma-coral #FF7262 background-dark
→ figma-canvas-dark #1E1E1E background-light
→ figma-white #FFFFFF error
→ figma-orange #F24E1E identity
→ figma-orange #F24E1E mark-blue
→ figma-blue #1ABCFE mark-coral
→ figma-coral #FF7262 mark-green
→ figma-green #0ACF83 mark-orange
→ figma-orange #F24E1E mark-purple
→ figma-purple #A259FF on-identity
→ figma-white #FFFFFF primary
→ figma-blue #1ABCFE primary-hover
→ figma-blue #1ABCFE success
→ figma-green #0ACF83 surface-dark
→ figma-surface-dark #2C2C2C surface-light
→ figma-surface-light #F5F5F5 text-primary-dark
→ figma-white #FFFFFF text-primary-light
→ figma-black #000000 warning
→ figma-orange #F24E1E Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from figma)
Light mode (14 roles)
accent
→ figma-orange accent-hover
→ figma-coral background
→ figma-white error
→ figma-orange primary
→ figma-blue primary-hover
→ figma-blue success
→ figma-green surface
→ figma-surface-light surface-elevated
→ figma-white text-primary
→ figma-black text-secondary
→ figma-text-secondary text-tertiary
→ figma-text-tertiary warning
→ figma-orange warning-hover
→ figma-coral Dark mode (14 roles)
accent
→ figma-orange accent-hover
→ figma-coral background
→ figma-canvas-dark error
→ figma-orange primary
→ figma-blue primary-hover
→ figma-blue success
→ figma-green surface
→ figma-surface-dark surface-elevated
→ figma-surface-dark text-primary
→ figma-white text-secondary
→ figma-text-tertiary text-tertiary
→ figma-text-secondary warning
→ figma-orange warning-hover
→ figma-coral Rules (8 typed constraints)
error · 6 rules
colorChoice logo.mark allowed figma-orange, figma-coral, figma-purple, figma-blue, figma-green, figma-white, figma-black forbidden any-non-brand-color The five mark colors are the documented composition; only the neutral black/white monochrome variants are permitted as alternates. Figma's brand guidance forbids modifying the mark into other hues.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, on-busy-photo, fragmented-into-other-identities, integrated-with-other-marks Figma's brand guidelines explicitly prohibit modifying the marks or integrating parts of them into other identities. The mark is a fixed composition of five colored shapes.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA WCAG 2.1 Level AA contrast minimum for body text. Figma Black (#000000) on Figma White (#FFFFFF) clears AA comfortably.
variantSelection logo use logo-light when backgroundColorScheme="dark" On dark surfaces, use Figma's documented light-on-dark mark variant; do not invert the five-color SVG on the fly.
contextRestriction roles.colors.identity forbiddenContexts product-of-competitor, merchandise, endorsement-implication, company-name-or-domain Figma's brand guidelines forbid use of "Figma" in third-party company names, product names, domain names, and social-media handles, and forbid uses that imply affiliation.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Figma-skinned surfaces must clear AA on body text.
warning · 1 rule
enumMembership typography.heading.fontWeight allowed 500, 600, 700 Inter on figma.com renders headings in the 500–700 band; lighter weights compromise the bold, confident voice of the marketing surface.
recommendation · 1 rule
compositionConstraint roles.colors.mark-orange pairsWith figma-white, figma-black When a single Figma color is used as accent, it pairs cleanly with white or black. Combining it with another mark color outside the canonical composition risks reading as a corrupted mark.
Provenance
- Source
- https://www.figma.com/using-the-figma-brand/
- License
Proprietary — All Rights Reserved- Attribution
- Figma and the Figma logo are trademarks of Figma, Inc. (an Adobe company). The five mark colors are verified by reading the published Figma logo SVG on Wikimedia Commons; the primary orange-red (#F24E1E) is independently cross-referenced by the simple-icons brand database, which cites figma.com/using-the-figma-brand/ as the source.
- Imported
2026-05-17- Notes
- Figma's brand guidance explicitly prohibits modifying the mark, embedding fragments of it into other identities, or implying affiliation. brand-atoms catalogues the five mark colors as the documented palette; consumers building Figma-adjacent surfaces should treat the mark composition as fixed. Inter is referenced here as the primary face — Inter is widely deployed on Figma's marketing surfaces and is in the brand-atoms catalog.