Figma

Monochrome canvas — pure white #ffffff background (656 measured uses) + near-black #000000 text (1347 measured uses). Two brand-tier accents recur with measurable surface: cyan #33dfdf (10 uses) and gold #b98e01 (8 uses) — these carry the brand's chromatic posture. Eight one-off spots fill out the constellation: orange #ff7237 (3), azure #00b6ff (3), electric purple #874fff (2), sage #95b9ac (1), lilac #cb9fd2 (1), peach #ffc9c1 (1), deep red #721c1c (1), ice cyan #c7f8fb (1). Neutral #e6e6e6 (2) handles subtle borders. No gradients captured. The structure itself is the statement: 'every creator has a seat here', anchored by two recurring spots so the page never reads scattered.

• Near-black #000000 as dominant text — 1347 measured occurrences
• Pure white #ffffff as dominant background — 656 measured occurrences (also tokenized as `--f-statsig-overlay`)
• Cyan #33dfdf and gold #b98e01 — recurring brand-tier accents (10 + 8 measured uses), the only two with enough surface to count as brand color
• Eight one-off spots — orange / azure / electric purple / sage / lilac / peach / deep red / ice cyan — appear 1-3 times each as decoration, never as fills or primary CTA color
• Neutral #e6e6e6 for subtle border and divider moments
• No dark-mode commitment captured — the brand lives in light

No gradients captured in the marketing surface — depth and atmosphere come from typography, whitespace, and inset borders, not gradient warmth.

• Triple family system: `figmaSans` (UI + body), `figmaMono` (code + technical annotations), `ABCWhytePlusVariable` (display + hero moments). Each family tokenized in CSS variables under the `--f-*` namespace.
• figmaSans + figmaMono self-hosted via Next.js (`/_next/static/media/*.woff2`), preloaded via `<link rel='preload'>`. ABCWhytePlusVariable is a licensed variable font (ABC Dinamo Whyte Plus) also self-hosted; the capture also lists Fallback declarations for each family (size-adjust shimming).
• Weight ladder is variable-font-driven: 320 / 330 / 400 / 480 / 540 observed across the captured scale. Broader than a typical 400/500/600/700 ladder — use the variable font's interpolation instead of discrete weights.
• Display sizes captured: 20 / 26 / 64 px on hero and section headlines. Tracking pulls in negative on the largest tier; line-heights are tight-to-content (1.0-1.1 on display, 1.4-1.55 on body).
• Body sizes: 16 / 18 px figmaSans. Body line-height generous (~1.4-1.55).
• figmaMono carries positive tracking on smaller sizes — compensating for monospace density on technical annotations.
• Paragraph max 45-55 ch at body 16-18 px; technical runs in figmaMono use 60 ch comfortably.
• `font-display` strategy is mixed (captured), reflecting the swap-vs-block tradeoff between licensed display and self-hosted UI/mono families.

• 2 px base unit. Scale captured: 2 / 4 / 6 / 8 / 10 / 12 / 16 / 18 px dominate; 24 / 30 / 32 px appear at lower frequency. The 2 px base is fine-grained enough to support small UI rhythm without falling off-grid.
• Container max-widths are two only: 840 px and 980 px. The page never sprawls past 980 px reading width — narrow bounded rails, editorial discipline.
• Token `--f-max-content-width` declared in CSS variables for full-bleed sections (navigation, footer); reading columns stay at 840-980.
• Token `--f-gutter` (24 px) — column gutter standard for flex/grid.
• Token `--f-lego-block-padding` — component 'lego block' vertical rhythm between sections.
• Card padding: 16-24 px on desktop, 8-16 px on mobile. Pick from the 2 px-base scale; no magic numbers.

• Primary elevation is inset 1 px border — `box-shadow: rgb(0, 0, 0) 0 0 0 1px inset` for dark-on-light surfaces, `rgb(255, 255, 255) 0 0 0 1px inset` for inverted contexts.
• Hairline divider for low-weight separation: a single-pixel rule that delineates without drawing focus.
• One dramatic drop shadow reserved for modal-grade lift: `rgba(0, 0, 0, 0.1) 0 24px 70px 0` — used sparingly, only on elements that intentionally lift above the page.
• No stacked shadow compositions captured — elevation is discrete, not layered.

