---
name: Bou
description: "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."
version: alpha

colors:
  background: "#EBEBEB"
  primary: "#0A0A0A"
  secondary: "#DBD7DC"
  neutral: "#DBD7DC"
  line: "rgba(10,10,10,0.15)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 42px
    lineHeight: 1.1
    fontWeight: 300
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 300
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 300
    letterSpacing: "0.84px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 1400px

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

---

## Overview

A sophisticated, editorial design agency website with a cinematic hero and clean, high-contrast sections.

*A premium design studio that blends high-end photography with clean, editorial typography to create a sophisticated and professional digital presence.*

## Colors

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

- **Background (`#EBEBEB`)** — uses `bg` token
- **Primary text (`#0A0A0A`)** — uses `ink` token
- **Secondary text (`#DBD7DC`)** — uses `ink-soft` token
- **Muted (`#DBD7DC`)** — uses `muted` token
- **Borders (`rgba(10,10,10,0.15)`)** — uses `line` token

## Typography

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

- 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.

## Layout

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

*Rhythm:* A consistent 8px or 16px vertical rhythm is used for padding and gap between elements, ensuring a structured, breathable layout.

## Elevation & Depth

- 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)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 1400px

## Components

- **button:** Pill-shaped buttons with a black background and white text, or minimalist ghost buttons with white borders on dark backgrounds.
- **card:** Minimalist, borderless cards that rely on large photography and clean typography for hierarchy.
- **chip:** Small, pill-shaped tags with uppercase text and thin borders, used for locations or categories.
- **input:** Minimalist inputs with a simple 1px bottom border and no background.
- **hero:** A full-viewport cinematic photograph with centered, large-scale typography overlayed.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```