Together AI Inspired

Overview

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.

Colors

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.

Typography

Font Family

Two families carry the entire system:

1. 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.
2. 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

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.

Layout

Spacing System

• Base unit: 4 px. Almost every captured value is a multiple of 4, with two exceptions (7.2 px, 55.2 px) that are gap-multiplier derivatives, not layout decisions.
• Tokens: {spacing.xxs} 2 px · {spacing.xs} 4 px · {spacing.sm} 8 px · {spacing.md} 12 px · {spacing.lg} 16 px · {spacing.xl} 20 px · {spacing.2xl} 24 px · {spacing.3xl} 32 px · {spacing.4xl} 44 px · {spacing.5xl} 48 px · {spacing.6xl} 55.2 px · {spacing.section} 80 px.
• Section padding: marketing bands use {spacing.section} 80 px top/bottom on desktop. The hero and the "research" dark band keep the 80 px rhythm; pricing tables tighten to {spacing.5xl} to keep dense data legible.
• Card interior padding: research cards and testimonial cards sit at {spacing.2xl} 24 px interior; the stat-card tiles use {spacing.3xl} 32 px to give the big number breathing room.
• Inline gap: button + nav rows use {spacing.md} 12 px between siblings; chip groups use {spacing.sm} 8 px.

Grid & Container

• Max width: ~1280 px desktop container; nothing rendered above that. Content centres with horizontal gutters of {spacing.3xl} 32 px on desktop, {spacing.lg} 16 px on mobile.
• Column patterns:
  • Research / testimonial grids: 3-up at desktop, 1-up at mobile.
  • Stats tile grid: 3-up at desktop, 1-up at mobile.
  • Article-card grid: 2-up at desktop, 1-up at mobile.
  • Pricing data table: full-width, model rows stack on mobile.
  • Hero: 50 / 50 split (headline left, ribbon graphic right) at desktop; stacked at mobile with graphic above.

Whitespace Philosophy

Surface contrast does most of the separation. A dark band ends → 80 px of breathing room → next light band begins. Inside a band, headline and lead paragraph hug close ({spacing.lg} 16 px between them), then a wider gap before the supporting visual or CTA cluster. Inside pricing data tables, the brand keeps rows tight ({spacing.md} 12 px vertical) — the table reads more like a sheet than a marketing component.

Responsive Strategy

Breakpoints

Touch Targets

The mono-cap button label is set at 16 px; combined with {spacing.xs} 4 px top / bottom and a 24 px horizontal padding, the primary pill renders at roughly 32 px tall. On mobile viewports, button height is inflated to ≥ 44 px through extra vertical padding inside the touch row — meeting WCAG AAA. The circular icon button (button-icon-circular) renders at 44 × 44 px minimum at all viewports.

Collapsing Strategy

• Nav: full link row + black "Sign in" pill + "Get started" pill at desktop. Collapses to logo + hamburger at mobile; the menu opens as a full-overlay drawer with the same link list stacked vertically.
• Hero: at desktop, headline left + gradient ribbon right (50 / 50). At mobile, headline stacks above a smaller-scale ribbon — never below.
• Research band: 4-up grid at desktop drops to 2-up at tablet, 1-up at mobile. Card chrome stays identical.
• Pricing data table: at desktop, full-width with all columns visible. At tablet, sub-tab row enables horizontal scroll. At mobile, cell rows stack model-name above price block.
• Footer wordmark banner: scales fluidly — the giant together.ai wordmark stays edge-to-edge regardless of viewport.

Image Behavior

• Hero ribbon graphic: rendered as an SVG, scales fluidly with the hero container; never crops, never repositions.
• Testimonial portraits: square or 4:5 portrait, hard-cropped at top; consistent square framing across the grid.
• Article thumbnails: 16:9 landscape, fills card top with {rounded.sm} corners on the image only.
• Logo bar: customer logos rendered as grayscale SVGs in a wrapping flex row.

Elevation & Depth

Decorative Depth

