---
title: "Together AI design system"
variant: extended
source: https://www.together.ai/
captured_at: 2026-10-12
theme: dark
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/together-ai)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Together AI · Design System

> A bright, research-led canvas for AI infrastructure

**Theme:** dark · **Industry:** ai · **Source:** https://www.together.ai/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A light, airy AI platform homepage pairs crisp typography and modular product information with colorful 3D artwork. A deep-indigo research band provides a deliberate contrast within the otherwise white and pale-blue page.

## North star

Keep the interface bright and spacious, using precise typography and colorful technical imagery while reserving deep indigo for focused contrast.

## Overview

The page’s visual identity is defined by a white canvas and a pale, cool-blue hero wash, with a single deep-indigo research section as a strong mid-page contrast. Keep the measured palette authoritative: the orange, purple, and blue visible in hero and editorial artwork belong to imagery rather than a general UI accent system. The Future provides rounded, confident headings and readable body text; PP Neue Montreal Mono is reserved for compact uppercase labels and CTA text, giving the interface a technical counterpoint. The layout moves from a spacious hero into centered product navigation and a dense research card band, then returns to white for customer stories and editorial updates. Use large, clean content bands, orderly columns, and thin dividers rather than decorative framing. Product screenshots, customer video stills, logos, and sculptural 3D illustrations provide variation while maintaining restrained interface chrome.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary canvas for navigation, platform, customer, editorial, and footer surfaces; also the main text color in dark sections. |
| Midnight Canvas | `#151531` | `--color-midnight-canvas` | brand | Measured dark canvas tone; use for dark brand surfaces only where the page calls for deep contrast. |
| Ink Black | `#000000` | `--color-ink-black` | neutral | Primary text and solid black navigation and CTA buttons against white or pale surfaces. |
| Soft Rule | `#ebebeb` | `--color-soft-rule` | semantic | Measured hairline and button or link border tone; keep borders subtle. |
| Research Indigo | `#010120` | `--color-research-indigo` | brand | Full-width background for the research section and its dark content field. |
| Cloud Mist | `#f6fafd` | `--color-cloud-mist` | surface | Pale blue-white gradient stop in the hero and light atmospheric page treatments. |
| Glacier Tint | `#e5f3ff` | `--color-glacier-tint` | surface | Cool blue gradient stop that gives the hero and CTA imagery a faint sky-blue wash. |
| Quiet Silver | `#d6d6d6` | `--color-quiet-silver` | neutral | Secondary measured border tone for subdued separators and fine outlines. |
| Slate Indigo | `#31314a` | `--color-slate-indigo` | surface | Muted dark link-button surface, notably for repeated READ MORE actions. |
| Graphite Text | `#4c4c4c` | `--color-graphite-text` | neutral | Minor measured text tone for secondary copy; not a dominant brand color. |

### Semantic aliases

`--color-canvas` → `#151531` (Midnight Canvas) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#010120` (Research Indigo) · `--color-surface-3` → `#000000` (Ink Black) · `--color-surface-4` → `#31314a` (Slate Indigo) · `--color-text` → `#ffffff` (Gallery White) · `--color-text-muted` → `#000000` (Ink Black) · `--color-border` → `#ebebeb` (Soft Rule)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#151531` | 17.74:1 | AAA |
| `#ffffff` | `#010120` | 20.46:1 | AAA |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#000000` | `#151531` | 1.18:1 | fail |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#010120` | 1.03:1 | fail |

### Gradients

