W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Framer
Framer is a design-to-production website builder — a designer- led canvas that publishes as a real website with components, CMS, animation, and AI surfaces. The brand is dark-first: the canonical canvas is near-black, display type is large and white, and a single saturated Framer Blue (#0055FF) carries the CTAs and accent layer. Where Webflow anchors on white, Framer's identity reads as a black gallery with a single blue spotlight.
1 palette 3 fonts 0 assets 9 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/framer/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/framer/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.
Framer
Framer is a design-to-production website builder — a designer- led canvas that publishes as a real website with components, CMS, animation, and AI surfaces. The brand is dark-first: the canonical canvas is near-black, display type is large and white, and a single saturated Framer Blue (#0055FF) carries the CTAs and accent layer. Where Webflow anchors on white, Framer's identity reads as a black gallery with a single blue spotlight.
Tags: saas, no-code, framer, design-tools, dark-first
Atoms
Palette
Framer · [email protected] · Proprietary — All Rights Reserved
Framer's brand palette — a dark-first identity built around Framer Blue (#0055FF) on a near-black canvas. Framer's marketing surfaces lead with a deep black background, large white display type, and the saturated Framer Blue as the single accent for CTAs and key interactive surfaces. Where Webflow and Figma anchor on white, Framer's canvas is black.
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 |
|---|---|---|
framer-blue |
Framer Blue | #0055FF |
framer-black |
Framer Black | #000000 |
framer-white |
Framer White | #FFFFFF |
framer-canvas-near-black |
Framer Canvas Near-Black | #0A0A0A |
framer-surface-dark |
Framer Surface Dark | #171717 |
framer-surface-elevated-dark |
Framer Surface Elevated (Dark) | #262626 |
framer-surface-light |
Framer Surface Light | #F4F4F4 |
framer-text-secondary-dark |
Framer Text Secondary (Dark) | #B3B3B3 |
framer-text-tertiary-dark |
Framer Text Tertiary (Dark) | #777777 |
framer-text-secondary-light |
Framer Text Secondary (Light) | #4A4A4A |
framer-text-tertiary-light |
Framer Text Tertiary (Light) | #878787 |
framer-blue-hover |
Framer Blue Hover | #3370FF |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
framer-white |
#FFFFFF |
surface |
framer-surface-light |
#F4F4F4 |
surface-elevated |
framer-white |
#FFFFFF |
text-primary |
framer-black |
#000000 |
text-secondary |
framer-text-secondary-light |
#4A4A4A |
text-tertiary |
framer-text-tertiary-light |
#878787 |
primary |
framer-blue |
#0055FF |
primary-hover |
framer-blue-hover |
#3370FF |
accent |
framer-blue |
#0055FF |
accent-hover |
framer-blue-hover |
#3370FF |
warning |
framer-blue |
#0055FF |
warning-hover |
framer-blue-hover |
#3370FF |
error |
framer-blue |
#0055FF |
success |
framer-blue |
#0055FF |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
framer-black |
#000000 |
surface |
framer-surface-dark |
#171717 |
surface-elevated |
framer-surface-elevated-dark |
#262626 |
text-primary |
framer-white |
#FFFFFF |
text-secondary |
framer-text-secondary-dark |
#B3B3B3 |
text-tertiary |
framer-text-tertiary-dark |
#777777 |
primary |
framer-blue |
#0055FF |
primary-hover |
framer-blue-hover |
#3370FF |
accent |
framer-blue |
#0055FF |
accent-hover |
framer-blue-hover |
#3370FF |
warning |
framer-blue |
#0055FF |
warning-hover |
framer-blue-hover |
#3370FF |
error |
framer-blue |
#0055FF |
success |
framer-blue |
#0055FF |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
framer-black |
#000000 |
on-identity |
framer-white |
#FFFFFF |
background |
framer-black |
#000000 |
surface |
framer-surface-dark |
#171717 |
surface-elevated |
framer-surface-elevated-dark |
#262626 |
text-primary |
framer-white |
#FFFFFF |
text-secondary |
framer-text-secondary-dark |
#B3B3B3 |
text-tertiary |
framer-text-tertiary-dark |
#777777 |
primary |
framer-blue |
#0055FF |
primary-hover |
framer-blue-hover |
#3370FF |
accent |
framer-blue |
#0055FF |
accent-hover |
framer-blue-hover |
#3370FF |
success |
framer-blue |
#0055FF |
warning |
framer-blue |
#0055FF |
error |
framer-blue |
#0055FF |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (7)
colorChoice → logo.mark
- allowed: framer-blue, framer-white, framer-black
- forbidden: any-non-brand-color
The Framer mark renders in white on the dark canonical canvas and in black or Framer Blue on light surfaces. Recoloring the mark into off-brand hues violates Framer's brand-use guidance.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, on-busy-photo, gradient-fill
Framer's press resources prohibit stretching, rotating, recoloring, or applying decorative effects to the mark.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
WCAG 2.1 Level AA contrast minimum for body text. Framer White (#FFFFFF) on Framer Black (#000000) clears AA at 21:1.
variantSelection → logo
- use:
logo-light - when:
backgroundColorScheme="dark"
On the canonical dark canvas (Framer Black), use the light-fill mark variant. Do not place a dark-fill mark on the dark canvas.
variantSelection → logo
- use:
logo-dark - when:
backgroundColorScheme="light"
On light surfaces, use the dark-fill mark variant or the Framer Blue variant. Do not place a white mark on a white canvas.
contextRestriction → roles.colors.identity
- forbiddenContexts: product-of-competitor, merchandise, endorsement-implication, company-name-or-domain
Framer's trademark guidance forbids use of the Framer name and mark in third-party company names, domains, and uses that imply affiliation or endorsement.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Framer-skinned surfaces — especially light text on the dark canvas — must hold AA at minimum.
⚠️ warning (1)
enumMembership → typography.heading.fontWeight
- allowed: 500, 600, 700
Framer's marketing surfaces render display headings in the 500–700 band against the dark canvas; lighter weights lose contrast and undermine the bold gallery voice.
💡 recommendation (1)
compositionConstraint → roles.colors.primary
- pairsWith: framer-black, framer-white
Framer Blue is calibrated to read on the near-black canvas and on white. Pairing it with another saturated hue at the same weight breaks the gallery-quiet voice of the dark-first identity.
Provenance
- Source: https://www.framer.com/press
- License:
Proprietary — All Rights Reserved - Attribution: Framer and the Framer logo are trademarks of Framer B.V. The primary brand color Framer Blue (#0055FF) is documented on Framer's press resources. brand-atoms catalogues only the publicly documented signature color and authored neutrals; licensed application of the Framer name and mark is governed by Framer's brand-use guidance at framer.com/press.
- Imported:
2026-05-18 - Notes: Framer's marketing pages render in a neutral humanist sans consistent with Inter; Inter is referenced here as the primary face and is already in the brand-atoms catalog. Framer is a dark-first brand — the canonical canvas is the near-black surface, and the identity role is set to framer-black so brand-badge surfaces render in the brand's true voice rather than in the blue accent.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Framer
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.
Framer
A clear hierarchy in Framer'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
→ framer-blue #0055FF accent-hover
→ framer-blue-hover #3370FF background
→ framer-black #000000 error
→ framer-blue #0055FF identity
→ framer-black #000000 on-identity
→ framer-white #FFFFFF primary
→ framer-blue #0055FF primary-hover
→ framer-blue-hover #3370FF success
→ framer-blue #0055FF surface
→ framer-surface-dark #171717 surface-elevated
→ framer-surface-elevated-dark #262626 text-primary
→ framer-white #FFFFFF text-secondary
→ framer-text-secondary-dark #B3B3B3 text-tertiary
→ framer-text-tertiary-dark #777777 warning
→ framer-blue #0055FF Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from framer)
Light mode (14 roles)
accent
→ framer-blue accent-hover
→ framer-blue-hover background
→ framer-white error
→ framer-blue primary
→ framer-blue primary-hover
→ framer-blue-hover success
→ framer-blue surface
→ framer-surface-light surface-elevated
→ framer-white text-primary
→ framer-black text-secondary
→ framer-text-secondary-light text-tertiary
→ framer-text-tertiary-light warning
→ framer-blue warning-hover
→ framer-blue-hover Dark mode (14 roles)
accent
→ framer-blue accent-hover
→ framer-blue-hover background
→ framer-black error
→ framer-blue primary
→ framer-blue primary-hover
→ framer-blue-hover success
→ framer-blue surface
→ framer-surface-dark surface-elevated
→ framer-surface-elevated-dark text-primary
→ framer-white text-secondary
→ framer-text-secondary-dark text-tertiary
→ framer-text-tertiary-dark warning
→ framer-blue warning-hover
→ framer-blue-hover Rules (9 typed constraints)
error · 7 rules
colorChoice logo.mark allowed framer-blue, framer-white, framer-black forbidden any-non-brand-color The Framer mark renders in white on the dark canonical canvas and in black or Framer Blue on light surfaces. Recoloring the mark into off-brand hues violates Framer's brand-use guidance.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, on-busy-photo, gradient-fill Framer's press resources prohibit stretching, rotating, recoloring, or applying decorative effects to the mark.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA WCAG 2.1 Level AA contrast minimum for body text. Framer White (#FFFFFF) on Framer Black (#000000) clears AA at 21:1.
variantSelection logo use logo-light when backgroundColorScheme="dark" On the canonical dark canvas (Framer Black), use the light-fill mark variant. Do not place a dark-fill mark on the dark canvas.
variantSelection logo use logo-dark when backgroundColorScheme="light" On light surfaces, use the dark-fill mark variant or the Framer Blue variant. Do not place a white mark on a white canvas.
contextRestriction roles.colors.identity forbiddenContexts product-of-competitor, merchandise, endorsement-implication, company-name-or-domain Framer's trademark guidance forbids use of the Framer name and mark in third-party company names, domains, and uses that imply affiliation or endorsement.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Framer-skinned surfaces — especially light text on the dark canvas — must hold AA at minimum.
warning · 1 rule
enumMembership typography.heading.fontWeight allowed 500, 600, 700 Framer's marketing surfaces render display headings in the 500–700 band against the dark canvas; lighter weights lose contrast and undermine the bold gallery voice.
recommendation · 1 rule
compositionConstraint roles.colors.primary pairsWith framer-black, framer-white Framer Blue is calibrated to read on the near-black canvas and on white. Pairing it with another saturated hue at the same weight breaks the gallery-quiet voice of the dark-first identity.
Provenance
- Source
- https://www.framer.com/press
- License
Proprietary — All Rights Reserved- Attribution
- Framer and the Framer logo are trademarks of Framer B.V. The primary brand color Framer Blue (#0055FF) is documented on Framer's press resources. brand-atoms catalogues only the publicly documented signature color and authored neutrals; licensed application of the Framer name and mark is governed by Framer's brand-use guidance at framer.com/press.
- Imported
2026-05-18- Notes
- Framer's marketing pages render in a neutral humanist sans consistent with Inter; Inter is referenced here as the primary face and is already in the brand-atoms catalog. Framer is a dark-first brand — the canonical canvas is the near-black surface, and the identity role is set to framer-black so brand-badge surfaces render in the brand's true voice rather than in the blue accent.