• Gradient ribbon as depth: the hero's three-stop gradient ribbon is the page's only true atmospheric effect. It loops through layered translucent shapes that imply depth without leaving the brand palette.
• Code editor mockup as section-depth break: a dark code-editor surface inside the otherwise-white product band acts as a one-step lift, mirroring the hero's polarity flip.
• Wordmark banner as terminal depth: the giant together.ai letters at the bottom are technically inside {colors.canvas} but tinted toward {colors.hairline} so they read as a faint stencil, giving the page a final "you have arrived" sign-off.

Shapes

Border Radius Scale

Photography Geometry

• Hero ribbon: SVG gradient, free-form; no aspect-ratio constraint.
• Customer logos: vector, rendered grayscale at consistent height (~24 px) in a wrapping flex row.
• Testimonial portraits: 1:1 square crop with hard-edge corners — no avatar pill.
• Article thumbnails: 16:9 with {rounded.sm} 4 px top-corner radius on the image only; card chrome stays square.

Components

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).

• Background {colors.canvas}, text {colors.ink}, label in {typography.body-md}, padding {spacing.sm} {spacing.lg}, shape {rounded.xs} 3.25 px.

data-table-row — the model row inside the pricing serverless-inference table.

• Background {colors.canvas}, text {colors.ink}, 1 px solid {colors.hairline} bottom border, padding {spacing.md} {spacing.lg}. Inside: model icon + model name (display sans) + input cost cell + output cost cell.

data-table-header — the table header row.

• Background {colors.hairline}, text {colors.body}, set in {typography.mono-caps-eyebrow} (uppercase mono), padding {spacing.md} {spacing.lg}.

toggle-pill-group — the "Standard Pricing / Wholesale Pricing" segmented control above the fine-tuning table.

• Background {colors.hairline} rail, individual pills {colors.canvas} (inactive) or {colors.primary} (active), label in {typography.mono-caps-button}, shape {rounded.sm} 4 px, rail padding {spacing.xs}.

badge-neutral — the inline tag pill on light surfaces.

• Background {colors.hairline}, text {colors.ink}, body in {typography.body-md}, 1 px solid {colors.hairline} border, padding {spacing.xxs} {spacing.sm}, shape {rounded.sm} 4 px.

badge-subtle-on-dark — the inline tag pill on dark hero / research surfaces.

• Background {colors.surface-dark-soft}, text {colors.on-dark}, body in {typography.body-md}, padding {spacing.xxs} {spacing.sm}, shape {rounded.sm} 4 px.

footer-wordmark-banner — the massive together.ai wordmark at the bottom of every page.

• Background {colors.canvas}, wordmark colour {colors.hairline} (faint stencil tint), set in {typography.display-xxl} scaled fluidly to the viewport width. Edge-to-edge, square corners. Acts as the final page sign-off.

Examples (illustrative)

Auto-derived kit-mirror demonstration surfaces (scripts/derive-examples-block.mjs). Each ex-* entry references brand-native primitives so downstream consumers (/preview-design, /generate-kit) re-skin the same 10 surfaces consistently. TO_FILL markers indicate missing primitives — resolve in the LLM judgment pass.

ex-pricing-tier — Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface.

• Properties: backgroundColor, textColor, borderColor, rounded, padding

ex-pricing-tier-featured — Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode).

• Properties: backgroundColor, textColor, rounded, padding

ex-product-selector — What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery).

• Properties: backgroundColor, rounded, padding

ex-cart-drawer — Subscription summary — re-purposed for SaaS / B2B (line items per add-on, not literal cart).

• Properties: backgroundColor, rounded, padding, item-divider

ex-app-shell-row — Sidebar nav row inside the App Shell example. Active state uses brand primary as the indicator.

• Properties: backgroundColor, activeIndicator, rounded, padding

ex-data-table-cell — Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm.

• Properties: headerBackground, headerTypography, bodyTypography, cellPadding, rowBorder

ex-auth-form-card — Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside.

• Properties: backgroundColor, rounded, padding

ex-modal-card — Modal dialog surface — same chrome as feature-card with elevated shadow.

• Properties: backgroundColor, rounded, padding

ex-empty-state-card — Empty-state illustration frame.

• Properties: backgroundColor, rounded, padding, captionTypography

ex-toast — Toast notification surface — feature-card shape + medium shadow.

• Properties: backgroundColor, rounded, padding, typography

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.