Warm, quiet and almost entirely monochrome — a photography-led beauty system where ONE colour does nearly all the work. The canvas is plain #ffffff and the warmth arrives as full-bleed #f1f0ed cream bands rather than a tinted body, while a single warm taupe #67645e carries text, hairlines, rings AND fills, backed only by #84827e, #acaaa5 and #000000 on hover. Every neutral is warm-biased — never a cool grey — and there is exactly ONE gradient on the entire page, with no grain, no WebGL and no video. Type is two sans faces and no serif at all: Rektorat Heavy, a HEAVY SANS set LOWERCASE at 60.48/72.576 with -2.4192px (-4%) tracking, over Swiss running the whole interface as 17.024/25.536 weight 700 UPPERCASE at +2% tracking. That inverted tracking logic — strongly negative on the big display face, positive on every small uppercase size — is the most portable idea here. Depth is refused: the 40px PILL is the universal radius at 891 uses and a 1px INSET ring (box-shadow: inset 0 0 0 1px #67645e, 536 uses) is the universal outline, so nothing floats. The signature is the button hover, a DIRECTIONAL CLIP-PATH WIPE: four triangular hit zones meeting at the centre each re-clip an inset(0 0 100% round 40px) fill layer, so it slides in from whichever edge the cursor crossed over clip-path .25s, while the label recolours across a far slower color 1.25s. Motion elsewhere is long and symmetric — all 0.7s cubic-bezier(.76,0,.24,1), no overshoot, no JS motion library.
Browse Rhode 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: rhodeskin.com (live DOM, computed styles), 2026-07-26. Shopify build; 0 stylesheets blocked. §2 is read from the colour census, not from tokens — all 52:rootproperties belong to third-party widgets (Okendo--oke-*,--bdp-*,--rc-*), so the brand palette is hard-coded in the theme. Three component vars ARE brand:--base-color: #67645e,--label-color: #fff,--base-spacing: .3rem 1.9rem .2rem. Excluded as dead CSS: Foundation's.o-buttonfamily (hover#cf000fred) —querySelectorAll('.o-button').length === 0, so that red is framework leftovers, not a Rhode colour. Also excluded: Swiper, Shopify checkout, PhotoSwipe and accessibility-widget chrome (#007aff,#363638,#ebebf0). Reality check: "glossy minimal cream" holds; "tight serif wordmark" is wrong. The display face is Rektorat Heavy — a heavy SANS set lowercase at 60.48/72.576 with -4% tracking. The site is monochrome-with-one-colour: a single warm taupe#67645edoes text, hairlines, rings and fills. The find neither hint mentions: the button hover is a four-way directionalclip-pathwipe driven by four triangular hit zones, 400 of them live on the homepage.
Quiet, warm and almost entirely monochrome — a photography-led beauty site where one taupe does nearly all the work. The canvas is plain #ffffff and the warmth arrives as full-bleed #f1f0ed cream bands, not as a tinted body. Every neutral is warm-biased: the workhorse #67645e is a greenish-taupe, never a cool grey. Type is disciplined to the point of severity — the UI runs almost entirely uppercase Swiss at 17px with +2% tracking, and the only expressive voice is Rektorat Heavy set lowercase and very tight. Depth is refused: there are effectively two shadows on the page and both are 1px *inset* rings, so nothing floats. Everything rounded is a 40px pill. Motion is slow and symmetric — cubic-bezier(.76,0,.24,1) at 0.7s — and the one moment of real craft is the button, whose fill wipes in from whichever edge the cursor crossed. Feels: warm, minimal, glossy, disciplined, editorial.
| Token | Hex / value | Role / usage |
|---|---|---|
| white | #ffffff | body canvas + text on imagery (1552 text / 252 fill uses) |
| cream | #f1f0ed | THE section band — dominant large surface (14 section fills) |
| cream-80 | rgba(241,240,237,.8) | translucent cream overlay |
taupe (--base-color) | #67645e | primary text, hairline, inset ring, fill — 3082 text / 358 fill uses |
| taupe-light | #84827e | secondary text, alt fill, .Button__gray-backgroung hover |
| taupe-faint | #acaaa5 | tertiary / muted text |
| warm-grey | #dddedc | alternating-row / subtle hover fill |
| black | #000000 | link hover + text (274 uses) |
| white-90 | rgba(255,255,255,.9) | sticky chrome fill (17 uses) |
| white-70 / white-50 | rgba(255,255,254,.7) / rgba(255,255,255,.5) | scrim / control fills |
| scrim | rgba(0,0,0,.3) / rgba(0,0,0,.75) | image dimmers (3 / 1 uses) |
| hairline-c4 | #c4c4c4 | 1px form border |
| hairline-cc | #cccccc | 1px border, minor |
| grey-a3 | #a3a3a3 | disabled + focused-input border tint |
| off-white-f5 | #f5f5f5 | 2px border, minor |
The whole page is #ffffff + #f1f0ed + #67645e; everything else is a hairline or a scrim. No gradient palette — the page has exactly one CSS gradient, radial-gradient(50% 50%, #f1f0ed, #a3a09b 0.01%, #d3d3d3).
One brand sans (Swiss, licensed) plus one display sans (Rektorat Heavy, licensed). No serif anywhere; no mono anywhere. Preview substitutes Inter for Swiss and Archivo Black for Rektorat Heavy (one webfont link).
| Role | Family | Size / line | Weight | Tracking | Case |
|---|---|---|---|---|---|
| Display | Rektorat Heavy | 60.48 / 72.576 | 400 | -2.4192px (-4%) | lowercase |
| Display, micro | Rektorat Heavy | 10 / 7.5 | 400 | -0.4px | lowercase |
| Section head | Swiss | 37.8 / 45.36 | 400 | -0.756px | none |
| UI workhorse | Swiss | 17.024 / 25.536 | 700 | +0.34048px | uppercase |
| Button label | Swiss | 17.024 / 25.536 | 400 | +0.34048px | uppercase |
| Nav / link | Swiss | 17.01 / 25.515 | 700 | +0.3402px | none |
| Product name | Swiss | 14 / 16.8 | 700 | +0.28px | uppercase |
| Body | Swiss | 14 / 21 | 400 | +0.28px | none |
| Announcement bar | Swiss | 12 / 14 | 700 | +0.24px | uppercase |
Two things to copy. The inverted tracking logic — the display face gets strong NEGATIVE tracking (-4%) while every small UI size gets POSITIVE tracking (+2%), tight where it's big and open where it's small. And the micro Rektorat tag sets line-height below font size (10px on 7.5px) so the badge crops to the letterforms.
Caveat, recorded rather than hidden: the <h1> computes to 176/211.2 Swiss 400 white but renders inside a 551×57px box — an overflow/marquee element, not the display role. Rektorat Heavy at 60.48px is the real display treatment.
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.