---
version: alpha
name: "Rhode"
description: "Token-first design system reference for Rhode, Hailey Bieber's minimalist skincare brand — warm taupe surfaces, pill-shaped CTAs, lowercase wordmark, and editorial photography."

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f1f0ed"     # warm off-white panel, approx rgba(241,240,237) — Google format requires hex
  surface-dark: "#2b2825" # deep warm-charcoal hero overlay — approximated from dark photography tint

  # Text / ink
  ink: "#67645e"          # primary taupe — rgb(103,100,94); all body text, nav, labels
  ink-dark: "#000000"
  on-background: "#67645e"
  on-surface: "#67645e"

  # Brand accent
  primary: "#67645e"      # warm taupe — the one brand color: CTAs, borders, badges
  on-primary: "#ffffff"
  primary-container: "#f1f0ed" # tinted taupe wash for secondary surfaces

  # State / interaction
  text-hover: "#4a4844"   # darkened taupe on hover — approximated from rgb(103,100,94) → darkened
  focus-ring: "#67645e"
  border: "#67645e"       # 1px inset shadow used as outline system-wide
  border-light: "#acaaa5" # muted taupe border for dividers — rgb(172,170,165)

  # Semantic
  error: "#d41717"        # extracted from needsclick element

  # Shadow
  shadow-soft: "#67645e"  # inset ring shadows use this taupe at opacity; approximated opaque

typography:
  display-hero:
    fontFamily: "Swiss, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 176px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: 0px
  display:
    fontFamily: "Rektorat Heavy, Swiss, Helvetica Neue, Arial, sans-serif"
    fontSize: 77px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: -3px
  heading-section:
    fontFamily: "Swiss, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Swiss, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.40
    letterSpacing: 0px
  body-large:
    fontFamily: "Swiss, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0.43px
  body:
    fontFamily: "Swiss, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0.36px
  nav-link:
    fontFamily: "Swiss, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: 0.28px
  button-ui:
    fontFamily: "Swiss, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 700
    lineHeight: 1.00
    letterSpacing: 0.36px
  caption:
    fontFamily: "Rektorat Heavy, Swiss, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: -0.52px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 100px
  5xl: 123px

rounded:
  none: 0px
  sm: 8px
  md: 12px
  lg: 20px
  pill: 40px
  circle: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 13px 24px
  button-primary-hover:
    backgroundColor: "{colors.text-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 13px 24px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 13px 24px
    borderColor: "{colors.border}"
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 13px 24px
    borderColor: "{colors.border}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 24px
  card-product:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 16px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 16px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 16px
    borderColor: "{colors.focus-ring}"
  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  modal:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 32px
---

# Rhode Design System

## Overview

Rhode is the skincare brand Hailey Bieber built to be worn, photographed, and scrolled past on a phone at midnight. The site reflects exactly that brief: deeply cinematic photography — warm skin tones, glossy lips, close-cropped face shots — framed in a digital canvas that refuses to compete. The primary palette reduces to a single earthy taupe (`{colors.primary}`, rgb(103, 100, 94)) applied with monk-like restraint across every interactive element. Everything else steps back to cream and white so the imagery can breathe.

The brand name itself sets the tone. "rhode" appears in the navigation in all-lowercase — a brand decision that migrates into every text treatment on the site. There are no serif declarations, no high-contrast headline moments, no saturated accent colors. Instead, Rektorat Heavy appears only for editorial lowercase display headings (product lines, hero callouts) at tight negative tracking, while Swiss Regular handles every body, nav, and utility job at normal or loose tracking. The result is a typographic system that feels like a byline in a Vogue spread: editorial restraint with legible warmth.

Structurally, Rhode leans on pills. The rounded `{rounded.pill}` shape appears on every CTA button, carousel navigation circle, and notification badge. Where Glossier chose sharp-zero corners as its brand signature, Rhode chose the opposite pole: nothing sharp, nothing defensive. The border system reinforces this — instead of traditional CSS borders, `{colors.primary}` appears as a `1px inset box-shadow` ring (the most common shadow value extracted at 597 instances), giving outlines a softness that hairline borders can't achieve. The overall impression is plush, approachable luxury: tactile without being ornate, editorial without being cold.

