Figma Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

20tokens

8type steps

6radius steps

1pxspacing base

Figma, in one page

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.

This is a system built on contrast: the monochrome chrome makes the color blocks feel intentional rather than decorative, and the color blocks make the monochrome chrome feel like editorial paper rather than enterprise SaaS. Density is generous, line-heights are tight on display sizes, and the interface never reaches for shadows or gradients to do the work that color blocks and confident typography already do.

Key Characteristics:

Monochrome system core: {colors.primary} (black) and {colors.canvas} (white) carry every CTA, every body line, every footer link.
Oversized pastel color-block sections ({colors.block-lime}, {colors.block-lilac}, {colors.block-cream}, {colors.block-mint}, {colors.block-pink}, {colors.block-coral}, {colors.block-navy}) define the narrative rhythm of every long-form page.
Pill is the only button shape — {rounded.pill} for text CTAs, {rounded.full} for icon buttons. No square buttons anywhere.
figmaSans variable typeface used at unusually fine weight increments (320, 330, 340, 450, 480, 540) — the type system reads as a single voice that flexes rather than a multi-weight family.
Tight negative letter-spacing on display sizes (-1.72px at 86px, -0.96px at 64px) creates a confident editorial cadence.
figmaMono reserved for category labels, eyebrows, and captions — always uppercase, positive tracking — to flag taxonomy without competing with display type.
Color-block page rhythm (home): white hero → marquee strip → white feature → lime systems block → navy ship-products block → coral developer block → white template grid → white footer.

Do's and don'ts

Do

Reserve {colors.primary} for genuine primary CTAs and selected states (e.g., pricing-tab-selected). Don't use it as a decorative accent.
When introducing a story section, choose one color block from the {colors.block-*} family and let it span full content width with {rounded.lg} corners and {spacing.xxl} interior padding.
Keep type in figmaSans at variable weights — pick from 320, 330, 340, 480, 540, 700 to express hierarchy. Avoid intermediate weights outside this set.
Use figmaMono only for eyebrows and captions, always uppercase, with the documented positive letter-spacing.
Compose every CTA as a pill ({rounded.pill}) and every icon button as a circle ({rounded.full}).
Allow the page to return to white canvas between every two color blocks so each block reads as deliberate.
Pair button-primary and button-secondary whenever a section needs both a primary action and a sales / secondary action — the black-and-white pair is the brand signature.

Don't

Don't introduce mid-gray text. Body hierarchy comes from figmaSans weight, not from opacity.
Don't add drop shadows to color-block sections — the color is the depth device.
Don't introduce new accent colors outside the documented {colors.block-*} palette and {colors.accent-magenta}. Adding, e.g., a saturated brand orange would break the system.
Don't combine more than one color block visible inside a single viewport — Figma's pacing always lets the white canvas separate them.
Don't square off CTAs. Square buttons read as a different brand.
Don't put figmaMono in body copy — it's a taxonomy tool, not a reading typeface.
Don't replace the pricing-tab-selected black fill with a colored tab; the brand pattern is "selected = primary surface".

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Figma design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- 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

Type:
- families: figmaSans, figmaMono, Inter, Geist
- scale: 12, 16, 18, 20, 24, 26, 64, 86
- weights: 320, 330, 340, 400, 480, 540, 700

Shape:
- radius: 2, 6, 8, 24, 32, 50

Spacing: 1, 4, 8, 10, 12, 16, 24, 32, 48, 96

Rules:
- Reserve `{colors.primary}` for genuine primary CTAs and selected states (e.g., `pricing-tab-selected`). Don't use it as a decorative accent.
- When introducing a story section, choose one color block from the `{colors.block-*}` family and let it span full content width with `{rounded.lg}` corners a…
- Keep type in `figmaSans` at variable weights — pick from 320, 330, 340, 480, 540, 700 to express hierarchy. Avoid intermediate weights outside this set.
- Use `figmaMono` only for eyebrows and captions, always uppercase, with the documented positive letter-spacing.
- Compose every CTA as a pill (`{rounded.pill}`) and every icon button as a circle (`{rounded.full}`).
- Allow the page to return to white canvas between every two color blocks so each block reads as deliberate.

