---
version: alpha
name: Béis
description: A single-typeface travel retail brand where Montserrat's graduated weight hierarchy pairs elevated burgundy-wine CTAs with near-black ink on white — a system that reads as chic and functional in equal measure.

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f9f9f9"           # hover/focus tinted panels, near-white alternates

  # Ink / text
  ink: "#1b1b1b"               # near-black headings and body text
  ink-secondary: "#707070"     # supporting copy, secondary labels, captions /* estimated */
  ink-muted: "#aaaaaa"         # placeholder text, disabled states /* estimated */
  on-ink: "#ffffff"            # text on dark surfaces

  # Brand accent — Béis's signature burgundy-wine
  primary: "#8a2a2b"           # CTA fill, primary buttons, active link hover
  on-primary: "#ffffff"        # text on primary CTA
  primary-hover: "#6d2122"     # darkened CTA on hover /* estimated from hover: rgb(103,37,37) */

  # Secondary accent
  accent-sky: "#6aaae4"        # secondary highlight, promotional badges, info states
  on-accent-sky: "#1b1b1b"     # text on sky accent

  # Semantic / status
  success: "#32ae88"           # success state, confirmed order border
  error: "#c0392b"             # form validation errors /* estimated */

  # Borders
  border: "#d8d8d8"            # card edges, dividers, input outlines
  border-input: "#707070"      # input field border, stronger rule
  border-brand: "#8a2a2b"      # branded button border, outlined primary

  # Shadow tints
  shadow-soft: "#000000"       # was rgba(0,0,0,0.2) — Google format requires hex
  shadow-ambient: "#999999"    # was rgb(153,153,153) — diffuse panel shadow

typography:
  display-hero:
    fontFamily: "Montserrat, Arial, Helvetica Neue, sans-serif"
    fontSize: 38px
    fontWeight: 700
    lineHeight: 1.24
    letterSpacing: 0px
    fontFeature: "uppercase"
  display:
    fontFamily: "Montserrat, Arial, Helvetica Neue, sans-serif"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.3
    letterSpacing: 0px
  heading-section:
    fontFamily: "Montserrat, Arial, Helvetica Neue, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Montserrat, Arial, Helvetica Neue, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: 0px
  body-large:
    fontFamily: "Montserrat, Arial, Helvetica Neue, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.16px
  body:
    fontFamily: "Montserrat, Arial, Helvetica Neue, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.86
    letterSpacing: 0px
  button-ui:
    fontFamily: "Montserrat, Arial, Helvetica Neue, sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.13px
  nav-link:
    fontFamily: "Montserrat, Arial, Helvetica Neue, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: 0px
  caption:
    fontFamily: "Montserrat, Arial, Helvetica Neue, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0.12px
  label-ui:
    fontFamily: "Montserrat, Arial, Helvetica Neue, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 2.64
    letterSpacing: 0.144px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 32px
  3xl: 40px
  4xl: 64px

rounded:
  none: 0px
  sm: 2px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 32px
    borderColor: "{colors.border-brand}"
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  button-outline:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.border-brand}"
    padding: 10px 32px
  button-outline-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary-hover}"

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 0px
  button-ghost-hover:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 16px

  card-product:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-large}"
    rounded: "{rounded.none}"
    borderColor: "{colors.border-input}"
    padding: 10px 12px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    borderColor: "{colors.primary}"

  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  badge-accent:
    backgroundColor: "{colors.accent-sky}"
    textColor: "{colors.on-accent-sky}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 12px 32px

  tag:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 5px 12px
---

# Béis Design System

## Overview

Béis is the rare travel retail brand that manages to feel expensive and approachable at the same time. The design system achieves this through a disciplined restraint: a single typeface (Montserrat) calibrated entirely through weight, a near-black canvas (`{colors.ink}`) laid over pure white (`{colors.background}`), and a signature burgundy-wine CTA (`{colors.primary}`) that brings warmth without veering into luxury-cold or fast-fashion-loud. The brand's chromatic thesis is straightforward — near-neutral UI chrome with one distinctive accent anchored in a sophisticated, slightly unexpected hue. It reads the way a well-designed carry-on looks: clean, purposeful, quietly elevated.

The typography strategy is a master class in doing more with less. Montserrat owns every level of the hierarchy — display, body, label, caption — differentiated only by weight. The biggest headlines run at 700 weight in uppercase, drawing from `{typography.display-hero}`; supporting copy uses Regular at 400 for reading comfort; UI labels and buttons land at SemiBold 600 with tight 0.13px tracking. There is no serif counterpart, no display-only face, no secondary family. The single-family approach keeps the system lean while the weight range (400 through 700) provides enough differentiation to feel considered, not lazy.