**Key Characteristics:**
- Lowercase "rhode" wordmark and editorial headings — case is brand personality, not carelessness
- Single earthy taupe (`{colors.primary}`) as the entire chromatic system — no secondary accent
- Warm off-white surface (`{colors.surface}`) replacing pure white in panels and modals
- Swiss typeface at weight 400 for all nav, body, and utility — no bold except button labels
- Rektorat Heavy at weight 400 for editorial display moments — tight negative tracking `-3px`
- Pill-shape (`{rounded.pill}`) dominates — CTAs, carousels, sign-up buttons, all pills
- Box-shadow inset rings (`{colors.primary}`) replacing standard border declarations
- Generous letter-spacing on body (+0.43px on 21px copy) — warmth and legibility over tightness
- Modal-first email capture on homepage entry — relationship-building from the first interaction
- Dark, moody full-bleed hero photography — skin, light, warmth; zero clinical white-on-white
- Minimal motion: 0.25s and 0.7s durations, custom cubic-bezier `(0.76, 0, 0.24, 1)` for slide transitions

## Colors

### Primary
- **Rhode Taupe** (`{colors.primary}`): The load-bearing color of the entire system. Fills every CTA button, forms every inset border ring, tints badges, and appears as primary text. Not beige, not brown — exactly the warm-neutral that reads as "clean beauty with personality."
- **Off-White Surface** (`{colors.surface}`): The warm backdrop for modals, input fields (the 8px-radius email form), and tinted content panels. The distinction from pure white `{colors.background}` is subtle but critical — Rhode never reads clinically bright.
- **Pure White** (`{colors.background}`): Page canvas and product-card base. Used at full brightness only when photography or the taupe system provides enough visual warmth to offset it.

### Brand Accent
- **Rhode Taupe** (`{colors.primary}`): As noted, this is the brand's only accent. It appears as a CTA fill, as an inset ring border, as link color, and as badge fill. Because there is no secondary accent, its restraint is its power — every instance of taupe on a white or off-white surface signals action.

### Text States
- **Primary Text** (`{colors.ink}`): All body copy, nav links, form labels, price text — all rendered in the same taupe as the buttons. The visual system unifies ink and action color into one tone.
- **Muted Warm** (`{colors.border-light}`): Navigation category labels at reduced emphasis, secondary dividers, carousel step indicators. A lighter step of the same taupe family.
- **Dark Charcoal** (`{colors.surface-dark}`): Hero overlay text situations where photography is very dark and a near-black surface is needed for contrast.
- **Error** (`{colors.error}`): Extracted from cookie/consent widgets. The one saturated chromatic note in the system — a warm, skin-adjacent red that doesn't feel designed-in but rather tolerated.

## Typography

### Font Family
- **Primary Display**: `Rektorat Heavy` — used exclusively for editorial lowercase display headings (hero callout, hero product line names). Set at weight 400 with tracked negative spacing (`-3px` at 77px). Provides a thick, lowercase-letterpress quality distinct from the Swiss body system.
- **System Sans**: `Swiss` (Swiss 721, the Bitstream recut of Helvetica) — the universal workhorse for every body, nav, button, caption, and utility job. Fallback: `Helvetica Neue, Helvetica, Arial, sans-serif`.
- **OpenType Features**: Standard ligatures. Letter-spacing is additive (`+0.28px`–`+0.49px` on body and nav sizes) — a deliberate warmth signal, the typographic equivalent of breathing room.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Full-viewport editorial moments, brand campaign headlines at 176px |
| `display` | Rektorat Heavy product/collection callouts at 77px, lowercase, tight tracking |
| `heading-section` | Section titles, 40px Swiss weight 400 |
| `heading-sub` | Sub-section heads and feature labels, 32px Swiss weight 400 |
| `body-large` | Intro copy, product descriptions, 21px with open tracking |
| `body` | Standard body text, form content, 18px Swiss |
| `nav-link` | Navigation items, footer links, 14px Swiss |
| `button-ui` | All CTA labels, 18px Swiss weight 700 — the only use of bold in the system |
| `caption` | Rektorat Heavy product badges and small-format brand labels, 13px negative-tracked |

### Principles
- All-lowercase is not a bug — it's the brand voice. Never capitalize display headings or the wordmark.
- Swiss at weight 400 for nearly everything; weight 700 surfaces only in button labels. The system earns emphasis through scale, not bold.
- Positive letter-spacing on body copy (`+0.36px` at 18px, `+0.43px` at 21px) — separates Rhode from the tight-tracking luxury norms of competitors.
- Rektorat Heavy is a display-only guest; it never appears in body, nav, or button roles.
- Line height 1.40–1.50 throughout body sizes — generous, unhurried, scroll-friendly.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px (with sub-8 compressed values at 3.2px, 4.8px for tight UI chrome).