Avoid:
- Don't introduce mid-gray text. Body hierarchy comes from `figmaSans` weight, not from opacity.
- Don't add drop shadows to color-block sections — the color is the depth device.
- Don't introduce new accent colors outside the documented `{colors.block-*}` palette and `{colors.accent-magenta}`. Adding, e.g., a saturated brand orange would…
- Don't combine more than one color block visible inside a single viewport — Figma's pacing always lets the white canvas separate them.
- Don't square off CTAs. Square buttons read as a different brand.
- Don't put `figmaMono` in body copy — it's a taxonomy tool, not a reading typeface.

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

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}).
Magenta Promo ({colors.accent-magenta}): A single saturated CTA pink reserved for promotional inline buttons — appears, for example, on the lilac "Save your spot" Release Notes banner. Use scarcely; it is not a section color.

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.
Surface Soft ({colors.surface-soft}): Off-white tile background used for icon buttons, template cards, and feature illustration tiles when they sit on the white canvas.
Hairline ({colors.hairline}): 1px borders on form inputs, pricing cards, and table dividers.
Hairline Soft ({colors.hairline-soft}): Even subtler dividers — comparison-table row separators and footer column rules.
Block Lime ({colors.block-lime}): The signature systems / FAQ / contact-form color block. Recurs across home, pricing, contact.
Block Lilac ({colors.block-lilac}): Hero block on /design/; also the inline Release Notes promo banner.
Block Cream ({colors.block-cream}): Soft warm background — FigJam hero strip, template-grid section.
Block Mint ({colors.block-mint}): FigJam pastel section.
Block Pink ({colors.block-pink}): FigJam pastel section.
Block Coral ({colors.block-coral}): "Ship products" coral story block on home.
Block Navy ({colors.block-navy}): Deep indigo story block — only place dark surfaces appear above the footer.

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).
On-Inverse Soft ({colors.on-inverse-soft}): White used at ~16% opacity for circular icon-button surfaces against dark sections (token captures the base color; the translucency is applied at render time).

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).

Type scaleRead the full spec

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
`{typography.display-xl}`	86px	340	1.00	-1.72px	Hero headlines (home, FigJam)
`{typography.display-lg}`	64px	340	1.10	-0.96px	Section opener headlines
`{typography.headline}`	26px	540	1.35	-0.26px	Story-block titles inside color blocks
`{typography.subhead}`	26px	340	1.35	-0.26px	Long-form intro paragraphs that sit at near-headline scale
`{typography.card-title}`	24px	700	1.45	0	Pricing-tier titles, feature card titles
`{typography.body-lg}`	20px	330	1.40	-0.14px	Lead body copy on hero, contact form labels
`{typography.body}`	18px	320	1.45	-0.26px	Default body
`{typography.body-sm}`	16px	330	1.45	-0.14px	Card body, footer link list
`{typography.link}`	20px	480	1.40	-0.10px	Inline link emphasis
`{typography.button}`	20px	480	1.40	-0.10px	All pill buttons, primary and secondary
`{typography.eyebrow}`	18px	400	1.30	0.54px	figmaMono uppercase section eyebrows
`{typography.caption}`	12px	400	1.00	0.60px	figmaMono uppercase captions, footer column heads

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.
Mono is taxonomy, not body. figmaMono is reserved for eyebrows and captions — never used to set a paragraph.
Tight line-heights on display, generous on body. Display sizes run 1.00–1.10; body runs 1.40–1.45. The contrast reinforces that headlines are graphics and body copy is for reading.

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.

Components and layoutRead the full spec

Buttons

button-primary — The black "Get started for free" pill that appears in the top nav, every hero, and every closing CTA.

Background {colors.primary}, text {colors.on-primary}, type {typography.button}, padding 10px 20px, rounded {rounded.pill}.
Pressed state lives in button-primary-pressed (same surface; the live site relies on micro-scale rather than a darkened fill).

button-secondary — White pill with black text. Used for tertiary navigation actions ("Contact sales") and as the visual counterpart to the primary pill.

Background {colors.canvas}, text {colors.ink}, type {typography.button}, padding 8px 18px 10px (asymmetric vertical to optically center the type), rounded {rounded.pill}. No border.

button-tertiary-text — Plain text link styled as a button hit target inside top nav and footer.

Background {colors.canvas}, text {colors.ink}, type {typography.link}, rounded {rounded.full} (hit target only), padding {spacing.xs} {spacing.sm}.

button-icon-circular — 40px circular icon button used for carousel controls, social links, and inline actions on light surfaces.

Background {colors.surface-soft}, text {colors.ink}, rounded {rounded.full}, size 40px.

button-icon-circular-inverse — Same shape, used on inverse-canvas / dark color blocks.

Background {colors.on-inverse-soft} (translucent white), text {colors.inverse-ink}, rounded {rounded.full}, size 40px.

button-magenta-promo — Saturated pink pill used only inside promotional surfaces such as the lilac "Save your spot" Release Notes banner. Reserved for moments where Figma's product team wants the CTA to pop against an already-colored panel.

Background {colors.accent-magenta}, text {colors.on-primary}, type {typography.button}, rounded {rounded.pill}, padding 10px 18px.

Pricing Tabs

pricing-tab-default + pricing-tab-selected — The pill-toggle that switches between Starter / Professional / Organization / Enterprise on /pricing/.

Default: {colors.canvas} background, {colors.ink} text, rounded {rounded.pill}.
Selected: {colors.primary} background, {colors.on-primary} text — exactly the same surface as button-primary, which makes the selected tab feel like an active CTA, not a passive state.

Inputs & Forms

text-input + text-input-focused — Form fields on /contact/ and pricing seat-count steppers.

Background {colors.canvas}, text {colors.ink}, type {typography.body}, rounded {rounded.md}, padding 12px 14px.
Focused state retains the same surface — focus is communicated via ring, not via fill change.

Cards & Containers

pricing-card — Each tier on /pricing/.

Background {colors.canvas}, text {colors.ink}, type {typography.body}, rounded {rounded.lg}, padding {spacing.lg}. Stroked with {colors.hairline} rather than shadowed.

