---
name: Work & Co
description: "A perfect example of restrained, typography-driven agency design that prioritizes clarity and prestige over visual noise."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  tertiary: "#DB2223"
  neutral: "#DDDDDD"
  line: "rgba(0,0,0,1.0)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1.12px"
  heading:
    fontFamily: transitional-serif
    fontSize: 36px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.72px"
  body:
    fontFamily: transitional-serif
    fontSize: 16px
    lineHeight: 1.15
    fontWeight: 400
    letterSpacing: "-0.2px"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 999px

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

---

## Overview

A minimal, confident agency portfolio that lets the typography and high-profile client work speak for itself.

*A prestigious design and technology consultancy.*

## Colors

High-contrast minimalism with a single aggressive red accent.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Accent (`#DB2223`)** — uses `accent` token
- **Muted (`#DDDDDD`)** — uses `muted` token
- **Borders (`rgba(0,0,0,1.0)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** transitional-serif

- Use transitional serif for all primary text and headings.
- Use sans-serif (as seen in 'Part of Accenture Song') for small utility text or specific brand logos.
- Tight letter-spacing for large headlines.

## Layout

Asymmetrical 2-column grid (1/3 label, 2/3 content) that collapses on mobile.

*Rhythm:* Generous vertical spacing with large padding (60px, 100px) between major sections.

## Elevation & Depth

- 0px -1px 0px 0px inset rgb(0,0,0)
- Borders: Thin 1px solid borders for separating sections.

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 999px

## Components

- **button:** Text links with underline, colored in accent red or black.
- **card:** Minimalist card with a top-aligned image and simple serif text below.
- **hero:** Large left-aligned text block with a supporting quote and CTA.

## Do's and Don'ts

**Don't:**
- Don't use sans-serif for primary typography — the screenshot shows a heavy reliance on a transitional serif font.
- Don't use multiple accent colors — the screenshot shows a consistent use of only red (#DB2223) for emphasis.
- Don't use drop shadows for depth — the screenshot shows a completely flat, 2D layout with no visible shadow elements.
- Don't center the layout — the screenshot shows a consistently left-aligned text and section structure.
- Don't use rounded corners on cards or UI elements — the screenshot shows sharp, 0px radius corners on all rectangular elements.
- Don't use bold weights for body text — the screenshot shows a consistent font-weight of 400 for standard text.

---

## System Prompt (paste into AI agent)

```
This is a professional agency website for Work & Co, featuring a minimalist, high-contrast design. The primary palette is pure white (#FFFFFF) and black (#000000) with a single aggressive red accent (#DB2223) used for the logo and links. Typography relies heavily on a transitional serif for both display and body text, creating an editorial feel, while sans-serif is used strictly for small utility labels like the 'Part of Accenture Song' byline. Layout uses an asymmetrical 2-column grid with generous vertical padding. Key donts: never use drop shadows, never center the main content blocks, and never deviate from the single red accent color.
```