/ Design System / Catalog

# Design System Inspiration of Together AI

An inspired interpretation of Together AI’s design language — an AI cloud-infrastructure brand whose surface alternates between near-black hero bands (with a three-color orange-magenta-periwinkle gradient as the single piece of brand chrome) and bright white research / pricing / docs bands, knit together by a custom display sans and an uppercase mono eyebrow face.

Get started now Contact sales

/ 01 / Color Palette

## Color Palette

A single primary black, a three-color brand gradient drawn from orange → magenta → periwinkle, and a pastel mint accent. Surfaces alternate between bright canvas and near-black canvas-dark; hairline gray carries every divider.

/ Brand & Accent

Ink Black

#000000

Single primary CTA color.

Brand Orange

#fc4c02

First stop of the brand gradient.

Brand Magenta

#ef2cc1

Middle stop of the brand gradient.

Brand Periwinkle

#bdbbff

Last stop of the brand gradient.

Brand Mint

#c8f6f9

Hero secondary CTA + tinted stat tiles.

/ Surface

Canvas

#ffffff

Default product / pricing background.

Hairline / Canvas Soft

#ebebeb

Data-table headers, toggle rails, 1 px dividers.

Canvas Dark

#010120

Hero / research dark surface.

Hairline On Dark

#26263a

Dividers on canvas-dark surfaces.

Surface Dark Soft

#313641

Inner dark cards / ghost buttons.

/ Text

Ink

#000000

Headings and body on light surfaces.

Body

#959494

Captions, footer links, mono eyebrow text.

On Dark

#ffffff

All text on canvas-dark.

/ 02 / Typography Scale

## Typography

Two faces: a custom geometric display sans (substituted with Geist) for headlines, lead paragraphs, body, and inline links; an uppercase monospace eyebrow (substituted with Geist Mono) for every section label, button, and table-header cell. Sentence-case for the display; uppercase for the mono.

display-xxl64 / 500 / 70.4 / -1.92
Build what’s next.
display-xl40 / 500 / 48 / -0.8
The Together AI Platform
display-lg28 / 500 / 32.2 / -0.42
Sub-section headline.
display-md22 / 500 / 25.3 / -0.22
Card title example.
body-lg18 / 400 / 23.4 / -0.18
Lead paragraph under a section headline. Long-form prose sits in the display sans at 400 weight.
body-lg-strong18 / 500 / 23.4 / -0.18
Emphasis runs inside lead paragraphs.
body-md16 / 400 / 20.8 / -0.16
Default body paragraph for product, pricing, docs.
body-md-strong16 / 500 / 20.8 / -0.16
Bolded inline body text.
caption14 / 400 / 19.6
Fine print, footer secondary text.
caption-strong14 / 500 / 19.6
Bolded caption emphasis.
mono-caps-button16 / 500 / 16 / 0.08
GET STARTED NOW
mono-caps-eyebrow11 / 500 / 11 / 0.55
/ INFERENCE / PRICING
mono-caps-label11 / 500 / 15.4 / 0.055
Inline tag labels inside text contexts.
mono-caption10 / 400 / 14 / 0.05
Mono fine print used inside the code-editor mockup.

/ 03 / Button Variants

## Button Variants

One black 4 px-rounded rectangle carries every primary CTA. The mint and white pills are reserved for hero contexts; the ghost-on-dark and outline variants handle dark-band and form contexts respectively. The circular orb is the only fully-pill shape in the system.

button-primary
Ink black fill / on-primary text / mono-caps-button label / radius 4 px.
button-secondary-mint
Mint fill / ink text / hero-only secondary.
button-secondary-white
White fill / ink text / hero-only adjacent CTA.
button-ghost-on-dark
Surface-dark-soft fill / on-dark text / dark-band use only.
button-outline
Canvas fill / 1 px hairline border / radius 3.25 px (tighter than canonical).
button-icon-circular
Floating chat-launcher orb — the only fully-pill shape in the system.

/ 04 / Cards & Containers

## Cards & Containers

Universally lightly rounded at 4 px with hairline borders. Surface contrast does most of the elevation work — dark cards live on dark bands; light cards live on light bands; soft shadows belong only on the floating chat-launcher orb.

research-card (dark)

/ Inference research

#### Speculative decoding at scale.

A note on serving long-context models with parallel speculative draft passes — placeholder body copy mirrors the brand’s research-card chrome.

testimonial-card

#### Operator A

Placeholder quote from a customer about the platform’s reliability — the brand keeps testimonial copy short and stat-driven.

/ AI startup · founded 2023

article-card

/ Product update

#### Lower-latency inference is live.

A short summary of the latest platform release — placeholder text follows the brand’s article-card chrome.

/ AUTHOR PLACEHOLDER · 5 MIN READ

stats-card-tinted (mint)

2×

Throughput placeholder

stats-card-tinted (periwinkle)

60%

Latency placeholder

stats-card-tinted (peach)

90%

Cost placeholder

code-editor-mockup
// placeholder code
// the brand uses this surface as a polarity-flip break
function placeholder() {
return "output";
}
// gradient strip acts as a section sign-off

