Clean editorial AI-cloud brand: a pure-white canvas with black The Future display type at a medium 500 weight, a floating rounded pill nav, black 4px CTAs whose labels are uppercase PP Neue Montreal Mono, a two-tone black-then-gray hero headline, and a rationed pastel product palette (purple/cyan/blue/pink/orange) carried only by flat stat panels and the multi-dot logo.
Browse Together AI in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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.
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.
| Token | Hex | Role / usage |
|---|---|---|
| white | #ffffff | Page background, cards, pill nav |
| black | #000000 | Dark inverted sections, buttons |
| dark-blue | #010120 | Deep navy inverted sections |
| 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 |
| 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 |
| 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.
"The Future", Arial, sans-serif — one family across headings and body, medium weight with tight negative tracking."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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.