# Work & Co · Design system migration spec

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

> A perfect example of restrained, typography-driven agency design that prioritizes clarity and prestige over visual noise.

## 1. Identity DNA

The Work & Co identity operates like a prestigious consultancy's letterhead: confident, typographically dominant, and deliberately sparse. Every element exists to project strategic authority, not to decorate. This is a system where the absence of ornament is the primary statement.

**One-liner:** A minimal, confident agency portfolio that lets the typography and high-profile client work speak for itself.
**Keywords:** Strategy · Design · Technology · Enterprise · Problem Solving
**Analogy:** A prestigious design and technology consultancy.

## 2. Color

The color palette is a strict monochrome field with a single, aggressive red accent (#DB2223). This chromatic restraint forces all emphasis into typographic hierarchy and layout asymmetry.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#DDDDDD` | placeholder |
| `--accent` | `#DB2223` | single accent |
| `--line` | `rgba(0,0,0,1.0)` | divider |

**Color principle:** High-contrast minimalism with a single aggressive red accent.

The principle is absolute: one accent color carries the entire burden of visual emphasis, making it unmistakable.

## 3. Typography

Typography is the primary voice of the system, anchored by a transitional serif for both display and body text, creating a consistent editorial tone. Sans-serif is reserved exclusively for utility labels and specific brand marks, reinforcing a clear typographic hierarchy.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 500 | -1.12px | Hero headline |
| heading | 36px | 1.1 | 400 | -0.72px | Section titles |
| body | 16px | 1.15 | 400 | -0.2px | Body text and quotes |

**Type rules:**
- 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.

## 4. Spacing

Vertical rhythm is established through generous, deliberate spacing that creates clear visual chapters between content blocks.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical spacing with large padding (60px, 100px) between major sections.

## 5. Surfaces

Surface treatment is radically flat, defined only by a sharp 1px inset border to delineate sections. Depth is communicated through typographic weight and layout position, never through shadow.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Shadows:**
  - 0px -1px 0px 0px inset rgb(0,0,0)
- **Borders:** Thin 1px solid borders for separating sections.

## 6. Layout

The skeleton is an asymmetrical two-column grid, typically assigning a narrow left column for labels or categories against a wider right column for content. This left-aligned baseline creates a strong, continuous reading axis that collapses cleanly to a single column on mobile.

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

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

## 7. Motion & Interaction

Motion philosophy is one of quiet confirmation, not decoration. Transitions are minimal and fast (0.25s), serving only to acknowledge interaction through color change or underline animation.

- **Durations:** micro 250ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Color and underline transitions on text links.

- **Hover:** Text color change or underline animation.
- **Click:** Standard pointer cursor.
- **Transition:** 0.25s ease for color and text-decoration properties.
- **Keyboard:** Standard browser defaults.

## 8. Voice & Don'ts

The editorial voice is authoritative, concise, and understated, mirroring the precision of the visual system. Language is declarative and slightly academic, avoiding jargon and exclamation.

- **Tone:** Authoritative, concise, and understated.
- **Headline style:** Declarative and slightly academic.
- **CTA style:** Simple, underlined text links (e.g., 'Learn more').
- **Avoid:** Jargon / Excessive capitalization / Loud call-to-action buttons

### Don'ts
- ❌ 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.

They deliberately avoid any element that could be read as a 'marketing' gesture, from loud buttons to decorative gradients.

## System Prompt (paste into AI tool)

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