# RIMOWA — Marketing site Design Spec

> Source: rimowa.com/us/en/home (live DOM, computed styles), 2026-07-25.
> Coverage: home. Salesforce Commerce Cloud site — no brand colour tokens in
> :root (layout vars only); palette read from computed fills/text. Button
> `:hover` matched only the OneTrust consent banner; link hover + focus read from
> the loose set. The blue #0c67e7 / #27455c is the current "Original Ink blue"
> campaign shown in photography, not permanent chrome.
> Reality check: matches the hint — precise editorial, aluminium palette, wide
> type. Confirms the signature is WIDE letter-spacing on a single LIGHT grotesque
> (RimowaGroteskLight at weight 400, 3.84px tracking at the 64px display).

## 1. Visual Theme & Atmosphere

An austere luxury-editorial travel brand that lets full-bleed photography and
video of its grooved-aluminium cases carry the page. The chrome is monochrome —
white with a warm near-black ink — and the whole site is set in one light
grotesque at a single weight, distinguished by unusually wide letter-spacing that
gives every headline and label a spacious, engraved, precise feel. Surfaces are
flat with restrained shadows on floating UI; colour enters only through imagery
and seasonal campaigns (currently a deep "Ink blue"). Feels: precise, editorial,
spacious, aluminium-cool.

## 2. Color Palette & Roles

| Token | Hex | Role / usage |
|---|---|---|
| ink | #0d0900 | primary text (warm near-black) |
| ink-alt | #0f1115 | alt dark text |
| grey | #424242 | secondary text, 2px border |
| muted | #6f6f6f | muted text, link hover |
| faint | #696969 | tertiary text |
| white | #ffffff | canvas, text over photography, light button |
| surface | #efefef | aluminium light-grey surface |
| surface-2 | #f6f6f6 | off-white panel |
| surface-3 | #f7f7f7 | section fill |
| warm-grey | #eae8e9 | warm light grey |
| border | #dadada | hairline border |
| border-2 | #ececec | faint divider |

Campaign / photographic tones (not permanent chrome):

| Token | Hex | Role / usage |
|---|---|---|
| ink-blue | #0c67e7 | "Original Ink blue" campaign accent |
| deep-blue | #27455c | campaign photography tone |
| eco-green | #346e4a | Re-Crafted / sustainability badge |

Rule: keep chrome monochrome (near-black ink on white/aluminium greys); let
colour live in campaign photography, not in buttons or borders.

## 3. Typography Rules

One custom face does everything: **RimowaGroteskLight**, a light neo-grotesque,
used at weight **400** throughout (an icon font handles glyphs; Nunito Sans is a
minor fallback). The defining trait is **wide positive letter-spacing** — 3.84px
on the 64px display, ~2.16px on uppercase labels, 0.5px on body. Labels, nav and
buttons are UPPERCASE; headlines are sentence case. No bold weights.

> Specimen substitution: previews load **Inter** at weights 300/400 as the
> closest open stand-in; the site ships the licensed RimowaGroteskLight. The wide
> tracking (not the exact face) carries the character.

| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Display (h1) | RimowaGroteskLight | 64/80 | 400 | 3.84px |
| Section (h2) | RimowaGroteskLight | 20/24 | 400 | 0.5px |
| Label (h3) | RimowaGroteskLight | 12/18 | 400 | 2.16px, UPPERCASE |
| Body | RimowaGroteskLight | 14/20 | 400 | 0.5px |
| Nav | RimowaGroteskLight | 14/20 | 400 | 0.5px |
| Button | RimowaGroteskLight | 12 | 400 | 2.16px, UPPERCASE |

## 4. Component Stylings

