version: alpha name: Together-AI-Inspired-design-analysis 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.

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}"

概述

Together AI is an AI cloud-infrastructure platform — 模型 inference, GPU clusters, fine-tuning, all the plumbing that 使 "the AI native cloud" deliverable to a developer team — and the 品牌's web 表面 signals exactly that posture: a near-black 首屏 on top, a long 色带 of white 技术 content in the middle, and a single 重复出现 piece of 品牌 chrome — a three-颜色 orange-magenta-periwinkle 渐变 色带 — that does the entire job of "we are not just another grey enterprise SaaS." There is no other illustration 系统. The 渐变 is the 品牌.

Type is the second decisive voice. Two faces carry every 页面: a 定制的 geometric display sans (提取的 as The Future) for 标题 and 正文, set at 字重 500 with tight, slightly-negative letter-间距 so 64-pixel 首屏 type feels poured 而非 typed; and an uppercase monospace eyebrow (PP Neue Montreal Mono) that 标签 every 区块, every 按钮, and every 单元格 页眉. 标题 are sentence-case; everything 技术 is uppercase mono. That contrast is the 品牌's tonal joke — the platform is 严肃 enough to use a monospace 标签, 现代 enough to not put the 标题 in it.

Surfaces alternate aggressively: a {colors.canvas-dark} (#010120) band for 首屏 / 研究 / "Grounded in cutting-edge 研究" — followed by {colors.canvas} (white) for 产品, 定价, and testimonials, with {colors.hairline} 专用于 表格-页眉 行 and toggle backgrounds. Pastel {colors.accent-mint} tinted stat 图块 break up the white middle. 卡片 are universally lightly rounded ({rounded.sm} 4 px) with hairline borders — never floating with 阴影.

关键特征:

• A single black {colors.primary} CTA pill carries every conversion target 贯穿 定价, 页脚, sign-in. The mint {colors.accent-mint} and white pill variants are 专用于 首屏 contexts only.
• A three-颜色 品牌 渐变 ({colors.accent-orange} → {colors.accent-magenta} → {colors.accent-periwinkle}) is the entire 装饰性 系统 — 用作 the 首屏 色带 graphic and never reduced to a swatch elsewhere.
• All-caps mono eyebrows and 按钮 标签 in {typography.mono-caps-eyebrow} / {typography.mono-caps-button} everywhere — 区块 标题, 模型 row headers, "ON-DEMAND" 标签 in 定价 表格.
• Lightly rounded 卡片 chrome at {rounded.sm} 4 px; one off {rounded.xs} 3.25 px appears inside 定价-tab pills as a tighter 系统; {rounded.full} only for the floating chat-launcher orb.
• Dual 表面 mode — 交替 {colors.canvas-dark} and {colors.canvas} bands; no in-在……之间 greys. The single soft 表面 {colors.hairline} exists only to mark 表格-页眉 行.
• A massive together.ai 字标 banner at the very bottom of every 页面, set in {typography.display-xxl} and tinted nearly-into-the-canvas ({colors.hairline}), as a "we are here" sign-off that doubles as a 页脚 separator.

颜色

品牌与点缀

• Ink Black ({colors.primary} — #000000): The single primary CTA 颜色. Black pill carries "Sign in", "Contact sales", "Get started now", every 页脚 CTA.
• 品牌 Orange ({colors.accent-orange} — #fc4c02): One leg of the three-颜色 品牌 渐变. Appears in the 首屏 色带 graphic; never 用作 a UI fill on its own.
• 品牌 Magenta ({colors.accent-magenta} — #ef2cc1): The second leg of the 渐变.
• 品牌 Periwinkle ({colors.accent-periwinkle} — #bdbbff): The third leg of the 渐变; also 用作 a soft fill for some stat 图块.
• 品牌 Mint ({colors.accent-mint} — #c8f6f9): A pastel cyan that lives outside the 渐变 — 用于 首屏 secondary-CTA pills and stats-card-tinted 图块.

表面

• Canvas ({colors.canvas} — #ffffff): The default 产品 / 定价 / docs 背景.
• Hairline / Canvas Soft ({colors.hairline} — #ebebeb): The 品牌's single soft 表面 tone — 用于 data-表格 页眉 行, toggle-pill rails, and 1 px dividers 在……之间 表格 行.
• Canvas Dark ({colors.canvas-dark} — #010120): The 品牌's dark 首屏 表面; appears on hero-band-dark and research-band-dark.
• Hairline ({colors.hairline} — #ebebeb): 1 px dividers on light surfaces — 表格 行, 卡片 chrome, badge borders.
• Hairline on Dark ({colors.surface-dark-soft} — #26263a): 1 px dividers and badge backgrounds on {colors.canvas-dark} surfaces; pre-blended from the 品牌's translucent-white-on-dark hairline.
• 表面 Dark Soft ({colors.surface-dark-soft} — #313641): A slightly lighter dark fill used inside dark-band 卡片.

文本

• Ink ({colors.ink} — #000000): Every 标题 and 正文 段落 on light surfaces.
• 正文 ({colors.body} — #999999): 次色 文本 — captions, 表格 单元格 secondary values, 页脚 链接 文本. Pre-blended from the 品牌's translucent-black 40 % 正文 颜色.
• 正文 Muted ({colors.body} — #999999): The all-caps mono-eyebrow 文本 颜色 on light surfaces also rides on this token — there is no separate "mute" tone, the 品牌 保持 secondary 文本 consistent with 说明文字 文本.
• On Dark ({colors.on-dark} — #ffffff): All 文本 on {colors.canvas-dark} surfaces.

语义

The 品牌 does not maintain a separate error / success palette in its public 表面; validation cues use the primary black or the 品牌 渐变 depending on context. No explicit error red, success green, or warning yellow is 记录的 here — adopting framework defaults is appropriate.

品牌渐变

The 品牌's 标志性 decoration is a three-stop 渐变 drawn from {colors.accent-orange} → {colors.accent-magenta} → {colors.accent-periwinkle}, applied as the only piece of 装饰性 chrome (the 首屏 色带 graphic). Treat the 渐变 as one unified object — do not crop it down to a single colour, do not reorder the stops, and do not add a fourth stop. Used at large scale; never miniaturised to 图标 尺寸.

Typography

字体系列

Two families carry the entire 系统:

1. A 定制的 geometric display sans (提取的 as The Future) for every 标题, lead 段落, 正文, 按钮 标签 that is not uppercase, and inline 链接. Weights 400 and 500 are the working pair; the face never appears in bold (700) or heavier. Tight negative letter-间距 (-1.92 px at 64 px display, -0.16 px at 16 px 正文) 赋予 the face its slightly-condensed, poured-on-the-页面 feel.
2. An uppercase mono 说明文字 face (提取的 as PP Neue Montreal Mono) for every eyebrow, 按钮 标签, 表格-页眉 单元格, and 定价-表格 tab. 字重 500 at 11–16 px; always uppercase; positive letter-间距 (0.05 – 0.55 px). The mono carries the 品牌's 技术 voice — every 标签 that says "定价", "INFERENCE", "模型", "GPU", "GA-DEC '25" is set in this face.

层级

原则

• Two-face contrast is the voice. Display sans for narrative; uppercase mono for 技术 标签. Never let the mono carry a 段落; never let the display sans carry a 按钮 标签.
• Negative letter-间距 only on the display sans. The mono face uses small positive tracking; reversing this is wrong.
• 标题 stay sentence-case. Every uppercase moment belongs to the mono face. Mixing all-caps display would muddy the contrast.

字体替代说明

The two primary faces are 专有的. Open-source substitutes:

• Display sans — Inter (400 / 500) with font-feature-settings: "ss01" enabled comes closest; tighten letter-间距 by ~0.6 % at display sizes to land on the 品牌's compressed feel. Geist is the second-best option but reads slightly wider.
• Uppercase mono eyebrow — JetBrains Mono or Geist Mono (字重 500) at 11 px with text-transform: uppercase 匹配 the 品牌's voice once tracking is bumped to 0.04em.

布局

间距系统

• 基础单位: 4 px. Almost every 采集的 value is a multiple of 4, with two exceptions (7.2 px, 55.2 px) that are gap-multiplier derivatives, not 布局 decisions.
• Tokens: {spacing.xxs} 2 px · {spacing.xs} 4 px · {spacing.sm} 8 px · {spacing.md} 12 px · {spacing.lg} 16 px · {spacing.xl} 20 px · {spacing.2xl} 24 px · {spacing.3xl} 32 px · {spacing.4xl} 44 px · {spacing.5xl} 48 px · {spacing.6xl} 55.2 px · {spacing.section} 80 px.
• 区块内边距: 营销 bands use {spacing.section} 80 px top/bottom on 桌面端. The 首屏 and the "研究" dark band keep the 80 px rhythm; 定价 表格 tighten to {spacing.5xl} to keep dense data legible.
• 卡片 interior 内边距: 研究 卡片 and 推荐语 卡片 sit at {spacing.2xl} 24 px interior; the stat-卡片 图块 use {spacing.3xl} 32 px to give the big number breathing room.
• 行内 gap: 按钮 + nav 行 use {spacing.md} 12 px 在……之间 siblings; chip groups use {spacing.sm} 8 px.

网格与容器

• 最大宽度: ~1280 px 桌面端 容器; nothing rendered above that. Content centres with 水平 gutters of {spacing.3xl} 32 px on 桌面端, {spacing.lg} 16 px on 移动端.
• 列模式:
  • 研究 / 推荐语 grids: 3-up at 桌面端, 1-up at 移动端.
  • Stats 图块 网格: 3-up at 桌面端, 1-up at 移动端.
  • 文章-卡片 网格: 2-up at 桌面端, 1-up at 移动端.
  • 定价 data 表格: 全宽, 模型 行 stack on 移动端.
  • 首屏: 50 / 50 split (标题 left, 色带 graphic right) at 桌面端; stacked at 移动端 with graphic above.

留白理念

表面 contrast does most of the separation. A dark band ends → 80 px of breathing room → next light band begins. Inside a band, 标题 and lead 段落 hug close ({spacing.lg} 16 px 在……之间 them), then a wider gap before the supporting visual or CTA cluster. Inside 定价 data 表格, the 品牌 保持 行 tight ({spacing.md} 12 px 垂直) — the 表格 reads more like a sheet than a 营销 组件.

响应式策略

断点

触控目标

The mono-cap 按钮 标签 is set at 16 px; 结合 {spacing.xs} 4 px top / bottom and a 24 px 水平 内边距, the primary pill renders at 约 32 px tall. On 移动端 视口, 按钮 高度 is inflated to ≥ 44 px 通过 extra 垂直 内边距 inside the touch row — meeting WCAG AAA. The circular 图标 按钮 (button-icon-circular) renders at 44 × 44 px 最小 在所有视口.

折叠策略

• Nav: full 链接 row + black "Sign in" pill + "Get started" pill at 桌面端. 折叠为 标志 + hamburger at 移动端; the 菜单 opens as a full-覆盖层 抽屉 with the same 链接 list stacked vertically.
• 首屏: at 桌面端, 标题 left + 渐变 色带 right (50 / 50). At 移动端, 标题 stacks above a smaller-scale 色带 — never below.
• 研究 band: 4-up 网格 at 桌面端 降至 2-up at 平板端, 1-up at 移动端. 卡片 chrome stays identical.
• 定价 data 表格: at 桌面端, 全宽 with all 列 visible. At 平板端, sub-tab row enables 水平 scroll. At 移动端, 单元格 行 stack 模型-name above price block.
• 页脚 字标 banner: scales fluidly — the giant together.ai 字标 stays 边到边 regardless of 视口.

图像行为

• 首屏 色带 graphic: rendered as an SVG, scales fluidly with the 首屏 容器; never crops, never repositions.
• 推荐语 portraits: square or 4:5 portrait, hard-cropped at top; consistent square framing 贯穿 the 网格.
• 文章 thumbnails: 16:9 landscape, 填充 卡片 top with {rounded.sm} corners on the 图像 only.
• 标志 bar: customer logos rendered as grayscale SVGs in a wrapping flex row.

层次 & 深度

装饰性深度

• 渐变 色带 as 深度: the 首屏's three-stop 渐变 色带 is the 页面's only true 氛围 effect. It loops 通过 layered translucent shapes that imply 深度 without leaving the 品牌 palette.
• 代码 编辑器 样机 as 区块-深度 break: a dark 代码-编辑器 表面 inside the otherwise-white 产品 band 充当 a one-step lift, mirroring the 首屏's polarity flip.
• 字标 banner as terminal 深度: the giant together.ai letters at the bottom are technically inside {colors.canvas} but tinted toward {colors.hairline} so they read as a faint stencil, giving the 页面 a final "you have arrived" sign-off.

形状

圆角比例

摄影几何

• 首屏 色带: SVG 渐变, free-表单; no aspect-比例 constraint.
• Customer logos: vector, rendered grayscale at consistent 高度 (~24 px) in a wrapping flex row.
• 推荐语 portraits: 1:1 square crop with hard-edge corners — no 头像 pill.
• 文章 thumbnails: 16:9 with {rounded.sm} 4 px top-corner 圆角 on the 图像 only; 卡片 chrome stays square.

组件

按钮

button-primary — the black pill that carries every primary CTA.

• 背景 {colors.primary}, 文本 {colors.on-primary}, 标签 set in {typography.mono-caps-button} (uppercase mono, 16 px / 500 / 0.08 px tracking), shape {rounded.sm} 4 px, 内边距 {spacing.xs} {spacing.2xl}. 无阴影.

button-secondary-mint — the 首屏 secondary CTA pill.

• 背景 {colors.accent-mint}, 文本 {colors.ink}, 相同字体排版 and shape as button-primary. Only appears in 首屏 contexts.

button-secondary-white — the white pill 与……配对 button-secondary-mint inside the 首屏.

• 背景 {colors.canvas}, 文本 {colors.ink}, 相同字体排版 and shape. Always sits adjacent to the mint or primary 按钮.

button-ghost-on-dark — the translucent 按钮 used on dark 首屏 / 研究 surfaces.

• 背景 {colors.surface-dark-soft}, 文本 {colors.on-dark}, shape {rounded.sm} 4 px. 用于 "Read more" / "Watch the announcement" affordances on dark bands.

button-outline — the white-on-white 轮廓 按钮 used inside 定价 页面 and 特性 toggles.

• 背景 {colors.canvas}, 文本 {colors.ink}, 1 px solid {colors.hairline} 边框, shape {rounded.xs} 3.25 px.

button-icon-circular — the floating chat-launcher orb in the bottom-right of every 页面.

• 背景 {colors.primary}, white 图标, shape {rounded.full}. The only fully-pill shape 在系统中.

卡片与容器

research-card — the 4-up 网格 卡片 on the dark "Grounded in cutting-edge 研究" band.

• 背景 {colors.canvas-dark}, 文本 {colors.on-dark}, 1 px solid {colors.surface-dark-soft} 边框, 内边距 {spacing.2xl}, shape {rounded.sm} 4 px. Inside: mono eyebrow tag + display 标题 + 正文 段落.

testimonial-card — the 3-up "AI natives build on Together AI" 卡片.

• 背景 {colors.canvas}, 文本 {colors.ink}, 内边距 {spacing.2xl}, shape {rounded.sm} 4 px. Inside: 1:1 portrait crop + display-md name + 正文 引文 + mono 说明文字 stat row.

article-card — the 2-up "What's new at Together AI" 文章 卡片.

• 背景 {colors.canvas}, 文本 {colors.ink}, 内边距 {spacing.2xl}, shape {rounded.sm} 4 px. Inside: 16:9 图像 at top + mono eyebrow tag + display-md 标题 + 正文 摘要 + mono 说明文字 byline.

code-editor-mockup — the dark 代码-preview 表面 inside the 产品 band.

• 背景 {colors.canvas-dark}, 文本 {colors.on-dark}, 正文 in {typography.mono-caption}, 内边距 {spacing.2xl}, shape {rounded.sm} 4 px. Window chrome stays minimal — no traffic-light dots, no 标题 bar.

stats-card-tinted — the pastel-tinted stat 图块 (mint, peach, periwinkle) on the white middle band.

• 背景 {colors.accent-mint} (or sibling accent tints), 文本 {colors.ink}, big number in {typography.display-xl} + 标签 in {typography.mono-caps-eyebrow}, 内边距 {spacing.3xl}, shape {rounded.sm} 4 px.

输入框与表单

text-input — the 表单 输入框 on the startup-accelerator application 表单.

• 背景 {colors.canvas}, 文本 {colors.ink}, 1 px solid {colors.hairline} 边框, 正文 set in {typography.body-md}, shape {rounded.sm} 4 px.

导航

nav-bar — the sticky top nav.

• 背景 {colors.canvas-dark} on the 首屏 band, switches to {colors.canvas} once the user scrolls past the 首屏. 文本 {colors.on-dark} on dark, {colors.ink} on white. 布局: 标志 left, 链接 row centre, "Contact sales" + "Sign in" right.

nav-link — the centred 链接 row inside nav-bar.

• 文本 {colors.on-dark} (or {colors.ink} after scroll), set in {typography.body-md} 400 字重. 链接 separate with {spacing.2xl} 24 px 在……之间 siblings.

footer — the bottom 4-列 nav.

• 背景 {colors.canvas}, 文本 {colors.ink}, 内边距 {spacing.section} {spacing.3xl}. Eyebrow 标签 in {typography.mono-caps-eyebrow}; 链接 行 in {typography.body-md}.

标志性组件

hero-band-dark — the dark navy 首屏 that opens every 产品 / 营销 页面.

• 背景 {colors.canvas-dark}, 文本 {colors.on-dark}, 内边距 {spacing.section} {spacing.3xl}. 标题 in {typography.display-xxl} (sentence case, never all-caps). Eyebrow in {typography.mono-caps-eyebrow}. 双列 布局: 标题 + CTA cluster on left, 渐变 色带 SVG on right.

research-band-dark — the dark navy band that hosts the "Grounded in cutting-edge 研究" 4-up 卡片 网格.

• 背景 {colors.canvas-dark}, 文本 {colors.on-dark}, 内边距 {spacing.section} {spacing.3xl}. 区块 标题 in {typography.display-xl} followed by the research-card 网格.

feature-tab-pill — the tab pill row inside the "Full-stack cloud" 区块.

• 背景 {colors.canvas}, 文本 {colors.ink}, 标签 in {typography.body-md-strong}, 内边距 {spacing.md} {spacing.2xl}, shape {rounded.md} 8 px. Tab group sits on {colors.hairline} 轨道.

pricing-sub-tab — the secondary tab row inside the 定价-页面 模型 表格 (文本 / VISION / 图像 / AUDIO / VIDEO).

• 背景 {colors.canvas}, 文本 {colors.ink}, 标签 in {typography.body-md}, 内边距 {spacing.sm} {spacing.lg}, shape {rounded.xs} 3.25 px.

data-table-row — the 模型 row inside the 定价 serverless-inference 表格.

• 背景 {colors.canvas}, 文本 {colors.ink}, 1 px solid {colors.hairline} bottom 边框, 内边距 {spacing.md} {spacing.lg}. Inside: 模型 图标 + 模型 name (display sans) + 输入框 cost 单元格 + output cost 单元格.

data-table-header — the 表格 页眉 row.

• 背景 {colors.hairline}, 文本 {colors.body}, set in {typography.mono-caps-eyebrow} (uppercase mono), 内边距 {spacing.md} {spacing.lg}.

toggle-pill-group — the "Standard 定价 / Wholesale 定价" segmented control above the fine-tuning 表格.

• 背景 {colors.hairline} 轨道, individual pills {colors.canvas} (inactive) or {colors.primary} (激活), 标签 in {typography.mono-caps-button}, shape {rounded.sm} 4 px, 轨道 内边距 {spacing.xs}.

badge-neutral — the inline tag pill on light surfaces.

• 背景 {colors.hairline}, 文本 {colors.ink}, 正文 in {typography.body-md}, 1 px solid {colors.hairline} 边框, 内边距 {spacing.xxs} {spacing.sm}, shape {rounded.sm} 4 px.

badge-subtle-on-dark — the inline tag pill on dark 首屏 / 研究 surfaces.

• 背景 {colors.surface-dark-soft}, 文本 {colors.on-dark}, 正文 in {typography.body-md}, 内边距 {spacing.xxs} {spacing.sm}, shape {rounded.sm} 4 px.

footer-wordmark-banner — the massive together.ai 字标 at the bottom of every 页面.

• 背景 {colors.canvas}, 字标 colour {colors.hairline} (faint stencil tint), set in {typography.display-xxl} scaled fluidly to the 视口 宽度. 边到边, square corners. 充当 the final 页面 sign-off.

示例（说明性）

Auto-derived kit-mirror demonstration surfaces (scripts/derive-examples-block.mjs). Each ex-* entry references 品牌-native primitives so downstream consumers (/preview-design, /generate-kit) re-skin the same 10 surfaces consistently. TO_FILL markers indicate missing primitives — resolve in the LLM judgment pass.

ex-pricing-tier — 默认 定价 tier 卡片. Re-uses 特性-卡片 chrome with 品牌 canvas-soft 表面.

• Properties: backgroundColor, textColor, borderColor, rounded, padding

ex-pricing-tier-featured — Featured/highlighted tier — polarity-flipped 表面 (dark fill + light 文本 in light mode, light fill + dark 文本 in dark mode).

• Properties: backgroundColor, textColor, rounded, padding

ex-product-selector — What's Included 摘要 卡片 — re-purposed for SaaS / B2B verticals (NOT a literal 产品 gallery).

• Properties: backgroundColor, rounded, padding

ex-cart-drawer — Subscription 摘要 — re-purposed for SaaS / B2B (line items per add-on, not literal cart).

• Properties: backgroundColor, rounded, padding, item-divider

ex-app-shell-row — Sidebar nav row inside the App Shell example. 激活状态 uses 品牌 primary as the indicator.

• Properties: backgroundColor, activeIndicator, rounded, padding

ex-data-table-cell — 默认 data-表格 th + td chrome. 页眉 uses mono-caps eyebrow typography; 正文 uses 正文-sm.

• Properties: headerBackground, headerTypography, bodyTypography, cellPadding, rowBorder

ex-auth-form-card — Sign-in / sign-up 卡片. Re-uses 特性-卡片 chrome with 文本-输入框 primitives inside.

• Properties: backgroundColor, rounded, padding

ex-modal-card — 模态框 dialog 表面 — same chrome as 特性-卡片 with elevated 阴影.

• Properties: backgroundColor, rounded, padding

ex-empty-state-card — 空-state illustration frame.

• Properties: backgroundColor, rounded, padding, captionTypography

ex-toast — Toast notification 表面 — 特性-卡片 shape + medium 阴影.

• Properties: backgroundColor, rounded, padding, typography

推荐与避免

Do

• Reserve {colors.primary} (#000000) for every primary CTA. One black pill per visible 视口 — that consistency is the 品牌's whole conversion story.
• Set every 区块 eyebrow and 按钮 标签 in {typography.mono-caps-button} / {typography.mono-caps-eyebrow} — uppercase mono, positive tracking.
• Pair the 品牌 渐变 ({colors.accent-orange} → {colors.accent-magenta} → {colors.accent-periwinkle}) at 首屏 scale only. The 渐变 is the 品牌 chrome; never shrink to 图标 尺寸.
• Cycle 页面 surfaces in the {colors.canvas-dark} → {colors.canvas} → {colors.canvas-dark} rhythm; the dark-light contrast carries 层次 而不只是 any 阴影.
• Use {rounded.sm} 4 px as the 标准 卡片 / 按钮 圆角 贯穿系统; reserve {rounded.full} for the single floating chat-launcher orb.
• Render the giant together.ai 字标 banner at the bottom of every long 页面 in {typography.display-xxl}, tinted toward {colors.hairline} so it 呈现为 a stencil — not as a heavy 页脚 标题.

Don't

• Don't introduce a fifth accent colour. The three-stop 渐变 + mint pill is the entire 装饰性 palette; new accents flatten the 品牌.
• Don't set 正文 段落 in the mono face. The mono is for 标签 only; long-表单 mono 呈现为 a console log, not as 营销 copy.
• Don't centre-align 正文 段落 在……下方 a left-aligned display 标题. The 品牌 保持 文本-block alignment consistent within a copy stack.
• Don't drop a soft drop-阴影 on light-表面 卡片. The 品牌 uses hairlines and 表面 contrast for 层次; soft 阴影 belong only on the floating chat-launcher orb.
• Don't reduce the 品牌 渐变 to a single-colour fill, reorder its stops, or add a fourth stop. The 渐变 is a fixed object.
• Don't switch the primary 按钮 shape to a full pill {rounded.full}. The 品牌's CTA shape is a slightly-rounded rectangle, never a full pill.
• Don't set 标题 in the all-caps mono. Every all-caps moment belongs to the mono face; every 标题 belongs to the display sans in sentence case.