DesignMD

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% opacity behind modal / video-overlay surfaces (token captures the base; opacity applied at render time).

Typography

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.

Layout

Spacing System

Base unit: 8px.
Tokens (front matter): {spacing.hair} 1px · {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.md} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.xxl} 48px · {spacing.section} 96px.
Section interior padding: {spacing.xxl} (48px) on color-block sections.
Card interior padding: {spacing.lg} (24px) on pricing cards and template tiles.
Form input padding: {spacing.sm} 12px vertical · 14px horizontal.
Button padding: {spacing.xs} 8px vertical · {spacing.lg} 24px horizontal for pill buttons (the asymmetric 8px 18px 10px extracted on button-secondary nudges the type optically inside the pill).
Universal rhythm constant: {spacing.section} (96px) — the vertical gap between major content sections holds across home, pricing, and FigJam pages.

Grid & Container

Max content width sits around 1280px (one of the explicit breakpoints), with side gutters that scale from {spacing.xxl} on desktop down to {spacing.lg} on mobile.
Three- and four-column grids on the desktop pricing comparison and FigJam template galleries.
Color-block sections break the column grid — they span content width with full bleed inside the rounded {rounded.lg} corners, then place a single editorial column of headline + body inside.

Whitespace Philosophy

White space is used to make the color blocks feel deliberate. Between every colored panel and the next, the page returns to white canvas with {spacing.section} of breathing room. Inside a color block, the type itself is given generous side margins (often more than 1/4 of the block's width on each side) so the panel reads as a poster, not a wall of copy.

Elevation & Depth

Level	Treatment	Use
0 (flat)	No shadow, no border	Default for color-block sections, inverse-canvas footer, hero
1 (hairline)	1px `{colors.hairline}` border on `{colors.canvas}`	Pricing cards, form inputs, comparison table cells
2 (soft elevation)	Subtle drop shadow approx 0 4px 16px rgba(0,0,0,0.06)	Floating template tiles, dropdown menus
3 (modal)	Stronger shadow + `{colors.overlay-scrim}` behind	Video / image lightbox overlays

Figma's marketing system is shadow-light by design — the color blocks substitute for traditional elevation. Where most SaaS sites use a shadowed white card to draw attention, Figma uses a saturated background panel. This makes the rare actual shadow (e.g., a floating template card hovering over a cream section) feel like an exception worth noticing.

Decorative Depth

Color-block sections are the primary depth device. The change from white canvas to lime / lavender / cream is the section break.
Sticky-note style component thumbnails in FigJam — slightly off-axis pastel rectangles arranged like notes on a board — read as collage, not card-stack.
Embedded product UI mocks (Figma Design panels, FigJam canvas snippets) appear as flat compositions on color blocks; their internal shadows are subtle and stay within the mock.

Shapes

Border Radius Scale

Token	Value	Use
`{rounded.xs}`	2px	Anchor / link decoration corners
`{rounded.sm}`	6px	Small chips, sub-nav tabs
`{rounded.md}`	8px	Form inputs, list items, image frames
`{rounded.lg}`	24px	Pricing cards, color-block sections, large image containers
`{rounded.xl}`	32px	Hero feature panels, oversized callouts
`{rounded.pill}`	50px	All text CTAs (primary, secondary, tab toggles)
`{rounded.full}`	9999px	Circular icon buttons, comparison-table checkmark glyphs

Photography & Illustration Geometry

Image frames use {rounded.md} (8px) — generous enough to feel friendly, conservative enough to read as editorial.
Template thumbnails on the home grid sit in {rounded.md} tiles with {spacing.md} interior padding around the embedded preview.
FigJam pastel sticky-note component thumbnails preserve a small {rounded.sm} corner that mimics actual sticky paper.
No avatar circles appear in marketing surfaces — Figma's marketing avoids personification.

Components

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.

Background {colors.canvas}, text {colors.ink}, type {typography.body-sm}, height 56px.
Mobile: collapses primary links into a hamburger that opens a full-canvas overlay; the two pill CTAs remain visible on the bar.

marquee-strip — Thin black ribbon directly under the nav that scrolls through customer logos in white.

Background {colors.inverse-canvas}, text {colors.inverse-ink}, type {typography.body-sm}, height 36px.

Comparison Glyphs

comparison-checkmark — Green check used in the pricing comparison matrix.

Background {colors.canvas}, glyph color {colors.semantic-success}, rounded {rounded.full}, size 16px.

Footer

footer — Dense link grid on white canvas with the wordmark "Figma" set in display weight at the top-left.

Background {colors.canvas}, text {colors.ink}, type {typography.caption} for column headings and small links, padding {spacing.section} top/bottom · {spacing.xl} sides.

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

Responsive Behavior

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.

Iteration Guide

Focus on ONE component at a time and reference it by its components: token name (e.g., {components.button-primary}, {components.color-block-section}).
When introducing a new section, decide first which {colors.block-*} token it sits on; the surface choice is the most consequential decision.
Default body type to {typography.body}; reach for {typography.subhead} or {typography.headline} only inside a color block.
Run npx @google/design.md lint DESIGN.md after edits — broken-ref, contrast-ratio, and orphaned-tokens warnings flag issues automatically.
Add new variants as separate component entries (-pressed, -selected) — do not bury them in prose.
Keep {colors.primary} scarce. If two button-primary instances appear in the same viewport, the section is doing too much — neutralize one to button-secondary.
Treat {colors.accent-magenta} as a single-shot color: one promo CTA per page, never two.

Known Gaps

The exact pastel hex values of {colors.block-*} are derived from screenshot pixels; the production source likely uses named tokens that aren't exposed via CSS variables. Treat the documented hex values as faithful approximations rather than exact brand specs.
Dark mode is not documented because the marketing site does not ship a dark theme — the closest analog is the navy color-block (color-block-section-navy) and the inverse-canvas footer.
Form-field error and validation styling is not visible on /contact/ because no error states render in the static screenshot. Inputs have hairline borders and rounded {rounded.md} corners; error treatment is not documented.
The animated marquee-strip and color-block reveal animations are not documented (per the no-interaction policy).