---
version: alpha
name: Ferm Living
description: Danish interiors brand built on a warm cream canvas, with proprietary Canela serif and KH Teka grotesque pairing, a restrained palette of earthy organic tones, and generous rounded geometry that softens every surface into something tactile and livable.

colors:
  # Surface / canvas
  background: "#fffefa"           # warm cream — the dominant Ferm Living canvas (manifest:background_color)
  surface: "#f7f5ef"              # slightly cooler cream for input fields and alternate sections
  surface-alt: "#e8e3d8"          # warm greige section bands and hover states /* estimated */

  # Ink / text
  ink: "#383838"                  # warm dark charcoal — primary text and headings (palette: count 1182)
  ink-secondary: "#666666"        # --color-label: mid-grey secondary copy and captions
  ink-muted: "#979797"            # --color-form-border: placeholders and disabled states
  ink-on-dark: "#fffefa"          # cream text reversed on dark surfaces

  # Brand accent — earthy organic tones
  primary: "#785c52"              # --color-dark-beige: the Ferm Living terracotta-brown anchor
  on-primary: "#fffefa"           # cream on the terracotta anchor
  primary-container: "#b7a990"    # --color-cashmere: warm sand — accent surfaces and highlights
  primary-warm: "#b08651"         # --color-burned-yellow: golden amber — secondary accent and hover moments
  primary-cognac: "#61451d"       # --color-cognac: deep cognac — editorial accent and dark moments
  primary-green: "#587664"        # --color-green: sage — natural counterpart to warm terracotta tones

  # Interaction / state
  link-hover: "#3d3d3d"           # was rgb(61, 61, 61) — Google format requires hex; link hover underline state
  focus-ring: "#383838"           # charcoal focus outline, consistent with ink

  # Borders
  border: "#383838"               # charcoal hairline — the dominant divider and button outline
  border-subtle: "#e8e3d8"        # very light warm separator /* estimated */

  # Shadow tints (opaque approximations)
  shadow-soft: "#808080"          # was rgb(128,128,128) — Google format requires hex; subtle lift shadow
  shadow-deep: "#000000"          # was rgba(0,0,0,0.3) — Google format requires hex; overlay and modal

typography:
  display-hero:
    fontFamily: "CanelaText, Canela, Cormorant Garamond, Georgia, serif"
    fontSize: 64px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0px
  display:
    fontFamily: "CanelaText, Canela, Cormorant Garamond, Georgia, serif"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 0px
  heading-section:
    fontFamily: "CanelaText, Canela, Cormorant Garamond, Georgia, serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0px
  heading-sub:
    fontFamily: "CanelaText, Canela, Cormorant Garamond, Georgia, serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0px
  body-large:
    fontFamily: "KHTeka, Teka, Inter, Helvetica Neue, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.56
    letterSpacing: 0px
  body:
    fontFamily: "KHTeka, Teka, Inter, Helvetica Neue, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-medium:
    fontFamily: "KHTeka, Teka, Inter, Helvetica Neue, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: 0px
  nav-link:
    fontFamily: "KHTeka, Teka, Inter, Helvetica Neue, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.1px
  button-ui:
    fontFamily: "KHTeka, Teka, Inter, Helvetica Neue, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: 0px
  caption:
    fontFamily: "KHTeka, Teka, Inter, Helvetica Neue, sans-serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0px
  label-uppercase:
    fontFamily: "KHTeka, Teka, Inter, Helvetica Neue, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 2.5
    letterSpacing: 0.25px

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

rounded:
  none: 0px
  sm: 4px
  md: 8px
  lg: 15px
  xl: 32px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.ink-on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 0px 14px
    border: 1px solid {colors.ink}
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    border: 1px solid {colors.primary}

  button-outlined:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 0px 14px
    border: 1px solid {colors.ink}
  button-outlined-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.ink-on-dark}"

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 0px 14px
  button-ghost-hover:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.ink}"

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

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 16px
    border: 0px solid {colors.ink-muted}
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    border: 2px solid {colors.ink}

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

  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.ink}"
    typography: "{typography.label-uppercase}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  tag:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.lg}"
    padding: 4px 12px

  product-tile:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
  product-tile-hover:
    backgroundColor: "{colors.surface-alt}"
    textColor: "{colors.ink}"
---

# Ferm Living Design System

## Overview