Béis's visual signature is its shape language: almost nothing is rounded. Buttons carry a nearly imperceptible 2px radius (`{rounded.sm}`), cards are fully square (`{rounded.none}`), and the only curves in the system are pill-radius chips for tags and badges. This hard-edged geometry communicates a directness that matches the brand's promise — functional gear, no fuss. The burgundy `{colors.primary}` floating on that geometry is the brand's warmth budget, deployed economically on every CTA.

**Key Characteristics:**
- Single typeface system: Montserrat across all roles, differentiated by weight (400/500/600/700) rather than family shifts
- `{typography.display-hero}` runs uppercase at 38px / 700 weight — confident, not delicate
- `{colors.primary}` (`#8a2a2b`) is the brand's sole UI accent — a warm burgundy-wine that registers as premium without tipping into luxury-cold
- Near-black ink `{colors.ink}` (`#1b1b1b`) on white `{colors.background}` — neutral field that lets product photography and the accent color do the tonal work
- `{colors.accent-sky}` (`#6aaae4`) serves secondary roles — informational callouts, promotional badges — never competing with the primary
- Border radius is near-flat: `{rounded.sm}` (2px) for interactive elements, `{rounded.none}` for cards; only `{rounded.pill}` breaks the geometry, reserved for filter chips and category tags
- Tight uniform 0.3s ease transitions on all interactive elements — deliberate, not snappy
- Spacing built around a 10–12px base, not the typical 8px grid — gives the UI a slightly denser, more editorial feel
- Product cards are full-bleed with no resting shadow; elevation appears only on modals and floating panels
- `{colors.success}` teal (`#32ae88`) for confirmations; a subtle, non-generic color choice that fits the brand temperature
- 29 responsive breakpoints — an unusually granular mobile-first approach spanning from 330px to 1600px
- Link hover states shift from `{colors.ink}` to `{colors.primary}` — the burgundy serves both CTA and hover role

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The primary canvas. Pure white throughout — no off-white or cream tinting.
- **Near-White** (`{colors.surface}`): Subtle panel fill and hover tint, barely distinguishable from the canvas.

### Ink / Text
- **Near-Black** (`{colors.ink}`): All primary text, headings, and default link color. `#1b1b1b` — fractionally softer than pure black.
- **Mid-Gray** (`{colors.ink-secondary}`): Supporting copy, caption text, secondary navigation labels.
- **Muted** (`{colors.ink-muted}`): Placeholder text and disabled UI states.

### Brand Accent
- **Burgundy CTA** (`{colors.primary}`): Béis's signature UI color. Applied to primary buttons, bordered CTAs, and link hover states. The entire chromatic personality of the brand lives here.
- **Primary Hover** (`{colors.primary-hover}`): A darkened step on the same hue — slightly deeper on hover, no hue shift.
- **Sky Accent** (`{colors.accent-sky}`): A clear, slightly desaturated blue. Used for secondary promotional badges, informational chips, and highlights that shouldn't compete with the burgundy CTA hierarchy.

### Borders
- **Divider** (`{colors.border}`): Standard card edges, section dividers, and dropdown lines.
- **Input Border** (`{colors.border-input}`): Stronger rule for form fields — darkened to improve legibility of interactive edges.
- **Brand Border** (`{colors.border-brand}`): Matches the primary; used for outlined button strokes and active input focus rings.

### Semantic
- **Success Teal** (`{colors.success}`): Purchase confirmation and success notification borders — a warm, uncommon teal rather than generic green.
- **Error** (`{colors.error}`): Form validation error states.

### Shadow Tints
- `{colors.shadow-soft}` (`#000000`): Stand-in for modal drop shadows (original `rgba(0,0,0,0.2)` flattened per format).
- `{colors.shadow-ambient}` (`#999999`): Diffuse halo shadow on floating panels.

## Typography

### Font Family
- **Primary (all roles)**: `Montserrat`, with fallbacks `Arial, Helvetica Neue, sans-serif`. Self-hosted via woff2 in multiple weights. A geometric sans with humanist proportions — clean enough for UI, warm enough for brand headlines.
- **Weight strategy**: Four-tier. Regular (400) for body and reading copy; Medium (500) for navigation links; SemiBold (600) for button labels and UI; Bold (700) for all display and heading levels.
- **Transform**: Display headlines run uppercase (`text-transform: uppercase`). Body and nav copy stays sentence-case.

