mirror of
https://github.com/VoltAgent/awesome-design-md.git
synced 2026-05-14 13:06:57 +08:00
634 lines
37 KiB
Markdown
634 lines
37 KiB
Markdown
---
|
||
version: alpha
|
||
name: Together AI Inspired
|
||
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}"
|
||
|
||
---
|
||
|
||
|
||
## 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.
|
||
|
||
## Colors
|
||
|
||
### Brand & Accent
|
||
- **Ink Black** (`{colors.primary}` — `#000000`): The single primary CTA color. Black pill carries "Sign in", "Contact sales", "Get started now", every footer CTA.
|
||
- **Brand Orange** (`{colors.accent-orange}` — `#fc4c02`): One leg of the three-color brand gradient. Appears in the hero ribbon graphic; never used as a UI fill on its own.
|
||
- **Brand Magenta** (`{colors.accent-magenta}` — `#ef2cc1`): The second leg of the gradient.
|
||
- **Brand Periwinkle** (`{colors.accent-periwinkle}` — `#bdbbff`): The third leg of the gradient; also used as a soft fill for some stat tiles.
|
||
- **Brand Mint** (`{colors.accent-mint}` — `#c8f6f9`): A pastel cyan that lives outside the gradient — used for hero secondary-CTA pills and `stats-card-tinted` tiles.
|
||
|
||
### Surface
|
||
- **Canvas** (`{colors.canvas}` — `#ffffff`): The default product / pricing / docs background.
|
||
- **Hairline / Canvas Soft** (`{colors.hairline}` — `#ebebeb`): The brand's single soft surface tone — used for data-table header rows, toggle-pill rails, and 1 px dividers between table rows.
|
||
- **Canvas Dark** (`{colors.canvas-dark}` — `#010120`): The brand's dark hero surface; appears on `hero-band-dark` and `research-band-dark`.
|
||
- **Hairline** (`{colors.hairline}` — `#ebebeb`): 1 px dividers on light surfaces — table rows, card 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 brand's translucent-white-on-dark hairline.
|
||
- **Surface Dark Soft** (`{colors.surface-dark-soft}` — `#313641`): A slightly lighter dark fill used inside dark-band cards.
|
||
|
||
### Text
|
||
- **Ink** (`{colors.ink}` — `#000000`): Every heading and body paragraph on light surfaces.
|
||
- **Body** (`{colors.body}` — `#999999`): Secondary text — captions, table cell secondary values, footer link text. Pre-blended from the brand's translucent-black 40 % body color.
|
||
- **Body Muted** (`{colors.body}` — `#999999`): The all-caps mono-eyebrow text color on light surfaces also rides on this token — there is no separate "mute" tone, the brand keeps secondary text consistent with caption text.
|
||
- **On Dark** (`{colors.on-dark}` — `#ffffff`): All text on `{colors.canvas-dark}` surfaces.
|
||
|
||
### Semantic
|
||
The brand does not maintain a separate error / success palette in its public surface; validation cues use the primary black or the brand gradient depending on context. No explicit error red, success green, or warning yellow is documented here — adopting framework defaults is appropriate.
|
||
|
||
### Brand Gradient
|
||
The brand's signature decoration is a three-stop gradient drawn from `{colors.accent-orange}` → `{colors.accent-magenta}` → `{colors.accent-periwinkle}`, applied as the only piece of decorative chrome (the hero ribbon graphic). Treat the gradient 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 icon size.
|
||
|
||
## Typography
|
||
|
||
### Font Family
|
||
Two families carry the entire system:
|
||
|
||
1. **A custom geometric display sans** (extracted as `The Future`) for every headline, lead paragraph, body, button label that is not uppercase, and inline link. Weights 400 and 500 are the working pair; the face never appears in bold (700) or heavier. Tight negative letter-spacing (`-1.92 px` at 64 px display, `-0.16 px` at 16 px body) gives the face its slightly-condensed, poured-on-the-page feel.
|
||
2. **An uppercase mono caption face** (extracted as `PP Neue Montreal Mono`) for every eyebrow, button label, table-header cell, and pricing-table tab. Weight 500 at 11–16 px; always uppercase; positive letter-spacing (`0.05 – 0.55 px`). The mono carries the brand's technical voice — every label that says "PRICING", "INFERENCE", "MODEL", "GPU", "GA-DEC '25" is set in this face.
|
||
|
||
### Hierarchy
|
||
|
||
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|
||
|---|---|---|---|---|---|
|
||
| `{typography.display-xxl}` | 64px | 500 | 70.4px | -1.92px | Hero headline ("Build what's next on the AI Native Cloud"). |
|
||
| `{typography.display-xl}` | 40px | 500 | 48px | -0.8px | Section headlines ("The Together AI Platform", "Start building on Together AI"). |
|
||
| `{typography.display-lg}` | 28px | 500 | 32.2px | -0.42px | Sub-section headlines and stat-tile big numbers. |
|
||
| `{typography.display-md}` | 22px | 500 | 25.3px | -0.22px | Card titles, research-card headings. |
|
||
| `{typography.body-lg}` | 18px | 400 | 23.4px | -0.18px | Lead paragraphs under section headlines. |
|
||
| `{typography.body-lg-strong}` | 18px | 500 | 23.4px | -0.18px | Emphasis runs inside lead paragraphs. |
|
||
| `{typography.body-md}` | 16px | 400 | 20.8px | -0.16px | Default body paragraph. |
|
||
| `{typography.body-md-strong}` | 16px | 500 | 20.8px | -0.16px | Bolded inline body. |
|
||
| `{typography.caption}` | 14px | 400 | 19.6px | 0 | Fine print, footer secondary text. |
|
||
| `{typography.caption-strong}` | 14px | 500 | 19.6px | 0 | Bolded captions. |
|
||
| `{typography.mono-caps-button}` | 16px | 500 | 16px | 0.08px | Primary button labels — uppercase, mono. |
|
||
| `{typography.mono-caps-eyebrow}` | 11px | 500 | 11px | 0.55px | Section eyebrows, table-header cell labels. |
|
||
| `{typography.mono-caps-label}` | 11px | 500 | 15.4px | 0.055px | Inline tag labels inside text contexts. |
|
||
| `{typography.mono-caption}` | 10px | 400 | 14px | 0.05px | Mono fine print (inside code editor mockup). |
|
||
|
||
### Principles
|
||
- **Two-face contrast is the voice.** Display sans for narrative; uppercase mono for technical labels. Never let the mono carry a paragraph; never let the display sans carry a button label.
|
||
- **Negative letter-spacing only on the display sans.** The mono face uses small positive tracking; reversing this is wrong.
|
||
- **Headlines stay sentence-case.** Every uppercase moment belongs to the mono face. Mixing all-caps display would muddy the contrast.
|
||
|
||
### Note on Font Substitutes
|
||
The two primary faces are proprietary. Open-source substitutes:
|
||
- **Display sans** — *Inter* (400 / 500) with `font-feature-settings: "ss01"` enabled comes closest; tighten letter-spacing by ~0.6 % at display sizes to land on the brand's compressed feel. *Geist* is the second-best option but reads slightly wider.
|
||
- **Uppercase mono eyebrow** — *JetBrains Mono* or *Geist Mono* (weight 500) at 11 px with `text-transform: uppercase` matches the brand's voice once tracking is bumped to `0.04em`.
|
||
|
||
## Layout
|
||
|
||
### Spacing System
|
||
- **Base unit**: 4 px. Almost every captured value is a multiple of 4, with two exceptions (7.2 px, 55.2 px) that are gap-multiplier derivatives, not layout 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.
|
||
- **Section padding**: marketing bands use `{spacing.section}` 80 px top/bottom on desktop. The hero and the "research" dark band keep the 80 px rhythm; pricing tables tighten to `{spacing.5xl}` to keep dense data legible.
|
||
- **Card interior padding**: research cards and testimonial cards sit at `{spacing.2xl}` 24 px interior; the stat-card tiles use `{spacing.3xl}` 32 px to give the big number breathing room.
|
||
- **Inline gap**: button + nav rows use `{spacing.md}` 12 px between siblings; chip groups use `{spacing.sm}` 8 px.
|
||
|
||
### Grid & Container
|
||
- **Max width**: ~1280 px desktop container; nothing rendered above that. Content centres with horizontal gutters of `{spacing.3xl}` 32 px on desktop, `{spacing.lg}` 16 px on mobile.
|
||
- **Column patterns**:
|
||
- Research / testimonial grids: 3-up at desktop, 1-up at mobile.
|
||
- Stats tile grid: 3-up at desktop, 1-up at mobile.
|
||
- Article-card grid: 2-up at desktop, 1-up at mobile.
|
||
- Pricing data table: full-width, model rows stack on mobile.
|
||
- Hero: 50 / 50 split (headline left, ribbon graphic right) at desktop; stacked at mobile with graphic above.
|
||
|
||
### Whitespace Philosophy
|
||
Surface contrast does most of the separation. A dark band ends → 80 px of breathing room → next light band begins. Inside a band, headline and lead paragraph hug close (`{spacing.lg}` 16 px between them), then a wider gap before the supporting visual or CTA cluster. Inside pricing data tables, the brand keeps rows tight (`{spacing.md}` 12 px vertical) — the table reads more like a sheet than a marketing component.
|
||
|
||
### Responsive Strategy
|
||
|
||
#### Breakpoints
|
||
|
||
| Name | Width | Key Changes |
|
||
|---|---|---|
|
||
| Mobile | < 479px | Hero stacks; nav collapses to hamburger; all multi-col grids drop to 1-up. |
|
||
| Mobile-Large | 479–767px | Same as Mobile; some tables enable horizontal scroll. |
|
||
| Tablet | 768–991px | Article grid moves to 2-up; testimonial grid stays 3-up only if container > 900 px, otherwise 1-up. |
|
||
| Desktop | 992–1279px | Full 3-up research grid, 2-up article grid, hero 50/50 split. |
|
||
| Desktop-Large | ≥ 1280px | Container caps at 1280 px; bands stay edge-to-edge in colour while content centres. |
|
||
|
||
#### Touch Targets
|
||
The mono-cap button label is set at 16 px; combined with `{spacing.xs}` 4 px top / bottom and a 24 px horizontal padding, the primary pill renders at roughly 32 px tall. On mobile viewports, button height is inflated to ≥ 44 px through extra vertical padding inside the touch row — meeting WCAG AAA. The circular icon button (`button-icon-circular`) renders at 44 × 44 px minimum at all viewports.
|
||
|
||
#### Collapsing Strategy
|
||
- **Nav**: full link row + black "Sign in" pill + "Get started" pill at desktop. Collapses to logo + hamburger at mobile; the menu opens as a full-overlay drawer with the same link list stacked vertically.
|
||
- **Hero**: at desktop, headline left + gradient ribbon right (50 / 50). At mobile, headline stacks above a smaller-scale ribbon — never below.
|
||
- **Research band**: 4-up grid at desktop drops to 2-up at tablet, 1-up at mobile. Card chrome stays identical.
|
||
- **Pricing data table**: at desktop, full-width with all columns visible. At tablet, sub-tab row enables horizontal scroll. At mobile, cell rows stack model-name above price block.
|
||
- **Footer wordmark banner**: scales fluidly — the giant `together.ai` wordmark stays edge-to-edge regardless of viewport.
|
||
|
||
#### Image Behavior
|
||
- **Hero ribbon graphic**: rendered as an SVG, scales fluidly with the hero container; never crops, never repositions.
|
||
- **Testimonial portraits**: square or 4:5 portrait, hard-cropped at top; consistent square framing across the grid.
|
||
- **Article thumbnails**: 16:9 landscape, fills card top with `{rounded.sm}` corners on the image only.
|
||
- **Logo bar**: customer logos rendered as grayscale SVGs in a wrapping flex row.
|
||
|
||
## Elevation & Depth
|
||
|
||
| Level | Treatment | Use |
|
||
|---|---|---|
|
||
| Level 0 — Flat | No shadow, no border. | Most cards on light surfaces lean on hairline borders, not shadow. |
|
||
| Level 1 — Hairline | 1 px solid `{colors.hairline}` on `{colors.canvas}` cards. | Testimonial cards, article cards, data-table rows. |
|
||
| Level 2 — Hairline on Dark | 1 px solid `{colors.surface-dark-soft}` on `{colors.canvas-dark}` cards. | Research-band cards, on-dark badges. |
|
||
| Level 3 — Soft Drop | `rgba(1, 1, 32, 0.1) 0px 4px 10px 0px` — a barely-perceptible shadow tinted with the brand's dark-navy. | Floating elements (the chat-launcher orb, sticky-bottom nav row when one appears). |
|
||
|
||
### Decorative Depth
|
||
- **Gradient ribbon as depth**: the hero's three-stop gradient ribbon is the page's only true atmospheric effect. It loops through layered translucent shapes that imply depth without leaving the brand palette.
|
||
- **Code editor mockup as section-depth break**: a dark code-editor surface inside the otherwise-white product band acts as a one-step lift, mirroring the hero's polarity flip.
|
||
- **Wordmark banner as terminal depth**: 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 page a final "you have arrived" sign-off.
|
||
|
||
## Shapes
|
||
|
||
### Border Radius Scale
|
||
|
||
| Token | Value | Use |
|
||
|---|---|---|
|
||
| `{rounded.none}` | 0px | Hero / research full-bleed bands; the footer wordmark banner. |
|
||
| `{rounded.xs}` | 3.25px | The pricing page's slightly tighter sub-tab and outline button. |
|
||
| `{rounded.sm}` | 4px | The brand's canonical radius — buttons, badges, cards, data-table rows, stat tiles. |
|
||
| `{rounded.md}` | 8px | Feature-tab pills inside the "Full-stack cloud" section, larger pricing-tab containers. |
|
||
| `{rounded.full}` | 9999px | The floating chat-launcher orb (`button-icon-circular`). The only fully-pill shape in the system. |
|
||
|
||
### Photography Geometry
|
||
- **Hero ribbon**: SVG gradient, free-form; no aspect-ratio constraint.
|
||
- **Customer logos**: vector, rendered grayscale at consistent height (~24 px) in a wrapping flex row.
|
||
- **Testimonial portraits**: 1:1 square crop with hard-edge corners — no avatar pill.
|
||
- **Article thumbnails**: 16:9 with `{rounded.sm}` 4 px top-corner radius on the image only; card chrome stays square.
|
||
|
||
## Components
|
||
|
||
### Buttons
|
||
|
||
**`button-primary`** — the black pill that carries every primary CTA.
|
||
- Background `{colors.primary}`, text `{colors.on-primary}`, label set in `{typography.mono-caps-button}` (uppercase mono, 16 px / 500 / 0.08 px tracking), shape `{rounded.sm}` 4 px, padding `{spacing.xs} {spacing.2xl}`. No shadow.
|
||
|
||
**`button-secondary-mint`** — the hero secondary CTA pill.
|
||
- Background `{colors.accent-mint}`, text `{colors.ink}`, same typography and shape as `button-primary`. Only appears in hero contexts.
|
||
|
||
**`button-secondary-white`** — the white pill paired with `button-secondary-mint` inside the hero.
|
||
- Background `{colors.canvas}`, text `{colors.ink}`, same typography and shape. Always sits adjacent to the mint or primary button.
|
||
|
||
**`button-ghost-on-dark`** — the translucent button used on dark hero / research surfaces.
|
||
- Background `{colors.surface-dark-soft}`, text `{colors.on-dark}`, shape `{rounded.sm}` 4 px. Used for "Read more" / "Watch the announcement" affordances on dark bands.
|
||
|
||
**`button-outline`** — the white-on-white outline button used inside pricing pages and feature toggles.
|
||
- Background `{colors.canvas}`, text `{colors.ink}`, 1 px solid `{colors.hairline}` border, shape `{rounded.xs}` 3.25 px.
|
||
|
||
**`button-icon-circular`** — the floating chat-launcher orb in the bottom-right of every page.
|
||
- Background `{colors.primary}`, white icon, shape `{rounded.full}`. The only fully-pill shape in the system.
|
||
|
||
### Cards & Containers
|
||
|
||
**`research-card`** — the 4-up grid card on the dark "Grounded in cutting-edge research" band.
|
||
- Background `{colors.canvas-dark}`, text `{colors.on-dark}`, 1 px solid `{colors.surface-dark-soft}` border, padding `{spacing.2xl}`, shape `{rounded.sm}` 4 px. Inside: mono eyebrow tag + display headline + body paragraph.
|
||
|
||
**`testimonial-card`** — the 3-up "AI natives build on Together AI" card.
|
||
- Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.2xl}`, shape `{rounded.sm}` 4 px. Inside: 1:1 portrait crop + display-md name + body quote + mono caption stat row.
|
||
|
||
**`article-card`** — the 2-up "What's new at Together AI" article card.
|
||
- Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.2xl}`, shape `{rounded.sm}` 4 px. Inside: 16:9 image at top + mono eyebrow tag + display-md title + body summary + mono caption byline.
|
||
|
||
**`code-editor-mockup`** — the dark code-preview surface inside the product band.
|
||
- Background `{colors.canvas-dark}`, text `{colors.on-dark}`, body in `{typography.mono-caption}`, padding `{spacing.2xl}`, shape `{rounded.sm}` 4 px. Window chrome stays minimal — no traffic-light dots, no title bar.
|
||
|
||
**`stats-card-tinted`** — the pastel-tinted stat tile (mint, peach, periwinkle) on the white middle band.
|
||
- Background `{colors.accent-mint}` (or sibling accent tints), text `{colors.ink}`, big number in `{typography.display-xl}` + label in `{typography.mono-caps-eyebrow}`, padding `{spacing.3xl}`, shape `{rounded.sm}` 4 px.
|
||
|
||
### Inputs & Forms
|
||
|
||
**`text-input`** — the form input on the startup-accelerator application form.
|
||
- Background `{colors.canvas}`, text `{colors.ink}`, 1 px solid `{colors.hairline}` border, body set in `{typography.body-md}`, shape `{rounded.sm}` 4 px.
|
||
|
||
### Navigation
|
||
|
||
**`nav-bar`** — the sticky top nav.
|
||
- Background `{colors.canvas-dark}` on the hero band, switches to `{colors.canvas}` once the user scrolls past the hero. Text `{colors.on-dark}` on dark, `{colors.ink}` on white. Layout: logo left, link row centre, "Contact sales" + "Sign in" right.
|
||
|
||
**`nav-link`** — the centred link row inside `nav-bar`.
|
||
- Text `{colors.on-dark}` (or `{colors.ink}` after scroll), set in `{typography.body-md}` 400 weight. Links separate with `{spacing.2xl}` 24 px between siblings.
|
||
|
||
**`footer`** — the bottom 4-column nav.
|
||
- Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.section} {spacing.3xl}`. Eyebrow labels in `{typography.mono-caps-eyebrow}`; link rows in `{typography.body-md}`.
|
||
|
||
### Signature Components
|
||
|
||
**`hero-band-dark`** — the dark navy hero that opens every product / marketing page.
|
||
- Background `{colors.canvas-dark}`, text `{colors.on-dark}`, padding `{spacing.section} {spacing.3xl}`. Headline in `{typography.display-xxl}` (sentence case, never all-caps). Eyebrow in `{typography.mono-caps-eyebrow}`. Two-column layout: headline + CTA cluster on left, gradient ribbon SVG on right.
|
||
|
||
**`research-band-dark`** — the dark navy band that hosts the "Grounded in cutting-edge research" 4-up card grid.
|
||
- Background `{colors.canvas-dark}`, text `{colors.on-dark}`, padding `{spacing.section} {spacing.3xl}`. Section headline in `{typography.display-xl}` followed by the `research-card` grid.
|
||
|
||
**`feature-tab-pill`** — the tab pill row inside the "Full-stack cloud" section.
|
||
- Background `{colors.canvas}`, text `{colors.ink}`, label in `{typography.body-md-strong}`, padding `{spacing.md} {spacing.2xl}`, shape `{rounded.md}` 8 px. Tab group sits on `{colors.hairline}` rail.
|
||
|
||
**`pricing-sub-tab`** — the secondary tab row inside the pricing-page model table (TEXT / VISION / IMAGE / AUDIO / VIDEO).
|
||
- Background `{colors.canvas}`, text `{colors.ink}`, label in `{typography.body-md}`, padding `{spacing.sm} {spacing.lg}`, shape `{rounded.xs}` 3.25 px.
|
||
|
||
**`data-table-row`** — the model row inside the pricing serverless-inference table.
|
||
- Background `{colors.canvas}`, text `{colors.ink}`, 1 px solid `{colors.hairline}` bottom border, padding `{spacing.md} {spacing.lg}`. Inside: model icon + model name (display sans) + input cost cell + output cost cell.
|
||
|
||
**`data-table-header`** — the table header row.
|
||
- Background `{colors.hairline}`, text `{colors.body}`, set in `{typography.mono-caps-eyebrow}` (uppercase mono), padding `{spacing.md} {spacing.lg}`.
|
||
|
||
**`toggle-pill-group`** — the "Standard Pricing / Wholesale Pricing" segmented control above the fine-tuning table.
|
||
- Background `{colors.hairline}` rail, individual pills `{colors.canvas}` (inactive) or `{colors.primary}` (active), label in `{typography.mono-caps-button}`, shape `{rounded.sm}` 4 px, rail padding `{spacing.xs}`.
|
||
|
||
**`badge-neutral`** — the inline tag pill on light surfaces.
|
||
- Background `{colors.hairline}`, text `{colors.ink}`, body in `{typography.body-md}`, 1 px solid `{colors.hairline}` border, padding `{spacing.xxs} {spacing.sm}`, shape `{rounded.sm}` 4 px.
|
||
|
||
**`badge-subtle-on-dark`** — the inline tag pill on dark hero / research surfaces.
|
||
- Background `{colors.surface-dark-soft}`, text `{colors.on-dark}`, body in `{typography.body-md}`, padding `{spacing.xxs} {spacing.sm}`, shape `{rounded.sm}` 4 px.
|
||
|
||
**`footer-wordmark-banner`** — the massive `together.ai` wordmark at the bottom of every page.
|
||
- Background `{colors.canvas}`, wordmark colour `{colors.hairline}` (faint stencil tint), set in `{typography.display-xxl}` scaled fluidly to the viewport width. Edge-to-edge, square corners. Acts as the final page sign-off.
|
||
|
||
### Examples (illustrative)
|
||
|
||
> Auto-derived kit-mirror demonstration surfaces (`scripts/derive-examples-block.mjs`). Each `ex-*` entry references brand-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`** — Default Pricing tier card. Re-uses feature-card chrome with brand canvas-soft surface.
|
||
- Properties: `backgroundColor`, `textColor`, `borderColor`, `rounded`, `padding`
|
||
|
||
**`ex-pricing-tier-featured`** — Featured/highlighted tier — polarity-flipped surface (dark fill + light text in light mode, light fill + dark text in dark mode).
|
||
- Properties: `backgroundColor`, `textColor`, `rounded`, `padding`
|
||
|
||
**`ex-product-selector`** — What's Included summary card — re-purposed for SaaS / B2B verticals (NOT a literal product gallery).
|
||
- Properties: `backgroundColor`, `rounded`, `padding`
|
||
|
||
**`ex-cart-drawer`** — Subscription summary — 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. Active state uses brand primary as the indicator.
|
||
- Properties: `backgroundColor`, `activeIndicator`, `rounded`, `padding`
|
||
|
||
**`ex-data-table-cell`** — Default data-table th + td chrome. Header uses mono-caps eyebrow typography; body uses body-sm.
|
||
- Properties: `headerBackground`, `headerTypography`, `bodyTypography`, `cellPadding`, `rowBorder`
|
||
|
||
**`ex-auth-form-card`** — Sign-in / sign-up card. Re-uses feature-card chrome with text-input primitives inside.
|
||
- Properties: `backgroundColor`, `rounded`, `padding`
|
||
|
||
**`ex-modal-card`** — Modal dialog surface — same chrome as feature-card with elevated shadow.
|
||
- Properties: `backgroundColor`, `rounded`, `padding`
|
||
|
||
**`ex-empty-state-card`** — Empty-state illustration frame.
|
||
- Properties: `backgroundColor`, `rounded`, `padding`, `captionTypography`
|
||
|
||
**`ex-toast`** — Toast notification surface — feature-card shape + medium shadow.
|
||
- Properties: `backgroundColor`, `rounded`, `padding`, `typography`
|
||
|
||
|
||
## Do's and Don'ts
|
||
|
||
### Do
|
||
- Reserve `{colors.primary}` (`#000000`) for every primary CTA. One black pill per visible viewport — that consistency is the brand's whole conversion story.
|
||
- Set every section eyebrow and button label in `{typography.mono-caps-button}` / `{typography.mono-caps-eyebrow}` — uppercase mono, positive tracking.
|
||
- Pair the brand gradient (`{colors.accent-orange}` → `{colors.accent-magenta}` → `{colors.accent-periwinkle}`) at hero scale only. The gradient is the brand chrome; never shrink to icon size.
|
||
- Cycle page surfaces in the `{colors.canvas-dark}` → `{colors.canvas}` → `{colors.canvas-dark}` rhythm; the dark-light contrast carries elevation more than any shadow.
|
||
- Use `{rounded.sm}` 4 px as the canonical card / button radius across the system; reserve `{rounded.full}` for the single floating chat-launcher orb.
|
||
- Render the giant `together.ai` wordmark banner at the bottom of every long page in `{typography.display-xxl}`, tinted toward `{colors.hairline}` so it reads as a stencil — not as a heavy footer title.
|
||
|
||
### Don't
|
||
- Don't introduce a fifth accent colour. The three-stop gradient + mint pill is the entire decorative palette; new accents flatten the brand.
|
||
- Don't set body paragraphs in the mono face. The mono is for labels only; long-form mono reads as a console log, not as marketing copy.
|
||
- Don't centre-align body paragraphs under a left-aligned display headline. The brand keeps text-block alignment consistent within a copy stack.
|
||
- Don't drop a soft drop-shadow on light-surface cards. The brand uses hairlines and surface contrast for elevation; soft shadows belong only on the floating chat-launcher orb.
|
||
- Don't reduce the brand gradient to a single-colour fill, reorder its stops, or add a fourth stop. The gradient is a fixed object.
|
||
- Don't switch the primary button shape to a full pill `{rounded.full}`. The brand's CTA shape is a slightly-rounded rectangle, never a full pill.
|
||
- Don't set headlines in the all-caps mono. Every all-caps moment belongs to the mono face; every headline belongs to the display sans in sentence case.
|