/ 05 / Form Elements

## Form Elements

Inputs sit on canvas with a 1 px translucent-black hairline border. Labels are uppercase mono in body-color; helper text drops to caption size. No invented focus color — focus collapses to the ink stroke.

/ Full name
/ Work email Focused state — ink-stroke border.
/ Company size
/ Tell us about your workload

/ 06 / Spacing Scale

## Spacing Scale

A 4 px base with two named outliers (7.2 px, 55.2 px). Marketing bands use the 80 px section token top and bottom; card interiors sit at 24 px; stat tiles open to 32 px.

xxs / 2
xs / 4
sm / 8
md / 12
lg / 16
xl / 20
2xl / 24
3xl / 32
4xl / 44
5xl / 48
6xl / 55.2
section / 80

/ 07 / Border Radius Scale

## Border Radius

The canonical card / button radius is 4 px. A tighter 3.25 px appears inside pricing sub-tabs and outline buttons; 8 px shows up only inside feature-tab pills. The fully-pill 9999 px is reserved for the floating chat-launcher orb.

none
0 px
xs
3.25 px
sm
4 px
md
8 px
full
9999 px

/ 08 / Elevation & Depth

## Elevation & Depth

Most light-surface cards lean on hairlines, not shadow. The single soft-drop shadow tints with the brand’s navy ink and applies only to floating affordances.

Level 0 Flat
Level 1 Hairline border
Level 2 Hairline on dark
Level 3 Soft drop (navy)

/ 09 / Signature Components

## Signature Components

Feature-tab pills, pricing sub-tabs, the toggle-pill segmented control, and the data-table chrome. Combined, these load the brand’s technical voice into product surfaces.

feature-tab-pill (radius 8 px)
pricing-sub-tab (radius 3.25 px)
toggle-pill-group (radius 4 px)
badge-neutral / badge-subtle-on-dark
GA-DEC ‘25 New Beta / on dark
data-table-row + data-table-header (pricing chrome)

Model | Input / 1M | Output / 1M | Context
--- | --- | --- | ---
Model A | $X.XX | $X.XX | 128K
Model B | $X.XX | $X.XX | 200K
Model C | $X.XX | $X.XX | 64K

stats-card-tinted grid (mint / periwinkle / peach)

2×

Throughput

60%

Latency reduction

90%

Cost saved

/ 10 / Brand Gradient

## Brand Gradient

A three-stop gradient drawn from orange → magenta → periwinkle. It is the brand’s entire decorative system — rendered at hero scale, never reduced to icon size, never reordered, never extended with a fourth stop.

accent-orange

#fc4c02

accent-magenta

#ef2cc1

accent-periwinkle

#bdbbff

/ 11 / Responsive Behavior

## Responsive Behavior

A 1280 px max-width container, 5 breakpoints, and a strict "stack-don’t-scroll" policy. The brand gradient and the wordmark banner are the only edge-to-edge elements; everything else centers inside the container.

Name | Width | Key Changes
--- | --- | ---
Mobile | < 479 px | Hero stacks; nav collapses to hamburger; multi-col grids drop to 1-up.
Mobile-Large | 479–767 px | Same as Mobile; some tables enable horizontal scroll.
Tablet | 768–991 px | Article grid moves to 2-up; testimonial grid 3-up only if container > 900 px.
Desktop | 992–1279 px | Full 3-up research grid, 2-up article grid, hero 50/50 split.
Desktop-Large | ≥ 1280 px | Container caps at 1280 px; bands stay edge-to-edge while content centers.

375
479
768
992
1280+

### Touch Targets

The mono-cap button label is set at 16 px; combined with 4 px top/bottom and 24 px horizontal padding, the primary pill renders at roughly 32 px tall on desktop. On mobile, vertical padding inflates the button to ≥ 44 px — meeting WCAG AAA. The circular icon button renders at 44 × 44 px minimum at all viewports.

### Collapsing Strategy

- Nav collapses from full link row + dual CTA pills at desktop to logo + hamburger at mobile.
- Hero stacks headline above the gradient ribbon on mobile; never below.
- Research band drops from 4-up to 2-up at tablet, 1-up at mobile; card chrome stays identical.
- Pricing data table enables horizontal scroll at tablet; cell rows stack model-name above price block at mobile.
- Footer wordmark banner stays edge-to-edge regardless of viewport, scaling fluidly with the display-xxl token.

## Pricing Tiers

Three-up plan grid with the middle tier polarity-flipped. Mono uppercase tier name, display numeral price, hairline-divided feature list.

/0.1 · Starter
$9/month

For individuals getting started.

- Core features
- Up to 3 projects
- Community support

/0.2 · Pro Most popular
$29/month

For teams ready to ship.

- Everything in Starter
- Unlimited projects
- Email support
- Advanced analytics

/0.3 · Team
$99/month

For organizations operating at scale.

- Everything in Pro
- SSO + audit log
- Priority support
- SLA & onboarding

together.ai