Figma

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