Periwinkle
#bdbbffAccent dashes, active indicators, small UI punctuation — the system's only mid-saturation chromatic accent, used sparingly as underlines and section markers
Together AI
together.aiWebsite preview
The design language
Together AI reads as a research-grade console on glacier-white paper: stark black-on-white typography, near-zero chrome, and pastel data cards (blush, peach, sky, mint) that act as colored sticky-notes on an otherwise monochrome page. The single dark band — a near-black navy research section — is the dramatic inversion that gives the system its contrast and signals depth-of-work. Hierarchy is built through type weight and scale rather than color, and a thin periwinkle accent (#bdbbff) appears as small dashes and underlines to mark active states. Pastel backgrounds are decorative, not decorative-only: they tag metric categories. Components are sharp-cornered (4px), low-elevation, and rely on the monospace label family to feel like a lab notebook.
Color palette
accent
Mint Cyan
#c8f6f9Gray supporting accent for decorative details and low-frequency emphasis.
Sky
#c1dff9Gray supporting accent for decorative details and low-frequency emphasis.
Blush
#fde3f6Light supporting surface for subtle backgrounds and section separation.
Peach
#ffdccdCard background — used for the third stat tile, warm counterweight to the cool pinks and blues
neutral
Obsidian
#000000Dark supporting neutral for text, icons, and strong contrast. Do not promote it to the primary CTA color
Paper White
#ffffffPage canvas, card surfaces on light theme, text on dark surfaces
Slate
#4d4d4dMuted secondary text, subdued metadata, low-emphasis body copy
Hairline
#d6d6d6Hairline borders, table dividers, input outlines
Midnight Ink
#010120Dark surface (research section background) — near-black navy that reads as deeper than pure black, giving the dark band a tinted, on-brand cast
Typography
Type scale
Minor Third (1.2) · 16px basedisplay
64px · 400 · 1.1 · -1.92px trackingThe quick brown fox jumps
heading
40px · 500 · 1.15 · -0.8px trackingThe quick brown fox jumps
heading-sm
28px · 500 · 1.2 · -0.42px trackingThe quick brown fox jumps
subheading
22px · 500 · 1.25 · -0.22px trackingThe quick brown fox jumps
body
18px · 500 · 1.3 · -0.18px trackingThe quick brown fox jumps
body-sm
16px · 400 · 1.3 · -0.16px trackingThe quick brown fox jumps
caption
14px · 400 · 1.25 · -0.14px trackingThe quick brown fox jumps
text-13
13px · 500 · 1.4The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
The Future
- Weights
- 400, 500
- Sizes
- 14, 16, 18, 22, 28, 40, 64
- Line height
- 1.10–1.40
- Letter spacing
- -1.92px at 64px, -0.80px at 40px, -0.42px at 28px, -0.22px at 22px, -0.18px at 18px, -0.16px at 16px, -0.14px at 14px
- Fallback
- Inter Tight, Satoshi, General Sans
Primary sans-serif for body, nav, headings, and hero — the sole display and text family. Aggressive negative tracking at display sizes (-0.03em at 64px) tightens headlines into compact, near-condensed blocks. Tight line-heights (1.10 at display) keep multi-line headlines visually dense rather than airy.
Additional typeface
PP Neue Montreal Mono
- Weights
- 400, 500
- Sizes
- 10, 11, 13, 16
- Line height
- 1.00–1.40
- Letter spacing
- 0.07px at 10px, 0.08px at 11px, 0.09px at 13px, 0.11px at 16px
- Fallback
- JetBrains Mono, IBM Plex Mono, Geist Mono
Monospace for labels, category badges, button text, and technical metadata — the lab-notebook voice that signals research credibility. Slightly positive tracking (0.005–0.007em) keeps mono caps readable at small sizes.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 40-80px
- Card padding
- 16-24px
- Element gap
- 8-16px
Border radius
tabs
4pxcards
4pxbadges
4pxinputs
4pxbuttons
4pxSpacing scale
1px2px4px6px8px10px12px16px20px24px32px40px45px48px54px64px80px88px100px120px127pxGuidelines
Do
- Set body and heading text in The Future with aggressive negative tracking at large sizes (-0.03em at 64px, -0.02em at 40px)
- Use mono (PP Neue Montreal Mono) for all labels, badges, button text, and technical metadata — the mono voice is the system's research credibility signal
- Use 4px radius for every card, button, badge, and input — the sharp corner is a defining trait
- Place at most one dark band per page, using #010120 (near-black navy, not pure black) to create a deliberate inversion
- Apply pastel card backgrounds (#c1dff9, #fde3f6, #ffdccd, #c8f6f9) as category-coded fills, not as decoration — each pastel should tag a distinct metric or topic
- Reserve #bdbbff periwinkle for small UI punctuation: active indicators, section dashes, underlines — never as a surface fill or large block
- Keep the sticky nav the only element with shadow; use the navy-tinted horizontal glow rgba(1,1,32,0.1) -10px 0px 75px 0px
Don’t
- Don't introduce drop shadows on cards, buttons, or sections — the system is flat by design
- Don't use pure white text on pure black surfaces — use #ffffff on #010120 so the dark band reads as brand-tinted, not generic dark mode
- Don't color trusted-by or partner logos — keep them desaturated to #4d4d4d so they don't compete with the pastel stat cards
- Don't round corners above 4px for standard UI; large radii (8px, 16px) break the sharp, editorial feel
- Don't use color to indicate hierarchy on light surfaces — use type weight (400 vs 500) and size instead, matching the headline pattern of one bold line + one lighter continuation line
- Don't add gradients to UI chrome; gradients belong only in the hero 3D illustration
- Don't mix the two font families casually — mono stays in labels/badges/buttons, sans stays in body and headings
Components
Primary Dark Button
High-emphasis action (START BUILDING, SIGN IN)Filled black (#000000) background, white text in PP Neue Montreal Mono 13px weight 500, 4px radius, padding 8px 16px. No border. Black-on-black hover (no color shift). Inline arrow icon (→) on SIGN IN variant.
Ghost Button
Secondary action (CONTACT SALES)Transparent background, 1px border in #d6d6d6 or currentColor, black text in PP Neue Montreal Mono 13px weight 500, 4px radius, padding 8px 16px. Hover darkens text to #000000.
Announcement Bar
Top-of-page news stripFull-width #000000 background, white centered text in The Future 14px weight 400, padding 8px vertical. Sits above the nav with no separator.
Sticky Navigation
Primary site navigationWhite (#ffffff) background, 1200px max-width container, 16–24px vertical padding. Logo (gradient mark + wordmark) left, nav links center (The Future 16px, weight 400, #000000), CTA cluster right (Ghost + Primary). Sticky with a soft navy-tinted horizontal glow on scroll: rgba(1,1,32,0.1) -10px 0px 75px 0px.
Hero Section
Above-the-fold introductionTwo-column split on white. Left: display headline at 64px The Future weight 500 (#000000), continuation line at 64px weight 400 in #4d4d4d, supporting subtext at 18px weight 400 in #4d4d4d, Primary + Ghost button pair. Right: abstract 3D illustration of translucent gradient shapes (blue, purple, orange rings and a diamond) with floating labels in mono.
Stat Metric Card
Performance headline tile (Faster Inference, Lower Cost, Faster Pre-training)Solid pastel fill (one of #c1dff9, #fde3f6, #ffdccd, #c8f6f9), 4px radius, padding 20–24px. Small mono label top-left with directional arrow (↑ FASTER INFERENCE, ↓ LOWER COST). Giant metric number in The Future 64px weight 500 #000000. Single-line caption below in The Future 14–16px weight 400 #4d4d4d. No border, no shadow — the fill IS the card.
Platform Tab Card
Category selector for the Full-stack cloud section (Inference, Compute, Model shaping)White background card with 4px radius, centered label in The Future 22px weight 500. Active state: pastel fill (#c8f6f9 mint) replaces the white surface, providing color-on-color contrast without a border or shadow change. Padding 20–24px vertical.
Research Paper Card
Featured publication tile in the dark research sectionDark card on Midnight Ink (#010120) background — card fill is a slightly lighter navy tone derived from the surface. 4px radius, padding 24–32px. Category badge top-center (PP Neue Montreal Mono 11px weight 500, white on translucent periwinkle or white on dark). Paper title centered in The Future 22px weight 500 white. Author list in PP Neue Montreal Mono 11px weight 400 in muted white (#4d4d4d equivalent at low opacity). A small periwinkle (#bdbbff) dash sits to the left edge of each card as a visual link.
Category Badge
Compact label for paper type or section tagPP Neue Montreal Mono 11px weight 500, uppercase, white text on dark surface. No background fill (sits directly on the card). Tracking slightly positive for mono legibility.
Trusted-By Logo Row
Social proof stripSingle horizontal row of grayscale partner logos in #4d4d4d, separated by generous whitespace. Small 'TRUSTED BY' label in PP Neue Montreal Mono 11px weight 500 #4d4d4d to the left. No logos are colored — all are desaturated to preserve the monochrome system.
Hero Illustration
Brand-defining 3D visual on the heroAbstract 3D render: translucent gradient rings, a central spherical form, and a faceted orange diamond shape, with small mono labels (PRODUCTION INFERENCE, OPTIMIZED TRAINING, CUTTING-EDGE RESEARCH) anchoring the shapes like callouts. Glossy, smooth, dimensional — not flat illustration. Gradient palette runs blue → purple → orange across the three main forms.
Surfaces & elevation
Level 1
Paper Canvas
#ffffffDefault page background across hero, stats, and platform sections
Level 2
Midnight Band
#010120Dark research section — the single inverted surface that breaks the light theme
The system is almost shadowless. The single detected shadow is a soft horizontal glow on the sticky nav (tinted with the brand navy at 10% opacity) — everything else relies on flat color contrast and borders for separation. Cards on light surfaces are distinguished by their pastel fills, not elevation; the dark research cards use a slightly lighter navy fill (#010120 with a subtle internal card tone) rather than drop shadows.
Sticky Navigation
rgba(1, 1, 32, 0.1) -10px 0px 75px 0px
Layout & imagery
Layout
Full-width sections with 1200px max-width centered content. Nav: top bar with logo left, links center, CTA cluster right. Hero: asymmetric two-column split — text block left (50%), 3D illustration right (50%) on white. Stats: three equal pastel cards in a row. Platform section: centered header, then three tab cards in a row with the active tab recolored. Research section: full-bleed dark band (#010120) with a horizontally scrollable row of four paper cards, section header left-aligned, nav arrows right. Section gaps run 40–80px; card padding runs 16–24px; element gaps run 8–16px on a 4px base grid.
Imagery
Imagery is dominated by a single abstract 3D illustration on the hero: translucent gradient geometric forms (rings, a central sphere, a faceted orange diamond) in a blue→purple→orange palette, glossy and dimensional, floating against white space with small mono callout labels. No photography anywhere on the site. No flat illustration or iconographic graphics. The 3D style is the brand's only visual mark beyond typography and the pastel card system. Icons throughout the UI are mono outlines drawn from the system weight.
Design notes
Agent Guide
Quick Color Reference: - text: #000000 - background: #ffffff - border: #d6d6d6 - accent: #bdbbff - dark surface: #010120 - primary action: no distinct CTA color Example Component Prompts: 1. Create a stat metric card: 4px radius, 24px padding, fill #c1dff9 sky blue. Top-left label in PP Neue Montreal Mono 11px weight 500 #000000 reading '↑ FASTER INFERENCE'. Metric number in The Future 64px weight 500 #000000 reading '2x'. Caption below in The Future 14px weight 400 #4d4d4d reading 'powered by cutting-edge research.' 2. Create a research paper card on #010120 background: 4px radius, 32px padding, slightly lighter navy card fill. Centered category badge in PP Neue Montreal Mono 11px weight 500 white reading 'AGENTS'. Title in The Future 22px weight 500 white, centered. Author list in PP Neue Montreal Mono 11px weight 400 #4d4d4d. Small #bdbbff periwinkle dash to the left edge. 3. Create a platform tab card: 4px radius, 20px vertical padding, white background. Centered label 'Inference' in The Future 22px weight 500 #000000. Active state: fill becomes #c8f6f9 mint cyan. No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color. 5. Create a ghost button: transparent background, 1px #d6d6d6 border, 4px radius, padding 8px 16px. Label in PP Neue Montreal Mono 13px weight 500 #000000 reading 'CONTACT SALES'.
Similar brands
Anthropic
Same clean light-paper aesthetic with a single dark inversion section, tight sans-serif display type, and mono labels for technical credibility
Hugging Face
Pastel category-coded cards on a white canvas with mono badges, and a research-credibility layout where papers and models are the hero content
Linear
Sharp 4px corners, almost shadowless surfaces, aggressive negative tracking on large display type, and near-monochrome palette with a single chromatic accent
Modal Labs
Devtools-for-AI branding with a single bold headline + lighter continuation line pattern, pastel stat tiles, and dark research/feature bands as visual punctuation
Vercel
Black-on-white editorial typography with tight letter-spacing, a sole dark hero variant, and minimal UI chrome that lets type and 3D illustration carry the brand
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