- `linear-gradient(rgb(255, 255, 255) 15.93%, rgb(246, 250, 253) 26.07%, rgb(229, 243, 255) 73.05%)`
- `radial-gradient(circle, rgb(246, 250, 253) 35%, rgb(229, 243, 255))`
- `linear-gradient(rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.85) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| The Future | `--font-body` | webfont | 500, 400 | Display, headings, body copy, and navigation | Manrope |
| PP Neue Montreal Mono | `--font-mono` | webfont | 500, 400 | Eyebrows, captions, code-like labels, and uppercase CTA text | Space Mono |

- **The Future:** Medium-weight, clean sans-serif with subtly tight headline tracking; use sentence case for headings and body.
- **PP Neue Montreal Mono:** Compact uppercase labels with slightly open tracking; medium weight for buttons and section markers.

### Type scale — Perfect Fourth (ratio ≈ 1.373, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 500 | 1.1 | -0.03em | — | The Future | Large hero headline and high-impact page statements. |
| h1 | 40px | 500 | 1.2 | -0.02em | — | The Future | Primary section headings, including the platform introduction. |
| h2 | 28px | 500 | 1.15 | -0.015em | — | The Future | Secondary section titles and prominent content headings. |
| h3 | 22px | 500 | 1.15 | -0.01em | — | The Future | Card titles and smaller feature or story headings. |
| body | 18px | 500 | 1.3 | -0.01em | — | The Future | Introductory copy, descriptions, and standard content. |
| caption | 11px | 500 | 1.4 | 0.005em | uppercase | PP Neue Montreal Mono | Compact uppercase labels and supporting metadata. |
| nav | 14px | 400 | 1.4 | 0 | — | The Future | Main navigation links and menu items. |
| eyebrow | 11px | 500 | 1 | 0.05em | uppercase | PP Neue Montreal Mono | Small uppercase section labels and category markers. |
| code | 11px | 500 | 1.4 | 0.005em | uppercase | PP Neue Montreal Mono | Technical-style uppercase labels and compact metadata. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 2, 4, 6, 8, 16, 20, 24, 32, 40, 88 px.
- Section rhythm 100px · element gap 8px · card padding — · max content width 1344px.

Use a wide desktop canvas with a measured maximum content width of 1344px and a spacious vertical rhythm. The hero aligns headline and actions left against a large right-side visual; the platform intro and customer-story section center their headings, while research and news content use more structured columns. Separate major sections with broad white or pale-blue bands, then use the dark research band as a deliberate pause. Keep cards and content aligned to clear column edges, with a generous section gap and compact spacing inside navigation and controls.

## Shape & elevation

- Radius: button `4px` · nav `8px` · link `4px` · xs `4px` · sm `8px`
- Shadow `xl` (nav): `rgba(1, 1, 32, 0.1) -10px 0px 75px 0px`
- Motion: standard transition `0.45s ease` on interactive elements.

Most content sits on flat white or pale surfaces, with fine, restrained borders rather than prominent shadows. Navigation is a distinct floating white panel with subtle depth. The research cards use dark tonal surfaces against the indigo band; avoid adding elevation to every content tile.

## Imagery

Use large, sculptural 3D forms in the hero and CTA area, with translucent blue shapes and vivid colored accents treated as illustration rather than interface palette. Product UI screenshots appear inside feature content; customer stories use photographic video stills, and the news area combines editorial thumbnails with text. Keep imagery crisp and rectangular or simply cropped, without heavy overlays outside story-card captions.

## Components

### Top announcement

A slim black strip above the navigation with a centered, compact announcement link in light text.

### Floating navigation

White, rounded navigation panels with the logo, compact sans-serif links, dropdown indicators, and a black SIGN IN button.

### Hero actions

Pair a black uppercase monospace START BUILDING CTA with a pale secondary action beside the headline.

### Platform tabs

A centered product section uses a horizontal category selector; the active Inference item is highlighted in pale cyan.

### Research cards

Dark cards sit in a wide row on the indigo research band, using compact category labels and restrained white copy.

### Customer stories

A broad lead video card sits beside narrower customer-story cards, using image-led layouts and white text over the lower image.

### Editorial feed

A larger featured story pairs with a compact stack of news items, thumbnails, uppercase categories, and concise copy.

### Measured component styles

- **Primary button** (“START BUILDING”): background #000000 · text #ffffff · radius 4px · padding 16px · 500 16px PP Neue Montreal Mono · uppercase
- **Secondary button** (“Inference”): background #c8f6f9 · text #000000 · radius 4px · padding 4px 0px · 400 16px The Future
- **Link** (“READ MORE”): background #31314a · text #ffffff · radius 4px · padding 16px · 500 16px PP Neue Montreal Mono · uppercase
- **Navigation item** (“Inference Compute Model Shaping Research”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px The Future

## Do

- Keep white and pale blue as the primary page canvas.
- Use deep indigo for a focused research contrast band.
- Set headlines in The Future or a close geometric sans-serif.
- Use mono typography for uppercase labels and CTA buttons.
- Let colorful 3D artwork carry visual energy.
- Maintain clear column alignment across content bands.

## Don't

- Do not make the whole homepage dark.
- Do not treat illustration colors as global UI accents.
- Avoid heavy shadows on cards and content sections.
- Do not crowd the hero with extra interface chrome.
- Avoid decorative borders around every tile.
- Do not use oversized body copy where compact labels suffice.

## Agent prompt

Build a new AI-platform page in Together AI’s bright, research-led visual style. Use Gallery White (#ffffff) as the main canvas, with Cloud Mist (#f6fafd) and Glacier Tint (#e5f3ff) for soft atmospheric gradients. Use Ink Black (#000000) for copy and compact primary actions; reserve Research Indigo (#010120) for one focused dark section. Use The Future-like sans-serif headings and body, paired with a PP Neue Montreal Mono-like face for uppercase labels and buttons. Structure the page as spacious, aligned bands with a clear hero, modular product content, and image-led customer or editorial stories. Make colorful 3D artwork the expressive focal point, not a source for extra UI colors. Prefer thin rules and flat surfaces, adding subtle depth only to floating navigation.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Announcement strip, floating navigation, and wide hero with left-aligned copy and right-side 3D artwork. | announcement link, primary and secondary actions, trusted-by logo row | white navigation panels, pale blue gradient field, black CTA |
| 2 | product-showcase | Centered section heading above horizontal product tabs and a two-column feature panel. | category tabs, active product state, feature list | pale cyan active tab, product screenshot, compact READ MORE button |
| 3 | content-feed | Full-width dark band with a heading and a horizontal row of research cards. | article cards, carousel controls, related research links | indigo section surface, dark tonal cards, compact uppercase labels |
| 4 | testimonials | Centered heading above a wide lead story and two narrower video-story cards. | customer stories, video playback, view all stories | photographic card backgrounds, white image captions, black action button |
| 5 | content-feed | Left-aligned heading above a featured article and a compact stack of secondary stories. | featured article, category labels, all posts link | editorial thumbnails, fine separators, mixed image and text cards |
| 6 | footer | Full-bleed pale 3D backdrop behind a centered CTA and a large multi-column footer panel. | final build CTA, grouped navigation links, legal links | pale gradient background, white footer panel, oversized brand wordmark |

## Source CSS custom properties (selected)

```css
--brand--white: white;
--brand--black: #000;
--_spacers---padding-global: 3em;
--brand--transparent: transparent;
--brand--dark-blue: #010120;
--_radius---4: .25em;
--_spacers---spacers--100: 6.25em;
--_spacers---spacers--80: 5em;
--_radius---8: .5em;
--_spacers---spacers--120: 7.5em;
--_radius---16: 1em;
--_radius---12: .75em;
--brand--brand-orange: #fc4c02;
--_spacers---announcement-bar: 2.75em;
--text--black-40: #0006;
--_spacers---spacers--48: 3em;
--_radius---6: .375em;
--brand--brand-purple: #caaef5;
--brand--brand-magneta: #ef2cc1;
--size-font: calc(clamp(992px, 100vw, 1440px) / (1440 / 16));
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/together-ai