---
version: alpha
name: "Topicals"
description: "Token-first design system for Topicals — a Gen Z skincare brand built on clinical transparency, vibrant lilac warmth, and high-contrast confidence."

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f6f6f6"
  surface-warm: "#fdf5f0"  # warm cream used for editorial panels

  # Text / ink
  ink: "#131212"
  ink-secondary: "#3c3c3b"
  ink-muted: "#818181"

  # Brand accent
  primary: "#ff454e"      # Topicals coral-red — primary CTA and accent stamp
  on-primary: "#ffffff"
  primary-container: "#ffc7c9"  # soft blush container for badges and tinted surfaces

  # Interaction states
  primary-hover: "#d93b42"  # darkened coral on hover
  focus-ring: "#ff454e"

  # Semantic
  success: "#22c55e"
  warning: "#f59e0b"
  error: "#ef4444"

  # Borders
  border: "#e5e7eb"
  border-strong: "#131212"

  # Shadow tint
  shadow-soft: "#cfcac4"  # warm greige shadow from --base-color-accent CSS var

typography:
  display-hero:
    fontFamily: "Chalet, 'Chalet-LondonNineteenSixty', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 72px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -1.5px
  display:
    fontFamily: "Chalet, 'Chalet-LondonNineteenSixty', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 42px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -1.26px
  heading-section:
    fontFamily: "Chalet, 'Chalet-LondonNineteenSixty', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.9px
  heading-sub:
    fontFamily: "Alia-Chalet-LondonNineteenSixty, Chalet, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 0px
  body-large:
    fontFamily: "Alia-Chalet-LondonNineteenSixty, Chalet, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 21px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.63px
  body:
    fontFamily: "Alia-Chalet-LondonNineteenSixty, Chalet, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.38
    letterSpacing: 0px
  nav-link:
    fontFamily: "Alia-Chalet-LondonNineteenSixty, Chalet, 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  button-ui:
    fontFamily: "Chalet, 'Chalet-LondonNineteenSixty', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: -0.42px
  label-caps:
    fontFamily: "Chalet, 'Chalet-LondonNineteenSixty', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.36px
  caption:
    fontFamily: "Chalet, 'Chalet-LondonNineteenSixty', 'Helvetica Neue', Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: -0.42px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 30px
  2xl: 50px
  3xl: 60px
  4xl: 80px

rounded:
  none: 0px
  xs: 1px
  sm: 2px
  lg: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 20px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 20px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 20px
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 20px
  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.border-strong}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 20px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 20px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.sm}"
    padding: 20px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.xs}"
    padding: 4px 10px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.xs}"
    padding: 4px 10px
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 4px 10px
  badge-dark:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.background}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 4px 10px
---

# Topicals Design System

## Overview

Topicals occupies a precise gap in the skincare market that nobody had quite claimed before: clinical credibility delivered with the visual language of a Gen Z fashion brand. The homepage opens on near-pure white ({colors.background}) punctuated by a coral-red accent ({colors.primary}) that functions like a surgical stripe — present, purposeful, impossible to miss. Packaging photography dominates: the product tubes are the art, their clean white-and-teal surfaces doing the aesthetic heavy lifting that other brands outsource to illustration or lifestyle photography. The palette is intentionally restrained — white, off-white ({colors.surface}), near-black ({colors.ink}) and the coral stamp — because the brand's real color system lives on the product itself, not the website chrome.

The typography is the system's most distinctive decision. Topicals uses Chalet, a neo-grotesque rooted in the same mid-century Swiss lineage as Helvetica but with a softly eccentric personality — the 1960s variant (`Chalet-LondonNineteenSixty`) introducing subtle optical quirks that sit between utilitarian and warm. Headlines run at negative tracking (–1.26px at display scale) with line-heights around 1.2, giving the type a confident packed quality rather than editorial airiness. This is type that wants to be read quickly by someone who knows what they're looking for, not lingered over by someone browsing vaguely. At small sizes the system switches to `Alia-Chalet-LondonNineteenSixty` — a complementary variant that trades the geometric rigidity for a slightly more organic rhythm, used for body copy, nav, and UI labels.

