# Together AI — Design System
> The AI Native Cloud for building, training, and running generative AI models.
- **Canonical:** https://uiuxskills.com/library/together-ai
- **Source:** https://together.ai
- **Category:** Developer Tools & IDEs
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 81%
- **License:** MIT
- **Last updated:** 2026-06-09T23:13:32.514Z

---

---
version: alpha
name: Together AI
tagline: The AI Native Cloud
description: Full-stack AI platform for inference, fine-tuning, and GPU clusters.
tone: Sophisticated, high-performance, developer-focused, and research-driven.
color-scheme: dark
colors:
  primary: "#0F62FE"
  secondary: "#8B5CF6"
  tertiary: "#F97316"
  background: "#090B11"
  surface: "#0F121D"
  surface-container: "#161B2B"
  surface-bright: "#22293F"
  on-primary: "#FFFFFF"
  on-surface: "#F8FAFC"
  on-surface-variant: "#94A3B8"
  outline: "#1E293B"
  error: "#EF4444"
  success: "#10B981"
typography:
  display-lg:
    fontFamily: Inter, system-ui, sans-serif
    fontSize: 3rem
    fontWeight: 700
    lineHeight: "1.2"
    letterSpacing: "-0.02em"
  display-md:
    fontFamily: Inter, system-ui, sans-serif
    fontSize: 2.25rem
    fontWeight: 700
    lineHeight: "1.25"
    letterSpacing: "-0.01em"
  headline-lg:
    fontFamily: Inter, system-ui, sans-serif
    fontSize: 1.875rem
    fontWeight: 600
    lineHeight: "1.3"
    letterSpacing: "-0.01em"
  headline-md:
    fontFamily: Inter, system-ui, sans-serif
    fontSize: 1.5rem
    fontWeight: 600
    lineHeight: "1.35"
    letterSpacing: 0em
  body-lg:
    fontFamily: Inter, system-ui, sans-serif
    fontSize: 1.125rem
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: 0em
  body-md:
    fontFamily: Inter, system-ui, sans-serif
    fontSize: 1rem
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: 0em
  label-md:
    fontFamily: Inter, system-ui, sans-serif
    fontSize: 0.875rem
    fontWeight: 500
    lineHeight: "1.4"
    letterSpacing: 0.01em
  label-sm:
    fontFamily: Inter, system-ui, sans-serif
    fontSize: 0.75rem
    fontWeight: 600
    lineHeight: "1.4"
    letterSpacing: 0.05em
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto-fit
  button-primary-hover:
    backgroundColor: "#1D4ED8"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto-fit
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    width: auto-fit
    borderColor: "{colors.outline}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    width: auto-fit
    borderColor: "{colors.outline}"
  card:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface-bright}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    borderColor: "{colors.outline}"
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    borderColor: "{colors.outline}"
  input-field-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.primary}"
    typography: "{typography.label-md}"
  link-hover:
    textColor: "{colors.on-surface-variant}"
    typography: "{typography.label-md}"
  badge-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
  badge-accent:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  page-container:
    backgroundColor: "{colors.background}"
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.05)
  md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)
  lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05)
---

## Overview

Together AI's visual identity is built for the AI Native Cloud, combining a sophisticated dark-mode aesthetic with vibrant, high-energy accents. It balances developer-centric utility with cutting-edge research credibility, utilizing clean typography, abstract 3D geometric shapes, and high-contrast layouts. The interface evokes a sense of high performance, security, and technical precision.

## Colors

The color strategy relies on a deep, dark canvas punctuated by highly saturated, functional accents. The primary interactive elements are driven by a high-contrast electric blue, while secondary and tertiary accents are reserved for illustrations, badges, and specific feature highlights to guide the developer's eye without creating visual clutter.

