monopo london

# monopo london — Style Reference
> Midnight gradient canvas

**Theme:** dark

Monopo London employs a moody, high-contrast aesthetic, combining a deep black background with crisp white typography and subtle, shifting gradients that create an immersive, dynamic canvas. Typography is compact and confident, often appearing in all caps with generous letter-spacing, contributing to a premium, editorial feel that prioritizes visual impact over text density. Interactive elements are understated, often relying on hover states or minimal outlines against the dark canvas, maintaining a clean yet engaging user experience.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Midnight Canvas | `#000000` | `--color-midnight-canvas` | Page backgrounds, card surfaces, dominant dark areas |
| Ghost White | `#ffffff` | `--color-ghost-white` | Hairline borders, dividers, input outlines, and card edges on light surfaces. Do not promote it to the primary CTA color |
| Subtle Gray | `#7f7f7f` | `--color-subtle-gray` | Muted secondary text, inactive link borders, subtle decorative details |
| Medium Gray | `#666970` | `--color-medium-gray` | Dark borders and separators for elevated surfaces and inverted UI. |
| Nebula Gradient | `radial-gradient(circle at center, #cc490c, #ce510b, #cf590b, #d15f0a, #d2660a, #ca7619, #c38428, #bb9136, #aca753, #9ac171, #84dc92, #65faca)` | `--color-nebula-gradient` | Immersive full-bleed background for hero sections and abstract visual elements. This gradient sets the mood and provides visual interest for large areas |

## Tokens — Typography

### Roobert — The primary typeface for all text. Its compact, almost monospaced feel with consistent letter-spacing across weights contributes to the editorial, high-tech brand identity. Light weights (300, 400) are used for body text and navigation, while heavier weights (700, 800) bring punch to headlines and callouts. · `--font-roobert`
- **Substitute:** system-ui, sans-serif or Space Grotesk
- **Weights:** 300, 400, 700, 800
- **Sizes:** 12px, 14px, 16px, 17px, 22px, 33px, 45px
- **Line height:** 1.00, 1.09, 1.15, 1.16, 1.20, 1.23, 1.44
- **Letter spacing:** 0.1500em
- **OpenType features:** `"kern", "liga"`
- **Role:** The primary typeface for all text. Its compact, almost monospaced feel with consistent letter-spacing across weights contributes to the editorial, high-tech brand identity. Light weights (300, 400) are used for body text and navigation, while heavier weights (700, 800) bring punch to headlines and callouts.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.16 | — | `--text-caption` |
| body-sm | 14px | 1.16 | — | `--text-body-sm` |
| body | 16px | 1.16 | — | `--text-body` |
| body-lg | 17px | 1.16 | — | `--text-body-lg` |
| heading-sm | 22px | 1.16 | — | `--text-heading-sm` |
| heading | 33px | 1.16 | — | `--text-heading` |
| heading-lg | 45px | 1.16 | — | `--text-heading-lg` |

## Tokens — Spacing & Shapes

**Base unit:** 8px

**Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 5 | 5px | `--spacing-5` |
| 8 | 8px | `--spacing-8` |
| 14 | 14px | `--spacing-14` |
| 15 | 15px | `--spacing-15` |
| 16 | 16px | `--spacing-16` |
| 17 | 17px | `--spacing-17` |
| 25 | 25px | `--spacing-25` |
| 35 | 35px | `--spacing-35` |
| 55 | 55px | `--spacing-55` |
| 56 | 56px | `--spacing-56` |
| 111 | 111px | `--spacing-111` |

### Border Radius

| Element | Value |
|---------|-------|
| links | 42px |

### Layout

- **Section gap:** 111px
- **Card padding:** 15px
- **Element gap:** 8px

## Components

### Ghost Navigation Link
**Role:** Primary navigation and footer links

