# Bou · Design system migration spec

> Source: https://bou.co  ·  Curated by OpenDesign  ·  en

> This site is a masterclass in using a monochromatic palette and light typography to create a premium, editorial feel that lets the agency's work and photography take center stage.

## 1. Identity DNA

Bou's digital presence operates like a gallery where the architecture is a deliberate restraint. The system's identity is built on a strict monochromatic palette and light, elegant typography, creating a sophisticated frame that allows the agency's photographic work to provide all visual warmth and narrative.

**One-liner:** A sophisticated, editorial design agency website with a cinematic hero and clean, high-contrast sections.
**Keywords:** branding · marketing · communications · agency · corporate
**Analogy:** A premium design studio that blends high-end photography with clean, editorial typography to create a sophisticated and professional digital presence.

## 2. Color

The color system is a study in monochromatic discipline. A strict black-and-white core, anchored at #0A0A0A and #EBEBEB, serves as the foundational canvas, with photography providing all chromatic expression.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#EBEBEB` | main background |
| `--ink` | `#0A0A0A` | body text |
| `--ink-soft` | `#DBD7DC` | secondary text |
| `--muted` | `#DBD7DC` | placeholder |
| `--line` | `rgba(10,10,10,0.15)` | divider |

**Color principle:** Monochromatic and desaturated with a strict black-and-white core, allowing photography to provide all color and warmth.

The governing principle is that the interface should never compete with the client's work for color.

## 3. Typography

Typography establishes a light, editorial voice through the consistent use of weight 300. This humanist-sans category choice creates an elegant, unobtrusive presence that prioritizes readability and lets content lead.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 42px | 1.1 | 300 | -0.5px | Hero headlines and primary value propositions |
| body | 16px | 1.5 | 300 | 0px | Standard body text, navigation links, and secondary descriptions |
| caption | 14px | 1.4 | 300 | 0.84px | Fine print, metadata, and technical labels |

**Type rules:**
- Use weight 300 for all primary text to maintain an elegant, light feel.
- Apply uppercase transformation only to small labels like 'SERVICES' or 'HELSINKI'.
- Maintain generous line-height (1.4 to 1.5) for optimal readability.

## 4. Spacing

Spacing follows a consistent vertical rhythm of 8px or 16px, creating a structured yet breathable layout.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** A consistent 8px or 16px vertical rhythm is used for padding and gap between elements, ensuring a structured, breathable layout.

## 5. Surfaces

Surfaces are defined by deliberate flatness and minimal intervention. Depth is suggested only by a single, soft shadow value, while borders are restricted to a thin, functional 1px rule.

- **Radius:** sm 4px · md 8px · lg 12px · pill 1400px
- **Shadows:**
  - rgba(0, 0, 0, 0.3) 0px 32px 68px 0px
- **Borders:** 1px solid rgba(10,10,10,0.15) or 1px solid rgb(219, 217, 220)

## 6. Layout

The layout skeleton begins with a full-viewport photographic hero, establishing an immediate cinematic scale. This leads into a structured 12-column grid, frequently split into two columns to separate core content from service listings.

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

**Skeleton:** A full-width photographic hero followed by a two-column split for content and services, using a 12-column grid for flexible alignment.

## 7. Motion & Interaction

Motion philosophy is one of subtle reinforcement, not spectacle. All animations use a consistent cubic-bezier curve and a 0.3s duration, focusing on smooth transitions for interactive elements and understated fade-ins for content revelation.

- **Durations:** micro 200ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.29, 0.48, 0.5, 0.99)`
- **Patterns:**
  - Smooth color transitions for links and buttons.
  - Subtle fade-ins for content sections as they enter the viewport.

- **Hover:** Subtle color shifts or opacity changes on links and buttons.
- **Click:** Immediate response with a smooth transition effect.
- **Transition:** All transitions follow a consistent cubic-bezier curve for a refined feel.
- **Keyboard:** Standard tab navigation with visible focus states.

## 8. Voice & Don'ts

The editorial voice is professional, confident, and direct. Language is clean and descriptive, avoiding casual tone or superfluous exclamation to maintain the system's refined authority.

- **Tone:** Professional, confident, and direct.
- **Headline style:** Clean, elegant, and descriptive, focusing on the agency's core services.
- **CTA style:** Minimalist, using simple text links or small pill-shaped buttons.
- **Avoid:** Avoid overly casual or slang language. / Avoid excessive use of exclamation marks. / Avoid complex or technical jargon not essential to the service.

### Don'ts
- ❌ don't use high-saturation colors — screenshot shows a strictly monochromatic black-and-white palette.
- ❌ don't use heavy, bold typography — screenshot shows a dominant use of weight 300 for a light, elegant feel.
- ❌ don't use rounded cards with shadows — screenshot shows flat, borderless layouts where photography defines edges.
- ❌ don't use small, cramped spacing — screenshot shows generous padding and gaps (8px-16px) for a breathable feel.
- ❌ don't use decorative borders — screenshot shows minimal 1px borders only for functional elements like chips or inputs.
- ❌ don't use complex, multi-color gradients — screenshot shows a clean, solid-color background with photographic depth.

The system deliberately avoids high-saturation colors, bold typographic weights, decorative borders, and complex gradients—choices that would compromise its photographic focus and serene professionalism.

## System Prompt (paste into AI tool)

```
This is a premium agency website for 'Bou', a brand company. The design is editorial and sophisticated, using a strict monochromatic palette of black (#0A0A0A) and light gray (#EBEBEB), allowing high-quality photography to provide all visual interest. Typography is humanist-sans at weight 300, creating a light and elegant feel. The layout is clean and grid-based, with generous spacing. Critical donts: 1. Never use high-saturation colors, as the design is strictly monochromatic. 2. Never use bold, heavy typography; maintain the light, refined weight 300. 3. Avoid decorative borders or heavy shadows; keep surfaces flat and photography-driven. The overall voice is professional and direct.
```