### Hierarchy

The complete type scale is declared in the `typography:` token block above. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 38px Bold / uppercase — hero section headlines, page titles |
| `display` | 28px Bold — secondary feature headlines, editorial callouts |
| `heading-section` | 24px SemiBold — major section headers, category openers |
| `heading-sub` | 16px Bold — product names, in-card headings, subsection titles |
| `body-large` | 16px Regular / 0.16px spacing — feature copy, product descriptions |
| `body` | 14px Regular / 1.86 lh — standard body paragraphs, fine print reading copy |
| `button-ui` | 13px SemiBold / 0.13px — all CTA and button text |
| `nav-link` | 14px Medium — navigation links, site-level wayfinding |
| `caption` | 12px Bold / 0.12px — badges, tags, small UI labels |
| `label-ui` | 14px Regular / 2.64 lh — form labels, dropdown options |

### Principles
- **One typeface, full range**: Montserrat earns its keep across every level — the weight progression from 400 to 700 provides visual hierarchy without introducing font-stack complexity.
- **Bold commands; regular reads**: Anything the user needs to act on (buttons, headings, badges) gets 600–700 weight. Anything the user reads through (descriptions, navigation, body) stays at 400–500.
- **Uppercase is a display-only privilege**: Uppercase appears at `{typography.display-hero}` and in `{typography.caption}` badges. Body copy, nav links, and buttons stay sentence-case — uppercase would tip the system toward aggressive.
- **Tight spacing at label scale**: Button and caption text carry 0.12–0.16px letter-spacing — just enough to aid legibility at small sizes without creating a labeled-font look.

## Layout

### Spacing System
The full spacing scale is in the `spacing:` token block above. Base unit: 10–12px.

Béis runs slightly denser than an 8px grid system — the predominant atoms are 10px and 12px, with 32px (`{spacing.2xl}`) as the main section rhythm value. This density is consistent with a product catalog: cards and details pack more efficiently without feeling cramped.

### Grid & Container
- Max content width: ~1600px (top breakpoint)
- Core breakpoints: 768px (mobile / tablet boundary), 992px (tablet / desktop), 1200px (desktop / large)
- Product catalog uses a multi-column grid that collapses from 4 columns (desktop) to 2 (tablet) to 1 (mobile)
- Navigation uses a sticky top bar with a full-width dropdown panel on desktop, off-canvas slide-in on mobile

### Whitespace Philosophy
- Section rhythm is compact compared to premium-aspirational peers — content is dense, not airy
- Photography panels are typically full-bleed with no internal padding; typography overlays sit inset via absolute positioning
- Form elements and product metadata use tighter internal spacing (`{spacing.md}` = 12px) than editorial sections

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Product cards at rest, standard sections |
| Subtle (Level 1) | `{colors.shadow-ambient} 0px 2px 10px -3px` | Floating panels, dropdowns at rest |
| Card (Level 2) | `{colors.shadow-soft} 0px 4px 8px 0px` (was rgba 0.2) | Modals, product quick-view, cart drawer |
| Elevated (Level 3) | `{colors.shadow-soft} 0px 0px 18px 0px` | Sticky navigation on scroll |
| Focus Ring | `{colors.border-brand}` 1px outline | Keyboard focus on buttons and inputs |

**Shadow Philosophy**: Béis's elevation system is functionally flat. Product cards carry no resting shadow — the catalog reads clean, with images floating on white. Depth only appears when something needs to float above the page: dropdowns, modals, and sticky headers. Shadows are standard black-tinted drops (no brand-tinted haze), keeping the system pragmatic rather than expressive.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Product cards, image frames, editorial sections |
| `sm` | 2px | Buttons (primary, outline), cookie preference dialogs |
| `pill` | 9999px | Category filter chips, promotional tags, badge labels |

Béis's shape language is essentially binary: near-square for structural elements and full pill for decorative tagging. The 2px button radius is so minimal it reads as squared-off in practice — a clean, non-fussy edge that keeps buttons looking purposeful. Pill chips provide a visual counterpoint and help category tags feel approachable. There is no mid-range radius (8–16px); the system jumps directly from the near-flat to the fully curved.

## Components

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

### Button Variants
- **`button-primary`** — Burgundy fill (`{colors.primary}`) with 2px radius, 13px SemiBold type, and a matching brand border. The primary conversion action across the entire system; used for add-to-cart, checkout, and email sign-up.
- **`button-outline`** — White fill with burgundy border and text. Used for secondary actions: variant selectors, filter confirms, secondary CTAs alongside a primary.
- **`button-ghost`** — No fill, no border. Ink-colored nav-weight text. Used for tertiary links, "view all" labels, and editorial navigation.

