Together AI Inspired Design System

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.