Polycam — design system & UI screens

Design · 1 screen · 11 sections · poly.cam

Centered text hero on a warm bone-cream canvas where the headline's verbs "Document, measure, design" are wrapped in saturated highlighter swatches (blue, orange, yellow) in a serif/italic mix, sitting above a full-bleed lifestyle photo of a tape-measure in use. The signature device is the vertical sequence of full-width pastel color bands — periwinkle "Document," pink "Measure," butter-yellow "Design" — each pairing a left-aligned headline with a floating 3D-scanned object (utility pole, floorplan, sneaker) that turns the page into a literal rainbow scroll. Lower sections add a dark 3D-models browse strip and a near-black mega-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/polycam.

Decoded design system

Polycam's decoded design system: background #F0EDE4, text #0C0A09, accent #FF8E80, link #0A0021, primary #E7E1D5; type scale h1 64px / h2 48px / body 16px; 4px spacing base; 0px base radius. The single interactive/action color is #FF8E80 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#F0EDE4`
surface	`#E2DFD6`
border	`#CDCAC3`
text	`#0C0A09`
text_muted	`#62605C`
primary	`#E7E1D5`
accent	`#FF8E80`
link	`#0A0021`
secondary	`#FF8E80`
button_bg	`#FF8E80`
button_text	`#0C0A09`

Using these colors

Action color #FF8E80 — the single interactive color; only on things you click or must notice, never large fills.
accent, secondary, button_bg are all #FF8E80 — one role, not several (the action color).
accent #FF8E80 — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
primary #E7E1D5 — a neutral UI color (chips, tags, icon fills, chrome), not the action color (action = #FF8E80).
link #0A0021 — inline text links and link-styled controls.

Typography

Heading: GT Planar
Body: GT Planar
h1: 64px
h2: 48px
body: 16px

Spacing

base unit: 4px
scale: 2px, 4px, 6px, 8px, 12px, 16px, 24px, 32px

Radii

base: 0px
button: 100px

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

Polycam reality-capture landing with rainbow color-banded Document/Measure/Design sections