# Photoroom — Marketing site Design Spec

> 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) and `camera-accent` (amber), each
> keyed to a product capability rather than used decoratively.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

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.

## 3. Typography Rules

**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 |

## 4. Component Stylings

Everything lands on a **10px** radius (104 uses) — buttons, cards, panels — with
4px for small chips. Buttons run 40–48px tall: the primary is the near-black
`--color-background-default` #1a1a1a with white text, hovering to #474747 and
pressing to #1a1a1a; the secondary is transparent with a 1px rgba(0,0,0,.15)
border; the violet #492ffb primary appears on in-page CTAs. Cards are white
surfaces on the sand canvas with a hairline border and **no shadow**.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Primary (dark) | #1a1a1a, #fff, 10px, 40px | bg → #474747 | focus-visible ring token + bg #474747 | bg → #1a1a1a | opacity 0.3 |
| Primary (violet) | #492ffb, #fff, 10px | → #544fff | as above | → #410de9 | opacity 0.3 |
| Secondary | transparent, 1px rgba(0,0,0,.15) | subtle fill | as above | — | opacity 0.3 |
| Nav item | transparent, 17/500 | bg fill | as above | — | — |

Focus: a real `focus-visible` path exists — a dedicated
`misc-border-size-focus-ring` box-shadow token plus the hover background, and
checkboxes carry a 2px outline at 2px offset. Keep it.

## 5. Layout Principles

A full-bleed violet announcement bar sits above a white nav (mark + wordmark,
dropdown link cluster, then Log in / Contact sales / Start creating). Below, the
canvas switches to sand #f5f4f0 for a centred hero: 72px headline, one-line
sub, and a CTA pair. Content sections stack as centred max-width bands mixing
white cards, product imagery and one deep-blue gradient feature panel. 9
container queries size the product components.

## 6. Depth & Elevation

Radius: **10px** dominant (buttons, cards, panels), **4px** small, 6px, 9px,
9999px (one pill), plus single-side variants (`10px 10px 0 0`) for stacked
surfaces. **Zero box-shadows on the entire page.** Separation is the 1px
`rgba(0,0,0,.15)` hairline (27 uses) plus surface steps between #ffffff cards and
the #f5f4f0 canvas. One `backdrop-filter: blur(12px)` on floating chrome.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| color, background, border, fill, stroke | 0.2s | Tailwind default | all chrome (dominant, 83x) |
| all | 0.2s | cubic-bezier(0.4, 0, 0.2, 1) | controls |
| all / opacity | 0.2s | cubic-bezier(0.2, 1, 0.4, 1) | signature house easing |
| transform, translate, scale, rotate | 0.2s | cubic-bezier(0.2, 1, 0.4, 1) | motion group |
| border-radius | 0.2s | cubic-bezier(0.2, 1, 0.4, 1) | radius morphs on interaction |

House transition: **0.2s** everywhere, with the distinctive
`cubic-bezier(0.2, 1, 0.4, 1)` (a fast-out, soft-settle curve) as the brand
easing. 24 `@keyframes` covering a full UI kit — `bone-pulse` (skeleton loading),
four directional `tooltip-slide-*`, `dialog-enter/leave` and `dialog-overlay-*`,
Radix accordion slides, `nav-content-from-start/end`, `button-loading-
indeterminate-wiggle`, and `spotlight-fade-*`. Note `border-radius` is itself
animated. The site ships **one `prefers-reduced-motion: reduce` block** — honour it.

## 8. Backgrounds, Effects & WebGL

Three gradients, all purposeful rather than atmospheric: a violet brand ramp
`linear-gradient(to right, #492ffb, #7146ff)` (accent → magic-accent), a
citrus ramp `linear-gradient(to right, #e5ed49, #fdffd5)`, and a deep navy-to-sky
vertical scene gradient used as a feature backdrop. One
`backdrop-filter: blur(12px)`. 27 raster layers of product imagery and 2 videos
carry the page. No canvas/WebGL, no grain.

## 9. Do's and Don'ts

### Do
- Use the warm sand #f5f4f0 canvas so product cut-outs read crisply against it.
- Set everything in one rounded grotesque at weight 400 — including the 72px hero.
- Tighten tracking hard at display sizes (-1.973px at 72px) and relax it below.
- Put everything on a 10px radius; use 4px only for small chips.
- Keep the page shadowless; separate with a 1px rgba(0,0,0,.15) hairline.
- Reserve magic / animation / camera accents for their own feature surfaces.
- Use the 0.2s cubic-bezier(.2,1,.4,1) house easing and honour reduced motion.

### Don't
- Don't make the chrome loud or multi-coloured — the colour belongs to the imagery.
- Don't add drop shadows; the system has none.
- Don't set display type heavier than 400 (500 is the ceiling, for nav only).
- Don't use the sibling accents decoratively or as a palette.
- Don't introduce a second typeface.

## 10. Responsive Behavior

Tailwind v4 range syntax plus bespoke wide steps:

| Breakpoint | What changes |
|---|---|
| 40rem (640px) | phone → large-phone |
| 48rem (768px) | tablet: nav + grid |
| 64rem (1024px) | desktop layout |
| 80rem (1280px) | wide content |
| 1200px | bespoke content cap |
| 1512 / 1513px | bespoke desktop seam |
| 1800px | ultra-wide capping |

**9 container queries** size the product components independently of viewport. No
dark-scheme blocks (`darkSchemeBlocks:0`) — light-only. One reduced-motion block.

## 11. Agent Prompt Guide

- Canvas `#f5f4f0` · Surface `#ffffff` · Ink `#1a1a1a` · Body `#474747` · Muted `#6b6b6b` · Border `rgba(0,0,0,.15)` · Accent `#492ffb`
- Font: TT Photoroom rounded grotesque (Poppins stand-in) · Body: 16–24/400 · Radius: 10px everything / 4px chips · Control height: 40–48px
- Focus: focus-visible ring token + bg #474747 · Hover: primary #1a1a1a → #474747 · Motion: 0.2s cubic-bezier(.2,1,.4,1)

<photoroom_design_language>
Calm, product-first e-commerce imaging brand. Warm sand #f5f4f0 canvas with white
#ffffff cards, near-black #1a1a1a ink, body #474747, muted #6b6b6b. 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 weight 500 as a ceiling for nav only.
One violet #492ffb accent owns primary action and the announcement bar, backed by
a near-black #1a1a1a button that hovers to #474747; three sibling accents
(magic #7146ff, animation #cfc5ff, camera #f5b63d) are reserved strictly for
their own feature surfaces, never used decoratively. Everything sits on a 10px
radius (4px for chips). ZERO box-shadows anywhere — separation is a single 1px
rgba(0,0,0,.15) hairline plus surface steps, with one backdrop blur(12px). Motion
is 0.2s on the signature cubic-bezier(.2,1,.4,1), across a 24-keyframe UI kit
(skeleton bone-pulse, directional tooltip slides, dialog enter/leave, accordion),
and even border-radius animates; a prefers-reduced-motion block ships. 9 container
queries. Feels: calm, friendly, considered. Avoid: loud multi-coloured chrome,
drop shadows, display type above 400, decorative use of the sibling accents, a
second typeface.
</photoroom_design_language>