• Radius scale is intentionally gapped: 2 / 6 / 8 / 16 / 50 px. The 2-8 range handles small UI; 16 is for card-scale surfaces; 50 is pill (fully rounded), reserved for badges and indicator chips.
• Buttons default to 8 px radius, cards 16 px, inputs 6 px, pills 50 px for status and badges only.
• Icons stroke-based at 1.5-2 px weight; Figma's own iconography leans toward linear, no filled or duotone variants.
• Tap targets minimum 40×40 on desktop, 44×44 on touch — standard floor.

• button-primary

  backgroundColor

  #000000

  textColor

  #ffffff

  radius

  8px

  padding

  10px 16px

  border

  1px solid transparent

  boxShadow

  none

  fontWeight

  400

  fontSize

  16px

  lineHeight

  23.2px

  Tailwind

  Copy

  inline-flex min-h-[40px] items-center gap-1.5 rounded-[8px] bg-black px-4 py-2.5 text-[16px] font-normal leading-[23.2px] text-white transition-colors duration-[160ms] ease-out hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2

• button-secondary

  backgroundColor

  #ffffff

  textColor

  #000000

  radius

  8px

  padding

  10px 16px

  border

  none

  boxShadow

  rgb(0, 0, 0) 0 0 0 1px inset

  fontWeight

  400

  fontSize

  16px

  Tailwind

  Copy

  inline-flex min-h-[40px] items-center gap-1.5 rounded-[8px] bg-white px-4 py-2.5 text-[16px] font-normal text-black shadow-[rgb(0,0,0)_0_0_0_1px_inset] transition-[box-shadow] duration-[160ms] ease-out hover:shadow-[rgb(0,0,0)_0_0_0_2px_inset] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2

• card-surface

  backgroundColor

  #ffffff

  textColor

  #000000

  radius

  16px

  padding

  32px

  border

  none

  boxShadow

  rgb(0, 0, 0) 0 0 0 1px inset

  Tailwind

  Copy

  rounded-[16px] bg-white p-8 text-black shadow-[rgb(0,0,0)_0_0_0_1px_inset] transition-shadow duration-[160ms] ease-out hover:shadow-[rgba(0,0,0,0.1)_0_24px_70px_0,rgb(0,0,0)_0_0_0_1px_inset]

