Gallery-clean product marketing: pure-white canvas, near-black figmaSans set in light weights (330/400), monospace eyebrows, black primary buttons; all colour lives in vivid product mockups and the rainbow logo, over a full-black footer.
Browse Figma in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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).
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.
| 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 |
| 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.
figmaSans, "SF Pro Display", system-ui, helvetica, sans-serif — the whole page. Notably light weights: body/nav at 330, headings at 400 (no bold).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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.