O0

# O0 — Style Reference
> gallery wall contrast

**Theme:** light

O0 establishes a commanding, minimalist aesthetic through stark black and white contrasts and oversized, serif typography for headlines. The interaction is focused on content, with a high degree of content density. The system relies on precise typographic interplay and generous negative space to convey a sense of modern authority, using a light theme with occasional inverse dark sections for dramatic effect. Components are typically ghosted or outlined, allowing content to take center stage.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Midnight Black | `#000000` | `--color-midnight-black` | Primary text, headline text, content backgrounds in inverted sections, borders, icons. Creates a stark, authoritative contrast |
| Canvas White | `#ffffff` | `--color-canvas-white` | Primary page background, text on dark backgrounds, borders, icons. Provides a bright, expansive base for content |
| Cloud Mist | `#f2f2f2` | `--color-cloud-mist` | Subtle background for UI sections, offering a slight visual break from pure white. Used for alternating section backgrounds |
| Pale Ash | `#e8e9ea` | `--color-pale-ash` | Secondary background for card surfaces or distinct content blocks, providing minimal differentiation |
| Stone Gray | `#cecdcb` | `--color-stone-gray` | Background for minor interactive elements or subtle dividers. A slightly darker neutral for lower emphasis UI elements |
| Yellow Accent | `#ffe500` | `--color-yellow-accent` | Supporting palette color for small decorative accents when the core palette needs contrast. Do not promote it to the primary CTA color |

## Tokens — Typography

### Times — Primary headlines and display text. The serif typeface at large sizes provides a classic, upscale feel, while the tight line height maximizes visual impact. · `--font-times`
- **Substitute:** Times New Roman
- **Weights:** 400
- **Sizes:** 48px, 52px, 54px, 64px, 66px, 79px, 88px
- **Line height:** 0.90, 1.00
- **Role:** Primary headlines and display text. The serif typeface at large sizes provides a classic, upscale feel, while the tight line height maximizes visual impact.

### Arial — Navigation, body text, and descriptive labels. The sans-serif provides clear readability and a modern counterpoint to the serif headlines. · `--font-arial`
- **Substitute:** Arial
- **Weights:** 400
- **Sizes:** 16px, 20px
- **Line height:** 1.15, 1.20, 1.22, 1.25, 1.44, 1.50
- **Role:** Navigation, body text, and descriptive labels. The sans-serif provides clear readability and a modern counterpoint to the serif headlines.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| body | 16px | 1.5 | — | `--text-body` |
| body-lg | 20px | 1.25 | — | `--text-body-lg` |
| heading-sm | 48px | 1 | — | `--text-heading-sm` |
| heading | 52px | 1 | — | `--text-heading` |
| heading-lg | 54px | 1 | — | `--text-heading-lg` |
| display | 64px | 0.9 | — | `--text-display` |

## Tokens — Spacing & Shapes

**Density:** compact

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 10 | 10px | `--spacing-10` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 30 | 30px | `--spacing-30` |
| 60 | 60px | `--spacing-60` |
| 113 | 113px | `--spacing-113` |

### Border Radius

| Element | Value |
|---------|-------|
| none | 0px |

### Layout

- **Section gap:** 60px
- **Card padding:** 10px
- **Element gap:** 10px

## Components

### Ghost Navigation Link
**Role:** Navigation item

Text link with no background or padding, using Arial 400 at 16px, Midnight Black text color. Interacts purely through text.

### Ghost Button
**Role:** Call to action

A button with no background, no padding, and a 0px border-radius, using #000000 text. Appears as a textual link but functions as an interactive button.

### Client Logo Grid Item
**Role:** Static display

Grid item for client logos, visually contained mostly by implicit spacing, sometimes within a Cloud Mist background section.

### Section Divider (Subtle)
**Role:** Visual separation

Implicit divider based on background color changes, such as between Canvas White and Cloud Mist sections, or a 2px solid border using a neutral color (not explicitly specified by usage but common practice for borders).

### Primary Heading (Times)
**Role:** Hero headline

Large serif text using Times 400, ranging from 48px to 88px, with tight line heights (0.9 to 1.0) and Midnight Black color. Dominates the visual hierarchy.

### Body Text (Arial)
**Role:** Descriptive content

Standard readable text using Arial 400 at 16px or 20px, typically in Midnight Black, with generous line heights for readability.

## Do's and Don'ts

### Do
- Prioritize stark black and white contrasts for all primary interactive and textual elements using #000000 and #ffffff.
- Use Times 400 for all headlines and display text, selecting appropriate sizes from the established scale (48-88px) with tight line heights (0.9-1.0).
- Apply Arial 400 for all body text, navigation, and labels, at 16px or 20px, with line heights tuned for readability (1.15-1.5).
- Maintain a compact element spacing of 10px where interaction requires proximity without visual clutter.
- Establish clear section breaks using large vertical gaps (60px) or by alternating background colors between Canvas White and Cloud Mist.
- Utilize ghosted or text-only buttons and interactive elements, relying on color changes for hover states rather than filled backgrounds.
- Keep all border-radii at 0px to uphold a sharp, angular aesthetic across UI elements.

