---
version: alpha
name: "Flos"
description: "Absolute black-and-white canvas where AvenirLTStd carries every headline at tracked caps, zero border-radius grounds every surface, and sculptural Italian lighting photography becomes the sole decoration — minimal, precise, gallery-grade"

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#fafafa"           # near-white product grid bands
  surface-dark: "#000000"      # black hero/campaign canvas

  # Text / ink
  ink: "#000000"               # pure black for all headings and body
  ink-muted: "#666666"         # --color-text-light: secondary labels, metadata
  ink-quiet: "#999999"         # tertiary, placeholder, disabled text
  on-dark: "#ffffff"           # text on black surfaces
  on-primary: "#ffffff"        # text on filled black button

  # Brand accent — Flos is achromatic; the "accent" is the inverse
  primary: "#000000"           # CTA fill, active states
  primary-hover: "#3d3d3d"     # --color-button-ghost-focus-text: hover darkens to near-black

  # Interaction states
  focus-ring: "#000000"        # 1px inset box-shadow used for focus
  ghost-hover: "#999999"       # --color-button-ghost-hover: ghost button hover tint

  # Semantic
  error: "#b5593f"             # --color-alert-error: warm terracotta
  error-text: "#a64f36"        # --color-error-text: slightly darker on text
  info: "#7691b0"              # --color-alert-info: muted slate blue
  success: "#848b7f"           # --color-alert-success: muted sage

  # Borders
  border: "#000000"            # hairline 1px stroke on ghost buttons and dividers
  border-muted: "#cccccc"      # lighter structural separators

  # Shadow tints
  shadow-soft: "#000000"       # rgba(0,0,0,0.07) flattened — Google format requires hex /* was rgba(0,0,0,0.07) — Google format requires hex */
  shadow-card: "#000000"       # rgba(0,0,0,0.15) flattened — card elevation /* was rgba(0,0,0,0.15) — Google format requires hex */

typography:
  display-hero:
    fontFamily: "AvenirLTStd, Nunito Sans, Avenir, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 550
    lineHeight: 1.0
    letterSpacing: 0px
  display:
    fontFamily: "AvenirLTStd, Nunito Sans, Avenir, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  heading-section:
    fontFamily: "AvenirLTStd, Nunito Sans, Avenir, Arial, sans-serif"
    fontSize: 34px
    fontWeight: 600
    lineHeight: 1.08
    letterSpacing: 0px
  heading-sub:
    fontFamily: "AvenirLTStd, Nunito Sans, Avenir, Arial, sans-serif"
    fontSize: 25px
    fontWeight: 600
    lineHeight: 1.08
    letterSpacing: 0px
  body-large:
    fontFamily: "AvenirLTStd, Nunito Sans, Avenir, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.43
    letterSpacing: 0px
  body:
    fontFamily: "AvenirLTStd, Nunito Sans, Avenir, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "AvenirLTStd, Nunito Sans, Avenir, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "AvenirLTStd, Nunito Sans, Avenir, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0px
  caption:
    fontFamily: "AvenirLTStd, Nunito Sans, Avenir, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px

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

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

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 18px 20px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 18px 20px
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.on-dark}"
    borderColor: "{colors.border}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 18px 20px
  button-secondary-hover:
    backgroundColor: "transparent"
    textColor: "{colors.ghost-hover}"
    borderColor: "{colors.border}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 18px 20px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 0px 0px
  button-ghost-hover:
    backgroundColor: "transparent"
    textColor: "{colors.ghost-hover}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 0px 0px
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px 24px
  card-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px 24px
  input:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 14px 24px
  input-focus:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    borderColor: "{colors.border}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 14px 24px
  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 2px 8px
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    borderColor: "{colors.border-muted}"
    padding: 16px 32px
---

# Flos Design System

## Overview

Flos treats the screen the way it treats a gallery wall — bare white, absolute black, and a single luminous object at the centre. Founded in Merano in 1962 by Dino Gavina and Cesare Cassina, the Italian lighting house has spent six decades collaborating with Castiglioni, Starck, Ronan & Erwan Bouroullec, and Michael Anastassiades. The website distills that heritage into a design language of forensic restraint: {colors.background} stretches edge to edge without ornament, {colors.ink} handles every word in AvenirLTStd — a humanist geometric sans that reads as both clinical and warm — and the photography of each fixture is left to do the talking.