• spot-accent-chip (cyan brand-tier)

  backgroundColor

  #33dfdf

  textColor

  #000000

  radius

  50px

  padding

  2px 10px

  border

  none

  boxShadow

  none

  fontWeight

  400

  fontSize

  12px

  lineHeight

  12px

  Tailwind

  Copy

  inline-flex min-h-[20px] items-center rounded-[50px] bg-[#33dfdf] px-2.5 py-0.5 font-mono text-[12px] font-normal leading-[12px] text-black

• spot-accent-chip (gold brand-tier)

  backgroundColor

  #b98e01

  textColor

  #ffffff

  radius

  50px

  padding

  2px 10px

  border

  none

  boxShadow

  none

  fontWeight

  400

  fontSize

  12px

  lineHeight

  12px

  Tailwind

  Copy

  inline-flex min-h-[20px] items-center rounded-[50px] bg-[#b98e01] px-2.5 py-0.5 font-mono text-[12px] font-normal leading-[12px] text-white

• Framer Motion is the runtime (window.MotionIsMounted captured); the easing vocabulary mixes CSS keywords (ease-out / ease-in-out / ease / linear) with one overshoot custom curve (cubic-bezier(0.34, 1.56, 0.64, 1)) reserved for occasional spring-flavoured reveals.
• Five durations dominate: 0.16s (standard state change), 0.2s (interactive feedback), 0.25s (transform), 0.8s (atmospheric reveal), 2s (long section shift).
• `clip-path` is a first-class animated property — interactive overlay entrances use 0.16s ease-out clip-path.
• The overshoot bezier (cubic-bezier(0.34, 1.56, 0.64, 1)) is a controlled exception — used for one or two delight moments; everything else stays on CSS keyword easings.
• Respect `prefers-reduced-motion` — Framer Motion components opt into the hook so animations reduce to opacity-only or disable entirely.

• Primary CTAs black-on-white solid; secondary CTAs white-on-white with inset 1 px black border — the whole interaction vocabulary lives on monochrome contrast.
• Tooltips reveal on hover and focus with a short delay; dismiss instantly on blur.
• Modals get the reserved 24 px-blur drop shadow — they are the only surfaces that lift. Drawers handle mobile-only contextual panels.
• Form validation: inline below field on blur; submit disabled until pristine validation passes.
• Cursor state feedback via tokenized cursors: `--f-cursor-grab`, `--f-cursor-grabbing`, `--f-cursor-text`, `--f-cursor-pointer`, `--f-cursor-default`. Canvas-interactive sections signal manipulability through cursor change.
• Spot accents (cyan and gold) appear as background fills on small chips and indicator dots — never as text foreground against white.
• Loading states: skeleton shimmer for content; inline spinner for buttons.

Desktop-first with tighter mobile and lg breakpoints than industry default. Figma uses sm 560 (vs Tailwind default 640) and lg 960 (vs default 1024) — both 64-80 px tighter. The full ladder is sm 560 / md 768 / lg 960 / xl 1280 / 2xl 1440. Pointer-vs-touch is detected via `(hover: hover) and (pointer: fine)` — canvas-interactive affordances only shown on pointer devices.

• Breakpoints: sm 560 / md 768 / lg 960 / xl 1280 / 2xl 1440 — tighter than Tailwind default on sm and lg.
• Container widths stepped at 840 and 980 for reading columns; full-bleed navigation and footer expand to the larger token.
• Hide-on-mobile banned — controls reflow, never disappear.
• Tap target minimum 44×44 on touch; 40×40 on pointer.
• Typography scales proportionally: hero drops from 64 px on desktop to a smaller tier on mobile; tracking compensates (less negative at smaller sizes).
• Canvas-interactive states (`cursor: grab`) only exposed when `(hover: hover) and (pointer: fine)` — no touch fake affordances.

• focus-visible: 2 px black ring on interactive elements; on dark surfaces, invert to a white ring. Mandatory on every interactive element.
• All interactive elements reachable via Tab key in logical reading order; never rely on hover to expose actions.
• Color contrast: #000000 on #ffffff = 21:1 (AAA); the constellation spot colors used only as decoration, never as text foreground against white.
• ARIA labels on icon-only buttons; aria-expanded on collapsible regions; aria-live='polite' on toast and status updates.
• Motion respects prefers-reduced-motion — Framer Motion components opt into the hook so animations reduce to opacity-only or disable entirely.
• Tap targets minimum 44×44 on touch; 40×40 on pointer devices.
• Screen reader-only content uses `sr-only`; never `display:none` for meaningful context.
• Cursor token changes announced only visually; do not rely on cursor state as the sole affordance for non-pointer users.

Framer Motion is loaded at runtime — the marketing page leaves the heavier vocabulary (spring physics, layout animation) idle and stays on simple CSS easings (ease-out / ease-in-out / ease / linear) with four core durations (0.16 / 0.2 / 0.25 / 2 s). Images are SVG-heavy across the captured assets — Figma leans on vector iconography over raster photography; the product's own canvas nature shows up in the asset mix. CSS variables openly declared in the `--f-*` namespace are the marketing-side proof that the design system is shipped, not just claimed.

• CSS transitions primary: `transition: <prop> 0.16s ease-out` for standard state changes; reserve 2 s ease-in-out for atmospheric background shifts.
• Framer Motion guarded by `useReducedMotion()` — animations reduce to opacity-only or disable entirely under `prefers-reduced-motion: reduce`.
• `clip-path` is a first-class animated property for interactive overlay reveals (0.16 s ease-out).
• Next/Image with `sizes` attribute set; the page favors eager above-fold visibility for its visual-showcase hero.
• CSS variables openly declared in `--f-*` namespace — token system as marketing proof, not hidden behind build tools.
• No canvas, no WebGL on the marketing page — visual language is SVG-forward, raster-supporting, animation-discreet.

• Namespace your CSS variables like brand tokens (`--yourbrand-*`) and treat the token layer as part of your marketing surface.
• Anchor a constellation palette on two recurring spots and surround them with low-frequency one-offs — plural without scattering.
• Use a triple-family typographic system only if each family has a clear role (sans for UI, mono for code, display for hero) — no overlap.
• Tokenize cursor states (`--f-cursor-grab`) if your product has interactive canvas semantics — small detail, strong signal.
• Keep reading containers at 840-980 px; reserve full-bleed widths only for nav and footer.
• Reach for inset 1 px border shadows before any drop shadow; reserve one dramatic 24 px-blur shadow for modal-grade surfaces.
• Use the variable font's interpolation (weight 320-540) instead of discrete weight stops — figmaSans treats weight as a continuum.
• Run Framer Motion under `useReducedMotion()` and lean on CSS-keyword easings — the library's full vocabulary is available, but restraint is the brand posture.

• Don't replicate Figma's constellation palette in a non-plural context (finance, legal, enterprise operations) — the structure reads 'frivolous' if your audience doesn't match.
• Don't license a variable display family before you have the editorial discipline to use it sparingly — Whyte Plus earns its line in a couple of hero moments, not every heading.
• Don't introduce a fourth font family — the sans/mono/display trio is a ceiling.
• Don't copy the `--f-*` namespace verbatim — invent your own brand-prefix tokens that tell your own story.
• Don't animate `height: auto` — use measured transforms or scaleY.
• Don't use the spot accent colors as text foreground against white — contrast fails.
• Don't use drop shadow on standard cards — elevation is discrete: flat (inset 1 px) or modal-grade (24 px 70 px blur), nothing between.
• Don't pile on Framer Motion's spring physics across the marketing surface — the captured vocabulary uses one controlled overshoot bezier as an exception, not a default.

• Tailwind v4 @theme inline only — no runtime style concatenation, no CSS-in-JS.
• Spacing base 2 px, scale anchored on 2 / 4 / 6 / 8 / 10 / 12 / 16 / 18 with 24 / 30 / 32 appearing at lower frequency.
• Container max 980 px for reading; reserve full-bleed widths for nav and footer.
• Three font families max: sans (UI) + mono (code) + display (editorial hero). No fourth.
• Weight ladder follows variable font interpolation (320-540 captured); no discrete 300/500/700 steps.
• Motion: five durations (0.16 / 0.2 / 0.25 / 0.8 / 2 s) and four CSS-keyword easings (ease-out / ease-in-out / ease / linear) plus one overshoot bezier (cubic-bezier(0.34, 1.56, 0.64, 1)) reserved for delight moments.
• Radius scale: 2 / 6 / 8 / 16 / 50 px (with intentional gaps).
• Elevation: inset 1 px border default, one 24 px-blur drop shadow for modal-grade only.

• Container width: no page exceeds 980 px reading content width; only nav and footer use full-bleed widths.
• Spacing grep: dominant values stay in {2, 4, 6, 8, 10, 12, 16, 18}px; {24, 30, 32}px allowed at lower frequency.
• Font family count: exactly three — figmaSans + figmaMono + ABCWhytePlusVariable. A fourth triggers audit.
• Weight grep: values stay in the 320-540 variable range; no 300, 500, 700 discrete steps.
• Transition easing grep: dominant set is ease-out / ease-in-out / ease / linear; cubic-bezier(0.34, 1.56, 0.64, 1) appears as a controlled exception only.
• Transition duration grep: 0.16 / 0.2 / 0.25 / 0.8 / 2 s appear as CSS-side timings.
• Framer Motion detection: runtime probe finds `window.MotionIsMounted` defined; components are wrapped in `useReducedMotion()`.
• Shadow audit: standard elements use `rgb(0, 0, 0) 0 0 0 1px inset`; modals use `rgba(0, 0, 0, 0.1) 0 24px 70px 0` — no intermediate elevation tiers.
• Radius audit: only 2 / 6 / 8 / 16 / 50 px appear.
• Contrast audit: text foreground uses #000000 on light surfaces (21:1 AAA); spot colors never used as text.
• CSS variable namespace: all custom variables follow a consistent brand prefix (your equivalent of `--f-*`); tokens are inspectable in the compiled CSS.
• Brand-tier palette: cyan #33dfdf and gold #b98e01 carry recurring brand surface (≥5 measured uses); other spots appear 1-3 times each.