Ferm Living's visual identity is the digital expression of Danish interiors at their most considered: warm, quiet, and resolutely unhurried. The dominant canvas, `{colors.background}` — barely-off-white with the faintest warmth of fresh cream — sets a tone that is never clinical. Against it, the brand's bespoke serif, CanelaText, draws editorial headlines at open, relaxed line-heights, while KH Teka handles all functional copy in a workaday grotesque that disappears into service. The pairing is deliberate: Canela brings the poetry of a hand-printed catalogue, Teka delivers the precision of a shop floor tag.

Color is deployed with the restraint of a gallery. The near-charcoal `{colors.ink}` anchors every surface without reaching for black; the earthy accent palette — terracotta `{colors.primary}`, golden amber `{colors.primary-warm}`, cashmere `{colors.primary-container}`, sage `{colors.primary-green}`, cognac `{colors.primary-cognac}` — echoes the natural materials the products themselves celebrate. No color is used decoratively for its own sake: each tone arrives loaded with material association, a swatch of the objects it is meant to sell.

Shape rounds everything at scale. The dominant `{rounded.lg}` radius (15px) gives product tiles, modals, and filters the gentle pillow quality of upholstered furniture. Tags and badges float as soft pills. Buttons alone stay at `{rounded.none}`, a quiet counter-tension that signals function amid comfort. Together, the system reads like a room that has been carefully furnished rather than impulsively styled.

**Key Characteristics:**
- Warm cream canvas `{colors.background}` sourced from the manifest background-color — warmer and more papery than pure white
- Two-font system: proprietary CanelaText for editorial hierarchy, KH Teka (self-hosted) for all UI and body copy
- Display sizes up to 64px, always weight 400 in Canela — the brand never shouts
- Earthy five-color accent palette (`{colors.primary}`, `{colors.primary-warm}`, `{colors.primary-container}`, `{colors.primary-green}`, `{colors.primary-cognac}`) — organic material references throughout
- Dominant radius `{rounded.lg}` creates the "soft-edged object" quality in tiles, filters, and overlays
- Buttons stay flat (`{rounded.none}`) with a 1px border — sharp against the otherwise rounded system
- Zero-radius inputs with bold focus outline (`2px solid {colors.ink}`) — brutally functional alongside organic shapes
- Large whitespace rhythm: 8px base scale with heavy use of 22–56px intervals for breathing room
- Product photography bleeds edge-to-edge in heroes; structured white fields elsewhere
- Motion: 0.3s transitions for hover states, 0.5s ease for modals — unhurried, not sluggish
- Self-hosted font loading via woff2 (KHTeka-Regular, KHTeka-Medium, CanelaText-Regular) — zero FOUT dependency on Google Fonts
- Navigation in KH Teka 15px/400 with `{colors.ink}` — invisible infrastructure, not a design statement

## Colors

### Primary
- **Warm Cream** (`{colors.background}`): The dominant canvas. Appears in the page background, product fields, and modal sheets. Sourced directly from the manifest `background_color` declaration. Slightly warmer than `#ffffff` to read as paper rather than screen.
- **Charcoal** (`{colors.ink}`): Primary text, borders, and the ink-dark button. Warm dark rather than cold black — consistent with the brand's refusal of clinical contrast.

### Brand Accent
- **Terracotta Brown** (`{colors.primary}`): The --color-dark-beige CSS custom property. Primary CTA accent, hover moments, and tag backgrounds. The earthiest tone in the palette.
- **Cashmere Sand** (`{colors.primary-container}`): --color-cashmere. Used as badge/tag backgrounds and gentle surface fills. The lightest brand accent.
- **Burned Yellow** (`{colors.primary-warm}`): --color-burned-yellow. Golden amber moments, promotional highlights, and warm editorial accents.
- **Sage Green** (`{colors.primary-green}`): --color-green. Nature counterpart — used for seasonal and garden-category callouts.
- **Cognac** (`{colors.primary-cognac}`): --color-cognac. Deep editorial accent for rich catalogue moments.

### Supporting Tones
- **Mid-Grey** (`{colors.ink-secondary}`): Secondary copy and labels. From --color-label.
- **Form Border** (`{colors.ink-muted}`): Input placeholders, disabled UI, and subtle form borders. From --color-form-border.
- **Link Hover** (`{colors.link-hover}`): Hover state color — a shift toward mid-charcoal with underline.
- **Border** (`{colors.border}`): Hairline dividers and outlined button strokes. Same value as `{colors.ink}` for tonal unity.
- **Shadow Soft** (`{colors.shadow-soft}`): was `rgb(128,128,128)` — Google format requires hex; used for subtle product card lift.
- **Shadow Deep** (`{colors.shadow-deep}`): was `rgba(0,0,0,0.3)` — Google format requires hex; used in modal and overlay contexts.