There is no chromatic brand accent. The palette is a binary (`{colors.ink}` on `{colors.background}`) with a ghost mid-tone (`{colors.ink-muted}`) for metadata and a terracotta semantic (`{colors.error}`) locked to alert states. Colour, where it exists at all, lives in the lamps themselves — the amber glow of a tungsten filament, the opalescent diffuser of a Skygarden — not in chrome or CTAs. This is not minimalism as aesthetic choice; it is the logic of a company whose product is light.

The type hierarchy reinforces the same argument. AvenirLTStd at `weight 550` for display titles — high stroke contrast without serif drama — and `weight 400` for body copy at 16–20px, always at baseline rhythm. Buttons are zero-radius rectangles: a filled-black primary and an outlined ghost, both at the same `padding: 18px 20px` cadence. No pills, no rounded corners. The system reads like a well-typeset product catalogue, which is exactly what it is.

**Key Characteristics:**
- Pure achromatic palette — `{colors.background}` white canvas, `{colors.ink}` black text, no chromatic brand accent whatsoever
- AvenirLTStd as the single typeface family across all weights and sizes — unity without monotony
- `{typography.display-hero}` at 64px / weight 550 for hero copy; abrupt scale drop to 40px for editorial titles
- Zero border-radius on all interactive elements — buttons, inputs, badges use `{rounded.none}` exclusively for primary surfaces
- Product photography is the sole visual decoration; no illustrations, no gradients, no background textures
- Ghost/outline button (`{components.button-secondary}`) used prominently on dark canvas sections for maximum contrast reversal
- 8px base spacing grid with generous section cadence: `{spacing.2xl}` (48px) for component breathing room, `{spacing.3xl}` (80px) between major sections
- Flat elevation philosophy — no ambient box shadows on cards; only a 1px inset ring (`{colors.focus-ring}`) for focus and structural definition
- Semantic colours (`{colors.error}`, `{colors.info}`, `{colors.success}`) use muted, natural-world tones — terracotta, slate, sage — not pure primaries
- Motion is deliberate: `0.3s` transitions dominate, eased on `cubic-bezier(0.455, 0.03, 0.515, 0.955)` — a gentle deceleration that mirrors the slow reveal of a lamp switching on
- Navigation bar stays translucent and persistent at the top with a hairline `{colors.border-muted}` separator; the logo is the only brand mark
- Max breakpoints extend to 2200px, reflecting an audience that browses on wide-screen editorial displays

## Colors

### Primary Surfaces
- **White** (`{colors.background}`): The universal canvas — every page, every section, every overlay starts here
- **Near-white** (`{colors.surface}`): Subtle differentiation for product grid bands and secondary content areas; perceptually white but carries enough weight to separate zones without a border
- **Black** (`{colors.surface-dark}`): Campaign and hero sections invert the canvas completely, framing photography against absolute darkness to heighten sculptural drama

### Ink / Text
- **Black** (`{colors.ink}`): All headings, body copy, and interactive labels — no warmth or coolness tint, pure neutral
- **Mid-grey** (`{colors.ink-muted}`): Secondary metadata — category labels, price callouts, system messages — derived from `--color-text-light`
- **Light grey** (`{colors.ink-quiet}`): Placeholder text and disabled states; sits just above invisibility threshold
- **White** (`{colors.on-dark}`): All text on black-canvas sections

### Brand Accent
- **Black** (`{colors.primary}`): The CTA fill — paradoxically the accent in an achromatic system. Used only for filled primary buttons and active navigation states; its power comes entirely from contrast, not hue
- **Dark charcoal** (`{colors.primary-hover}`): Button and link hover; sourced from `--color-button-ghost-focus-text`, a softer near-black that signals interaction without full contrast reversal

### Interaction States
- **Ghost hover** (`{colors.ghost-hover}`): Sourced from `--color-button-ghost-hover` — mid-grey tint for ghost button hover state
- **Focus ring** (`{colors.focus-ring}`): 1px inset box-shadow for keyboard focus indication

### Semantic
- **Terracotta** (`{colors.error}`): Alert and error states; warm earth tone, not a pure red — sourced from `--color-alert-error`
- **Slate** (`{colors.info}`): Informational state; a cooled-down blue that reads calm, not urgent
- **Sage** (`{colors.success}`): Success state; muted green that barely intrudes on the achromatic palette