Rhode's spacing has two distinct moods: tight inner padding (11–16px in form fields, badge internals) and generous section breathing room (100–123px vertical padding on content zones). Mid values (24px, 28px) handle card padding and component internals. The system reads like editorial print: columns close, margins wide.

### Grid & Container
- Max content width: approximately 1440px with centered content columns
- Hero: full-bleed photography, no container, wordmark or headline overlaid on the image
- Product grid: 3–4 columns at desktop, 2 at tablet, 1 at mobile
- Footer: 3–4 column link grid on taupe or warm-off-white surface, full-bleed
- Content sections use 100–123px top/bottom padding to create editorial section cadence

### Whitespace Philosophy
- Whitespace signals quality. Rhode's section gaps are as wide as a magazine gutter — the product can't be rushed.
- Inside components, spacing is tight and controlled (8–16px inner padding); between components, space expands dramatically (100px+). This contrast creates the "calm premium" rhythm.
- Photography sections have zero padding constraints — images run edge-to-edge, letting the photography set the visual density.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Page canvas, hero photography overlays |
| Ring (Level 1) | `rgb(103,100,94) 0px 0px 0px 1px inset` | Every interactive element outline — buttons, inputs, carousels, swatches |
| Ring White (Level 1 alt) | `rgb(255,255,255) 0px 0px 0px 1px inset` | Selected state on dark/filled elements; swatch selection indicator |
| Elevated Card (Level 2) | `rgba(0,0,0,0.24) 0px 1px 2px 0px` | Subtle product card lift — rare, used with discretion |
| Modal (Level 3) | `rgba(0,0,0,0.25) 0px 0px 100px 0px` | Modal / overlay emergence — the deep scrim signal |
| Focus Ring | `{colors.focus-ring}` inset ring | Keyboard focus — same taupe as border, consistent system |

**Shadow Philosophy**: Rhode's depth system is almost entirely built on the 1px inset ring — a technique that functions as a border but feels softer, slightly interior. The taupe ring `{colors.shadow-soft}` appears 597 times in the computed styles, making it the most frequently deployed visual element on the site. Rather than casting shadows to signal elevation, Rhode signals selection and affordance through this ring. Drop shadows appear only at the edges of experience (modals, overlays) — where emergence from the page is genuinely needed.

## Shapes

The complete radius scale is in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed photography frames, video containers |
| `sm` | 8px | Input fields, email form, light card corners |
| `md` | 12px | Modal containers, product cards, video thumbnails |
| `lg` | 20px | Modal bottom sheet (20px top-left/right), dialog containers |
| `pill` | 40px | All CTA buttons, "Sign Up" pills, "Join the Waitlist" buttons, carousel nav |
| `circle` | 9999px | Circular carousel navigation buttons, avatar elements |

Rhode's shape system is bimodal: full-bleed zero-radius for photography containers and pill/circle for interactive elements. The middle values (8px, 12px) serve only utility UI (modals, inputs). There is no medium-radius button variant — a button is either a pill or it doesn't exist.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them.

### Button variants

- **`button-primary`** — filled taupe (`{colors.primary}`) pill at `{rounded.pill}`, white text in Swiss weight 700. The universal CTA: "SIGN UP", "ADD TO CART", "Join the Waitlist". All caps or sentence case depending on context.
- **`button-secondary`** — white fill with taupe inset ring border, same pill shape. Used for secondary actions or when sitting on a taupe-tinted surface.
- **Carousel nav circle** — transparent fill, taupe inset ring, `{rounded.circle}` — the 40px-radius circle that appears in carousels and slide controls.

### Cards

- **`card-product`** — white background, 12px radius, product photography flush to top, title and price below in `{colors.ink}` taupe. No border, no drop shadow in default state.
- **`card`** — off-white `{colors.surface}` panel for editorial callouts, testimonials, ingredient spotlights. 12px radius, 24px padding.

### Inputs

- Email and newsletter inputs use `{colors.surface}` (warm off-white) background with a taupe inset ring border and 8–12px radius. Focus state maintains the ring but adds `outline: rgb(0,0,0) auto 2px` for accessibility. No filled-in label animation — placeholder text fades on input.

