返回列表
行业: AI 与大语言模型平台Website

Together-AI-Inspired

Together AI 在近黑英雄区与明亮研究、定价和文档页面之间切换，并以橙色、洋红和长春花蓝渐变作为唯一品牌装饰，体现 AI 基础设施的专业与活力。

Light UIGradientDesign System
Together-AI-Inspired 网站预览
设计系统
品牌色彩 · 13

primary

#000000

--color-primary

on primary

#FFFFFF

--color-on-primary

ink

#000000

--color-ink

body

#959494

--color-body

hairline

#959494

--color-hairline

canvas

#FFFFFF

--color-canvas

canvas dark

#010120

--color-canvas-dark

surface dark soft

#313641

--color-surface-dark-soft

on dark

#FFFFFF

--color-on-dark

accent orange

#FC4C02

--color-accent-orange

accent magenta

#EF2CC1

--color-accent-magenta

accent periwinkle

#BDBBFF

--color-accent-periwinkle

accent mint

#C8F6F9

--color-accent-mint

字体系统

字体家族

The Future, Inter, Helvetica Neue, Arial, sans-serif / PP Neue Montreal Mono, ui-monospace, SF Mono, Menlo, monospace

字重

500400

备注

2 个字体家族，完整字阶、行高和字距见 DESIGN.md

标签
Light UIGradientDesign System

设计笔记

Together AI 的设计强调开发者体验，使用深色主题减少眼部疲劳，等宽字体便于代码阅读。

设计文档

品牌设计系统的完整 Markdown 文档

Together-AI-Inspired — Style Reference

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

**Theme:** light

