# Figma — Marketing Site Design Spec

> Source: figma.com (live DOM, computed styles), 2026-07-13 (desktop 1512px).
> Coverage: homepage (hero, feature sections, nav, footer). Dashboard/editor: behind login (`needs-dashboard`). Responsive: breakpoints not captured (desktop only).

## 1. Visual Theme & Atmosphere

Confident, gallery-clean product marketing: a pure-white canvas, near-black text, and a single custom type family (figmaSans) set in unusually light weights, so the page reads calm and editorial rather than loud. All the color energy is carried by the work itself — vivid product mockups, UI screenshots, and the rainbow brand logo — while the chrome stays strictly black-and-white. Eyebrow labels are set in a monospace (figmaMono), a small engineering wink that signals a tool-for-makers. Structure comes from generous whitespace and big scroll-revealed headlines, not borders or shadows. The footer flips to full black. Feels: clean, spacious, crafted, quietly playful.

## 2. Color Palette & Roles

### Neutrals
| Token | Hex | Role / usage |
|---|---|---|
| black | `#000000` | Primary text, primary button bg, footer bg |
| ink-90 | `rgba(0,0,0,.90)` | Headings on white |
| muted | `rgba(0,0,0,.54)` | Secondary text, mono eyebrows |
| subhead | `#808080` | Large subhead / de-emphasised copy |
| white | `#ffffff` | Page bg, cards, text on black |
| white-24 | `rgba(255,255,255,.24)` | Hairlines / dividers on dark |

### Brand product palette (from product illustrations / logo — decoration only)
| Token | Hex | Role / usage |
|---|---|---|
| blue | `#0d99ff` | Figma "design" blue — primary product accent, selection |
| blue-bright | `#00b6ff` | Bright cyan-blue variant |
| green | `#14ae5c` | Figma green (also brighter `#24cb71`) |
| orange | `#ff5c16` | Figma orange (also `#ff7237`) |
| red | `#ff3737` | Figma red |
| purple | `#874fff` | Figma purple (also `#9747ff`) |
| pink | `#ff24bd` | Magenta / Buzz pink |
| indigo | `#4d49fc` | Deep indigo accent |

Rule: chrome is strictly black/white/gray. Color appears only inside product imagery, illustrations, and the multi-hue logo — never on buttons or nav.

## 3. Typography Rules

- Sans: `figmaSans, "SF Pro Display", system-ui, helvetica, sans-serif` — the whole page. Notably light weights: body/nav at **330**, headings at **400** (no bold).
- Mono: `figmaMono, "SF Mono", menlo, monospace` — eyebrow labels only.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 56 / 60 | 400 | -1.25px (-2%) |
| Section headline | 32–40 | 400 | -0.5px |
| Eyebrow (mono) | 14 | 400 | +0.5px, UPPERCASE, `rgba(0,0,0,.54)` |
| Body / nav | 16–18 | 330 | -0.14px |
| Button label | 16–18 | 330–400 | 0 |

Patterns: weight ceiling is 400 — headings are light, never bold. Negative tracking on large sizes; monospace reserved for eyebrows. Big headlines fade/slide in on scroll.

## 4. Component Stylings

### Buttons
- **Primary (dark)**: bg `#000000`, text `#ffffff`, no border, radius `8px`, height `46px`, padding `12px 22px`, 16–18px/330–400.
- **Secondary (outline)**: transparent bg, text `#000000`, 1px hairline border (`rgba(0,0,0,.16)`), radius `8px`, height `46px`, same padding.
- **Ghost / nav**: transparent, text `#000000`, 8px padding, no radius fill; hover underline/darken.

### Inputs
- Not captured on the homepage (auth behind login). Editor uses 8px-radius fields — not verified here (`not captured`).

### Cards / product frames
- Large full-bleed rounded media frames, radius `16–24px`, holding vivid product UI mockups; no border, occasional soft drop shadow.

