# Framer

> `framer@1.0.0`

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** · `framer@1.0.0` · 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** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | 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: `framer@1.0.0` from the encyclopedia.*