**Source website:** [https://www.together.ai/](https://www.together.ai/)

Use the live official website to compare and validate this extracted snapshot. The current source website remains authoritative.

Tokens — Colors

| Name | Value | Token | Role |

|---|---|---|---|

| primary | `#000000` | `--color-primary` | primary role extracted from the source design |

| on primary | `#ffffff` | `--color-on-primary` | on primary role extracted from the source design |

| ink | `#000000` | `--color-ink` | ink role extracted from the source design |

| body | `#959494` | `--color-body` | body role extracted from the source design |

| hairline | `#959494` | `--color-hairline` | hairline role extracted from the source design |

| canvas | `#ffffff` | `--color-canvas` | canvas role extracted from the source design |

| canvas dark | `#010120` | `--color-canvas-dark` | canvas dark role extracted from the source design |

| surface dark soft | `#313641` | `--color-surface-dark-soft` | surface dark soft role extracted from the source design |

| on dark | `#ffffff` | `--color-on-dark` | on dark role extracted from the source design |

| accent orange | `#fc4c02` | `--color-accent-orange` | accent orange role extracted from the source design |

| accent magenta | `#ef2cc1` | `--color-accent-magenta` | accent magenta role extracted from the source design |

| accent periwinkle | `#bdbbff` | `--color-accent-periwinkle` | accent periwinkle role extracted from the source design |

| accent mint | `#c8f6f9` | `--color-accent-mint` | accent mint role extracted from the source design |

Tokens — Typography

The Future, Inter, Helvetica Neue, Arial, sans-serif · `--font-primary`

  • **Substitute:** Inter, system-ui, sans-serif
  • **Weights:** 500, 400
  • **Sizes:** 64px, 40px, 28px, 22px, 18px, 16px, 14px
  • **Line height:** 70.4px, 48px, 32.2px, 25.3px, 23.4px, 20.8px, 19.6px
  • **Letter spacing:** -1.92px, -0.8px, -0.42px, -0.22px, -0.18px, -0.16px, 0
  • **Role:** Brand typography family observed across the documented type scale.

    • PP Neue Montreal Mono, ui-monospace, SF Mono, Menlo, monospace · `--font-family-2`

  • **Substitute:** Inter, system-ui, sans-serif
  • **Weights:** 500, 400
  • **Sizes:** 16px, 11px, 10px
  • **Line height:** 16px, 11px, 15.4px, 14px
  • **Letter spacing:** 0.08px, 0.55px, 0.055px, 0.05px
  • **Role:** Brand typography family observed across the documented type scale.

    • Type Scale

    | Role | Size | Line Height | Letter Spacing | Token |

    |---|---|---|---|---|

    | display-xxl | 64px | 70.4px | -1.92px | `--text-display-xxl` |

    | display-xl | 40px | 48px | -0.8px | `--text-display-xl` |

    | display-lg | 28px | 32.2px | -0.42px | `--text-display-lg` |

    | display-md | 22px | 25.3px | -0.22px | `--text-display-md` |

    | body-lg | 18px | 23.4px | -0.18px | `--text-body-lg` |

    | body-lg-strong | 18px | 23.4px | -0.18px | `--text-body-lg-strong` |

    | body-md | 16px | 20.8px | -0.16px | `--text-body-md` |

    | body-md-strong | 16px | 20.8px | -0.16px | `--text-body-md-strong` |

    | caption | 14px | 19.6px | 0 | `--text-caption` |

    | caption-strong | 14px | 19.6px | 0 | `--text-caption-strong` |

    | mono-caps-button | 16px | 16px | 0.08px | `--text-mono-caps-button` |

    | mono-caps-eyebrow | 11px | 11px | 0.55px | `--text-mono-caps-eyebrow` |

    | mono-caps-label | 11px | 15.4px | 0.055px | `--text-mono-caps-label` |

    | mono-caption | 10px | 14px | 0.05px | `--text-mono-caption` |

    Tokens — Spacing & Shapes

    **Density:** comfortable

    Spacing Scale

    | Name | Value | Token |

    |---|---|---|

    | xxs | 2px | `--spacing-xxs` |

    | xs | 4px | `--spacing-xs` |

    | sm | 8px | `--spacing-sm` |

    | md | 12px | `--spacing-md` |

    | lg | 16px | `--spacing-lg` |

    | xl | 20px | `--spacing-xl` |

    | 2xl | 24px | `--spacing-2xl` |

    | 3xl | 32px | `--spacing-3xl` |

    | 4xl | 44px | `--spacing-4xl` |

    | 5xl | 48px | `--spacing-5xl` |

    | 6xl | 55.2px | `--spacing-6xl` |

    | section | 80px | `--spacing-section` |

    Border Radius

    | Name | Value | Token |

    |---|---|---|

    | none | 0px | `--radius-none` |

    | xs | 3.25px | `--radius-xs` |

    | sm | 4px | `--radius-sm` |

    | md | 8px | `--radius-md` |

    | full | 9999px | `--radius-full` |

    Layout

  • **Section gap:** 80px
  • **Card padding:** 16px
  • **Element gap:** 12px
  • **Max content width:** 1200px

    • Components

    nav bar

    **Role:** nav bar component

  • **backgroundColor:** `{colors.canvas-dark}`
  • **textColor:** `{colors.on-dark}`
  • **typography:** `{typography.body-md}`
  • **padding:** `{spacing.lg} {spacing.3xl}`

    • nav link

    **Role:** nav link component

  • **textColor:** `{colors.on-dark}`
  • **typography:** `{typography.body-md}`

    • button primary

    **Role:** button primary component

  • **backgroundColor:** `{colors.primary}`
  • **textColor:** `{colors.on-primary}`
  • **typography:** `{typography.mono-caps-button}`
  • **rounded:** `{rounded.sm}`
  • **padding:** `{spacing.xs} {spacing.2xl}`

    • button secondary mint

    **Role:** button secondary mint component

  • **backgroundColor:** `{colors.accent-mint}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.mono-caps-button}`
  • **rounded:** `{rounded.sm}`
  • **padding:** `{spacing.xs} {spacing.2xl}`

    • button secondary white

    **Role:** button secondary white component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.mono-caps-button}`
  • **rounded:** `{rounded.sm}`
  • **padding:** `{spacing.xs} {spacing.2xl}`

    • button ghost on dark

    **Role:** button ghost on dark component

  • **backgroundColor:** `{colors.surface-dark-soft}`
  • **textColor:** `{colors.on-dark}`
  • **typography:** `{typography.mono-caps-button}`
  • **rounded:** `{rounded.sm}`

    • button outline

    **Role:** button outline component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **borderColor:** `rgba(0, 0, 0, 0.08)`
  • **typography:** `{typography.mono-caps-button}`
  • **rounded:** `{rounded.xs}`

    • button icon circular

    **Role:** button icon circular component

  • **backgroundColor:** `{colors.primary}`
  • **textColor:** `{colors.on-primary}`
  • **rounded:** `{rounded.full}`

    • text input

    **Role:** text input component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **borderColor:** `rgba(0, 0, 0, 0.08)`
  • **typography:** `{typography.body-md}`
  • **rounded:** `{rounded.sm}`

    • badge neutral

    **Role:** badge neutral component

  • **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

    **Role:** badge subtle on dark component

  • **backgroundColor:** `{colors.surface-dark-soft}`
  • **textColor:** `{colors.on-dark}`
  • **typography:** `{typography.body-md}`
  • **rounded:** `{rounded.sm}`
  • **padding:** `{spacing.xxs} {spacing.sm}`

    • hero band dark

    **Role:** hero band dark component

  • **backgroundColor:** `{colors.canvas-dark}`
  • **textColor:** `{colors.on-dark}`
  • **typography:** `{typography.display-xxl}`
  • **padding:** `{spacing.section} {spacing.3xl}`

    • research band dark

    **Role:** research band dark component

  • **backgroundColor:** `{colors.canvas-dark}`
  • **textColor:** `{colors.on-dark}`
  • **typography:** `{typography.display-xl}`
  • **padding:** `{spacing.section} {spacing.3xl}`

    • feature tab pill

    **Role:** feature tab pill component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-md-strong}`
  • **rounded:** `{rounded.sm}`
  • **padding:** `{spacing.md} {spacing.2xl}`

    • pricing sub tab

    **Role:** pricing sub tab component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-md}`
  • **rounded:** `{rounded.xs}`
  • **padding:** `{spacing.sm} {spacing.lg}`

    • stats card tinted

    **Role:** stats card tinted component

  • **backgroundColor:** `{colors.accent-mint}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.display-xl}`
  • **rounded:** `{rounded.sm}`
  • **padding:** `{spacing.3xl}`

    • research card

    **Role:** research card component

  • **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

    **Role:** testimonial card component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-md}`
  • **rounded:** `{rounded.sm}`
  • **padding:** `{spacing.2xl}`

    • article card

    **Role:** article card component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.display-md}`
  • **rounded:** `{rounded.sm}`
  • **padding:** `{spacing.2xl}`

    • code editor mockup

    **Role:** code editor mockup component

  • **backgroundColor:** `{colors.canvas-dark}`
  • **textColor:** `{colors.on-dark}`
  • **typography:** `{typography.mono-caption}`
  • **rounded:** `{rounded.sm}`
  • **padding:** `{spacing.2xl}`

    • data table row

    **Role:** data table row component

  • **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

    **Role:** data table header component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.body}`
  • **typography:** `{typography.mono-caps-eyebrow}`
  • **padding:** `{spacing.md} {spacing.lg}`

    • toggle pill group

    **Role:** toggle pill group component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.mono-caps-button}`
  • **rounded:** `{rounded.sm}`
  • **padding:** `{spacing.xs}`

    • footer

    **Role:** footer component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.ink}`
  • **typography:** `{typography.body-md}`
  • **padding:** `{spacing.section} {spacing.3xl}`

    • footer wordmark banner

    **Role:** footer wordmark banner component

  • **backgroundColor:** `{colors.canvas}`
  • **textColor:** `{colors.body}`
  • **typography:** `{typography.display-xxl}`

    • ex pricing tier

    **Role:** ex pricing tier component

  • **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

    **Role:** ex pricing tier featured component

  • **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

    **Role:** ex product selector component

  • **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

    **Role:** ex cart drawer component

  • **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

    **Role:** ex app shell row component

  • **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

    **Role:** ex data table cell component

  • **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

    **Role:** ex auth form card component

  • **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

    **Role:** ex modal card component

  • **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

    **Role:** ex empty state card component

  • **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

    **Role:** ex toast component

  • **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}`

    • Do's and Don'ts

    Do

  • Use `--color-primary` for the brand's primary interaction treatment.
  • Keep page surfaces anchored to `--color-canvas`.
  • Preserve every typography style's documented size, line height, and letter spacing.
  • Compare major implementation decisions against [the live Together-AI-Inspired website](https://www.together.ai/).

    • Don't

  • Do not introduce colors outside the documented color token set.
  • Do not replace `--color-ink` with an arbitrary neutral.
  • Do not flatten documented component states or spacing relationships.
  • Do not treat this extracted snapshot as newer than the live source website.

    • Layout

    Use the documented spacing scale and component geometry as the implementation baseline. Validate responsive composition and current page rhythm against [the live source](https://www.together.ai/).

    同类品牌推荐

    Claude

    Light UI · Editorial

    Cohere

    Light UI · Editorial

    ElevenLabs

    Light UI · Editorial

    Together-AI-Inspired 设计系统 | 品牌模板 · ViboDesign