### Don't
- Avoid using saturated colors for backgrounds or primary interactive elements; color should be used sparingly for decorative accents only.
- Do not introduce soft shadows or rounded corners, as the system relies on flat surfaces and sharp edges.
- Do not deviate from the strict typographic pairing of Times for headlines and Arial for body text; avoid using other fonts or weights.
- Refrain from dense layouts where large section gaps (60px) are intended to create breathing room.
- Do not use background colors with high saturation or significant chromaticity for any functional UI element.
- Avoid decorative gradients or complex visual textures; the system thrives on minimalism and solid color blocks.
- Do not allow internal element padding to grow beyond 10px, as the system emphasizes content density.

## Imagery

The visual language focuses on high-quality product photography, often tightly cropped and presented on pure white or stark black backgrounds, sometimes full-bleed with minimal context beyond the product itself. Illustrations are likely minimalist, possibly geometric or outlined, used for abstract concepts rather than decorative flourishes. Iconography is clean and outlined, maintaining the system's overall stark and functional feel. Imagery serves primarily to showcase products and services directly, acting as explanatory content rather than atmospheric decoration. The density is image-heavy in portfolio sections, but balanced with significant negative space around key visual elements.

## Layout

The page primarily uses a full-bleed layout for hero sections and some content blocks, transitioning to a contained max-width structure implicitly defined by content alignment. The hero section often features a large, centered headline on a vast white canvas. Sections alternate between pure white, subtle Cloud Mist backgrounds, and dramatic full-bleed Midnight Black blocks. Content is arranged in prominent center-aligned stacks or two-column layouts, with text sometimes on one side and imagery or whitespace on the other. Navigation is a simple top-right floating text menu, maintaining a clean header. Grid usage is subtle, hinted at by client logos and portfolio showcases.

## Agent Prompt Guide

Quick Color Reference:
text: #000000
background: #ffffff
border: #000000
accent: #ffe500
primary action: no distinct CTA color

Example Component Prompts:
Create a Hero Section: full-bleed background #ffffff. Centered headline 'Full-stack cloud design studio' using Times 400 at 88px, #000000. No other elements.
Create a Client Logo Grid: Background #f2f2f2. A 60px section gap above and below. Grid of client logos (placeholders if needed) with 60px column and row gaps. Each logo container is 0px radius.
Create a Testimonial Block: Background #000000. Text for quote '“You absolutely smashed this. You knocked it out of the park.”' using Arial 400 at 20px, #ffffff. Below, 'Chris Palazzo, Creative Director' using Arial 400 at 16px, #ffffff. Padding of 40px around all text.

## Similar Brands

- **Stripe** — Shares a reliance on clean typography, abundant whitespace, and a high-contrast black/white aesthetic for a serious, functional presentation.
- **Linear** — Exhibits similar compact text-driven UI, strong minimal contrasts, and a focus on content hierarchy over decorative elements.
- **Apple (services pages)** — Utilizes large, impactful typography, high-quality product imagery on minimal backgrounds, and a disciplined color palette centered on neutrals.
- **Pitch** — Adopts a high-contrast, minimalist design with a strong typographic presence and a focus on clean content presentation over elaborate UI.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-midnight-black: #000000;
  --color-canvas-white: #ffffff;
  --color-cloud-mist: #f2f2f2;
  --color-pale-ash: #e8e9ea;
  --color-stone-gray: #cecdcb;
  --color-yellow-accent: #ffe500;

  /* Typography — Font Families */
  --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-body: 16px;
  --leading-body: 1.5;
  --text-body-lg: 20px;
  --leading-body-lg: 1.25;
  --text-heading-sm: 48px;
  --leading-heading-sm: 1;
  --text-heading: 52px;
  --leading-heading: 1;
  --text-heading-lg: 54px;
  --leading-heading-lg: 1;
  --text-display: 64px;
  --leading-display: 0.9;

  /* Typography — Weights */
  --font-weight-regular: 400;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-30: 30px;
  --spacing-60: 60px;
  --spacing-113: 113px;

  /* Layout */
  --section-gap: 60px;
  --card-padding: 10px;
  --element-gap: 10px;

  /* Named Radii */
  --radius-none: 0px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-midnight-black: #000000;
  --color-canvas-white: #ffffff;
  --color-cloud-mist: #f2f2f2;
  --color-pale-ash: #e8e9ea;
  --color-stone-gray: #cecdcb;
  --color-yellow-accent: #ffe500;

  /* Typography */
  --font-times: 'Times', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-body: 16px;
  --leading-body: 1.5;
  --text-body-lg: 20px;
  --leading-body-lg: 1.25;
  --text-heading-sm: 48px;
  --leading-heading-sm: 1;
  --text-heading: 52px;
  --leading-heading: 1;
  --text-heading-lg: 54px;
  --leading-heading-lg: 1;
  --text-display: 64px;
  --leading-display: 0.9;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-30: 30px;
  --spacing-60: 60px;
  --spacing-113: 113px;
}
```