*   Primary (`{colors.primary}`): Electric blue used for primary interactive elements, links, and key call-to-actions.
*   Secondary (inferred) (`{colors.secondary}`): Vibrant purple accent color used in abstract illustrations and secondary badges.
*   Tertiary (inferred) (`{colors.tertiary}`): Orange accent color used to highlight specific features and in hero illustrations.
*   Background (`{colors.background}`): Deep dark blue-black background that forms the canvas of the AI Native Cloud experience.
*   Surface (inferred) (`{colors.surface}`): Slightly lighter dark blue used for input fields and base surface elements.
*   Surface Container (inferred) (`{colors.surface-container}`): Container background color for cards and structured content blocks.
*   Surface Bright (inferred) (`{colors.surface-bright}`): High-contrast surface color used for elevated cards and hover states.
*   On Primary (`{colors.on-primary}`): White text used on primary colored backgrounds for maximum readability.
*   On Surface (`{colors.on-surface}`): Off-white text used for primary body copy and headings on dark surfaces.
*   On Surface Variant (`{colors.on-surface-variant}`): Muted gray text used for secondary descriptions and metadata.
*   Outline (inferred) (`{colors.outline}`): Subtle border color used to define boundaries without adding visual noise.
*   Error (inferred) (`{colors.error}`): Standard red color used for error states and destructive actions.
*   Success (inferred) (`{colors.success}`): Standard green color used for success states and positive indicators.

## Typography

The typography system is built entirely on a highly legible sans-serif typeface, ensuring clean rendering of code, technical metrics, and documentation. It establishes a strong hierarchical structure to make complex information easily scannable.

*   Display Large (`{typography.display-lg}`): Bold, high-impact size used for main hero headlines to establish strong visual hierarchy.
*   Display Medium (inferred) (`{typography.display-md}`): Used for secondary hero headlines and major section titles.
*   Headline Large (inferred) (`{typography.headline-lg}`): Used for card group headers and feature section titles.
*   Headline Medium (inferred) (`{typography.headline-md}`): Used for standard card headers and sub-sections.
*   Body Large (inferred) (`{typography.body-lg}`): Used for hero subheadings and introductory paragraphs.
*   Body Medium (`{typography.body-md}`): Used for standard body copy and general descriptions.
*   Label Medium (`{typography.label-md}`): Used for button labels, navigation items, and form labels.
*   Label Small (inferred) (`{typography.label-sm}`): Used for small badges, micro-copy, and table headers.

## Layout

The layout uses a structured, high-density grid system optimized for technical documentation, API playgrounds, and marketing landing pages. The observed top-to-bottom section order is nav, announcement-bar, hero, social-proof, features, and footer. The hero composition pattern features a centered headline and subhead with primary and secondary CTAs side-by-side, accompanied by abstract 3D geometric illustrations. Spacing is governed by a strict scale, utilizing `{spacing.md}` and `{spacing.lg}` for standard component padding and container margins. On smaller viewports, the layout transitions responsively by stacking hero elements vertically and collapsing navigation into a mobile-optimized drawer.

## Elevation & Depth

Depth is primarily conveyed through subtle color contrast and thin borders rather than heavy shadows, maintaining a flat, modern developer-tool aesthetic. Where elevation is used, it employs soft, dark-tinted shadows to blend seamlessly with the dark background. The values are inferred.

*   `elevation.sm`: Used for subtle card lift and small interactive elements.
*   `elevation.md`: Applied to dropdowns, popovers, and standard hover states.
*   `elevation.lg`: Reserved for modals, drawer overlays, and high-priority floating containers.

## Shapes

The brand utilizes a mix of sharp, precise geometric lines and moderately rounded corners to create a balanced, professional look that feels both technical and accessible. Interactive elements like buttons and input fields utilize `{rounded.md}` to soften the technical layout. Larger components like cards use `{rounded.lg}` or `{rounded.xl}` to define structured content blocks, while pill badges and tags leverage `{rounded.full}` for a distinct, compact shape.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### button-primary
The primary call-to-action button uses `{colors.primary}` as its background and `{colors.on-primary}` for text, styled with `{typography.label-md}`. It should be used for the main user action on a page, such as starting a build or submitting a form.

