# Example design brief — Attio
Source: https://attio.com/
Reference: the Attio workflow interface shown in the Moodmark marketing demo.
Illustrative brief. Colors below are sampled from that screenshot, not official Attio brand tokens.

## Direction
White and cool-gray surfaces, charcoal text, and pale green and lilac workflow status accents. Fine borders and a restrained sans-serif hierarchy keep the interface quiet.

## Build prompt
Create a light workspace with a left navigation, central workflow canvas and a run-history panel. Use white and cool-gray surfaces with charcoal text. Reserve pale green for completed states and pale lilac for running states. Keep small rounded corners and thin neutral dividers. Use a readable sans-serif and respect reduced motion preferences.

## Palette
- Canvas: #FFFFFF
- Surface: #F4F5F7
- Success tint: #E4F6EA
- Running tint: #F4EFFF
- Text: #232323

These five colors match the five displayed swatches. Tints are backgrounds, not text colors; use charcoal text on all four light surfaces. The Moodmark blue belongs to the surrounding marketing site, not this reference palette.

## Typography
Readable sans-serif typography. Verify the exact font in the source before implementation.

## Structure
Sidebar → workflow canvas → run history.

## CSS tokens
```css
:root {
  --canvas: #ffffff;
  --surface: #f4f5f7;
  --success-tint: #e4f6ea;
  --running-tint: #f4efff;
  --ink: #232323;
}
```

## Tailwind tokens
```js
colors: {
  canvas: '#ffffff',
  surface: '#f4f5f7',
  successTint: '#e4f6ea',
  runningTint: '#f4efff',
  ink: '#232323',
}
```