pricing-card-feature-row — Single row inside the comparison table.

Background {colors.canvas}, text {colors.ink}, type {typography.body-sm}. Row separator is {colors.hairline-soft}.

template-card — Thumbnail tile in the home "Explore what people are making" grid and the FigJam template gallery.

Background {colors.surface-soft}, text {colors.ink}, type {typography.body-sm}, rounded {rounded.md}, padding {spacing.md}.

feature-illustration-tile — Larger composition tile that holds a product UI mock or pastel illustration.

Background {colors.surface-soft}, text {colors.ink}, type {typography.eyebrow}, rounded {rounded.md}, padding {spacing.lg}.

Color-Block Sections (signature)

The defining surface of Figma's marketing. Each is a full-content-width panel with {rounded.lg} corners and {spacing.xxl} interior padding. Variants:

color-block-section — lime ground for "systems" stories (home), pricing FAQ, and the contact form.

Background {colors.block-lime}, text {colors.ink}, type {typography.subhead}, rounded {rounded.lg}, padding {spacing.xxl}.

color-block-section-lilac — lavender ground for /design/ hero and FigJam highlight sections.

Background {colors.block-lilac}, otherwise identical structure.

color-block-section-navy — deep indigo ground for the home "Ship products" story block. The only inverse color-block surface above the footer.

Background {colors.block-navy}, text {colors.inverse-ink}, otherwise identical structure.

(Cream, mint, pink, and coral block variants follow the same shape with their respective {colors.block-*} surface.)

Promo Banner

promo-banner-lilac — The Release Notes / "Save your spot" inline banner that floats above the contact form.

Background {colors.block-lilac}, text {colors.ink}, type {typography.body-sm}, rounded {rounded.md}, padding {spacing.md} {spacing.lg}. Carries a button-magenta-promo on the right edge.

Navigation

top-nav — Sticky white bar with logo, primary nav links, sign-in link, and the right-anchored button-secondary ("Contact sales") + button-primary ("Get started for free") pair.

Responsive behaviourRead the full spec

Breakpoints

Name	Width	Key Changes
4k	1920px	Max content width holds at 1280px; gutters expand
Desktop-XL	1440px	Default desktop layout
Desktop	1400px	Comparison table column widths normalize
Desktop-S	1280px	Pricing 4-up tier grid maintained
Tablet	960px	Pricing collapses 4-up → 2-up; nav becomes hamburger
Mobile-L	768px	Color-block sections become full-bleed (no rounded corners on edges)
Mobile	560px	Display-xl reduces from 86px to ~48px; pill CTAs go full-width
Mobile-XS	559px	Two-column footer collapses to single column

Touch Targets

Pill buttons (button-primary, button-secondary) maintain a minimum 44px tap height across all viewports — achieved by combining {typography.button} 20px line-height with the documented vertical padding.
Circular icon buttons (button-icon-circular) are 40px on desktop and grow to 44px on touch viewports.
Form input minimum tap target on /contact/ is 48px high.

Collapsing Strategy

Nav: desktop horizontal nav with two right-anchored pills collapses to a hamburger overlay below 960px. The two pills (Contact sales, Get started for free) stay visible on the bar above 560px and stack in the overlay below.
Pricing tier grid: 4-up → 2-up at 960px → 1-up below 768px. The pill toggle stays horizontal and scrolls horizontally if needed below 560px.
Color-block sections: above 768px the section keeps {spacing.xxl} of canvas around it so the rounded corners read; below 768px the corners are removed and the block bleeds to viewport edge for a poster effect.
Comparison table: below 960px the matrix collapses into per-tier accordions to avoid horizontal scroll.

Image Behavior

Product UI mocks inside color blocks scale proportionally and never crop. Below 768px they shrink rather than reflow.
Template thumbnails in the home grid use lazy loading and animate in on scroll.
Sticky-note style FigJam thumbnails maintain their slight off-axis rotation across breakpoints — the rotation is a brand signal, not a desktop-only flourish.

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-figma {--page-bg: #ffffff;
  --page-bg-gradient: none;
  --text-color: #000000;
  --heading-color: #000000;
  --link-color: #000000;
  --link-hover-color: #000000;
  --border-color: #d1d1d1;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(0,0,0,0.06);
  --card-hover-shadow: 0 6px 18px rgba(0,0,0,0.12);
  --header-bg: #000000;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #ffffff;
  --footer-text-color: #595959;
  --button-bg: #000000;
  --button-text-color: #ffffff;
  --button-hover-bg: #000000;
  --button-border: none;
  --button-border-radius: 24px;
  --button-secondary-bg: #f0f0f0;
  --button-secondary-text-color: #000000;
  --button-secondary-hover-bg: #e0e0e0;
  --button-secondary-border: 1px solid #d1d1d1;
  --prompt-bg: #f2f2f2;
  --prompt-text-color: #000000;
  --base-font: var(--font-helvetica);
  --heading-font: var(--font-mono);
  --card-border-radius: 24px;
}

Download theme.css

Where this came from

Source document: volt/design-md/figma/DESIGN.md · 31.4 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.