Buttons are 4px-radius rectangles, 48px tall, `0 24px` padding, RimowaGroteskLight
12px UPPERCASE at 2.16px tracking. Primary is a filled #0d0900 with white text;
the light variant inverts (white fill, #0d0900 text) for use over photography; a
ghost variant is a 1px #0d0900 outline. Text links are underlined uppercase and
darken to #6f6f6f on hover. Nav is a centred RIMOWA wordmark with a locale switch
left and Search + utility icons right, over a wide-tracked uppercase category row.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Primary button | #0d0900 fill, #fff, 4px, 48px, UPPER +2.16px | darkens (house 0.3s) | outline:none unless keyboard (:not(.tabfocus)); focus-visible outline-offset 3px | — | — |
| Light button | #ffffff fill, #0d0900, 4px | — | as above | — | — |
| Ghost button | transparent, 1px #0d0900 | fills to ink | as above | — | — |
| Text link | #0d0900, underline, UPPER | color #6f6f6f | as above | — | — |

Focus note: the site suppresses the outline for mouse focus (`:focus:not(.tabfocus)
{outline:none}`) but keeps a keyboard focus-visible outline with 3px offset — good
practice; keep the keyboard ring in generated UI.

## 5. Layout Principles

Full-viewport hero (autoplay video or photography) with a centred light-weight
headline and a single underlined CTA. Top bar: locale switch left, centred
wordmark, Search + account/wishlist/cart icons right, and a wide-tracked uppercase
category nav below. Content stacks in full-bleed editorial bands of imagery and
product grids on white/aluminium-grey. Circular media controls sit bottom-left of
video heroes.

## 6. Depth & Elevation

Radius scale: 1px, 2px, 2.5px, 3px, **4px**, **5px** (dominant), 20px, 50%
(circular controls). Shadows are subtle and layered: `rgba(0,0,0,.1) 0 1px 2px`
for chrome, `rgba(0,0,0,.3) 0 7px 7px -4px` and `rgba(0,0,0,.12) 0 8px 16px` for
lifted cards/menus. Borders: 1px hairlines (#dadada / #ececec / #d8d8d8) and a
heavier 2px #424242. Depth is imagery plus light shadow, not heavy elevation.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| color | 0.15s | ease | links, hover text (dominant, 164x) |
| border, background, color | 0.3s | ease | buttons, interactive surfaces |
| transform | 0.3s | ease | reveals, lifts |
| transform | 0.1s | ease | quick nudges |
| opacity | 0.2s | ease | fades |

House feel: fast 0.15s ease colour changes with 0.3s ease for background/border.
`@keyframes` observed: `spin3d`, `fade`, `slideright` / `slideleft`,
`moveFromTopToBottom`, `stickySlideDown` / `stickySlideUp`, `search-dialog-fade`,
plus a Dynamic Yield personalization set (`dy_appear_*`, `dy_exit_*`). No global
animation library flag. `prefers-reduced-motion` not honoured
(`honoursReducedMotion:false`). Hero autoplays a muted video with manual
pause/mute controls.

## 8. Backgrounds, Effects & WebGL

Flat surfaces — no CSS gradients, no backdrop-filter, no canvas/WebGL, no grain.
Atmosphere is entirely full-bleed product photography (27 raster layers observed)
and two autoplaying hero videos. Colour comes from the imagery, not procedural
effects.

## 9. Do's and Don'ts

### Do
- Set everything in one light grotesque at weight 400.
- Use wide letter-spacing — ~2.16px on uppercase labels/buttons, wider on display.
- Keep chrome monochrome: near-black #0d0900 ink on white / aluminium greys.
- Use filled #0d0900 buttons (white text) at 4px radius, UPPERCASE.
- Let full-bleed photography and video carry the page and the colour.
- Keep a keyboard focus-visible outline even while suppressing the mouse outline.

### Don't
- Don't use bold weights — the face stays light.
- Don't tighten tracking; the wide spacing is the signature.
- Don't put campaign colour (ink blue) into chrome, buttons or borders.
- Don't add gradients or heavy shadows; surfaces are flat.

## 10. Responsive Behavior

Very dense px breakpoint ladder (Commerce Cloud). Layout-carrying steps:

| Breakpoint | What changes |
|---|---|
| max 320 / 374px | smallest-phone stacking + type scale-down |
| 400 / 550px | phone tiers |
| 768px | tablet: nav + grid |
| 1024px | desktop layout |
| 1200 / 1360px | wide product grid |
| 1600 / 1920px | wide / ultra-wide capping |

Also present: 410, 425, 461, 476, 530, 575, 600, 680, 767, 896, 991, 1001, 1023,
1199, 1260, 1359, 1366. No dark-scheme blocks (`darkSchemeBlocks:0`); no theme
toggle; no container queries. Mobile collapses the category nav to a menu.

## 11. Agent Prompt Guide

- Canvas `#ffffff` · Ink `#0d0900` · Muted `#6f6f6f` · Surface `#efefef` · Border `#dadada` / 2px `#424242` · No chrome accent
- Font: RimowaGroteskLight (Inter light stand-in), weight 400, WIDE tracking · Body: 14px/0.5px · Radius: 4px buttons / 5px cards · Control height: 48px
- Focus: keyboard outline-offset 3px (mouse outline suppressed) · Hover: link → #6f6f6f, buttons 0.3s ease

<rimowa_design_language>
Austere luxury-editorial travel brand, aluminium-cool. White #ffffff canvas, warm
near-black #0d0900 ink, aluminium greys #efefef/#f6f6f6/#eae8e9, secondary grey
#424242, muted #6f6f6f. ONE light grotesque — RimowaGroteskLight at weight 400
(stand-in Inter light) — with the signature trait of WIDE positive letter-spacing:
3.84px on the 64px display, ~2.16px on UPPERCASE labels/buttons, 0.5px body; no
bold weights. Buttons are 4px-radius, 48px tall, 0 24px, UPPERCASE at 2.16px —
primary filled #0d0900 with white text, light variant inverts for photography,
ghost is a 1px #0d0900 outline; text links underline and darken to #6f6f6f. Chrome
is monochrome; all colour lives in full-bleed product photography and video
(currently an "Original Ink blue" #0c67e7 campaign), never in chrome. Flat surfaces
with restrained layered shadows on floating UI; radii 4–5px; 1px hairlines plus a
2px #424242 border. Motion: fast color 0.15s ease, 0.3s ease for bg/border,
autoplay hero video. Keeps a keyboard focus-visible outline. Feels: precise,
editorial, spacious. Avoid: bold weights, tight tracking, campaign colour in
chrome, gradients or heavy shadows.
</rimowa_design_language>