### Badges / Tags

- Product badges use `{colors.primary}` fill, white text, 10px radius, lowercase Rektorat Heavy. The lowercase rendering of badge text is a deliberate brand signal — "new" not "NEW", aligning with the wordmark's casing etiquette.

### Navigation

- Sticky white nav bar, centered "rhode" wordmark in lowercase Swiss. Left: SHOP, ABOUT, STORIES. Right: SEARCH, ACCOUNT, CART. Nav link text in `{colors.ink}` taupe, 14px, weight 400, normal tracking.
- On mobile: condensed to wordmark-center, hamburger-left, cart-right.

## Do's and Don'ts

### Do
- Use `{colors.primary}` taupe as the one-and-only interactive color — buttons, borders, badges, text all from this single source
- Set all CTA buttons as pills (`{rounded.pill}`) — no square buttons, no outline-only variants with sharp corners
- Apply `{colors.primary}` as an inset ring for all bordered elements instead of standard CSS border
- Keep the "rhode" wordmark and all editorial display headings lowercase — case is non-negotiable brand identity
- Use Rektorat Heavy only for display-scale editorial moments; keep all other type in Swiss weight 400
- Default letter-spacing to positive values on body copy (+0.36px to +0.43px) — the warmth and legibility marker
- Fill hero zones with dark, skin-warm editorial photography — the photography is the brand, not the chrome
- Add generous vertical breathing room (100–123px) between page sections; compress only inside components
- Use `{colors.surface}` warm off-white (not pure white) as the modal and form-field background
- Reserve `{colors.error}` only for error states and consent widgets — it doesn't live in the brand palette

### Don't
- Don't introduce a secondary accent color — there is no pink, no coral, no pop. The brand is monochromatic taupe.
- Don't capitalize the wordmark or editorial display headings — "Rhode" in the logo is always "rhode"
- Don't use bold weight (700) outside of button labels — Swiss 400 is the only body weight
- Don't use traditional CSS borders; the system uses `1px inset box-shadow` with `{colors.primary}` as its border language
- Don't mix Rektorat Heavy into body or nav roles — it belongs to the display editorial register exclusively
- Don't add mid-radius (4–6px) buttons — the radius system is binary: pill for interactive, md/sm for containers
- Don't use pure white (`{colors.background}`) for modal interiors or form inputs — the warm `{colors.surface}` off-white is required
- Don't apply drop shadows to product cards in default state — the flat surface with inset ring is the brand position
- Don't add chromatic colors to CTAs, even for promotions — a colored button is off-brand
- Don't let letter-spacing go negative on body type; tight tracking belongs only to Rektorat Heavy display moments

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <375px | Single column, reduced display scale, wordmark 80px max |
| Mobile | 375–768px | Single column, 1-up product grid, nav condensed to hamburger |
| Tablet | 768–1040px | 2-column product grid, section spacing reduces to 64px |
| Desktop | 1040–1440px | 3–4 column grid, full nav bar, 100px section spacing |
| Large Desktop | >1440px | Maximum editorial scale, hero photography fills full width |

Rhode declared 41 breakpoints in computed styles — the density reflects Tailwind CSS arbitrary values and PrimeReact component responsiveness. Key structural breakpoints cluster around 768px, 1040px, and 1440px.

### Touch Targets
- All pill CTA buttons maintain minimum 44px tap height; padding ensures this across sizes
- Carousel nav circles are 40px diameter — meets the touch minimum
- Nav icons (search, account, cart) maintain 44×44px hit areas on mobile
- Product cards are fully tappable to product detail

### Collapsing Strategy
- **Nav**: Full horizontal link bar collapses to hamburger + wordmark + cart on mobile
- **Product grid**: 4-col → 2-col → 1-col; card images maintain portrait aspect ratio throughout
- **Hero**: Full-bleed photography persists on all breakpoints; text overlays resize and reposition
- **Section spacing**: 123px desktop → 64px tablet → 48px mobile — editorial pacing preserved at smaller scale
- **Modal**: Full-screen overlay on mobile; centered dialog with 20px top-radius on desktop

