Make your AI a shadcn expert

Together AI Inspired Design System

Together AI's design system as a DESIGN.md file.

About Together AI Inspired DESIGN.md

Curated by Dov AzencotUpdated Source together.ai

  • AI & LLM Platforms
  • Web Infrastructure & Hosting

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.

What makes it distinct

  1. Dual surface modepages alternate #010120 dark bands and #ffffff white bands with zero mid-grey transitions
  2. Two-face type systemThe Future display sans at 64px / 500 paired with PP Neue Montreal Mono eyebrows at 11px / 500
  3. Single decorative elementa three-stop #fc4c02 to #ef2cc1 to #bdbbff gradient ribbon is the entire visual identity
  4. Universal 4px radiusevery card, button, and badge uses {rounded.sm}; only the chat orb gets {rounded.full}
  5. 44 component tokens with one black #000000 CTA pill carrying every conversion target across the entire site

Live at together.ai

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

Screenshot of Together AI Inspired's website at together.aitogether.ai

Explore Together AI Inspired

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Together AI Inspired design system FAQ

Common questions about Together AI Inspired's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Use Together AI Inspired in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md