### Borders & Shadows
- **Black** (`{colors.border}`): 1px strokes on ghost buttons and structural hairlines
- **Light grey** (`{colors.border-muted}`): Subtle separator lines that barely register
- **Shadow tints**: `{colors.shadow-soft}` (was `rgba(0,0,0,0.07)`) and `{colors.shadow-card}` (was `rgba(0,0,0,0.15)`) — both flattened to hex per Google format requirement

## Typography

### Font Family
- **Primary**: `AvenirLTStd`, with fallbacks: `Nunito Sans, Avenir, Arial, sans-serif`
- **No secondary family**: The entire system — display through caption — uses a single humanist sans, differentiated only by weight and size
- **Note**: AvenirLTStd is a licensed OpenType typeface (Linotype). Closest Google Font match: **Nunito Sans** (geometric humanist, similar optical weight at 400/600/800). For system fallback `Avenir` ships on macOS.

### Hierarchy

The complete type scale is in the `typography:` token block above. Use tokens directly rather than restating values.

| Token | Use |
|---|---|
| `display-hero` | Hero headlines, campaign splash copy — 64px, weight 550 |
| `display` | Editorial section titles, product family headers — 40px, weight 400 |
| `heading-section` | Section labels, category titles — 34px, weight 600 |
| `heading-sub` | Card titles, sub-category labels — 25px, weight 600 |
| `body-large` | Lead paragraphs, feature descriptions — 20px, weight 400 |
| `body` | Standard body copy, product specs — 16px, weight 400 |
| `nav-link` | Navigation items and top-level menu labels — 16px, weight 600 |
| `button-ui` | All button labels, CTA copy — 14px, weight 600 |
| `caption` | Metadata, footnotes, accessibility labels — 13px, weight 400 |

### Principles
- Single family creates absolute visual unity; differentiation comes only from size and weight
- Weight 550 (medium-heavy) for hero display — confident without shouting, heavier than the editorial register but lighter than bold
- Weight 600 reserved for interactive elements (nav, buttons, section headings) — a deliberate signal layer
- Letter-spacing at zero across the board — no tracking games; Avenir's geometry holds structure on its own
- Line-height at 1.0 for the largest display sizes; opens to 1.5 for body text to keep long-form readable

## Layout

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

Flos uses whitespace as exhibition design — generous breathing room between product objects mirrors the physical spacing of a gallery or showroom. The `{spacing.3xl}` (80px) and `{spacing.4xl}` (100px) tokens create the cathedral-ceiling sense of space that luxury retail photography demands.

### Grid & Container
- Max content width: 1920px (scaled layout up to 2200px)
- 12-column grid with variable gutters; product grids typically 3–4 columns on desktop
- Full-bleed hero images at 100vw; content containers inset within `{spacing.2xl}` or `{spacing.3xl}` padding at desktop
- Navigation stays at max-width viewport with `{spacing.lg}` horizontal inset

### Whitespace Philosophy
- Generous vertical rhythm: sections breathe at `{spacing.3xl}` (80px) intervals — no cramped composition
- Product card grid uses `{spacing.lg}` (24px) gutters — space for the photograph to exist as object
- No visible background separators between light sections; spacing alone creates hierarchy

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Default card state, product tiles, navigation |
| Subtle (Level 1) | `rgba(0,0,0,0.07) 0px 7px 7px 0px` | Product cards on hover; barely perceptible lift |
| Card (Level 2) | `rgba(0,0,0,0.15) 0px 4px 16px 0px` | Modals, dropdowns, contextual overlays |
| Focus Ring | `rgb(0,0,0) 0px 0px 0px 1px inset` | Keyboard focus; precise 1px inset outline |
| Ghost Highlight | `rgb(250,250,250) 0px 0px 0px 2px` | Secondary selection treatment |

**Shadow Philosophy**: Flos uses shadows with extreme restraint — almost all surfaces are flat, and the rare shadow is applied only when a floating element (modal, dropdown) needs to signal separation. The preferred separation tool is the 1px hairline border. This matches the brand's gallery logic: artworks do not cast shadows; they stand in space. Interactive states convey depth through opacity shift and gentle lift (`rgba(0,0,0,0.07)`) rather than dramatic multi-layer shadows.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Primary and ghost buttons, all input fields, cards, section blocks — the default everywhere |
| `sm` | 2px | Badges and inline tags; the only concession to rounding in the UI |
| `md` | 8px | Popup containers, contextual menus, cookie consent overlays |
| `pill` | 9999px | Reserved for filter chips and toggle elements only |

