At rhode, the philosophy is a short list of essentials that nourish the skin barrier and give an instant dewy glow.
Every control is a 40px pill outlined by a 1px INSET ring (box-shadow: inset 0 0 0 1px #67645e, 536 uses) rather than a border. Hover is a four-way directional clip-path wipe: four triangular hit zones meeting at the centre each re-clip a fill layer sitting at inset(0 0 100% round 40px), so it slides in from whichever edge the cursor crossed — clip-path .25s while the label recolours over a much slower color 1.25s. Anti-pattern: the real site sets outline: none; box-shadow: none on input focus and only tints the border to #a3a3a3, and a:focus duplicates a:hover; the recommended ring above is the fix.
The tracking logic is inverted: the big display face takes strong negative tracking (-4%) while every small uppercase UI size takes positive tracking (+2%). The micro display tag sets line-height below font size (10px on 7.5px) so it crops tight to the letterforms. There is no serif and no mono on the site — Rektorat Heavy is a heavy SANS. Substituted here: Archivo Black for Rektorat Heavy, Inter for Swiss.
Every neutral is warm-biased — #67645e is a greenish taupe, not a grey. Excluded from this palette as third-party or dead CSS: Foundation's unused .o-button red #cf000f (zero elements on the page), and the accessibility / review widget values #007aff, #363638 and #ebebf0.
Motion is slow and symmetric: the dominant recipe is all 0.7s cubic-bezier(.76,0,.24,1) (easeInOutQuart, 170 uses) with no overshoot anywhere, supported by opacity .3s ease-out, border-color .25s ease-in-out and cubic-bezier(.075,.82,.165,1). Brand keyframes are footer-logo-jello, spotwear-fall, clockwise, donut-rotate, draw, erase. No JS motion library — no GSAP, Lenis, Framer Motion or Lottie — and 1 reduced-motion block. No canvas, no WebGL, no grain: photography does the work.