### Image Behavior
- Photography is the primary design element — images maintain full-bleed at every breakpoint
- Product photography serves square or portrait aspect ratios; no forced landscape cropping
- Hero photography uses dark, warm moody tones; no bright-studio alternates for mobile
- Lazy loading with smooth opacity fade-in at 0.25s ease

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (pure white page canvas)
- Surface: `{colors.surface}` (warm off-white for modals, forms, panels)
- Brand accent + text: `{colors.primary}` (#67645e taupe — buttons, borders, ink)
- Muted text: `{colors.border-light}` (#acaaa5 lighter taupe)
- On buttons: `{colors.on-primary}` (white)
- Error: `{colors.error}`
- Border method: 1px inset box-shadow in `{colors.primary}`, not CSS border
- Default radius: `{rounded.pill}` for CTAs, `{rounded.md}` for cards/modals

### Example Component Prompts

- "Create a Rhode-style pill CTA button: background `{colors.primary}` (#67645e), text `{colors.on-primary}` (#ffffff), font Swiss weight 700 18px letter-spacing 0.36px, border-radius `{rounded.pill}` (40px), padding 13px 24px. Hover state darkens background to `{colors.text-hover}` (#4a4844). Use box-shadow `rgb(103,100,94) 0px 0px 0px 1px inset` if an outlined variant is needed instead of a fill."
- "Design a Rhode product card on `{colors.background}` (#ffffff) with `{rounded.md}` (12px) radius. Portrait product photo fills the top edge-to-edge. Below: product name in Swiss 18px weight 400 `{colors.ink}`, price in Swiss 14px weight 400 same color, 'Add to Cart' pill button in `{colors.primary}`. 16px card padding below image."
- "Build an email capture modal for Rhode: `{colors.background}` (#ffffff) background with `{rounded.lg}` (20px top radius, 12px bottom), centered on a dark scrim `rgba(0,0,0,0.25) 0px 0px 100px 0px`. Content: lowercase 'welcome to rhode' heading in Swiss 21px weight 400 `{colors.ink}`, email input with `{colors.surface}` (#f1f0ed) fill, `{rounded.md}` (8px) radius, taupe inset ring border. 'SIGN UP' pill button in `{colors.primary}`."
- "Create a Rhode navigation bar: white background, centered lowercase 'rhode' wordmark in Swiss 14–16px weight 400 `{colors.ink}`. Left: SHOP, ABOUT, STORIES in Swiss 14px weight 400. Right: SEARCH, ACCOUNT, CART. Sticky on scroll. Bottom border: none — the nav floats cleanly over the hero photography."
- "Design a Rhode editorial hero section: full-bleed dark photography (skin-warm tones, close crop). Overlay text in the lower-left: lowercase editorial headline in Rektorat Heavy 77px weight 400 `{colors.on-primary}` (#ffffff), letter-spacing -3px. Below: pill CTA 'SHOP NOW' in `{colors.primary}` fill. No scrim, no gradient — trust the dark photography for contrast."
- "Style a Rhode product badge: `{colors.primary}` (#67645e) fill, white text, Rektorat Heavy 13px weight 400 letter-spacing -0.52px, `{rounded.sm}` (8–10px) radius, padding 4px 8px. Text in lowercase — 'new', not 'NEW'."

### Iteration Guide

1. Start with `{colors.background}` (#ffffff) page canvas and `{colors.surface}` (#f1f0ed) for any inset panel or modal — never pure white inside a form or dialog.
2. Apply `{colors.primary}` (#67645e) as the one-and-only accent: CTA fills, inset ring borders, body text. There is no second color.
3. Use Swiss weight 400 for all non-button text; weight 700 only for button labels. Never bold for headings.
4. Use Rektorat Heavy exclusively for display editorial moments at 50px+ with tight negative tracking (-3px).
5. Default all buttons to `{rounded.pill}` (40px radius). If it's interactive, it's a pill.
6. Replace CSS borders with `rgb(103,100,94) 0px 0px 0px 1px inset` box-shadow — softer and more on-brand.
7. Add positive letter-spacing to body copy: `+0.36px` at 18px, `+0.43px` at 21px.
8. Trust the photography. Don't brighten, don't add scrims, don't crop to square.
9. Keep casing lowercase for the wordmark, display headings, and badges — it's the brand's typographic identity.
10. When in doubt, add more whitespace. Rhode's section rhythm is editorial — 100px+ vertical gaps between content zones.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Rhode. Brand names and trademarks belong to their respective owners.