Design System — Figma Design System

Visual Theme & Atmosphere

Figma's marketing canvas is, at the system level, an editor-clean black-and-white frame. The chrome — top nav, body type, footer, primary CTA — is monochrome. Headlines are oversized {typography.display-xl} set in figmaSans with aggressive negative tracking, body copy hovers around weight 320–340 of the same variable family, and small mono {typography.eyebrow} and {typography.caption} labels (figmaMono, all-caps, positive tracking) act as section markers. Every CTA is a pill — {rounded.pill} — and the primary action across the entire site is the same black {components.button-primary} paired with the same white {components.button-secondary}.

What makes the design unique is what happens between those monochrome bookends: the page repeatedly drops into oversized pastel color-block sections — lime, lavender, cream, mint, pink, coral, and a deep navy — that span the full content width with {rounded.lg} corners and {spacing.xxl} interior padding. These blocks are where the storytelling lives. They aren't accents tucked into a card; they take over a whole viewport's worth of vertical space, like a designer arranging giant sticky notes on a clean wall. FigJam is the most pastel-saturated, the home page rotates through the full set, and the pricing page ends with a lime FAQ panel — same vocabulary, different rhythm per route.

...

Key Characteristics:

Monochrome system core: {colors.primary} (black) and {colors.canvas} (white) carry every CTA, every body line, every footer link.
...

Live Visual Theme Representation:

Visual Theme Example

Color Palette & Roles

> Source pages: figma.com (home), /design/, /figjam/brainstorming-tool/, /pricing/, /contact/.

Brand & Accent

Black ({colors.primary}): The system primary. Every primary CTA, every headline, every body line, the marquee strip, the inverse canvas of dark sections.
White ({colors.on-primary}): Inverse text on black surfaces; also the canvas color used as the foreground of secondary pill buttons ({components.button-secondary}).
...

Surface

Canvas ({colors.canvas}): Default page background and the body of every white card.
Inverse Canvas ({colors.inverse-canvas}): Footer, marquee strip, and a subset of "ship products"-style story sections.
...

Text

Ink ({colors.ink}): All headline, body, and caption type on light surfaces. There is no softer mid-gray text role on marketing — body copy is always black at weight 320–340, and weight (not opacity) carries the hierarchy.
Inverse Ink ({colors.inverse-ink}): Type on inverse-canvas surfaces (footer, marquee strip, navy color block).
...

Semantic

Success Green ({colors.semantic-success}): Comparison-table checkmarks on pricing. Used as a glyph fill, not a surface.
Overlay Scrim ({colors.overlay-scrim}): Black used at ~60% opacity behind modal / video-overlay surfaces (token captures the base; opacity applied at render time).

primary

#000000

on-primary

#ffffff

ink

#000000

canvas

#ffffff

inverse-canvas

#000000

inverse-ink

#ffffff

on-inverse-soft

#ffffff

hairline

#e6e6e6

hairline-soft

#f1f1f1

surface-soft

#f7f7f5

block-lime

#dceeb1

block-lilac

#c5b0f4

block-cream

#f4ecd6

block-pink

#efd4d4

block-mint

#c8e6cd

block-coral

#f3c9b6

block-navy

#1f1d3d

accent-magenta

#ff3d8b

semantic-success

#1ea64a

overlay-scrim

#000000

Typography Rules

Font Family

figmaSans — Figma's proprietary variable typeface; fallback stack figmaSans Fallback, SF Pro Display, system-ui, helvetica. Variable weight axis is exercised at unusually fine increments (320, 330, 340, 450, 480, 540, 700) — the design system reads as a single voice modulating rather than a stepped weight family.
figmaMono — Proprietary monospace; fallback figmaMono Fallback, SF Mono, menlo. Used exclusively for eyebrow labels and captions, always uppercase with positive letter-spacing.

OpenType kern is enabled across every role.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
...	...	...	...	...	...

Principles

Weight, not size, carries hierarchy on body copy. A 20px paragraph at weight 330 sits next to a 20px link at weight 480 — the eye reads emphasis without scale change.
Negative letter-spacing scales with size. Display-xl pulls -1.72px; subhead pulls only -0.26px. Body copy stays near-zero. The result is editorial-feeling display type without sacrificing readability at body size.
...

Note on Font Substitutes

If implementing without access to figmaSans / figmaMono, suitable open-source substitutes are Inter (or Geist) for the sans, and JetBrains Mono (or Geist Mono) for the mono. Inter at variable weights closely matches the fine-grained weight axis figmaSans uses; expect to manually adjust line-heights down by ~0.02 to compensate for Inter's slightly taller x-height.

Dynamic Preview:

display-xl size: 86px | weight: 340 | height: 1.00 | spacing: -1.72px