## Typography

### Font Family
- **Editorial (Canela)**: `CanelaText, Canela, Cormorant Garamond, Georgia, serif` — self-hosted as CanelaText-Regular.woff2. A high-contrast serif with calligraphic tension; its open apertures and fine hairlines read luxurious at display scale without needing weight.
- **Functional (KH Teka)**: `KHTeka, Teka, Inter, Helvetica Neue, sans-serif` — self-hosted as KHTeka-Regular.woff2 and KHTeka-Medium.woff2. A straightforward Danish grotesque: neutral, legible, unobtrusive.
- **Fallback**: Inter (Google Fonts, available as a backup) for the grotesque; Cormorant Garamond for the serif.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | Full-bleed campaign headlines; 64px Canela 400 |
| `display` | Section openers and feature callouts; 48px Canela 400 |
| `heading-section` | Category headers and editorial section titles; 32px Canela 500 |
| `heading-sub` | Product group headers, card headings; 24px Canela 500 |
| `body-large` | Intro paragraphs and pull-text; 18px Teka 400 |
| `body` | Standard product descriptions and site copy; 16px Teka 400 |
| `body-medium` | Emphasized body, navigation sub-items; 16px Teka 500 |
| `nav-link` | Top navigation and mega-menu links; 15px Teka 400 |
| `button-ui` | CTA labels; 14px Teka 500 |
| `caption` | Image credits, fine print; 11px Teka 400 |
| `label-uppercase` | Category tags and filter labels in uppercase; 12px Teka 400 with tracking |

### Principles
- Canela is reserved for hierarchy — it never appears at body or UI scale
- KH Teka's two weights (400 and 500) handle all function; there is no bold or heavy weight in service copy
- Letter-spacing is left at 0 for display and body sizes; slight positive tracking (0.1–0.25px) on smaller caps labels only
- Line-heights are generous: 1.5–1.6 for body text reinforces the unhurried, well-spaced page feel
- The editorial serif + functional grotesque split is a direct typographic analogue to the brand's catalogue-meets-shop identity

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

Actual spacing draws heavily from derived values — 7.5px (half-unit, frequent in padding), 15px (baseline unit for gutters), 22.5px (1.5×), and 56.25px (7× unit) appear throughout at high frequency. The system reads as an 8px grid that permits half-unit steps for fine tuning without breaking rhythm.

### Grid & Container
- Max content width: 1510px (primary breakpoint for large desktop)
- 1440px is the comfortable design-at-this-size grid
- Below 768px the layout transitions to single-column; below 480px typography compresses
- Product grids: 4-column on desktop, 2-column on mobile
- Navigation: sticky top bar, transparent on hero, cream on scroll

### Whitespace Philosophy
- Whitespace is treated as a material — equal in weight to the product photography it frames
- Generous internal padding (15–22px) in tiles and cards reflects the spaciousness of Ferm Living rooms
- Narrow top/bottom margins in the nav bar (15px) keep the brand mark unimposing against the full-bleed imagery beneath

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Product tiles at rest, body text blocks, navigation |
| Subtle (Level 1) | `rgb(128,128,128) 0px 0px 5px 0px` | Occasional card lift; low-confidence in source |
| Modal (Level 3+) | `rgba(0,0,0,0.3) 0px 30px 70px 0px` | Region selector, cookie banner, full overlays |
| Overlay tint | `rgba(0,0,0,0.2) 0px 0px 25px 0px` | Soft vignette on hover thumbnails |
| Focus Ring | `outline: 2px solid {colors.ink}` | All interactive elements on keyboard focus |

**Shadow Philosophy**: Ferm Living's depth system is deliberately minimal. Most surfaces are flat; depth signals hierarchy only when content layers (modals, drawers). The one functional exception is the focus ring — `{colors.ink}` at 2px, bold and accessible — which makes keyboard navigation visible without introducing a chromatic accent that might clash with the earthy palette. Shadows use opaque-converted warm greys rather than cool blacks, consistent with the cream canvas.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, inputs, cards at rest — the functional layer |
| `sm` | 4px | Fine UI details, badge micro-corners |
| `md` | 8px | Dialog boxes, cookie consent panels |
| `lg` | 15px | Product tile image containers, filter tags, tooltip wrappers |
| `xl` | 32px | Pill-adjacent spans, decorative tag elements |
| `pill` | 9999px | Badge pills, fully rounded chip elements |