What Topicals refuses to do is equally important: no gradients on UI surfaces, no deep drop shadows, no lifestyle photography as page chrome. The brand's authority comes from product efficacy messaging ("For skin flare-ups") and minimalist structural confidence. The 2px radius on primary interactive elements is the tightest possible departure from a sharp corner — a one-pixel aesthetic concession that reads nearly sharp from any distance. Combined with the coral CTA stamp and the colossal wordmark that floods the footer at full viewport width, the system communicates a brand that's clinically serious and aesthetically sure of itself at the same time.

**Key Characteristics:**
- Chalet and Alia-Chalet-LondonNineteenSixty as the sole type family — no serifs, no display alternates, no mixing typefaces
- Near-sharp 2px radius (`{rounded.sm}`) on all interactive elements — the system reads as flat-and-precise, not rounded
- Coral-red (`{colors.primary}`) as a single-use accent stamp — CTA buttons and key callouts only
- Off-white soft surface (`{colors.surface}`) as a secondary background for grid rows and card groups
- Negative letter-spacing at display sizes (–1.26px at 42px) — packs headlines into poster-tight blocks
- Oversized footer wordmark spanning nearly full viewport width — identity anchor, not a link
- Product tube photography as the primary visual language — clinical white packaging against neutral backgrounds
- 8px-based spacing scale compressed at the micro end (4px, 10px) and expansive at section scale (60px, 80px)
- Warm greige shadow tint (`{colors.shadow-soft}`) derived from the `--base-color-accent` CSS variable
- Tailwind + Radix + shadcn/ui framework stack — utility-first with accessible primitives
- Soft blush container color (`{colors.primary-container}`) for badges and tinted chip surfaces
- Dark ink-on-white and white-on-ink button inversion for hover — no intermediate states

## Colors

### Primary
- **Pure White** (`{colors.background}`): The page canvas. Every section defaults to white until deliberately broken. Topicals never drifts to warm paper or off-white as a background default.
- **Soft Off-White** (`{colors.surface}`): Used for secondary panel surfaces, grid backgrounds, and the footer underlay. Visible when white needs a quiet neighbor.
- **Near-Black** (`{colors.ink}`): All primary text, button labels on light surfaces, strong borders, and the negative-state button fills. Closer to a warm neutral than true black.

### Brand Accent
- **Topicals Coral** (`{colors.primary}`): The single chromatic accent in the system. Primary CTAs ("Add to bag", "Shop now"), focus rings, and occasional editorial highlights. Its presence is rationed — appearing once or twice per viewport, not scattered across the page.
- **Blush Container** (`{colors.primary-container}`): A desaturated soft-pink derived from the coral. Used for badge backgrounds, chip surfaces, and tinted containers — present without the visual weight of the full coral.

### Text States
- **Primary Ink** (`{colors.ink}`): All headings, body text, and active UI labels.
- **Secondary Ink** (`{colors.ink-secondary}`): Sub-labels, supporting copy, quieter body content.
- **Muted Ink** (`{colors.ink-muted}`): Metadata, inactive nav links, helper text, placeholder typography.

### Surface & Borders
- **Border Default** (`{colors.border}`): 1px hairline dividers on inputs, quiet structural separators in Tailwind gray-200.
- **Border Strong** (`{colors.border-strong}`): 1px solid near-black borders on outline buttons and focused inputs — graphic separation, not a soft line.

### Shadow
- **Shadow Greige** (`{colors.shadow-soft}`): The system's only shadow tint, referenced from the `--base-color-accent` CSS custom property. Used on the single box-shadow instance — light, warm, never black.

## Typography

### Font Family
- **Primary Display**: `Chalet` (1960s London variant: `Chalet-LondonNineteenSixty`) — self-hosted WOFF2. A neo-grotesque with subtle optical warmth at large sizes. Used for all headlines and button labels.
- **Primary Body / UI**: `Alia-Chalet-LondonNineteenSixty` — self-hosted WOFF2. A companion variant to Chalet with more organic rhythm. Used for body copy, nav, and sub-headings.
- **Bold Display**: `ChaletBook-Bold` — self-hosted WOFF2. Used for emphasized button labels at weight 500.
- **Fallback stack**: `'Helvetica Neue', Helvetica, Arial, sans-serif`
- **OpenType Features**: Standard ligatures; no stylistic alternates. Both variants rely on negative tracking rather than OpenType features for their character.