Text in Ghost White (#ffffff) with 0.15em letter-spacing. On hover, an underline or border appears. Minimal padding.

### Outlined Call to Action Button
**Role:** Secondary action button for discovering projects or general calls to action.

Transparent background, Ghost White (#ffffff) text, and a thin Ghost White (#ffffff) border. The border is 1px solid. The border-radius is 42px.

### Hero Headline
**Role:** Dominant text for hero sections.

Large text (e.g., 45px) using Roobert, typically weight 800, color Ghost White (#ffffff), with expanded letter-spacing (0.15em) and minimal line-height. Renders central to the gradient background.

### Sub-headline / Section Title
**Role:** Titles for section content like 'RECENT WORK'.

Uppercase text (e.g., 22px) using Roobert weight 700, Ghost White (#ffffff) color, with significant letter-spacing (0.15em). Often paired with a subtle border in Medium Gray (#666970).

## Do's and Don'ts

### Do
- Prioritize Midnight Canvas (#000000) for all backgrounds to maintain the dark, atmospheric base.
- Use Ghost White (#ffffff) for all primary text, headlines, and interactive element outlines to ensure high contrast and legibility.
- Apply Roobert as the sole typeface, utilizing its full range of weights and the defined letter-spacing (0.15em) to achieve a modern, compact aesthetic.
- Maintain the distinct 0.15em letter-spacing for all text, overriding default browser rules for a signature look.
- Incorporate subtle linear borders in Medium Gray (#666970) for visual separation or secondary text accents rather than heavy dividers.
- Employ the Nebula Gradient for full-bleed hero sections to establish the site's dynamic and immersive visual identity.
- Use 42px border-radius for all interactive pill-shaped elements like buttons and links to reinforce a consistent soft visual language.

### Don't
- Do not introduce additional background colors outside of Midnight Canvas (#000000) for primary surfaces.
- Avoid using light backgrounds for content sections; the system is designed around dark mode contrast.
- Do not deviate from the Roobert typeface or its prescribed letter-spacing and line-height values.
- Do not use generic box shadows; elevation is minimal and achieved through subtle borders or background contrast.
- Avoid standard, small icon sizes; elements should feel robust and have presence, even when non-textual.
- Do not use highly saturated, flat colors for large areas; colors should be used for accents or in gradient forms.
- Avoid dense paragraphs of body text; content should be broken into shorter, impactful statements.

## Imagery

This design system uses a combination of abstract, subtly blurred gradients (often serving as full-bleed backgrounds) and focused product screenshots or project images. The gradients provide a moody, almost cosmic backdrop, while project images are typically contained, but can occasionally overlap with text. Photography, when present, is product-focused or showcases details relevant to the project, lacking overt lifestyle or human elements. Icons are minimalist, outlined, and monochromatic, taking on the Ghost White (#ffffff) color. The emphasis is on atmosphere and showcasing work crisply rather than illustrative decoration or dense visual content. Image density is moderate, allowing text to also hold significant visual space.

## Agent Prompt Guide

Quick Color Reference: 
text: #ffffff
background: #000000
border: #7f7f7f
accent: #cd5a07 (part of gradient)
primary action: no distinct CTA color

Example Component Prompts:
1. Create a hero section: full-bleed Nebula Gradient background. Centered headline 'We are a brand of collective creativity' using Roobert weight 800, 45px size, 1.0 line-height, 0.15em letter-spacing, #ffffff color. Top-right navigation link 'WORK' using Roobert weight 400, 16px size, 1.44 line-height, 0.15em letter-spacing, #ffffff color.
No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color.
3. Implement a 'RECENT WORK' section title: Text 'RECENT WORK' using Roobert weight 700, 22px size, 1.23 line-height, 0.15em letter-spacing, #ffffff color. Below that, 'NKORA COFFEE ‣ BRAND IDENTITY' using Roobert weight 800, 33px size, 1.15 line-height, 0.15em letter-spacing, #ffffff color. Add a thin baseline in Medium Gray (#666970).

## Similar Brands

- **Basic/Dept®** — Both use a primary deep dark background, bold typography with customized letter-spacing, and a focus on high-impact visuals for agency work.
- **Active Theory** — Shares a heavy emphasis on immersive, full-bleed backgrounds often with dynamic gradients or abstract visuals, paired with refined, high-contrast typography.
- **Ueno** — Known for stark, high-contrast dark UIs with generous spacing, custom typography, and a premium, editorial feel in their digital agency portfolios.
- **B-Reel** — Exhibits similar traits of a dark theme, strong typographic statements, and showcasing creative work with a focus on visual impact over verbose descriptions.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-midnight-canvas: #000000;
  --color-ghost-white: #ffffff;
  --color-subtle-gray: #7f7f7f;
  --color-medium-gray: #666970;
  --color-nebula-gradient: #cd5a07;
  --gradient-nebula-gradient: radial-gradient(circle at center, #cc490c, #ce510b, #cf590b, #d15f0a, #d2660a, #ca7619, #c38428, #bb9136, #aca753, #9ac171, #84dc92, #65faca);

  /* Typography — Font Families */
  --font-roobert: 'Roobert', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.16;
  --text-body-sm: 14px;
  --leading-body-sm: 1.16;
  --text-body: 16px;
  --leading-body: 1.16;
  --text-body-lg: 17px;
  --leading-body-lg: 1.16;
  --text-heading-sm: 22px;
  --leading-heading-sm: 1.16;
  --text-heading: 33px;
  --leading-heading: 1.16;
  --text-heading-lg: 45px;
  --leading-heading-lg: 1.16;

  /* Typography — Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-5: 5px;
  --spacing-8: 8px;
  --spacing-14: 14px;
  --spacing-15: 15px;
  --spacing-16: 16px;
  --spacing-17: 17px;
  --spacing-25: 25px;
  --spacing-35: 35px;
  --spacing-55: 55px;
  --spacing-56: 56px;
  --spacing-111: 111px;

  /* Layout */
  --section-gap: 111px;
  --card-padding: 15px;
  --element-gap: 8px;

  /* Border Radius */
  --radius-3xl: 42px;

  /* Named Radii */
  --radius-links: 42px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-midnight-canvas: #000000;
  --color-ghost-white: #ffffff;
  --color-subtle-gray: #7f7f7f;
  --color-medium-gray: #666970;
  --color-nebula-gradient: #cd5a07;

  /* Typography */
  --font-roobert: 'Roobert', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.16;
  --text-body-sm: 14px;
  --leading-body-sm: 1.16;
  --text-body: 16px;
  --leading-body: 1.16;
  --text-body-lg: 17px;
  --leading-body-lg: 1.16;
  --text-heading-sm: 22px;
  --leading-heading-sm: 1.16;
  --text-heading: 33px;
  --leading-heading: 1.16;
  --text-heading-lg: 45px;
  --leading-heading-lg: 1.16;

  /* Spacing */
  --spacing-5: 5px;
  --spacing-8: 8px;
  --spacing-14: 14px;
  --spacing-15: 15px;
  --spacing-16: 16px;
  --spacing-17: 17px;
  --spacing-25: 25px;
  --spacing-35: 35px;
  --spacing-55: 55px;
  --spacing-56: 56px;
  --spacing-111: 111px;

  /* Border Radius */
  --radius-3xl: 42px;
}
```