The system is functionally binary: `{rounded.none}` for all primary interactive chrome, `{rounded.sm}` for inline labels only. The `{rounded.md}` token exists for system-level overlays. No mid-range rounding (16–24px) anywhere in the product UI — that softness does not belong in a system that values precision over warmth.

## 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`** — Solid `{colors.primary}` fill, `{colors.on-primary}` text, zero border-radius, `padding: 18px 20px`. Used for all primary CTAs: Subscribe, Add to Wish List, Discover More on light canvas
- **`button-secondary`** — Transparent fill with 1px `{colors.border}` outline, `{colors.on-dark}` text. The campaign-mode button: appears on black hero sections where the primary would vanish; same padding cadence as primary for optical alignment
- **`button-ghost`** — Transparent, no border, `{colors.ink}` text. Navigation links and secondary actions; hover shifts to `{colors.ghost-hover}` grey

### Cards

Flat `{colors.surface}` fill, zero radius, `padding: 24px`. Product cards are image-led: the photograph occupies ~80% of card height and the name + price live below in a compact text block. No decorative chrome. On hover, a `7px` shadow appears at 7% black opacity — barely perceptible but confirming interactivity.

### Inputs

Transparent background, no border by default — the input surface dissolves into the page. A bottom-edge hairline or contextual focus ring (`{colors.border}` via `box-shadow: inset`) signals the field boundary. `padding: 14px 24px 8px 0px` creates a compact reading-line feel.

### Badges / Tags

`{rounded.sm}` (2px) on `{colors.primary}` fill with `{colors.on-primary}` text. Used sparingly for product labels ("New", "Limited Edition"). Never decorative.

### Navigation

Full-width, top-fixed. `{colors.background}` with a `{colors.border-muted}` bottom rule. All nav items use `{typography.nav-link}` at weight 600. Secondary navigation (categories) folds into a mega-dropdown at desktop, a slide-over drawer at mobile. Cart and search icons sit at the right edge; the FLOS logotype anchors the left.

## Do's and Don'ts

### Do
- Use `{colors.background}` as the universal starting canvas — never introduce warm off-whites, greys, or tinted fields as background alternatives
- Apply `{rounded.none}` to all buttons and interactive controls; the square edge is not a default, it is a design statement
- Maintain AvenirLTStd (or Nunito Sans as fallback) as the sole typeface; the system achieves voice through a single family, not font mixing
- Reach for `{colors.primary}` (black) as CTA fill on light canvas and `{components.button-secondary}` outline on dark canvas — let context determine which button speaks
- Keep product photography uncropped and unpaddded in hero layouts; the lamp needs space to breathe against the white field
- Use `{spacing.3xl}` (80px) or `{spacing.4xl}` (100px) between major content sections to preserve the gallery-room sense of space
- Reserve `{colors.error}` (terracotta) and `{colors.info}` (slate) strictly for system feedback — never use them decoratively
- Let silent motion do the work: `0.3s` ease-out transitions on hover/focus states, no bounce or spring effects

### Don't
- Don't introduce a chromatic brand accent colour — there is none; any hue injection breaks the achromatic contract
- Don't round primary buttons or card corners beyond `{rounded.sm}` (2px) — pill shapes and large radii conflict with the system's architectural rigidity
- Don't layer box-shadows on product cards at rest; elevation is reserved for floating overlays and hover micro-interactions
- Don't use bold typography (weight 700+) on body copy or nav labels — weight 600 is the ceiling for interactive text; heavier weights read as shouting in this system
- Don't add decorative dividers or ruled lines between white sections — spacing alone separates; lines belong on ghost buttons only
- Don't use background fills on inputs — the transparent dissolve-into-page treatment is intentional and must be preserved
- Don't stack multiple shadow layers on modals — a single `rgba(0,0,0,0.15) 0px 4px 16px` is the ceiling; the system does not do theatrical depth
- Don't introduce mid-weight greys as surface fills (e.g. `#f0f0f0` section bands) — only `{colors.surface}` (#fafafa) or `{colors.background}` (#ffffff) are canonical light surfaces

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <374px | Single-column layout; hero typography scales to 28px; navigation collapses fully |
| Mobile | 374–600px | Single-column; touch-optimised product grid (1 column); drawer navigation |
| Tablet | 601–1024px | 2-column product grid; mega-nav disabled; hamburger opens full-screen overlay |
| Desktop | 1025–1440px | 3–4 column product grid; mega-nav active; full typographic scale |
| Large Desktop | >1440px | 4-column grid; typography and spacing scale proportionally to 2200px max |

