Together.ai Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

13tokens

17type steps

4radius steps

2pxspacing base

Together.ai, in one page

Together AI is an AI cloud-infrastructure platform — model inference, GPU clusters, fine-tuning, all the plumbing that makes "the AI native cloud" deliverable to a developer team — and the brand's web surface signals exactly that posture: a near-black hero on top, a long ribbon of white technical content in the middle, and a single recurring piece of brand chrome — a three-color orange-magenta-periwinkle gradient ribbon — that does the entire job of "we are not just another grey enterprise SaaS." There is no other illustration system. The gradient is the brand.

Type is the second decisive voice. Two faces carry every page: a custom geometric display sans (extracted as The Future) for headlines and body, set at weight 500 with tight, slightly-negative letter-spacing so 64-pixel hero type feels poured rather than typed; and an uppercase monospace eyebrow (PP Neue Montreal Mono) that labels every section, every button, and every cell header. Headlines are sentence-case; everything technical is uppercase mono. That contrast is the brand's tonal joke — the platform is serious enough to use a monospace label, modern enough to not put the headline in it.

Surfaces alternate aggressively: a {colors.canvas-dark} (#010120) band for hero / research / "Grounded in cutting-edge research" — followed by {colors.canvas} (white) for product, pricing, and testimonials, with {colors.hairline} reserved for table-header rows and toggle backgrounds. Pastel {colors.accent-mint} tinted stat tiles break up the white middle. Cards are universally lightly rounded ({rounded.sm} 4 px) with hairline borders — never floating with shadows.

Key Characteristics:

A single black {colors.primary} CTA pill carries every conversion target across pricing, footer, sign-in. The mint {colors.accent-mint} and white pill variants are reserved for hero contexts only.
A three-color brand gradient ({colors.accent-orange} → {colors.accent-magenta} → {colors.accent-periwinkle}) is the entire decorative system — used as the hero ribbon graphic and never reduced to a swatch elsewhere.
All-caps mono eyebrows and button labels in {typography.mono-caps-eyebrow} / {typography.mono-caps-button} everywhere — section titles, model row headers, "ON-DEMAND" labels in pricing tables.
Lightly rounded card chrome at {rounded.sm} 4 px; one off {rounded.xs} 3.25 px appears inside pricing-tab pills as a tighter system; {rounded.full} only for the floating chat-launcher orb.
Dual surface mode — alternating {colors.canvas-dark} and {colors.canvas} bands; no in-between greys. The single soft surface {colors.hairline} exists only to mark table-header rows.
A massive together.ai wordmark banner at the very bottom of every page, set in {typography.display-xxl} and tinted nearly-into-the-canvas ({colors.hairline}), as a "we are here" sign-off that doubles as a footer separator.

Do's and don'ts

Do

Reserve {colors.primary} (#000000) for every primary CTA. One black pill per visible viewport — that consistency is the brand's whole conversion story.
Set every section eyebrow and button label in {typography.mono-caps-button} / {typography.mono-caps-eyebrow} — uppercase mono, positive tracking.
Pair the brand gradient ({colors.accent-orange} → {colors.accent-magenta} → {colors.accent-periwinkle}) at hero scale only. The gradient is the brand chrome; never shrink to icon size.
Cycle page surfaces in the {colors.canvas-dark} → {colors.canvas} → {colors.canvas-dark} rhythm; the dark-light contrast carries elevation more than any shadow.
Use {rounded.sm} 4 px as the canonical card / button radius across the system; reserve {rounded.full} for the single floating chat-launcher orb.
Render the giant together.ai wordmark banner at the bottom of every long page in {typography.display-xxl}, tinted toward {colors.hairline} so it reads as a stencil — not as a heavy footer title.

Don't

Don't introduce a fifth accent colour. The three-stop gradient + mint pill is the entire decorative palette; new accents flatten the brand.
Don't set body paragraphs in the mono face. The mono is for labels only; long-form mono reads as a console log, not as marketing copy.
Don't centre-align body paragraphs under a left-aligned display headline. The brand keeps text-block alignment consistent within a copy stack.
Don't drop a soft drop-shadow on light-surface cards. The brand uses hairlines and surface contrast for elevation; soft shadows belong only on the floating chat-launcher orb.
Don't reduce the brand gradient to a single-colour fill, reorder its stops, or add a fourth stop. The gradient is a fixed object.
Don't switch the primary button shape to a full pill {rounded.full}. The brand's CTA shape is a slightly-rounded rectangle, never a full pill.
Don't set headlines in the all-caps mono. Every all-caps moment belongs to the mono face; every headline belongs to the display sans in sentence case.

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Together.ai design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- primary: #000000
- on-primary: #ffffff
- ink: #000000
- body: #959494
- hairline: #959494
- canvas: #ffffff
- canvas-dark: #010120
- surface-dark-soft: #313641
- on-dark: #ffffff
- accent-orange: #fc4c02

Type:
- families: The Future, Inter, Helvetica Neue, Arial
- scale: 10, 11, 14, 15.4, 16, 18, 19.6, 20.8, 22
- weights: 400, 500

Shape:
- radius: 0, 3.25, 4, 8
- elevation: `ex-toast` — Toast notification surface — feature-card shape + medium shadow.

Spacing: 2, 4, 8, 12, 16, 20, 24, 32, 44, 48

Rules:
- Reserve `{colors.primary}` (`#000000`) for every primary CTA. One black pill per visible viewport — that consistency is the brand's whole conversion story.
- Set every section eyebrow and button label in `{typography.mono-caps-button}` / `{typography.mono-caps-eyebrow}` — uppercase mono, positive tracking.
- Pair the brand gradient (`{colors.accent-orange}` → `{colors.accent-magenta}` → `{colors.accent-periwinkle}`) at hero scale only. The gradient is the brand chro…
- Cycle page surfaces in the `{colors.canvas-dark}` → `{colors.canvas}` → `{colors.canvas-dark}` rhythm; the dark-light contrast carries elevation more than any s…
- Use `{rounded.sm}` 4 px as the canonical card / button radius across the system; reserve `{rounded.full}` for the single floating chat-launcher orb.
- Render the giant `together.ai` wordmark banner at the bottom of every long page in `{typography.display-xxl}`, tinted toward `{colors.hairline}` so it reads as…

Avoid:
- Don't introduce a fifth accent colour. The three-stop gradient + mint pill is the entire decorative palette; new accents flatten the brand.
- Don't set body paragraphs in the mono face. The mono is for labels only; long-form mono reads as a console log, not as marketing copy.
- Don't centre-align body paragraphs under a left-aligned display headline. The brand keeps text-block alignment consistent within a copy stack.
- Don't drop a soft drop-shadow on light-surface cards. The brand uses hairlines and surface contrast for elevation; soft shadows belong only on the floating chat…
- Don't reduce the brand gradient to a single-colour fill, reorder its stops, or add a fourth stop. The gradient is a fixed object.
- Don't switch the primary button shape to a full pill `{rounded.full}`. The brand's CTA shape is a slightly-rounded rectangle, never a full pill.

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

Brand & Accent

Ink Black ({colors.primary} — #000000): The single primary CTA color. Black pill carries "Sign in", "Contact sales", "Get started now", every footer CTA.
Brand Orange ({colors.accent-orange} — #fc4c02): One leg of the three-color brand gradient. Appears in the hero ribbon graphic; never used as a UI fill on its own.
Brand Magenta ({colors.accent-magenta} — #ef2cc1): The second leg of the gradient.
Brand Periwinkle ({colors.accent-periwinkle} — #bdbbff): The third leg of the gradient; also used as a soft fill for some stat tiles.
Brand Mint ({colors.accent-mint} — #c8f6f9): A pastel cyan that lives outside the gradient — used for hero secondary-CTA pills and stats-card-tinted tiles.

Surface

Canvas ({colors.canvas} — #ffffff): The default product / pricing / docs background.
Hairline / Canvas Soft ({colors.hairline} — #ebebeb): The brand's single soft surface tone — used for data-table header rows, toggle-pill rails, and 1 px dividers between table rows.
Canvas Dark ({colors.canvas-dark} — #010120): The brand's dark hero surface; appears on hero-band-dark and research-band-dark.
Hairline ({colors.hairline} — #ebebeb): 1 px dividers on light surfaces — table rows, card chrome, badge borders.
Hairline on Dark ({colors.surface-dark-soft} — #26263a): 1 px dividers and badge backgrounds on {colors.canvas-dark} surfaces; pre-blended from the brand's translucent-white-on-dark hairline.
Surface Dark Soft ({colors.surface-dark-soft} — #313641): A slightly lighter dark fill used inside dark-band cards.

Text

Ink ({colors.ink} — #000000): Every heading and body paragraph on light surfaces.
Body ({colors.body} — #999999): Secondary text — captions, table cell secondary values, footer link text. Pre-blended from the brand's translucent-black 40 % body color.
Body Muted ({colors.body} — #999999): The all-caps mono-eyebrow text color on light surfaces also rides on this token — there is no separate "mute" tone, the brand keeps secondary text consistent with caption text.
On Dark ({colors.on-dark} — #ffffff): All text on {colors.canvas-dark} surfaces.

Semantic

The brand does not maintain a separate error / success palette in its public surface; validation cues use the primary black or the brand gradient depending on context. No explicit error red, success green, or warning yellow is documented here — adopting framework defaults is appropriate.

Brand Gradient

The brand's signature decoration is a three-stop gradient drawn from {colors.accent-orange} → {colors.accent-magenta} → {colors.accent-periwinkle}, applied as the only piece of decorative chrome (the hero ribbon graphic). Treat the gradient as one unified object — do not crop it down to a single colour, do not reorder the stops, and do not add a fourth stop. Used at large scale; never miniaturised to icon size.

Type scaleRead the full spec

Font Family

Two families carry the entire system:

A custom geometric display sans (extracted as The Future) for every headline, lead paragraph, body, button label that is not uppercase, and inline link. Weights 400 and 500 are the working pair; the face never appears in bold (700) or heavier. Tight negative letter-spacing (-1.92 px at 64 px display, -0.16 px at 16 px body) gives the face its slightly-condensed, poured-on-the-page feel.
An uppercase mono caption face (extracted as PP Neue Montreal Mono) for every eyebrow, button label, table-header cell, and pricing-table tab. Weight 500 at 11–16 px; always uppercase; positive letter-spacing (0.05 – 0.55 px). The mono carries the brand's technical voice — every label that says "PRICING", "INFERENCE", "MODEL", "GPU", "GA-DEC '25" is set in this face.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
`{typography.display-xxl}`	64px	500	70.4px	-1.92px	Hero headline ("Build what's next on the AI Native Cloud").
`{typography.display-xl}`	40px	500	48px	-0.8px	Section headlines ("The Together AI Platform", "Start building on Together AI").
`{typography.display-lg}`	28px	500	32.2px	-0.42px	Sub-section headlines and stat-tile big numbers.
`{typography.display-md}`	22px	500	25.3px	-0.22px	Card titles, research-card headings.
`{typography.body-lg}`	18px	400	23.4px	-0.18px	Lead paragraphs under section headlines.
`{typography.body-lg-strong}`	18px	500	23.4px	-0.18px	Emphasis runs inside lead paragraphs.
`{typography.body-md}`	16px	400	20.8px	-0.16px	Default body paragraph.
`{typography.body-md-strong}`	16px	500	20.8px	-0.16px	Bolded inline body.
`{typography.caption}`	14px	400	19.6px	0	Fine print, footer secondary text.
`{typography.caption-strong}`	14px	500	19.6px	0	Bolded captions.
`{typography.mono-caps-button}`	16px	500	16px	0.08px	Primary button labels — uppercase, mono.
`{typography.mono-caps-eyebrow}`	11px	500	11px	0.55px	Section eyebrows, table-header cell labels.
`{typography.mono-caps-label}`	11px	500	15.4px	0.055px	Inline tag labels inside text contexts.
`{typography.mono-caption}`	10px	400	14px	0.05px	Mono fine print (inside code editor mockup).

Principles

Two-face contrast is the voice. Display sans for narrative; uppercase mono for technical labels. Never let the mono carry a paragraph; never let the display sans carry a button label.
Negative letter-spacing only on the display sans. The mono face uses small positive tracking; reversing this is wrong.
Headlines stay sentence-case. Every uppercase moment belongs to the mono face. Mixing all-caps display would muddy the contrast.

Note on Font Substitutes

The two primary faces are proprietary. Open-source substitutes:

Display sans — *Inter* (400 / 500) with font-feature-settings: "ss01" enabled comes closest; tighten letter-spacing by ~0.6 % at display sizes to land on the brand's compressed feel. *Geist* is the second-best option but reads slightly wider.
Uppercase mono eyebrow — *JetBrains Mono* or *Geist Mono* (weight 500) at 11 px with text-transform: uppercase matches the brand's voice once tracking is bumped to 0.04em.

Components and layoutRead the full spec

Buttons

button-primary — the black pill that carries every primary CTA.

Background {colors.primary}, text {colors.on-primary}, label set in {typography.mono-caps-button} (uppercase mono, 16 px / 500 / 0.08 px tracking), shape {rounded.sm} 4 px, padding {spacing.xs} {spacing.2xl}. No shadow.

button-secondary-mint — the hero secondary CTA pill.

Background {colors.accent-mint}, text {colors.ink}, same typography and shape as button-primary. Only appears in hero contexts.

button-secondary-white — the white pill paired with button-secondary-mint inside the hero.

Background {colors.canvas}, text {colors.ink}, same typography and shape. Always sits adjacent to the mint or primary button.

button-ghost-on-dark — the translucent button used on dark hero / research surfaces.

Background {colors.surface-dark-soft}, text {colors.on-dark}, shape {rounded.sm} 4 px. Used for "Read more" / "Watch the announcement" affordances on dark bands.

button-outline — the white-on-white outline button used inside pricing pages and feature toggles.

Background {colors.canvas}, text {colors.ink}, 1 px solid {colors.hairline} border, shape {rounded.xs} 3.25 px.

button-icon-circular — the floating chat-launcher orb in the bottom-right of every page.

Background {colors.primary}, white icon, shape {rounded.full}. The only fully-pill shape in the system.

Cards & Containers

research-card — the 4-up grid card on the dark "Grounded in cutting-edge research" band.

Background {colors.canvas-dark}, text {colors.on-dark}, 1 px solid {colors.surface-dark-soft} border, padding {spacing.2xl}, shape {rounded.sm} 4 px. Inside: mono eyebrow tag + display headline + body paragraph.

testimonial-card — the 3-up "AI natives build on Together AI" card.

Background {colors.canvas}, text {colors.ink}, padding {spacing.2xl}, shape {rounded.sm} 4 px. Inside: 1:1 portrait crop + display-md name + body quote + mono caption stat row.

article-card — the 2-up "What's new at Together AI" article card.

Background {colors.canvas}, text {colors.ink}, padding {spacing.2xl}, shape {rounded.sm} 4 px. Inside: 16:9 image at top + mono eyebrow tag + display-md title + body summary + mono caption byline.

code-editor-mockup — the dark code-preview surface inside the product band.

Background {colors.canvas-dark}, text {colors.on-dark}, body in {typography.mono-caption}, padding {spacing.2xl}, shape {rounded.sm} 4 px. Window chrome stays minimal — no traffic-light dots, no title bar.

stats-card-tinted — the pastel-tinted stat tile (mint, peach, periwinkle) on the white middle band.

Background {colors.accent-mint} (or sibling accent tints), text {colors.ink}, big number in {typography.display-xl} + label in {typography.mono-caps-eyebrow}, padding {spacing.3xl}, shape {rounded.sm} 4 px.

Inputs & Forms

text-input — the form input on the startup-accelerator application form.

Background {colors.canvas}, text {colors.ink}, 1 px solid {colors.hairline} border, body set in {typography.body-md}, shape {rounded.sm} 4 px.

Navigation

nav-bar — the sticky top nav.

Background {colors.canvas-dark} on the hero band, switches to {colors.canvas} once the user scrolls past the hero. Text {colors.on-dark} on dark, {colors.ink} on white. Layout: logo left, link row centre, "Contact sales" + "Sign in" right.

nav-link — the centred link row inside nav-bar.

Text {colors.on-dark} (or {colors.ink} after scroll), set in {typography.body-md} 400 weight. Links separate with {spacing.2xl} 24 px between siblings.

footer — the bottom 4-column nav.

Background {colors.canvas}, text {colors.ink}, padding {spacing.section} {spacing.3xl}. Eyebrow labels in {typography.mono-caps-eyebrow}; link rows in {typography.body-md}.

Signature Components

hero-band-dark — the dark navy hero that opens every product / marketing page.

Background {colors.canvas-dark}, text {colors.on-dark}, padding {spacing.section} {spacing.3xl}. Headline in {typography.display-xxl} (sentence case, never all-caps). Eyebrow in {typography.mono-caps-eyebrow}. Two-column layout: headline + CTA cluster on left, gradient ribbon SVG on right.

research-band-dark — the dark navy band that hosts the "Grounded in cutting-edge research" 4-up card grid.

Background {colors.canvas-dark}, text {colors.on-dark}, padding {spacing.section} {spacing.3xl}. Section headline in {typography.display-xl} followed by the research-card grid.

feature-tab-pill — the tab pill row inside the "Full-stack cloud" section.

Background {colors.canvas}, text {colors.ink}, label in {typography.body-md-strong}, padding {spacing.md} {spacing.2xl}, shape {rounded.md} 8 px. Tab group sits on {colors.hairline} rail.

pricing-sub-tab — the secondary tab row inside the pricing-page model table (TEXT / VISION / IMAGE / AUDIO / VIDEO).

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-together {--page-bg: #ffffff;
  --page-bg-gradient: none;
  --text-color: #000000;
  --heading-color: #000000;
  --link-color: #000000;
  --link-hover-color: #000000;
  --border-color: #d1d1d1;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(0,0,0,0.06);
  --card-hover-shadow: 0 6px 18px rgba(0,0,0,0.12);
  --header-bg: #000000;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #ffffff;
  --footer-text-color: #595959;
  --button-bg: #000000;
  --button-text-color: #ffffff;
  --button-hover-bg: #000000;
  --button-border: none;
  --button-border-radius: 4px;
  --button-secondary-bg: #f0f0f0;
  --button-secondary-text-color: #000000;
  --button-secondary-hover-bg: #e0e0e0;
  --button-secondary-border: 1px solid #d1d1d1;
  --prompt-bg: #f2f2f2;
  --prompt-text-color: #000000;
  --base-font: var(--font-inter);
  --heading-font: var(--font-helvetica);
  --card-border-radius: 4px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

x.ai 72.1%
webflow 70.5%
notion dev 70.4%

Where this came from

Source document: volt/design-md/together.ai/DESIGN.md · 37.2 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.