Together AI Design System
Dark Navy · Generated 18/04/2026 · 20 colors · 38 type tokens · 26 spacing steps · 5 breakpoints · 8 motion tokens
v1.0.0
Color Palette
Core Backgrounds
Black
#000000
Dark Blue
#010120
Dark Blue 3
#191935
White
#FFFFFF
White 2
#F3F6FA
White 3
#F6FAFD
Light Gray
#EFEFEF
Dark Blue 2 (shadow)
rgba(1,1,32,0.1)
Brand Accents — Purple / Blue / Cyan
Light Blue (Primary)
#BDBBFF
Light Blue 3
#DFDDFE
Light Blue 2
#C1DFF9
Light Blue 5
#9BCDF5
Light Blue 4
#E5F3FF
Cyan
#70E9F0
Light Cyan
#C8F6F9
Light Purple
#CAAEF5
Fill & Accent Colors
Orange
#FC4C02
Pink
#EF2CC1
Light Pink
#FDE3F6
Light Orange
#FFDCCD
Typography
Display Font · The Future / Space Grotesk
The Future
Build fast. Build together. Run AI inference at scale with Together's high-performance cloud platform.
Regular · 400 Medium · 500
Mono Font · PP Neue Montreal Mono
PP Neue Montreal Mono
model = "meta-llama/Meta-Llama-3.1-8B" · temperature: 0.7
Regular · 400 Bold · 700
The AI-Native Cloud
Display · 50.36px (fluid) · Medium · line-height: 55.39px · letter-spacing: −1.511px
Run inference at scale
Heading XL · 31.47px (fluid) · Medium · line-height: 37.77px · letter-spacing: −0.629px
Fine-tune any open model
Heading LG · 22.03px (fluid) · Medium · line-height: 25.34px · letter-spacing: −0.330px
Access 200+ models with one unified API. Build production AI with low latency and high throughput.
Body · 17.31px (fluid) · Regular · line-height: 19.91px · letter-spacing: −0.173px
Llama 3.3 · Mistral · Qwen 2.5 · DeepSeek-R1 · Flux · SDXL
Body SM · 14.16px (fluid) · Regular · line-height: 16.37px · letter-spacing: −0.142px
API · Docs · Status · Pricing · Models
Caption · 12.59px (fluid) · Regular · line-height: 15.42px · letter-spacing: −0.126px
together-ai-sdk v1.2.4 · Python · JavaScript · cURL
Micro Mono · 7.87px (fluid) · Regular · PP Neue Montreal Mono · letter-spacing: +0.04px
⚡ Fluid type system: Together AI uses a viewport-scaling formula — calc(container / 1440 * 16) — where all sizes are fractional multiples of a base 8px unit. The container clamps between 992px and 1440px, producing sizes like 12.5889px, 31.4722px, and 50.3556px.
Line Heights
Tight
8.65px
Snug
11.02px
Normal
12.12px
Relaxed
12.59px
Loose
14.32px
LH-7
16.37px
LH-10
25.34px
LH-11
37.77px
LH-12
50.36px
LH-13
55.39px
Letter Spacing
Together
Tight · −1.511px
--letter-spacing-tight · display hero (50px+)
Inference
Normal · −0.629px
--letter-spacing-normal · headings XL (31px)
Models
Wide · −0.330px
--letter-spacing-wide · headings MD (22px)
API · DOCS · PRICING
LS-10 · +0.433px
--letter-spacing-ls-10 · uppercase labels
Spacing
Spacing Scale
26 tokens — 1px → 226.6px · Fluid fractional values based on container / 1440 × 16
1
1.6
3.1
4.7
6.3
7.9
9.4
12.6
15.7
16
18.9
25.2
31.5
35.4
37.8
42.5
50.4
62.9
69.2
78.7
94.2
94.4
102.5
107
125.9
226.6
Borders
Border Radii
SM
3.147px
MD
6.294px
LG
12.589px
Like all Together AI tokens, border radii are fluid fractional values — 3.147px, 6.294px, and 12.589px correspond to ½×, 1×, and 2× of the base spacing unit (--space-3 = 3.14722px). Card and modal containers use the LG radius.
Border Widths
--border-width-hairline
1px · dividers, cards, table rows, inputs
--border-width-thin
2px · emphasized borders, selected states
--border-width-base
4px · thick accent borders, vertical dividers
Three border widths, matching Tesla's pattern. The 4px base is an unusual thick accent — used for section dividers and feature callout borders.
Shadow / Elevation
Shadow Tokens
2 tokens — vertical drop and horizontal spread
--shadow-sm
Cards, panels, tooltips
rgba(1,1,32,0.1) 0px 4px 10px — standard vertical drop shadow using the dark navy as shadow color, not black
--shadow-md
Sidebars, side panels
rgba(1,1,32,0.1) −10px 0px 75px — wide horizontal spread for lateral panels and full-height side drawers
Gradient surface
Hero cards, feature areas
Together AI surfaces also use light gradient fills from the internal --gradient-blue-3 and --gradients-dark-blue-gradient-footer tokens
Z-Index
LayerValueUsage
--z-1-1Behind content — background decorative elements, animated gradients
--z-21Base content layer
--z-32Slightly elevated — relative stacking within sections
--z-43Fine-grained stacking — overlapping card elements, badges
--z-55Interactive elements — hover cards, anchored banners
--z-6100Navigation bar, sticky header, modals, and full-screen overlays
Breakpoints
📱
--breakpoint-xs
479px
Mobile (max)
📱
--breakpoint-sm
767px
Tablet (max)
💻
--breakpoint-md
768px
Tablet (min)
💻
--breakpoint-lg
991px
Desktop (max)
🖥️
--breakpoint-xl
992px
Desktop+ (min) · fluid type begins
The 5-breakpoint system mirrors Webflow's default grid. Note the paired values (767/768, 991/992) — upper bound / lower bound transitions. The 992px container minimum is where the fluid type formula activates; below this, values are pinned.
Opacity
Opacity Tokens
4 tokens — 0.4 → 0.7
--opacity-40
40% · dim elements
--opacity-50
50% · secondary text
--opacity-60
60% · body text
--opacity-70
70% · near-primary text
Together AI's opacity tokens start at 0.4 — higher than most brands in this series. The full shade/opacity palette is defined via --shades--white-opacity-* and --shades--black-opacity-* tokens at 4%, 8%, 12%, 16%, 24%, 32%, 40%, 50%, 60%, 70%, 80%, 90% steps.
Accessibility — Contrast Ratios
WCAG 2.1 thresholds: AA ≥ 4.5:1 (normal text) · AA Large ≥ 3:1 (large/bold) · AAA ≥ 7:1
Note: Together AI defines no explicit text color tokens — text color is controlled by opacity layers over #BDBBFF and #FFFFFF.
Text / OpacityBackground TokenApprox. RatioWCAG Rating
#FFFFFF on #010120--color-dark-blue21:1AAA
#BDBBFF on #010120--color-dark-blue14.8:1AAA
#BDBBFF on #191935--color-dark-blue-38.2:1AAA
#BDBBFF on #000000--color-black16.4:1AAA
#BDBBFF @70% on #010120--color-dark-blue~10.4:1AAA
#BDBBFF @60% on #010120--color-dark-blue~8.9:1AAA
#BDBBFF @50% on #010120--color-dark-blue~7.4:1AAA
#BDBBFF @40% on #010120--color-dark-blue~5.9:1AA
#70E9F0 on #010120--color-dark-blue14.1:1AAA
#CAAEF5 on #010120--color-dark-blue10.6:1AAA
#FC4C02 on #010120--color-dark-blue3.8:1AA Large
#BDBBFF on #FFFFFF--color-white1.4:1Fail
#010120 on #BDBBFF--color-light-blue14.8:1AAA
#000000 on #BDBBFF--color-light-blue16.4:1AAA
CSS Variables Reference
Background Colors14 tokens
Black--color-black#000000
Dark Blue--color-dark-blue#010120
Dark Blue 3--color-dark-blue-3#191935
White--color-white#FFFFFF
White 2--color-white-2#F3F6FA
Light Blue (Primary)--color-light-blue#BDBBFF
Light Blue 3--color-light-blue-3#DFDDFE
Light Blue 2--color-light-blue-2#C1DFF9
Light Blue 5--color-light-blue-5#9BCDF5
Light Blue 4--color-light-blue-4#E5F3FF
Cyan--color-cyan#70E9F0
Light Cyan--color-light-cyan#C8F6F9
Light Purple--color-light-purple#CAAEF5
Orange--color-orange#FC4C02
Typography38 tokens
Base Font--font-family-basesans-serif
Display Font--font-family-2The Future
Mono Font--font-family-3PP Neue Montreal Mono
Regular--font-weight-regular400
Medium--font-weight-medium500
2XS (fluid)--font-size-2xs7.868px
XS (fluid)--font-size-xs8.655px
SM (fluid)--font-size-sm10.229px
Base (fluid)--font-size-base11.015px
LG (fluid)--font-size-lg12.589px
XL (fluid)--font-size-xl14.163px
2XL (fluid)--font-size-2xl17.310px
3XL (fluid)--font-size-3xl22.031px
4XL (fluid)--font-size-4xl31.472px
5XL display (fluid)--font-size-5xl50.356px
Tight (hero)--letter-spacing-tight−1.511px
Normal--letter-spacing-normal−0.629px
Wide--letter-spacing-wide−0.330px
LS-10 (caps)--letter-spacing-ls-10+0.433px
Spacing (fluid)26 tokens
Space 1--space-11px
Space 2--space-21.574px
Space 3--space-33.147px
Space 4--space-44.721px
Space 5--space-56.294px
Space 8--space-89.442px
Space 10--space-1012.589px
Space 16--space-1616px
Space 32--space-3225.178px
Space 40--space-4031.472px
Space 64--space-6437.767px
Space 96--space-9650.356px
Space 128--space-12862.944px
Space 160--space-16069.239px
Space 256--space-25694.164px
Space 27--space-27226.6px
Borders, Motion & Layers16 tokens
Hairline--border-width-hairline1px
Thin--border-width-thin2px
Base--border-width-base4px
Radius SM--radius-sm3.147px
Radius MD--radius-md6.294px
Radius LG--radius-lg12.589px
Instant--duration-instant200ms
Fast--duration-fast300ms
Normal--duration-normal350ms
Slow--duration-slow450ms
Ease Out--easing-ease-outease-out
Dim--opacity-4040%
Half--opacity-5050%
Muted--opacity-6060%
Strong--opacity-7070%
Behind BG--z-1-1
Base → 5--z-2 → --z-51–5
Nav / Top layer--z-6100
Design System Preview · Together AI (Dark Navy) · Generated 18/04/2026 · 20 color tokens · 10 font-size · 3 font-family · 2 font-weight · 13 line-height · 10 letter-spacing · 26 spacing · 3 radius · 3 border-width · 2 shadow · 6 duration · 2 easing · 6 z-index · 5 breakpoints · 4 opacity