### button-primary-hover
The hover state for the primary button shifts the background to a deeper blue (`#1D4ED8`) while maintaining `{colors.on-primary}` text. Use this state to provide immediate visual feedback during pointer interaction.

### button-secondary
The secondary button features a transparent background with a border defined by `{colors.outline}` and text in `{colors.on-surface}`. Use this for secondary actions, such as "Contact Sales", positioned alongside the primary button.

### button-secondary-hover
When hovered, the secondary button transitions its background to `{colors.surface-container}` to indicate interactivity. This state maintains the `{colors.outline}` border and `{colors.on-surface}` text color.

### card
The standard container for structured content uses `{colors.surface-container}` for its background and `{colors.outline}` for its border. It displays text in `{colors.on-surface}` using `{typography.body-md}` for general descriptions.

### card-elevated
An elevated card variant that uses `{colors.surface-bright}` for its background and `{colors.outline}` for its border. Use this component to highlight featured content, active states, or items requiring higher visual prominence.

### input-field
The standard text input uses `{colors.surface}` as its background, `{colors.outline}` for its border, and `{colors.on-surface}` for the input text. It is styled with `{typography.body-md}` to ensure clean, readable developer inputs.

### input-field-focus
When focused, the input field transitions its border color to `{colors.primary}` while retaining the `{colors.surface}` background. This state provides a clear, high-contrast focus ring for keyboard navigation and data entry.

### link
Text links use `{colors.primary}` and `{typography.label-md}` to stand out within body copy. Use these for inline navigation and secondary action triggers.

### link-hover
When hovered, the link text color transitions to `{colors.on-surface-variant}`. This subtle shift provides interactive feedback without disrupting the surrounding text layout.

### badge-secondary
A compact status or category indicator using `{colors.secondary}` as the background and `{colors.on-primary}` for text, styled with `{typography.label-sm}`. Use this to tag secondary features or research categories.

### badge-accent
An eye-catching badge using `{colors.tertiary}` as the background and `{colors.on-primary}` for text, styled with `{typography.label-sm}`. Use this to highlight new releases, beta features, or performance metrics.

### badge-error
A status indicator using `{colors.error}` as the background and `{colors.on-primary}` for text, styled with `{typography.label-sm}`. Use this to flag system errors, failed builds, or critical alerts.

### badge-success
A status indicator using `{colors.success}` as the background and `{colors.on-primary}` for text, styled with `{typography.label-sm}`. Use this to indicate active systems, successful deployments, or completed tasks.

### divider
A thin structural line with a height of 1px, colored with `{colors.outline}`. Use this to separate distinct content sections or list items without adding visual weight.

### page-container
The master container wrapping all page content, utilizing `{colors.background}` as its base color. It ensures a consistent, immersive dark-mode canvas across the entire application or website.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for primary call-to-actions like `{components.button-primary}`. | Do not use `{colors.secondary}` or `{colors.tertiary}` for primary action buttons. |
| Apply `{colors.surface-container}` for card backgrounds to contrast against the deep `{colors.background}`. | Avoid using heavy drop shadows on `{components.card}` elements; rely on `{colors.outline}` instead. |
| Use `{typography.display-lg}` for main hero headlines to establish strong visual hierarchy. | Do not mix multiple font families; stick strictly to `{typography.body-md}`'s defined family. |
| Maintain consistent spacing using `{spacing.md}` and `{spacing.lg}` for component padding. | Do not reduce the padding of `{components.button-primary}` below `{spacing.sm}`. |
| Ensure all text on `{colors.background}` uses high-contrast colors like `{colors.on-surface}`. | Never use low-contrast text colors like `{colors.outline}` on `{colors.background}` for body copy. |
| Use `{rounded.md}` for standard interactive elements like input fields and buttons. | Never apply sharp 0px corners to interactive components; always use at least `{rounded.sm}`. |
| Use `{colors.surface-bright}` to highlight active or hovered states of `{components.card-elevated}`. | Avoid using vibrant accent colors like `{colors.tertiary}` for large background areas. |
| Apply `{colors.outline}` with a 1px width to define boundaries on `{components.divider}` elements. | Do not use `{colors.primary}` for borders or dividers unless indicating an active focus state like `{components.input-field-focus}`. |