The system is notably NOT binary. The dominant radius is `{rounded.lg}` at 15px — large enough to read as "soft object" on any screen size. Buttons are the intentional exception at `{rounded.none}`, a shape counterpoint that marks them as mechanical rather than organic. This tension between the rounded product world and the sharp CTA geometry is a deliberate signal: the brand creates comfort; the button demands decision.

## Components

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

### Button variants
- **`button-primary`** — Flat charcoal fill (`{colors.ink}`), cream type, zero radius, 1px border. The dominant CTA. Sharp against the organic site environment.
- **`button-outlined`** — Transparent fill, charcoal text and border. Equal visual weight at rest; used for secondary actions like "Shop Now" on dark hero sections (with cream variants).
- **`button-ghost`** — Background-colored, text-only feel. Low visual priority; used for tertiary navigation and "learn more" moments.

### Cards
Product tiles are flat at rest — no shadow, no border, background matching the page canvas. On hover, `{colors.surface-alt}` provides just enough contrast to indicate interactivity. Image containers use `{rounded.none}` to bleed cleanly; the tile wrapper adds no additional framing.

### Inputs
Email and newsletter inputs: borderless at rest (0px border), using `{colors.surface}` as background. On focus, a 2px solid `{colors.ink}` outline snaps in — stark and unambiguous. This is the only moment the brand uses a hard border; it reads as "pay attention now" against the otherwise soft environment.

### Badges / Tags
Badges use `{colors.primary-container}` cashmere sand fill with `{rounded.pill}` — soft and warm. Filter tags use `{rounded.lg}` at 15px with `{colors.surface-alt}` background, creating a softer, less precious version of the pill.

### Navigation
Top navigation: KH Teka 15px/400 in `{colors.ink}` on `{colors.background}`. Sticky on scroll with a consistent cream bar. Mega-menus expand with light surface fills and category image thumbnails. Mobile: collapses to hamburger at 768px.

## Do's and Don'ts

### Do
- Use `{colors.background}` as the primary canvas — the off-white warmth is part of the brand identity, not a default
- Pair CanelaText headings with KH Teka body copy — the serif/grotesque contrast is the typographic signature
- Apply `{rounded.lg}` (15px) to containers, image wrappers, and filter elements to maintain the soft-object quality
- Let `{colors.primary}` (terracotta), `{colors.primary-warm}` (amber), and `{colors.primary-green}` (sage) function as material references — deploy them contextually, not decoratively
- Use photography as the primary visual content; everything else is a frame for the image
- Keep buttons at `{rounded.none}` — the sharp button against rounded containers is intentional tension
- Apply generous whitespace (minimum 15px internal padding, 22px+ between sections) to honor the spacious editorial pacing
- Use `{typography.display-hero}` and `{typography.display}` at weight 400 — Canela's beauty is in its lightness, not mass
- Reserve the `2px solid {colors.ink}` focus outline for all interactive elements — accessibility without chromatic distraction

### Don't
- Don't substitute `{colors.background}` with `#ffffff` — the warmth is load-bearing for the brand's material feel
- Don't apply CanelaText at body or UI scale — it reads precious at small sizes and undermines the functional grotesque's role
- Don't introduce mid-radius values between `{rounded.none}` and `{rounded.lg}` on primary components — the binary tension is the system
- Don't add cold or saturated accent colors that fall outside the earthy palette; even success/error states should read organic
- Don't use bold (700+) weights in KH Teka — the system only uses Regular (400) and Medium (500)
- Don't add box-shadow decoration to product tiles; depth in this system is reserved for floating layers
- Don't use uppercase text at body or heading scale — uppercase is limited to small `{typography.label-uppercase}` tags only
- Don't use the cognac `{colors.primary-cognac}` or sage `{colors.primary-green}` as primary CTAs — they are editorial accents, not action colors
- Don't reduce line-heights below 1.15 in Canela or 1.5 in Teka; the generous rhythm is part of the brand's unhurried pace

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <375px | Single column, reduced font sizes, hamburger nav |
| Mobile | 375–767px | 2-column product grid, condensed nav, compact spacing |
| Tablet | 768–1023px | 2–3 column grid, partial mega-menu, navigation partial collapse |
| Desktop | 1024–1439px | 4-column product grid, full mega-menu navigation |
| Large Desktop | 1440–1920px | Full-width hero photography, 1510px max-content container |

