# Together AI — Marketing Site Design Spec

> Source: together.ai (live DOM, computed styles), 2026-07-17 (desktop 1512px).
> Coverage: home / marketing. Dashboard: pending login (`needs-dashboard`). Responsive: breakpoints from tokens only; mobile rendering not verified.

## 1. Visual Theme & Atmosphere

Clean, editorial AI-cloud brand: a bright white canvas set with an enormous "The Future" display headline at a calm medium weight (500), so the type reads like a print cover rather than a dev-tool hero. The chrome is strictly black-on-white — a floating rounded pill nav, black square-ish CTAs whose labels are set in uppercase PP Neue Montreal Mono — while all colour is rationed to a soft pastel product palette (purple, cyan, blue, pink, orange) that appears as large flat stat panels and in the multi-dot logo. The signature hero move is a two-tone headline: the first line in solid black, the continuation in mid-gray. Dark sections invert to near-black / deep navy. Nothing is glossy; whitespace, scale and the pastel blocks do the work. Feels: clean, editorial, technical, optimistic.

## 2. Color Palette & Roles

### Surfaces
| Token | Hex | Role / usage |
|---|---|---|
| white | `#ffffff` | Page background, cards, pill nav |
| black | `#000000` | Dark inverted sections, buttons |
| dark-blue | `#010120` | Deep navy inverted sections |

### Text
| Token | Hex | Role / usage |
|---|---|---|
| ink | `#000000` | Primary text, headings |
| gray-line-2 | `#b9b5b8` | Muted / second-line hero gray, secondary |
| white | `#ffffff` | Text on dark/black surfaces |

### Accent — pastel product palette (paired 01 saturated / 02 pale)
| Token | Hex | Role / usage |
|---|---|---|
| purple-01 / 02 | `#bdbbff` / `#dfddfe` | Logo dot, divider ticks, pale panels |
| cyan-01 / 02 | `#70e9f0` / `#c8f6f9` | Product panels, accents |
| blue-01 / 02 | `#9bcdf5` / `#c1dff9` | Stat panels |
| pink-01 / 02 | `#f7b0df` / `#fde3f6` | Stat panels, logo dot |
| orange-01 / 02 | `#febea3` / `#ffdccd` | Stat panels, logo dot |
| accent-cyan | `#03c7d1` | Saturated inline accent text |
| accent-pink | `#fc92e3` | Saturated inline accent text |
| accent-orange | `#ff8430` | Saturated inline accent text |

### Shades (alpha overlays)
| Token | Hex | Role / usage |
|---|---|---|
| black-op-8 | `#00000014` | Hairline borders, dividers |
| black-op-70 | `#000000b3` | Overlays |
| white-op-80 | `#ffffffcc` | Text on dark |

Rule: UI chrome is pure black-on-white; the pastel -02 tints fill large flat stat/product panels, -01 tints and the saturated cyan/pink/orange appear only in the logo, small divider ticks and inline accent words — never as button fills.

## 3. Typography Rules

- Display + Body: `"The Future", Arial, sans-serif` — one family across headings and body, medium weight with tight negative tracking.
- Labels / buttons: `"PP Neue Montreal Mono", monospace` — uppercase, wide micro-tracking.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 64 / 70.4 | 500 | -1.92px (-3%) |
| Section (h2) | 40 / 48 | 500 | -0.8px |
| Body / lead | 18 / 23.4 | 400 | -0.18px |
| Mono label / button | 9.6–11 | 500 | +0.055–0.08px, UPPERCASE |

Patterns: headings are set large at a single medium 500 weight with tight negative tracking; the hero splits into two tones (black then gray). Emphasis comes from size and the mono micro-labels, not bold weights.

## 4. Component Stylings

### Buttons
- **Primary (black)**: bg `#000000`, text `#ffffff`, radius `4px`, PP Neue Montreal Mono ~10px UPPERCASE, h `40px`. Hover: subtle lighten.
- **Secondary (light)**: bg light `#f2f2f2`-ish gray, text `#000000`, radius `4px`, same mono label.
- **Nav Sign in**: small black pill/button, white text, 32px.

### Nav
- Floating rounded white bar with a soft shadow, detached from the top edge: multi-dot together.ai logo left, center dropdown links (Inference / Compute / Model Shaping / Research / Developers / Company / Pricing), right Contact Sales (text) + black Sign in.