### Cards
- **`card-product`** — Full-bleed image with no resting shadow and no radius. Typography and price appear below the image in a clean typographic block. Color swatches (when present) rendered as small pill chips inline.
- **`card`** — Standard padded card with `{spacing.lg}` internal padding for editorial content, feature callouts, and account tiles.

### Inputs
- `{components.input}` carries a 1px `{colors.border-input}` rule on all four sides. On focus, the border shifts to `{colors.primary}` (burgundy) — a crisp, branded focus signal without an additional outline layer.

### Badges / Tags
- **`badge`** — Neutral surface fill on pill shape; used for "New," "Limited," and category labels in neutral contexts.
- **`badge-accent`** — Sky-blue fill (`{colors.accent-sky}`) for promotional callouts, sale flags, and featured product signals.
- **`tag`** — Soft surface fill for filter chips and category selectors; uses caption-weight type.

### Navigation
- Sticky top bar at desktop; off-canvas drawer at mobile breakpoints. Background stays `{colors.background}` white with a subtle drop shadow on scroll (Level 3 elevation). Link hover fires `{colors.primary}` color shift in 0.3s ease.

## Do's and Don'ts

### Do
- Use `{colors.primary}` exclusively for primary CTAs, active input borders, and link hover states — protect its signal value
- Run display text in uppercase via `{typography.display-hero}` — the transformation is part of the brand's authority
- Keep product cards at `{rounded.none}` — the squared edges are intentional functional geometry
- Apply `{rounded.pill}` only to tags, chips, and badges — never to buttons, cards, or content containers
- Use `{colors.accent-sky}` for secondary-tier promotional signals (featured, new in category) that shouldn't compete with `{colors.primary}` CTAs
- Set all interactive transitions at 0.3s ease — consistent, deliberate pace across the system
- Build form inputs with `{colors.border-input}` borders that shift to `{colors.border-brand}` on focus
- Keep typography single-family throughout; weight is the differentiator, not face changes

### Don't
- Don't introduce mid-range border radius (4–16px) — the system is binary (`{rounded.sm}` for structure, `{rounded.pill}` for chips)
- Don't use `{colors.accent-sky}` as a primary CTA background — it dilutes the burgundy CTA hierarchy
- Don't add a serif or display typeface — Montserrat's weight range is intentionally sufficient
- Don't tint shadows with brand color — the shadow system uses neutral black/gray opacity drops only
- Don't add resting drop shadows to product cards — the flat-card catalog grid is a deliberate choice
- Don't use uppercase transforms below `{typography.display-hero}` or `{typography.caption}` — body and nav copy must stay sentence-case
- Don't use more than two weights in a single UI component — avoid pairing 400 and 700 side-by-side; step through 500 or 600
- Don't override `{colors.ink}` default links with anything other than `{colors.primary}` on hover — no intermediate states

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile XS | <370px | Minimal layout; single-column; compressed nav |
| Mobile | 370–767px | Single-column product grid; off-canvas nav drawer |
| Tablet | 768–991px | Two-column product grid; partial navigation visible |
| Desktop Small | 992–1199px | Three-column grid; full sticky nav; mega-menu dropdowns |
| Desktop | 1200–1499px | Four-column product grid; full catalog browsing |
| Large Desktop | 1500–1600px | Max-width container locked; generous outer margins |

Béis maintains 29 granular CSS breakpoints — an unusually fine-grained mobile-first implementation that adjusts layout at 330px, 370px, 400px, 425px, 426px, 500px, 530px, 550px, 575px, 600px, 640px, 767px, 768px, 800px, 896px, 990px–992px, 1024px–1025px, 1080px, 1100px, 1199px–1200px, 1366px, 1460px, 1500px, and 1600px. This density reflects a product catalog where breakpoint control over grid columns and card aspect ratios is critical.

### Touch Targets
- All interactive elements (buttons, nav items, product cards) meet a minimum 44×44px touch target at mobile breakpoints
- Filter chips and badge tags use pill shape with `{spacing.md}` (12px) vertical padding for comfortable thumb reach

### Collapsing Strategy
- Product grid collapses: 4-col → 3-col → 2-col → 1-col across breakpoints
- Navigation transitions to off-canvas drawer below 768px; sticky bar persists on scroll at all sizes
- Hero typography scales down from `{typography.display-hero}` proportionally; uppercase treatment preserved at all sizes
- Section whitespace tightens at mobile: major section gaps reduce from `{spacing.4xl}` to `{spacing.2xl}`

