Figma

version alpha

name Figma

description "A confident black-and-white editorial frame interrupted by oversized, hand-cut pastel color blocks. The marketing canvas is rigorously monochrome — figmaSans variable type, pure white surfaces, pure black ink, pill-shaped CTAs — while each story section drops the page into a saturated lime, lavender, cream, mint, or pink panel that reads like a sticky note placed on a clean desk. The result is a design system that feels both technical and joyful — a tool for serious work, made by people who like color."

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" 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 display-xl: fontFamily: figmaSans fontSize: 86px fontWeight: 340 lineHeight: 1.00 letterSpacing: -1.72px fontFeature: kern display-lg: fontFamily: figmaSans fontSize: 64px fontWeight: 340 lineHeight: 1.10 letterSpacing: -0.96px fontFeature: kern headline: fontFamily: figmaSans fontSize: 26px fontWeight: 540 lineHeight: 1.35 letterSpacing: -0.26px fontFeature: kern subhead: fontFamily: figmaSans fontSize: 26px fontWeight: 340 lineHeight: 1.35 letterSpacing: -0.26px fontFeature: kern card-title: fontFamily: figmaSans fontSize: 24px fontWeight: 700 lineHeight: 1.45 letterSpacing: 0 fontFeature: kern body-lg: fontFamily: figmaSans fontSize: 20px fontWeight: 330 lineHeight: 1.40 letterSpacing: -0.14px fontFeature: kern body: fontFamily: figmaSans fontSize: 18px fontWeight: 320 lineHeight: 1.45 letterSpacing: -0.26px fontFeature: kern body-sm: fontFamily: figmaSans fontSize: 16px fontWeight: 330 lineHeight: 1.45 letterSpacing: -0.14px fontFeature: kern link: fontFamily: figmaSans fontSize: 20px fontWeight: 480 lineHeight: 1.40 letterSpacing: -0.10px fontFeature: kern button: fontFamily: figmaSans fontSize: 20px fontWeight: 480 lineHeight: 1.40 letterSpacing: -0.10px fontFeature: kern eyebrow: fontFamily: figmaMono fontSize: 18px fontWeight: 400 lineHeight: 1.30 letterSpacing: 0.54px fontFeature: kern caption: fontFamily: figmaMono fontSize: 12px fontWeight: 400 lineHeight: 1.00 letterSpacing: 0.60px fontFeature: kern

rounded xs: 2px sm: 6px md: 8px lg: 24px xl: 32px pill: 50px full: 9999px

spacing hair: 1px xxs: 4px xs: 8px sm: 12px md: 16px lg: 24px xl: 32px xxl: 48px section: 96px

components button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 10px 20px button-primary-pressed: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.pill}" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 8px 18px 10px button-tertiary-text: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.link}" rounded: "{rounded.full}" padding: 8px 12px button-icon-circular: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.full}" size: 40px button-icon-circular-inverse: backgroundColor: "{colors.on-inverse-soft}" textColor: "{colors.inverse-ink}" typography: "{typography.button}" rounded: "{rounded.full}" size: 40px button-magenta-promo: backgroundColor: "{colors.accent-magenta}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 10px 18px pricing-tab-default: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 8px 18px pricing-tab-selected: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 8px 18px text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 12px 14px text-input-focused: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 12px 14px pricing-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.lg}" padding: 24px pricing-card-feature-row: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.xs}" color-block-section: backgroundColor: "{colors.block-lime}" textColor: "{colors.ink}" typography: "{typography.subhead}" rounded: "{rounded.lg}" padding: 48px color-block-section-lilac: backgroundColor: "{colors.block-lilac}" textColor: "{colors.ink}" typography: "{typography.subhead}" rounded: "{rounded.lg}" padding: 48px color-block-section-navy: backgroundColor: "{colors.block-navy}" textColor: "{colors.inverse-ink}" typography: "{typography.subhead}" rounded: "{rounded.lg}" padding: 48px promo-banner-lilac: backgroundColor: "{colors.block-lilac}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.md}" padding: 16px 24px template-card: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.md}" padding: 16px feature-illustration-tile: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ink}" typography: "{typography.eyebrow}" rounded: "{rounded.md}" padding: 24px top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.xs}" height: 56px marquee-strip: backgroundColor: "{colors.inverse-canvas}" textColor: "{colors.inverse-ink}" typography: "{typography.body-sm}" rounded: "{rounded.xs}" height: 36px comparison-checkmark: backgroundColor: "{colors.canvas}" textColor: "{colors.semantic-success}" typography: "{typography.body-sm}" rounded: "{rounded.full}" size: 16px footer: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.xs}" padding: 64px 32px

Overview

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.

Colors

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% opac