*Note: Chalet is a proprietary typeface. For external implementations, `Neue Haas Grotesk Display` or `Helvetica Now` provide the closest optical match; `Inter Tight` at weight 400 works as a web-safe fallback.*

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Landing page hero statements; oversized section anchors |
| `display` | Primary section headlines; product callout heads |
| `heading-section` | Sub-section titles; product group headers |
| `heading-sub` | Tertiary headings; card titles; ingredient callouts |
| `body-large` | Intro paragraphs; product description leads |
| `body` | Standard reading copy; nav links; modal content |
| `nav-link` | Top navigation and footer links |
| `button-ui` | All CTA labels; form submit buttons |
| `label-caps` | Uppercase UI labels; product metadata; category markers |
| `caption` | Price sub-labels; legal text; form helper messages |

### Principles
- Chalet at weight 400 is the entire system's visual character — no bold display headlines, no weight escalation for emphasis beyond 500. Topicals communicates urgency through size and negative tracking, not heaviness.
- Negative letter-spacing at display scale (–1.26px at 42px, –0.9px at 30px) locks headlines into tight poster-blocks that read as confident and compact.
- The body variant (`Alia-Chalet-LondonNineteenSixty`) introduces just enough irregularity to feel human at reading sizes without undermining the clinical precision of the display type.
- Uppercase is reserved for `label-caps` UI labels — category markers, product tags, "SOLD OUT" states. Buttons and headings are sentence case.
- Line-height at display sizes (1.0–1.2) keeps headlines dense; body text opens to 1.38 for comfortable reading.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px (with 4px as the compact sub-unit).

Topicals uses a dual-rhythm spacing approach: fine spacing (4px, 8px, 10px, 16px, 20px) within components and product cards, and wide section spacing (50px, 60px, 80px) for vertical breathing room between page zones. The mid-range is intentionally thin — 30px appears for tight content panels but the system generally leaps from 20px directly to 50px+.

### Grid & Container
- Max content width: approximately 1280px
- Tailwind breakpoints: 550px, 600px, 640px, 768px, 1024px, 1280px, 1536px
- Product grid: typically 3–4 columns at desktop, 2 at tablet, 1 at mobile
- Hero: full-bleed photography or color block with centered content
- Footer: oversized wordmark spanning full container width; link grid below

### Whitespace Philosophy
- White space is structural oxygen, not decoration. Topicals gives product photography room to read by keeping chrome sparse.
- Section breaks use large vertical jumps (60–80px) so each content zone reads as a discrete editorial moment.
- Inside product cards and ingredient panels, spacing compresses to 10–20px — efficiency over airy layout.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page canvas, all text containers, default state |
| Minimal Lift (Level 1) | `rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px` | Single modal / overlay instance |
| Focus Ring | `{colors.focus-ring}` outline | Accessible focus on interactive elements |

**Shadow Philosophy**: Topicals is functionally shadow-free. The single shadow instance in the data appears on an overlay or floating modal — not on cards, buttons, or page sections. The absence of depth reinforces the brand's clinical aesthetic: products are photographed flat, surfaces are flat, UI is flat. The warm greige CSS variable (`--base-color-accent: #cfcac4`) is available in the token system for tinted shadow use, but it's rarely exercised. The brand conveys premium through restraint, not materiality.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed surfaces, section dividers, layout containers |
| `xs` | 1px | Form inputs — the most minimal departure from sharp |
| `sm` | 2px | Buttons, badges, interactive chips — the workhorse radius |
| `lg` | 16px | Occasional promotional modal and overlay panel |
| `pill` | 9999px | Not used in the primary system; reserved for specialty variants |

Topicals uses `{rounded.sm}` (2px) as its default radius — nearly sharp, but not quite. This is a deliberate positioning: the brand is precise enough to be clinical but warm enough to be approachable. Everything interactive gets 2px; everything structural stays at 0px. The system consciously avoids mid-range radii (8–16px) that would read as consumer-app rounded and pull away from the brand's clinical register.

## Components

The complete component spec lives in the `components:` token block above.

### Button variants