### Image Behavior
- Product images are square-aspect-locked via CSS `aspect-ratio: 1/1` at all sizes
- Hero banners switch from fixed-height to aspect-ratio-driven crops below 768px
- All images are lazy-loaded; the site uses Element Plus/UI component framework for carousel and gallery behaviors

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (#ffffff)
- Text: `{colors.ink}` (#1b1b1b)
- Brand accent: `{colors.primary}` (#8a2a2b)
- Secondary text: `{colors.ink-secondary}` (#707070)
- Border: `{colors.border}` (#d8d8d8)
- CTA: `{colors.primary}` — also used for link hover states
- Sky accent: `{colors.accent-sky}` (#6aaae4)

### Example Component Prompts

- "Build a Béis-style product card using `{colors.background}` white, no border radius (`{rounded.none}`), a full-bleed square-aspect product image, product name in `{typography.heading-sub}` (Montserrat 700, 16px), price in `{typography.body}` (Montserrat 400, 14px, `{colors.ink}`), and an Add to Cart button using `{components.button-primary}` (burgundy `{colors.primary}`, 2px radius, SemiBold 13px, 10px 32px padding). No card shadow."
- "Create a Béis-style primary CTA button: background `{colors.primary}` (#8a2a2b), text `{colors.on-primary}` (#ffffff), font `{typography.button-ui}` (Montserrat SemiBold 13px, 0.13px spacing), `{rounded.sm}` (2px radius), padding 10px 32px, 1px solid `{colors.border-brand}` border. On hover, shift background to `{colors.primary-hover}` (#6d2122) with 0.3s ease transition."
- "Build a Béis-style category filter strip using `{components.tag}` pill chips: `{colors.surface}` (#f9f9f9) fill, `{colors.ink-secondary}` text, `{typography.caption}` (Montserrat Bold 12px, 0.12px spacing), `{rounded.pill}` (9999px radius), 5px 12px padding. Active chip: `{colors.primary}` fill, `{colors.on-primary}` text, same radius and padding."
- "Design a Béis-style promotional badge using `{components.badge-accent}`: `{colors.accent-sky}` (#6aaae4) background, `{colors.on-accent-sky}` (#1b1b1b) text, Montserrat Bold 12px (`{typography.caption}`), `{rounded.pill}` shape, 4px 10px padding. Use for 'New Arrival' and 'Featured' labels; never use this blue for primary CTAs."
- "Build a Béis navigation bar: white `{colors.background}`, `{typography.nav-link}` (Montserrat Medium 14px), `{colors.ink}` default link color, link hover color `{colors.primary}` (#8a2a2b) with 0.3s ease transition, sticky positioning with `box-shadow: {colors.shadow-ambient} 0px 2px 10px -3px` applied on scroll, padding `{spacing.md}` 12px vertical / `{spacing.2xl}` 32px horizontal."
- "Create a Béis-style email input row: text input with `{components.input}` spec (`{colors.border-input}` 1px border, no radius, Montserrat Regular 16px, 10px 12px padding), adjacent primary button using `{components.button-primary}`. On input focus, border shifts to `{colors.border-brand}` (#8a2a2b). Keep backgrounds uniformly `{colors.background}` white."

### Iteration Guide

1. **Start with the canvas**: `{colors.background}` white with `{colors.ink}` near-black text. No tinting, no off-white — the neutrality is structural.
2. **Accent deployment rule**: `{colors.primary}` burgundy goes on CTAs, hover states, and active form borders only. Use `{colors.accent-sky}` for informational/secondary promotion. Everything else stays in the ink/surface neutral range.
3. **Typography weight protocol**: Identify the role, pick the weight — 400 for reading, 500 for navigation, 600 for UI labels and buttons, 700 for headings and display. Never skip a tier without purpose.
4. **Shape rule**: Square everything structural (`{rounded.none}`), 2px everything interactive (`{rounded.sm}`), pill everything labeling (`{rounded.pill}`). No mid-range radius.
5. **Elevation policy**: Cards at rest get no shadow. Floating elements (dropdowns, modals, sticky nav on scroll) get standard black-tinted drops — not brand-tinted, not layered.
6. **Transition default**: Every hover and state change uses `transition: 0.3s ease`. No spring physics, no fast-snappy durations.
7. **Photography as color**: The UI chrome is near-neutral by design. Product imagery provides the actual warmth and color story — don't override this by adding chromatic backgrounds or tinted sections.

---

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