--- version: alpha name: Together AI Inspired website: "https://www.together.ai" description: An inspired interpretation of Together AI's design language — an AI infrastructure platform 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. seo: title: "Together AI Design System for React — #010120, The Future, 44 components" metaDescription: "Together AI's design system as a DESIGN.md file. #010120 canvas, The Future + PP Neue Montreal Mono, 14 colors, 44 components. For React, Next.js, and AI tools." highlights: - "Dual surface mode — pages alternate #010120 dark bands and #ffffff white bands with zero mid-grey transitions" - "Two-face type system — The Future display sans at 64px / 500 paired with PP Neue Montreal Mono eyebrows at 11px / 500" - "Single decorative element — a three-stop #fc4c02 to #ef2cc1 to #bdbbff gradient ribbon is the entire visual identity" - "Universal 4px radius — every card, button, and badge uses {rounded.sm}; only the chat orb gets {rounded.full}" - "44 component tokens with one black #000000 CTA pill carrying every conversion target across the entire site" tags: - "AI & LLM Platforms" - "Web Infrastructure & Hosting" lastUpdated: "2026-05-12" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | Together AI sells AI cloud infrastructure — GPU clusters, model inference, fine-tuning, the plumbing that lets developer teams ship LLM products. The brand's web surface mirrors that posture with a near-black hero on top, a long white technical body in the middle, and exactly one piece of decorative chrome: a three-color orange-magenta-periwinkle gradient ribbon that does the entire job of declaring "we are not another grey enterprise SaaS." No illustration system, no spot art, no secondary accent — the gradient carries the brand alone. Type is the second decisive voice. A custom geometric sans (The Future) sets every headline at weight 500 with tight negative letter-spacing, and an uppercase monospace eyebrow (PP Neue Montreal Mono) labels every section, every button, and every table-header cell at 11–16px. This page packages the whole system into a single DESIGN.md file built to the Google Labs open spec. Inside: 14 color tokens grouped across brand gradient (#fc4c02, #ef2cc1, #bdbbff, plus a mint #c8f6f9), surface (#010120 canvas-dark, #ffffff canvas, #ebebeb hairline, #313641 surface-dark-soft), and text (#000000 ink, #999999 body, #ffffff on-dark). Typography spans 14 tokens from display-xxl at 64px down to mono-caption at 10px. The spacing scale runs 12 steps from 2px to an 80px section rhythm, the radius scale stops at 5 tokens topping out at full pill 9999px, and the component manifest defines 44 surfaces from the hero band down to the footer wordmark banner. Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces Together's specific restraint — dual-surface alternation, monospace eyebrows, gradient-as-chrome — rather than spitting out a generic AI-platform theme with neon accents and glass cards. Reference the tokens directly in Tailwind config or CSS variables. The system rewards study for one reason in particular: it shows what an infrastructure brand looks like when it commits to two fonts, one gradient, and a strict polarity flip between dark and light, with absolutely nothing else in the decorative budget. related: - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "/blocks" title: "React blocks for shadcn/ui" description: "Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives." questions: - id: "primary-color" title: "What colors carry Together AI's brand identity?" answer: "Together AI uses a near-black #010120 canvas-dark as its hero / research surface, paired with pure #ffffff canvas for product / pricing bands. The decorative chrome is a single three-stop gradient running #fc4c02 (orange) to #ef2cc1 (magenta) to #bdbbff (periwinkle), used only as the hero ribbon graphic and never miniaturised. Every primary CTA renders as a black #000000 pill — the brand reserves the gradient for atmosphere and the black pill for action." - id: "typography" title: "What typography does Together AI use, and what should I substitute?" answer: "The system runs two proprietary faces: The Future, a custom geometric display sans used for headlines and body at weights 400 and 500 with tight negative letter-spacing (-1.92px at 64px display), and PP Neue Montreal Mono for every uppercase eyebrow, button label, and table-header cell at 11–16px with positive tracking (0.05–0.55px). For substitutes, Inter with font-feature-settings 'ss01' approximates The Future at display sizes; JetBrains Mono or Geist Mono at weight 500 with text-transform uppercase matches the mono eyebrow voice." - id: "dark-mode" title: "Does Together AI's design system have a dark mode?" answer: "Yes and no — Together AI runs a dual-surface mode rather than a traditional dark / light toggle. Pages alternate aggressively between #010120 canvas-dark hero / research bands and #ffffff canvas product / pricing bands, with #ebebeb hairline as the single soft surface used only for data-table headers and toggle rails. There is no in-between grey. The brand polarity flips by section, not by user preference." - id: "shape-language" title: "What is Together AI's shape language?" answer: "Universally lightly rounded. The canonical card / button / badge radius is {rounded.sm} 4px; pricing-page sub-tabs and outline buttons tighten to {rounded.xs} 3.25px; feature-tab pills relax to {rounded.md} 8px. The only fully-pill shape in the system is {rounded.full} 9999px, reserved for the floating chat-launcher orb in the bottom-right corner. Hero and research bands themselves are square-cornered full-bleed surfaces." - id: "use-in-project" title: "Can I use this DESIGN.md to build a React AI infrastructure site?" answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Together's two-face type contrast, dual-surface band rhythm, and single-gradient decorative discipline rather than generating a generic AI-platform theme. The 14 colors, 14 typography tokens, 12 spacing steps, and 44 component definitions all expose as quoted values you can paste directly into Tailwind config, CSS variables, or shadcn/ui theme overrides." - id: "known-gaps" title: "What's missing from this DESIGN.md spec?" answer: "A few things, documented in the Known Gaps section: explicit error / success / warning semantic colors (the brand uses the primary black or gradient for validation cues instead of a dedicated red / green / yellow palette), hover-state token definitions, full loading-skeleton specs, the in-product dashboard surface treatment (only the public marketing site is captured), and mobile-specific nav drawer interaction details. The spec captures the public marketing and pricing pages comprehensively." colors: primary: "#000000" on-primary: "#ffffff" ink: "#000000" body: "#959494" hairline: "#959494" canvas: "#ffffff" canvas-dark: "#010120" surface-dark-soft: "#313641" on-dark: "#ffffff" accent-orange: "#fc4c02" accent-magenta: "#ef2cc1" accent-periwinkle: "#bdbbff" accent-mint: "#c8f6f9" typography: display-xxl: fontFamily: The Future, Inter, Helvetica Neue, Arial, sans-serif fontSize: 64px fontWeight: 500 lineHeight: 70.4px letterSpacing: -1.92px display-xl: fontFamily: The Future, Inter, Helvetica Neue, Arial, sans-serif fontSize: 40px fontWeight: 500 lineHeight: 48px letterSpacing: -0.8px display-lg: fontFamily: The Future, Inter, Helvetica Neue, Arial, sans-serif fontSize: 28px fontWeight: 500 lineHeight: 32.2px letterSpacing: -0.42px display-md: fontFamily: The Future, Inter, Helvetica Neue, Arial, sans-serif fontSize: 22px fontWeight: 500 lineHeight: 25.3px letterSpacing: -0.22px body-lg: fontFamily: The Future, Inter, Helvetica Neue, Arial, sans-serif fontSize: 18px fontWeight: 400 lineHeight: 23.4px letterSpacing: -0.18px body-lg-strong: fontFamily: The Future, Inter, Helvetica Neue, Arial, sans-serif fontSize: 18px fontWeight: 500 lineHeight: 23.4px letterSpacing: -0.18px body-md: fontFamily: The Future, Inter, Helvetica Neue, Arial, sans-serif fontSize: 16px fontWeight: 400 lineHeight: 20.8px letterSpacing: -0.16px body-md-strong: fontFamily: The Future, Inter, Helvetica Neue, Arial, sans-serif fontSize: 16px fontWeight: 500 lineHeight: 20.8px letterSpacing: -0.16px caption: fontFamily: The Future, Inter, Helvetica Neue, Arial, sans-serif fontSize: 14px fontWeight: 400 lineHeight: 19.6px caption-strong: fontFamily: The Future, Inter, Helvetica Neue, Arial, sans-serif fontSize: 14px fontWeight: 500 lineHeight: 19.6px mono-caps-button: fontFamily: PP Neue Montreal Mono, ui-monospace, SF Mono, Menlo, monospace fontSize: 16px fontWeight: 500 lineHeight: 16px letterSpacing: 0.08px mono-caps-eyebrow: fontFamily: PP Neue Montreal Mono, ui-monospace, SF Mono, Menlo, monospace fontSize: 11px fontWeight: 500 lineHeight: 11px letterSpacing: 0.55px mono-caps-label: fontFamily: PP Neue Montreal Mono, ui-monospace, SF Mono, Menlo, monospace fontSize: 11px fontWeight: 500 lineHeight: 15.4px letterSpacing: 0.055px mono-caption: fontFamily: PP Neue Montreal Mono, ui-monospace, SF Mono, Menlo, monospace fontSize: 10px fontWeight: 400 lineHeight: 14px letterSpacing: 0.05px rounded: none: 0px xs: 3.25px sm: 4px md: 8px full: 9999px spacing: xxs: 2px xs: 4px sm: 8px md: 12px lg: 16px xl: 20px 2xl: 24px 3xl: 32px 4xl: 44px 5xl: 48px 6xl: 55.2px section: 80px components: nav-bar: backgroundColor: "{colors.canvas-dark}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" padding: "{spacing.lg} {spacing.3xl}" nav-link: textColor: "{colors.on-dark}" typography: "{typography.body-md}" button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.mono-caps-button}" rounded: "{rounded.sm}" padding: "{spacing.xs} {spacing.2xl}" button-secondary-mint: backgroundColor: "{colors.accent-mint}" textColor: "{colors.ink}" typography: "{typography.mono-caps-button}" rounded: "{rounded.sm}" padding: "{spacing.xs} {spacing.2xl}" button-secondary-white: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.mono-caps-button}" rounded: "{rounded.sm}" padding: "{spacing.xs} {spacing.2xl}" button-ghost-on-dark: backgroundColor: "{colors.surface-dark-soft}" textColor: "{colors.on-dark}" typography: "{typography.mono-caps-button}" rounded: "{rounded.sm}" button-outline: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "rgba(0, 0, 0, 0.08)" typography: "{typography.mono-caps-button}" rounded: "{rounded.xs}" button-icon-circular: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" rounded: "{rounded.full}" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "rgba(0, 0, 0, 0.08)" typography: "{typography.body-md}" rounded: "{rounded.sm}" badge-neutral: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "rgba(0, 0, 0, 0.08)" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: "{spacing.xxs} {spacing.sm}" badge-subtle-on-dark: backgroundColor: "{colors.surface-dark-soft}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: "{spacing.xxs} {spacing.sm}" hero-band-dark: backgroundColor: "{colors.canvas-dark}" textColor: "{colors.on-dark}" typography: "{typography.display-xxl}" padding: "{spacing.section} {spacing.3xl}" research-band-dark: backgroundColor: "{colors.canvas-dark}" textColor: "{colors.on-dark}" typography: "{typography.display-xl}" padding: "{spacing.section} {spacing.3xl}" feature-tab-pill: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md-strong}" rounded: "{rounded.sm}" padding: "{spacing.md} {spacing.2xl}" pricing-sub-tab: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xs}" padding: "{spacing.sm} {spacing.lg}" stats-card-tinted: backgroundColor: "{colors.accent-mint}" textColor: "{colors.ink}" typography: "{typography.display-xl}" rounded: "{rounded.sm}" padding: "{spacing.3xl}" research-card: backgroundColor: "{colors.canvas-dark}" textColor: "{colors.on-dark}" borderColor: "rgba(255, 255, 255, 0.12)" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: "{spacing.2xl}" testimonial-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: "{spacing.2xl}" article-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-md}" rounded: "{rounded.sm}" padding: "{spacing.2xl}" code-editor-mockup: backgroundColor: "{colors.canvas-dark}" textColor: "{colors.on-dark}" typography: "{typography.mono-caption}" rounded: "{rounded.sm}" padding: "{spacing.2xl}" data-table-row: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "rgba(0, 0, 0, 0.08)" typography: "{typography.body-md}" padding: "{spacing.md} {spacing.lg}" data-table-header: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.mono-caps-eyebrow}" padding: "{spacing.md} {spacing.lg}" toggle-pill-group: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.mono-caps-button}" rounded: "{rounded.sm}" padding: "{spacing.xs}" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" padding: "{spacing.section} {spacing.3xl}" footer-wordmark-banner: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.display-xxl}" # ─── Examples (illustrative) — auto-derived; resolve any TO_FILL markers below ─── ex-pricing-tier: description: "Default Pricing tier card. Mirrors article-card chrome on canvas-soft surface with a hairline border." backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" borderColor: "rgba(0, 0, 0, 0.08)" rounded: "{rounded.sm}" padding: "{spacing.3xl}" ex-pricing-tier-featured: description: "Featured tier — polarity-flipped to canvas-dark with white text." backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" rounded: "{rounded.sm}" padding: "{spacing.3xl}" ex-product-selector: description: "What's Included summary card — repurposed for the brand's GPU / inference packaging tiers." backgroundColor: "{colors.canvas}" rounded: "{rounded.sm}" padding: "{spacing.2xl}" ex-cart-drawer: description: "Subscription summary — line items per add-on (NOT a literal e-commerce cart)." backgroundColor: "{colors.canvas}" rounded: "{rounded.sm}" padding: "{spacing.2xl}" item-divider: "{colors.hairline}" ex-app-shell-row: description: "Sidebar nav row. Active state uses brand primary as a left-edge indicator bar." backgroundColor: "{colors.canvas}" activeIndicator: "{colors.primary}" rounded: "{rounded.sm}" padding: "{spacing.md} {spacing.lg}" ex-data-table-cell: description: "Mirrors the brand's pricing-page table. Header uses mono-caps-eyebrow uppercase; body uses body-md." headerBackground: "{colors.hairline}" headerTypography: "{typography.mono-caps-eyebrow}" bodyTypography: "{typography.body-md}" cellPadding: "{spacing.md} {spacing.lg}" rowBorder: "{colors.hairline}" ex-auth-form-card: description: "Sign-in / sign-up card. Mirrors article-card chrome with text-input primitives inside." backgroundColor: "{colors.canvas}" rounded: "{rounded.sm}" padding: "{spacing.3xl}" ex-modal-card: description: "Modal dialog surface — same chrome as article-card; relies on tinted scrim instead of card shadow." backgroundColor: "{colors.canvas}" rounded: "{rounded.sm}" padding: "{spacing.3xl}" ex-empty-state-card: description: "Empty-state illustration frame. Generous padding on canvas-soft surface." backgroundColor: "{colors.canvas}" rounded: "{rounded.sm}" padding: "{spacing.5xl}" captionTypography: "{typography.body-md}" ex-toast: description: "Toast notification surface — flat-cornered article-card chrome with a soft brand-tinted drop shadow." backgroundColor: "{colors.canvas}" rounded: "{rounded.sm}" padding: "{spacing.md} {spacing.lg}" typography: "{typography.body-md}" --- ## 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. ## Known Gaps - **Semantic palette:** the brand does not maintain a documented error / success / warning color set in its public surface; validation cues rely on the primary black or the brand gradient depending on context. No explicit error red, success green, or warning yellow is captured here — adopting framework defaults is appropriate. - **Hover states:** precise hover token definitions for the black CTA, the ghost-on-dark button, and data-table rows were not captured. The brand likely uses subtle opacity shifts rather than explicit hover colors. - **Loading skeletons:** not visible on the extracted marketing surfaces; specific shimmer / skeleton treatments for the model-pricing table and dashboard tiles are not documented. - **In-product dashboard chrome:** only the public marketing and pricing surfaces are captured. The signed-in console (model deployments, billing, API key management) has its own surface treatment that lives outside this spec. - **Mobile nav drawer details:** the spec notes the nav collapses to a full-overlay drawer at mobile widths, but specific entry / exit animation timing and drawer interior chrome are not captured. - **Code-editor mockup syntax theme:** the dark code-editor mockup inside the product band uses a specific syntax-highlight palette (keyword / string / comment tints) that is not enumerated here.