# Flos · Design system migration spec

> Source: https://flos.com  ·  Curated by OpenDesign  ·  en

> This site is a prime example of premium product presentation, using restraint and high-quality imagery to convey luxury.

## 1. Identity DNA

The design system for Flos operates as a gallery catalog for high-end lighting design, where every element serves the product. Its identity is rooted in Italian architectural precision and the quiet authority of luminaires presented as art objects.

**One-liner:** Premium Italian lighting brand with a minimalist, editorial aesthetic.
**Keywords:** Lighting · Design · Italian · Architecture · Luminaires
**Analogy:** A gallery catalog for high-end lighting design.

## 2. Color

The palette is strictly monochromatic, built on a foundation of black, white, and muted gray. This restraint ensures the photography provides all the chromatic expression, with text inverting between light and dark contexts to maintain contrast.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--bg-soft` | `#FAFAFA` | card background |
| `--ink` | `#FFFFFF` | body text |
| `--muted` | `#666666` | placeholder |
| `--line` | `rgba(0,0,0,0.15)` | divider |

**Color principle:** High contrast photography dominates; text colors invert depending on light/dark contexts.

The governing principle is that color is the exclusive domain of the product, never the interface.

## 3. Typography

Typography employs a clean humanist sans-serif, its voice architectural and restrained. It shifts between regular weight for body text and bold, all-caps or title-case for headings, using tight letter spacing to create a crisp, editorial rhythm.

- **Display:** humanist-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.0 | 800 | -1px | Hero headlines |
| heading | 40px | 1.2 | 600 | 0px | Section headings |
| body | 16px | 1.5 | 400 | 0.2px | General text |

## 4. Spacing

Rhythm is established through generous whitespace and a structured grid.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 40 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace and tight letter spacing on headings.

## 5. Surfaces

Surfaces are defined by minimal, functional elements: a subtle shadow provides depth only when necessary, and a single-pixel border in black or white outlines context without adding visual weight.

- **Radius:** sm 2px · md 4px · lg 40px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.15) 0px 4px 16px 0px
- **Borders:** 1px solid #000000 or #FFFFFF depending on context.

## 6. Layout

The layout skeleton begins with a full-bleed photographic hero, overlaid with left-aligned text. This dramatic introduction gives way to a rigorous grid of product cards, maintaining a clean, gallery-like sequence.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Full-bleed hero image with overlaid text; grid-based product cards.

## 7. Motion & Interaction

Motion philosophy favors understatement and purpose. Transitions are smooth, using cubic-bezier easing to guide focus during fade-ins and scale transformations, never to distract from the product.

- **Durations:** micro 200ms · small 300ms · medium 600ms
- **Easing:** `cubic-bezier(0.455, 0.03, 0.515, 0.955)`
- **Patterns:**
  - Smooth fade-in transitions
  - Scale transformations on hover

- **Hover:** Subtle opacity or background-color shift.
- **Click:** Standard pointer cursor.
- **Transition:** 0.2s to 0.3s cubic-bezier transitions on interactive elements.
- **Keyboard:** Standard tab navigation.

## 8. Voice & Don'ts

The editorial voice is sophisticated and architectural, with headlines styled in bold, minimal punctuation. It communicates with restraint, letting the visual composition carry the narrative.

- **Tone:** Sophisticated, architectural, and restrained.
- **Headline style:** Bold, all-caps or title-case, minimal punctuation.
- **CTA style:** All-caps, ghost button style.
- **Avoid:** Loud colors / Playful fonts / Excessive UI chrome / Heavy shadows

### Don'ts
- ❌ don't use bright, saturated colors — screenshot shows a palette dominated by black, white, and muted grays.
- ❌ don't use rounded corners on primary elements — screenshot shows sharp edges or very subtle radius.
- ❌ don't add heavy drop shadows to cards — screenshot shows flat, image-driven layouts.
- ❌ don't use decorative or script fonts — screenshot shows a clean, humanist sans-serif for all text.
- ❌ don't clutter the hero section with multiple CTAs — screenshot shows a single, clear 'DISCOVER MORE' button.
- ❌ don't use busy backgrounds behind text — screenshot ensures legibility through dark overlays or solid backgrounds.

The system deliberately excludes bright colors, playful typography, and heavy UI chrome to maintain its focused, gallery-like integrity.

## System Prompt (paste into AI tool)

```
This is a premium Italian lighting brand e-commerce site with a minimalist, editorial aesthetic. The design prioritizes high-quality photography with a high-contrast palette of black (#000000), white (#FFFFFF), and muted gray (#666666). Typography is a clean humanist sans-serif used in both regular and uppercase weights for headings. Critical design constraints: never use bright or saturated accent colors, maintain generous whitespace, and avoid heavy UI elements like thick borders or complex shadows. The layout is strictly grid-based with a focus on large, full-bleed imagery to showcase products in context.
```
