Framer

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.

12 swatches 14 light roles 14 dark roles saasno-codeframerdesign-toolsdark-firstblue

Swatches

framer-blue
#0055FF
Signature saturated blue. Primary brand color — used on primary CTAs, the wordmark on light surfaces, and key interactive accents on the dark canvas.
framer-black
#000000
Canonical dark-mode canvas — the brand's primary surface.
framer-white
#FFFFFF
Display type on dark canvas; canvas on light mode.
framer-canvas-near-black
#0A0A0A
Authored near-black canvas — used for slight surface differentiation against pure black.
framer-surface-dark
#171717
Authored elevated surface on the dark canvas.
framer-surface-elevated-dark
#262626
Authored modal / popover surface on dark.
framer-surface-light
#F4F4F4
Authored panel surface for light mode.
framer-text-secondary-dark
#B3B3B3
Authored secondary text on the dark canvas.
framer-text-tertiary-dark
#777777
Authored tertiary / muted text on the dark canvas.
framer-text-secondary-light
#4A4A4A
Authored secondary text on the light canvas.
framer-text-tertiary-light
#878787
Authored tertiary / muted text on the light canvas.
framer-blue-hover
#3370FF
Authored softer Framer Blue for hover / active states.

Mode role mappings

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

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 and is independently cross-referenced by the simple-icons brand database, which cites framer.com as the source.
Imported
2026-05-18
Notes
Only Framer Blue (#0055FF) and the canonical black/white surface tones are read directly from Framer's brand surfaces. Secondary neutrals (elevated dark surfaces, secondary text) are authored neutral inversions calibrated to support Framer's dark-first canvas consistently without fabricating hex values that Framer does not publish.