A calm, product-first e-commerce imaging brand whose chrome is far quieter than its output: the colourful cut-outs are what the product MAKES, while the site itself is a warm sand #f5f4f0 canvas carrying white cards and near-black #1a1a1a ink, chosen so generated product shots read crisply against it. One rounded proprietary grotesque (TT Photoroom; stand-in Poppins) does everything at weight 400 — including the 72px hero — with tracking tightening hard at display sizes (-1.973px at 72px, -0.416px at 42px) and 500 reserved as a ceiling for nav. It publishes a genuine 297-token system with a semantic layer over a neutral ramp, and its most transferable idea is a NAMED MULTI-ACCENT FAMILY keyed to product capability rather than decoration: accent violet #492ffb owns primary action, while magic #7146ff, animation #cfc5ff and camera #f5b63d each appear only on their own feature surfaces. Everything lands on a 10px radius (4px chips), and there are ZERO box-shadows anywhere — separation is a single 1px rgba(0,0,0,.15) hairline plus surface steps, with one backdrop blur(12px). Motion runs at 0.2s on a signature cubic-bezier(.2,1,.4,1) across a 24-keyframe UI kit where even border-radius animates, and a prefers-reduced-motion block ships alongside 9 container queries.
Browse Photoroom 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: photoroom.com (live DOM, computed styles), 2026-07-25. 0 stylesheets blocked. Publishes a real 297-token set — a semantic layer (--color-surface-*,--color-background-*,--color-accent-*) sitting on a Tailwind neutral ramp; §2 records the semantic and brand tokens, not the unused Tailwind default hues. Reality check: the hint conflated product output with design language. The queue said "bold, colourful cut-out imagery"; the cut-outs are what the product *makes*, while the site chrome is deliberately calm — a warm sand #f5f4f0 canvas, one rounded typeface at weight 400, and a single violet #492ffb. The real find is a named multi-accent family:accent(violet),magic-accent(purple),animation-accent(lavender) andcamera-accent(amber), each keyed to a product capability rather than used decoratively.
A calm, product-led e-commerce imaging brand. The canvas is a warm sand off-white that keeps generated product cut-outs looking crisp against it, and the entire page is set in one rounded proprietary grotesque (TT Photoroom) at a light weight 400 — including a 72px hero — so the tone stays friendly rather than shouty. Colour is disciplined: a violet accent owns the primary action, and three sibling accents are reserved for specific product capabilities. Depth is completely flat — zero box-shadows — with separation by a single translucent rgba(0,0,0,.15) hairline and a consistent 10px radius. Feels: calm, friendly, product-first, considered.
Semantic tokens (the layer to build against):
| Token | Hex | Role / usage |
|---|---|---|
| --color-sand-50 | #f5f4f0 | THE page canvas (warm off-white) |
| --color-surface-default | #ffffff | cards, raised surfaces |
| --color-surface-low / alternate | #f2f2f2 | inset / alternate surface |
| --color-background-default | #1a1a1a | primary button fill, dark sections |
| --color-background-hover | #474747 | primary button hover |
| --color-neutral-900 | #1a1a1a | primary ink |
| --color-neutral-800 | #474747 | body copy |
| --color-neutral-700 | #6b6b6b | muted text |
| --color-neutral-600 | #8a8a8a | tertiary text |
| --color-neutral-300 | #d9d9d9 | light divider |
| --color-neutral-200 | #e5e5e5 | border |
| --color-white-1 | #f2f3f7 | cool white tint |
| --color-white-2 | #e6e7ed | cool white tint 2 |
| (hairline) | rgba(0,0,0,.15) | THE border — 1px, 27 uses |
Named accent families (each keyed to a capability, not decorative):
| Token | Hex | Role / usage |
|---|---|---|
| --color-accent-500 | #492ffb | THE brand violet — primary CTA, announcement bar |
| --color-accent-400 | #544fff | accent hover/lighter step |
| --color-accent-300 | #6369ff | accent light |
| --color-accent-600 | #410de9 | accent pressed |
| --color-magic-accent-500 | #7146ff | AI "magic" features |
| --color-animation-accent-500 | #cfc5ff | animation features (lavender) |
| --color-camera-accent-500 | #f5b63d | camera features (amber) |
Rule: violet #492ffb is the only routine accent; magic / animation / camera accents appear only on their own feature surfaces. Note the hero CTA on the homepage is the near-black #1a1a1a, with violet used for the announcement bar and in-page primaries.
One proprietary family, TT Photoroom — a rounded geometric grotesque — does everything. The signature is that it stays at weight 400 even at 72px, with tracking tightening sharply at display sizes (-1.973px at 72px, -0.416px at 42px) and returning to normal below. Weight 500 is the ceiling, used only for nav and sub-heads. No mono, no second family.
Specimen substitution: previews load Poppins (a rounded geometric with
matching proportions) as the open stand-in; the site ships the licensed
TT Photoroom.
| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Display (h1) | TT Photoroom | 72/79.2 | 400 | -1.973px |
| Section (h2) | TT Photoroom | 42/46.2 | 400 | -0.416px |
| Lead body | TT Photoroom | 24/36 | 400 | normal |
| Sub-head (h3) | TT Photoroom | 20/26 | 500 | normal |
| Nav / button | TT Photoroom | 17/22.1 | 500 | normal |
| Body / small | TT Photoroom | 16 | 400 | normal |
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.