Figma — design system & UI screens

Design · 2 screens · 7 sections · figma.com

A long-scroll marketing landing page on a clean white canvas, opening with a slim top navigation bar, a dismissable event announcement banner, and a spacious hero section that pairs two product value props ("Design anything you can imagine" / "Build with intention") with inline text links. Lower sections stack a large pull-quote customer testimonial with a bold 45% stat, a row of grayscale brand logos (Airbnb, Atlassian, Dropbox, Duolingo, GitHub, Microsoft, Netflix), a full-width black "Get started" CTA bar, a community template gallery carousel, and a dense multi-column dark footer.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/figma.

Decoded design system

Figma's decoded design system: background #FFFFFF, text #000000, accent #E4FF97, link #E4FF97, primary #1A73E8; type scale h1 64px / h2 14px / body 20px; 8px spacing base; 0px base radius. The single interactive/action color is #000000 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#FFFFFF`
surface	`#EFEFEF`
border	`#D8D8D8`
text	`#000000`
text_muted	`#606060`
primary	`#1A73E8`
accent	`#E4FF97`
link	`#E4FF97`
secondary	`#4285F4`
button_bg	`#000000`
button_text	`#FFFFFF`

Using these colors

Action color #000000 — the single interactive color; only on things you click or must notice, never large fills.
accent, link are all #E4FF97 — one role, not several (the action color).
accent #E4FF97 — accent for emphasis — keep it rare on the page.
primary #1A73E8 — a brand color — but the call-to-action uses #000000, not this.
secondary #4285F4 — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

Heading: SF Pro Display
Body: figmaSans
Mono: figmaMono
h1: 64px
h2: 14px
body: 20px

Spacing

base unit: 8px
scale: 4px, 5px, 6px, 8px, 12px, 16px, 20px, 22px, 24px, 30px

Radii

base: 0px
button: 8px

Shadows (elevation)

subtle: oklch(0 0 none / 0.16) 0px 1px 0px 0px

Motion

Micro-interactions run at 180ms (dominant) with ease-out.

durations: 180ms · 250ms · 500ms
easings: ease-out · ease
animated properties: transform, background, box-shadow, opacity

Native design tokens

Token	Value
`--global-statsig-overlay`	`#FFFFFF`
`--fig-theme-bg`	`#FFFFFF`
`--fig-theme-fg`	`#000000`
`--fig-theme-btn-primary-bg`	`#000000`
`--fig-theme-btn-primary-fg`	`#FFFFFF`
`--fig-theme-btn-secondary-fg`	`#000000`
`--fig-theme-btn-transparent-fg`	`#000000`
`--fig-theme-form-error-bg`	`#972121`
`--fig-theme-form-error-fg`	`#FFFFFF`
`--fig-theme-badge-fg`	`#000000`

…and 51 more measured on the page.

Button states (measured)

primary hover: background oklch(0 0 none / 0.85)
primary focus: outline 2px dashed rgb(0, 0, 0)

Layout (measured)

container max-width: 901px
nav: 78px fixed
common grid: 2 columns

Motion choreography (measured)

Load order: div.fig-51j1vz → div.fig-1fcmjev → div.fig-1fcmjev

Scroll reveal: 8 elements rest at opacity 0, translateY(32px), animate in over 1250ms.