- **`button-primary`** — Coral-red (`{colors.primary}`) fill, white text, 2px radius, 10px 20px padding. The site's primary CTA signal. Text is Chalet weight 500. Hover state (`{components.button-primary-hover}`) darkens the coral to `{colors.primary-hover}`.
- **`button-secondary`** — White fill, near-black text, 2px radius. Sits on colored surfaces; hover inverts to near-black fill with white text (`{components.button-secondary-hover}`).
- **`button-outline`** — Transparent fill, 1px solid near-black border, 2px radius. Used for secondary actions, "Shop all" style CTAs.
- **`button-ghost`** — No border, no fill, muted ink text. Navigation utility and quiet tertiary actions.

### Cards
Product cards use `{colors.surface}` background with `{rounded.sm}` radius and 20px padding. Internal product photography sits edge-flush to the card top; metadata (product name, price) sits below in `{typography.body}` and `{typography.caption}`. No shadow on cards — product imagery provides all the visual weight.

### Inputs
Email and text inputs use a 1px solid `{colors.border-strong}` border, `{rounded.xs}` radius (1px), and 4px 10px padding. Focus state swaps the border to `{colors.focus-ring}` coral. The ultra-tight padding and near-zero radius keeps inputs clinical and legible. Background stays `{colors.background}` white at all times.

### Badges / Tags
- **Standard badge** (`{components.badge}`): Blush `{colors.primary-container}` background, near-black text, 2px radius. Ingredient callouts, product category tags, "new" markers.
- **Dark badge** (`{components.badge-dark}`): Near-black `{colors.ink}` fill, white text. Used for "SOLD OUT", high-contrast status indicators.

### Navigation
- Top nav: white background, centered Topicals wordmark, left-aligned account/search/cart icons. Sticky on scroll.
- Links: 16px Alia-Chalet weight 400, near-black text, no underline by default.
- Hover: color transitions to coral or underline appears — 0.2s linear.
- Mobile: hamburger collapse with full-screen overlay menu.

## Do's and Don'ts

### Do
- Use Chalet for all display and button type — the typeface is the brand identity
- Apply `{rounded.sm}` (2px) to every interactive element — buttons, inputs, badges
- Reserve `{colors.primary}` coral exclusively for primary CTAs and focus rings — one accent, one job
- Let product photography carry the visual weight — keep page chrome minimal and neutral
- Use negative letter-spacing at display sizes (`-1.26px` at 42px) — the tight pack is the brand's typographic signature
- Default to `{colors.background}` white for section backgrounds; use `{colors.surface}` only for deliberate panel breaks
- Keep body copy in Alia-Chalet at 16px weight 400 with 1.38 line-height for comfortable clinical readability
- Use `{colors.border-strong}` (near-black) 1px borders for form inputs and outline buttons — graphic, not soft
- Apply the warm greige shadow (`{colors.shadow-soft}`) sparingly for floating elements like modals
- Pace sections with 60–80px vertical spacing — let each content zone breathe as a discrete moment

### Don't
- Don't add gradients to UI surfaces — the system is entirely flat color
- Don't use rounded corners larger than 2px on buttons or interactive elements — `{rounded.sm}` is the ceiling
- Don't introduce serif type anywhere — the clinical credibility lives in the grotesque
- Don't scatter `{colors.primary}` coral across secondary actions, labels, or decorative elements
- Don't apply drop shadows to cards or product tiles — flatness is non-negotiable for this brand
- Don't use bold display weights (700+) for headlines — Chalet at 400 with tight tracking is the brand voice
- Don't substitute warm paper tones for `{colors.background}` — Topicals is pure white, not cream
- Don't use pill radius (`{rounded.pill}`) for primary buttons — the sharp-ish 2px is the signature
- Don't add lifestyle photography or illustration as background fills — product tubes are the visual focus
- Don't break the single-typeface system by introducing a contrasting display or serif face for "personality"

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <550px | Single column, hero stacks, nav collapses to hamburger |
| Mobile | 550–640px | Single column, 2-up product grid begins |
| Tablet Small | 640–768px | 2-up grid, sub-nav appears, section spacing reduces |
| Tablet | 768–1024px | 2–3 column product grid, hero two-column |
| Desktop | 1024–1280px | 3–4 column product grid, full navigation bar |
| Large Desktop | ≥1280px | 1280px container max, oversized wordmark footer at full width |

### Touch Targets
- Buttons: minimum 44px tap height; 10px 20px padding on mobile
- Nav links: 44px minimum tap height with generous vertical padding
- Product cards: full card is the tap target to product detail