### Nav
- Height ~64px, white, hairline bottom border. Colorful Figma logo left; center links (Products, Solutions, Community, Resources, Pricing) 18px/330 with dropdown carets; right actions: Log in (ghost) + Contact sales (outline) + Get started for free (black primary).

## 5. Layout Principles

- Wide, centered content; hero is a two-column split (left: 56px headline + CTA; right: product mockup collage).
- Generous whitespace and tall section rhythm; headlines left-aligned in feature sections.
- Section eyebrows in mono uppercase introduce each block ("WHAT YOU CAN DO IN FIGMA").
- Footer: full-black band, white text, multi-column link lists.

## 6. Depth & Elevation

- Radii: `2px` (tiny chips), `4px`, `8px` (buttons), `16px`/`24px` (media frames), `9999px` (avatars/pills).
- Elevation is mostly flat. Observed shadows: inset hairline `0 0 0 1px rgba(0,0,0,.16)`; drop `0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.05)`.
- Borders and shadows are sparse — whitespace does the separating.

## 7. Motion

- Scroll-driven: large section headlines fade + slide up as they enter; product mockups animate content inside static frames.
- Micro-transitions on hover (color/opacity), short durations. No bounce-heavy motion. Animation library not positively identified (`not captured`).

## 8. Backgrounds, Effects & WebGL

- Flat white canvas; no site-wide gradient wash. Depth comes from photographic/UI product mockups, not CSS effects.
- Footer is a solid black band. No canvas/WebGL, background video, or grain observed on the homepage (`not captured` beyond this).

## 9. Do's and Don'ts

### Do
- Keep chrome black/white/gray; let color live only in product imagery and the rainbow logo.
- Use figmaSans in light weights (330 body, 400 headings) — headlines are light, not bold.
- Set eyebrow labels in monospace, uppercase, +0.5px tracking, muted `rgba(0,0,0,.54)`.
- Use black primary buttons at radius 8px, height 46px; outline secondary with a hairline border.
- Give the page room: generous whitespace, big scroll-revealed headlines, large rounded media frames (16–24px).
- Flip the footer to full black with white text.

### Don't
- Don't use font weight 700 — the ceiling is 400.
- Don't colorize buttons or nav; no colored CTAs.
- Don't lean on borders/shadows for structure — use whitespace.
- Don't introduce a second type family beyond figmaSans + figmaMono.

## 10. Responsive Behavior

- Not captured (desktop 1512px only). Nav collapses to a menu on small screens (pattern present in markup, not verified).

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#ffffff` · Text `#000000` · Muted `rgba(0,0,0,.54)` · Footer `#000000` · Product-blue `#0d99ff`
- Font: `figmaSans` (330 body / 400 headings) + `figmaMono` eyebrows · Body 16–18px · Radius 8px control / 16–24px media · Button height 46px
- Primary button: black bg, white text, radius 8px · Secondary: outline, hairline border `rgba(0,0,0,.16)`

<figma_design_language>
Use the Figma marketing design language: pure-white canvas, near-black text, and the custom figmaSans set in LIGHT weights (330 body, 400 headings — never bold). Chrome stays strictly black/white/gray; all color energy lives in vivid product mockups and the rainbow logo, drawn from Figma's product palette (blue #0d99ff, green #14ae5c, orange #ff5c16, red #ff3737, purple #874fff, pink #ff24bd). Eyebrow labels are set in figmaMono, uppercase, +0.5px tracking, muted rgba(0,0,0,.54). Headlines are large (56px, -2% tracking) and light. Primary buttons are solid black, white text, radius 8px, height 46px; secondary buttons are outline with a hairline border rgba(0,0,0,.16). Layout is spacious with big scroll-revealed headlines and large rounded media frames (16–24px); elevation is nearly flat. Footer flips to full black with white text. Feels: clean, spacious, crafted, quietly playful. Avoid: bold weights (700), colored buttons or nav, a second type family, and using borders/shadows where whitespace should separate.
</figma_design_language>