### Cards / panels
- Large flat stat panels in pastel -02 tints (blue `#c1dff9`, pink `#fde3f6`, orange `#ffdccd`), radius ~`5–16px`, holding a huge black stat number top-left and a small caption bottom-left, joined by tiny purple `#bdbbff` divider ticks. Flat — no shadow.

### Inputs
- Not prominently captured on marketing; assume white field with `#00000014` border. Focus ring not captured.

## 5. Layout Principles

- Max content width ~1280px; generous margins and whitespace.
- Hero anatomy: huge two-tone 64px "The Future" headline, one-line lead, two mono-label CTAs.
- Stat/product rows use a 3-up grid of full-height pastel panels.
- Base spacing generous (spacer scale in em: 6.25em/5em/7.5em); strong vertical rhythm; sections alternate white with black / dark-navy inverted blocks.

## 6. Depth & Elevation

- Radii: `4px` (buttons), `5px`, `8px`, `16px`, `20px` (panels/cards). Base `--_radius---4` = .25em, `--_radius---8` = .5em.
- Elevation: mostly flat. The floating nav bar carries a soft shadow; pastel panels are shadowless flat fills. Hairlines use `#00000014`.

## 7. Motion

- Restrained: color/opacity micro-transitions on hover; dropdown menus open under nav items. No heavy scroll library confirmed. Ease default cubic-bezier.

## 8. Backgrounds, Effects & WebGL

- Largely flat solid surfaces. Colour arrives as flat pastel panels rather than gradients.
- Inverted dark sections use solid black `#000000` / deep navy `#010120`.
- No WebGL hero or background video confirmed. The multi-dot logo is the signature colour mark.

## 9. Do's and Don'ts

### Do
- Keep the canvas pure white with black text and a floating rounded pill nav.
- Set headings in "The Future" at a medium 500 weight with tight negative tracking; split the hero into a black line + gray line.
- Set button and micro-labels in uppercase PP Neue Montreal Mono.
- Use black square-ish (`4px`) CTAs; keep a light-gray secondary.
- Ration colour to flat pastel -02 panels, the multi-dot logo, small divider ticks and the saturated cyan/pink/orange accent words.

### Don't
- Don't fill buttons with the pastel palette — buttons are black or light-gray.
- Don't add heavy/bold display weights; the look depends on 500-weight type at large scale.
- Don't add glossy gradients or drop shadows to the pastel panels — they are flat.
- Don't set button labels in a sans face or in sentence case — they are uppercase mono.
- Don't switch the canvas to a colour; it is white (dark sections are the exception).

## 10. Responsive Behavior

- Fluid type; nav collapses to a menu on mobile (markup present). Mobile rendering not verified — captured at desktop 1512px only.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#ffffff` · Text `#000000` · Muted `#b9b5b8` · Border `#00000014` · Accent pastels (purple `#bdbbff`, cyan `#70e9f0`, blue `#9bcdf5`, pink `#f7b0df`, orange `#febea3`)
- Fonts: The Future 500 (display+body, tight tracking) / PP Neue Montreal Mono (uppercase labels) · Body 18px · Radius 4px button / 5–16px panel · Button height 40px, mono uppercase
- Focus: not captured · Hover: subtle lighten

<together-ai_design_language>
Use the Together AI design language: a clean editorial AI-cloud brand on a pure-white canvas #ffffff with black ink #000000, a floating rounded white pill nav and black square-ish CTAs at 4px radius whose labels are set in UPPERCASE PP Neue Montreal Mono. Headings use "The Future" at a single medium 500 weight with tight negative tracking (h1 64px at -1.92px, h2 40px at -0.8px) and body is the same family at 18px/400; the signature hero move splits the headline into a solid-black first line and a mid-gray (#b9b5b8) continuation. Colour is rationed to a soft pastel product palette — purple #bdbbff, cyan #70e9f0, blue #9bcdf5, pink #f7b0df, orange #febea3 (each with a paler -02 tint like #c1dff9, #fde3f6, #ffdccd) — that appears only as large FLAT stat/product panels, in the multi-dot logo, as tiny purple divider ticks and as saturated inline accent words (#03c7d1, #fc92e3, #ff8430), never as button fills. Surfaces are flat and shadowless apart from a soft shadow under the floating nav; dark sections invert to solid black #000000 or deep navy #010120; hairlines are #00000014. Feels: clean, editorial, technical, optimistic. Avoid: pastel-filled buttons, heavy/bold display weights, glossy gradients or shadows on the flat panels, sans or sentence-case button labels, or colouring the white canvas.
</together-ai_design_language>