### Touch Targets
- Primary buttons maintain `padding: 18px 20px` on mobile, achieving minimum 44px touch height
- Navigation icons (cart, search, profile) are 40–44px tap targets at mobile
- Product card tap targets span the full card — no isolated link hotspot

### Collapsing Strategy
- Desktop mega-nav drops to a top-bar with hamburger trigger on tablet/mobile; category tree lives in a slide-over drawer
- 3–4 column product grids collapse to 2 on tablet, 1 on mobile small
- Hero typography drops from `{typography.display-hero}` (64px) to 36px on tablet and 28px on mobile
- Section spacing halves at mobile: `{spacing.2xl}` (48px) replaces `{spacing.3xl}` (80px) between sections

### Image Behavior
- Hero images are full-bleed at all breakpoints; aspect ratio is fixed-crop, not fluid
- Product thumbnails use `object-fit: cover` within fixed-ratio containers (4:3 or square) — the lamp is never distorted
- Lazy-load pattern for product grids; no placeholder blur (consistent with the flat, undecorated aesthetic)

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}`
- Text: `{colors.ink}`
- Brand accent / CTA fill: `{colors.primary}`
- Secondary text: `{colors.ink-muted}`
- Dark canvas: `{colors.surface-dark}`
- Border: `{colors.border}`
- Ghost hover: `{colors.ghost-hover}`

### Example Component Prompts

- "Create a Flos-style hero section: `background-color: {colors.surface-dark}`, full-bleed lamp photography at 100vw, a single centered h1 at `{typography.display-hero}` (64px, weight 550) in `{colors.on-dark}`, and a ghost outline button using `{components.button-secondary}` (`border: 1px solid {colors.border}`, `padding: 18px 20px`, `border-radius: {rounded.none}`, `color: {colors.on-dark}`)"
- "Create a Flos-style product card: `background: {colors.surface}`, zero border-radius (`{rounded.none}`), lamp photograph filling top 70% of card, product name in `{typography.heading-sub}` (25px weight 600, `{colors.ink}`), price in `{typography.body}` (16px, `{colors.ink-muted}`), no shadow at rest, `box-shadow: rgba(0,0,0,0.07) 0px 7px 7px 0px` on hover"
- "Create a Flos primary CTA button: `background-color: {colors.primary}`, `color: {colors.on-primary}`, `font: {typography.button-ui}` (14px, weight 600, AvenirLTStd), `padding: 18px 20px`, `border-radius: {rounded.none}`, hover state shifts to `background-color: {colors.primary-hover}`"
- "Create a Flos ghost navigation bar: `background: {colors.background}`, `border-bottom: 1px solid {colors.border-muted}`, logotype left-aligned, nav links using `{typography.nav-link}` (16px, weight 600, `{colors.ink}`), icons (cart, search, profile) right-aligned, no shadow"
- "Create a Flos search input: `background: transparent`, `color: {colors.ink}`, `font: {typography.body}`, no visible border at rest, `padding: 14px 24px 8px 0px`, `border-radius: {rounded.none}`, on focus add `box-shadow: inset 0 0 0 1px {colors.focus-ring}`"
- "Create a Flos category badge: `background: {colors.primary}`, `color: {colors.on-primary}`, `font: {typography.caption}` (13px, weight 400), `padding: 2px 8px`, `border-radius: {rounded.sm}` (2px)"

### Iteration Guide

1. Start with `{colors.background}` (#ffffff) as the universal canvas — never introduce a warm off-white or grey base
2. Place the primary brand color (`{colors.primary}` = `#000000`) only on filled CTA buttons and active nav states; everything else remains achromatic
3. Set all display copy in AvenirLTStd (Nunito Sans fallback) at the exact scale: 64px/550 for hero, 40px/400 for editorial, 34px/600 for section headers
4. Apply `{rounded.none}` to every button, input, and card — this is non-negotiable; softened corners break the visual logic
5. Build elevation from nothing: no shadow at rest, `rgba(0,0,0,0.07)` on card hover, `rgba(0,0,0,0.15)` for floating overlays only
6. Use 8px-base spacing: `{spacing.lg}` (24px) within components, `{spacing.2xl}` (48px) between sections, `{spacing.3xl}` (80px) for major page divisions
7. Let lamp photography fill the frame — uncropped, unpadded, full-bleed — as the only decorative element in the system

---

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