### Touch Targets
Buttons use `padding: 0px 14px` with a minimum height of 44px implied by font + line-height; interactive tiles span the full card surface. Navigation links at 15px with 15px padding meet 44px tap targets on mobile.

### Collapsing Strategy
- Navigation collapses at 768px to a hamburger drawer
- Product grid: 4-col → 2-col at 768px; editorial text and hero images remain full-bleed throughout
- Spacing values compress slightly at mobile: the 22.5px body gutter becomes 15px
- Typography sizes hold steady down to 375px; only display-hero and display sizes scale below 480px

### Image Behavior
Product photography is aspect-ratio locked and fills tile containers completely. Hero images bleed edge-to-edge at all breakpoints. On mobile, tall portrait crops are used for hero sections to maximize visual impact at narrow widths.

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Brand accent (terracotta): `{colors.primary}`
- Secondary accent (cashmere): `{colors.primary-container}`
- Border: `{colors.border}`
- CTA: `{colors.ink}` fill with `{colors.ink-on-dark}` text

### Example Component Prompts

- "Build a Ferm Living product card: background `{colors.background}`, 0px border-radius, product image fills the top two-thirds edge-to-edge, below that: product name in `{typography.heading-sub}` (CanelaText 24px/500), price in `{typography.body}` (KH Teka 16px/400) in `{colors.ink}`, all in `{colors.ink}`. On hover, tile background shifts to `{colors.surface-alt}`."
- "Create a Ferm Living CTA button: background `{colors.ink}`, text `{colors.ink-on-dark}`, `{typography.button-ui}` (KH Teka 14px/500), padding 12px 20px, border-radius `{rounded.none}`. Hover state: background `{colors.primary}` (terracotta), text `{colors.on-primary}`, border changes to match."
- "Design a Ferm Living category filter tag: background `{colors.surface-alt}`, text `{colors.ink}`, `{typography.caption}` (KH Teka 11px/400), border-radius `{rounded.lg}` (15px), padding 4px 12px. Active state uses `{colors.primary}` background with `{colors.on-primary}` text."
- "Write a Ferm Living hero section: full-bleed photography behind a centered overlay card. Overlay card: background `{colors.background}`, border-radius `{rounded.lg}`, padding 32px, text headline in `{typography.display-hero}` (CanelaText 64px/400, `{colors.ink}`), subtext in `{typography.body-large}` (KH Teka 18px/400, `{colors.ink}`), primary CTA button below."
- "Build a Ferm Living newsletter signup: input field background `{colors.surface}`, border `0px`, border-radius `{rounded.none}`, focus state adds `outline: 2px solid {colors.ink}`. Adjacent submit button: background `{colors.ink}`, text `{colors.ink-on-dark}`, `{typography.button-ui}`, border-radius `{rounded.none}`."
- "Create a Ferm Living product badge for 'New Arrival': background `{colors.primary-container}` (cashmere), text `{colors.ink}`, `{typography.label-uppercase}` (KH Teka 12px/400 uppercase), border-radius `{rounded.pill}`, padding 4px 10px."

### Iteration Guide

1. Start with the `{colors.background}` canvas — the cream warmth sets the material register immediately. Do not substitute pure white.
2. Typography: headlines get CanelaText (`{typography.display-hero}`, `{typography.display}`, `{typography.heading-section}`) at weight 400; all UI and body copy uses KH Teka (`{typography.body}`, `{typography.button-ui}`). Never swap the roles.
3. Accent color hierarchy: `{colors.ink}` fills primary CTAs; earthy tones (`{colors.primary}`, `{colors.primary-warm}`, `{colors.primary-container}`) add warmth to hover states, tags, and callouts. No chromatic accent fills large surfaces.
4. Radius: `{rounded.lg}` (15px) on all containers and image wrappers; `{rounded.none}` on buttons and inputs. The contrast is intentional.
5. Elevation: keep surfaces flat. Use shadow only for true floating layers (modals use `rgba(0,0,0,0.3) 0px 30px 70px`). Product tiles have no shadow at rest.
6. Spacing: minimum 15px internal padding; 22px for section gutters. The page breathes; nothing crowds.
7. The brand signature: Canela serif + earthy material palette + rounded containers + sharp buttons = the sensation of a catalogue-perfect room, rendered on screen.

---

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