### Collapsing Strategy
- **Nav**: Horizontal link bar collapses to hamburger below 768px; full-screen overlay menu on open
- **Hero**: Two-column hero stacks to single column on mobile; display headline scales from 72px desktop to 42px mobile
- **Product grid**: 4-col → 2-col → 1-col progressively; card structure and spacing maintained
- **Footer wordmark**: Remains oversized but scales proportionally; never collapses to a small logo
- **Section spacing**: 80px desktop → 50px tablet → 30px mobile; preserves the breathing-room feel at reduced scale

### Image Behavior
- Product tube photography maintains aspect ratio across breakpoints
- No art direction changes on mobile — the same clinical white-packaging visual language adapts to portrait orientation
- Background images in hero zones may crop; product photography stays centered

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` — pure white
- Text: `{colors.ink}` — near-black
- Secondary Text: `{colors.ink-secondary}`
- Muted Text: `{colors.ink-muted}`
- Brand Accent / CTA: `{colors.primary}` — Topicals coral
- Hover Coral: `{colors.primary-hover}`
- Blush Container: `{colors.primary-container}`
- Panel Surface: `{colors.surface}`
- Border: `{colors.border}`
- Strong Border: `{colors.border-strong}`

### Example Component Prompts

- "Create a Topicals-style hero section on pure white (`{colors.background}`). Headline in Chalet at 72px, weight 400, line-height 1.1, letter-spacing -1.5px, color `{colors.ink}`. Below it a supporting line in Alia-Chalet at 21px, weight 400, line-height 1.2. Primary CTA: coral (`{colors.primary}`) background, white text, 14px Chalet weight 500, 2px radius, 10px 20px padding. Product tube photography floats right on the white canvas — no background fill."
- "Design a Topicals product card on `{colors.surface}` (`#f6f6f6`). Product photo edge-flush to top, 2px radius on the card. Below: product name in Chalet 21px weight 400, tracking -0.63px; price in Alia-Chalet 16px weight 400; an 'Add to bag' button in coral (`{colors.primary}`), 14px Chalet weight 500, 2px radius, 10px 20px padding. No shadow."
- "Build a Topicals email signup input. White background, 1px solid near-black border (`{colors.border-strong}`), 1px radius, 4px 10px padding, Alia-Chalet 16px weight 400, ink text. Focus state: border color shifts to coral (`{colors.focus-ring}`), outline: 3px none. Submit button adjacent: coral fill, white text, 2px radius, same padding."
- "Create a Topicals-style ingredient badge in blush (`{colors.primary-container}`), near-black text, 12px Chalet weight 500, 2px radius, 4px 10px padding. Alongside it a dark badge: ink fill (`{colors.ink}`), white text, same type and radius. Both use `{typography.caption}` sizing."
- "Design a Topicals footer with `{colors.surface}` background. Center an oversized Topicals wordmark in Chalet at ~200px spanning full container width, near-black. Below: four-column link grid in Alia-Chalet 16px weight 400, muted ink (`{colors.ink-muted}`), no underlines by default. Bottom row: legal copy in 12px caption weight 500 with light tracking."
- "Build a Topicals navigation bar — white background, sticky. Centered wordmark in Chalet weight 400, sized to ~16px height for nav scale. Left side: hamburger icon (mobile) or text links in Alia-Chalet 16px weight 400, ink color. Right side: search, account, cart icons. 1px bottom border in `{colors.border}` to separate from page. On hover, nav links transition to coral (`{colors.primary}`) over 0.2s linear."

### Iteration Guide

1. Start with a pure white (`{colors.background}`) canvas — Topicals never drifts warm or off-white as a background default.
2. Chalet weight 400 with negative tracking at display scale is the brand voice. Increase font size before increasing weight.
3. Coral (`{colors.primary}`) appears exactly once per primary interaction zone — one CTA per section, not scattered.
4. All interactive elements take `{rounded.sm}` (2px) radius. Never round buttons further than this.
5. Product photography is the design — keep chrome neutral so packaging can lead.
6. Shadow-free by default. The one shadow (`rgba(0, 0, 0, 0.1)`) is reserved for floating overlays only.
7. Two type variants (Chalet for display/buttons, Alia-Chalet for body/UI) — stay within the family, never add a third face.

---

## 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 Topicals. Brand names and trademarks belong to their respective owners.