## Content Style

Button labels and primary calls-to-action must be action-oriented, direct, and developer-friendly. Use clear, imperative verbs such as "Start building" or "Contact Sales" to drive engagement without unnecessary marketing jargon.

Headlines must be clear, benefit-driven, and authoritative. Focus on performance, speed, and technical capability, using declarative phrasing like "Build what's next on the AI Native Cloud" to establish credibility with a highly technical audience.

Copy density should remain scannable and high-density. Present technical specifications, API details, and performance metrics using structured bullet points, feature lists, and clear typographic hierarchy to respect the developer's time.

## Imagery & Icons

The imagery style combines abstract 3D geometric shapes—such as spheres, discs, and hexagons in blue, purple, and orange—with clean, minimalist monochrome partner logos. These geometric illustrations represent complex data flows and model architectures. Icons must be thin-stroke, developer-friendly glyphs that align with the technical aesthetic. Partner and customer logos must be presented in a uniform, low-contrast monochrome treatment to maintain visual hierarchy and prevent brand clutter.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Together AI, a sophisticated, developer-focused enterprise platform; match its dark-mode, minimal, high-performance tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.display-lg}`, `{rounded.md}` — never hardcode a hex, pixel value, or font size.
2. Use only the component variants listed under `components:`. Do not invent states, sizes, or variants not defined there.
3. Follow the Layout section for page structure (nav → announcement-bar → hero → social-proof → features → footer) and spacing rhythm; `{spacing.md}` and `{spacing.lg}` govern component padding and container margins.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it — for example, using `{colors.secondary}` as a CTA background — surface the conflict before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook, design tokens export) is available, those values override the spec.

## Output contract

**Must:**
- Use all tokens by name on every generated component.
- Implement hover, focus, and disabled states for all interactive components where the spec defines them (`button-primary-hover`, `button-secondary-hover`, `input-field-focus`, `link-hover`).
- Apply `{rounded.md}` to buttons and inputs; `{rounded.lg}` or `{rounded.xl}` to cards; `{rounded.full}` to badges and pill tags.
- Render the `{components.page-container}` as the outermost wrapper on every page using `{colors.background}`.
- Match CTA copy style: imperative verbs, no marketing jargon, developer-friendly phrasing per the Content Style section.
- Maintain minimum contrast using `{colors.on-surface}` or `{colors.on-primary}` on all dark surfaces.

**Must NOT:**
- Invent colors, type scales, radii, or elevation values outside the spec.
- Use generic system defaults (e.g., `gray-500`, `rounded-md` as a literal utility) when a brand token exists.
- Apply `{colors.secondary}` or `{colors.tertiary}` as large background fills or primary CTA backgrounds.
- Use `{colors.primary}` for borders or dividers unless rendering an active `input-field-focus` state.
- Apply heavy drop shadows to cards; use `{colors.outline}` borders instead.
- Add emoji, filler copy, or marketing language.
- Rewrite page copy, button labels, headings, or navigation items not requested by the product team.
- Alter information architecture as a side effect of applying tokens.

## When in doubt
- If a value is not defined in the spec, ask the user before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous background roles, default to `{colors.surface-container}`; for text on dark surfaces, default to `{colors.on-surface}`.
- For unspecified breakpoints, use mobile-first layout with one breakpoint at 768px, stacking hero elements vertically and collapsing navigation per the Layout notes.
- Inferred tokens are approximations; defer to any authoritative token source the product team provides.