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.
개요
_함께 AI는 AI 클라우드 인프라 플랫폼입니다. 모델 추론, GPU 클러스터, 미세 조정, "AI 네이티브 클라우드"를 개발자 팀에 제공할 수 있게 만드는 모든 배관 — 그리고 브랜드의 웹 표면은 그 자세를 정확히 나타냅니다. 맨 위에는 거의 검은색 영웅, 중간에 흰색 기술 콘텐츠로 구성된 긴 리본, 그리고 반복되는 브랜드 크롬 조각(주황색-마젠타색-대수리 3색 그라데이션 리본)이 있습니다. — 이는 "우리는 또 다른 회색 기업 SaaS가 아닙니다."라는 전체 작업을 수행합니다. 다른 일러스트레이션 시스템은 없습니다. 그라데이션이 브랜드입니다.
유형은 두 번째로 결정적인 목소리입니다. 두 개의 얼굴이 모든 페이지를 담고 있습니다. 헤드라인과 본문을 위한 맞춤형 기하학적 디스플레이 산세(`The Future`로 추출), 촘촘하고 약간 음수 문자 간격으로 가중치 500으로 설정되어 64픽셀 영웅 유형이 입력된 것보다 쏟아지는 느낌을 줍니다. 모든 섹션, 모든 버튼 및 모든 셀 헤더에 레이블을 지정하는 대문자 고정 폭 눈썹(`PP Neue Montreal Mono`)입니다. 헤드라인은 문장 단위입니다. 기술적인 모든 것은 대문자 모노입니다. 이러한 대조는 브랜드의 농담입니다. 플랫폼은 고정 폭 레이블을 사용할 만큼 진지하고, 헤드라인을 넣지 않을 만큼 현대적입니다.
표면은 공격적으로 번갈아 표시됩니다. 영웅/연구/"최첨단 연구 기반"을 위한 ``(``) 밴드 — 제품, 가격 및 평가를 위한 ``(흰색)이 뒤따르고 ``은 테이블 머리글 행 및 토글 배경용으로 예약되어 있습니다. 파스텔 `` 색조 통계 타일이 흰색 중앙을 깨뜨립니다. 카드는 가는 선 테두리가 있는 전체적으로 가볍게 둥글게 처리되어 있습니다(`` 4px). 그림자가 떠다니지 않습니다.
**주요 특성:**
- 단일 검정색 `` CTA 알약은 가격, 바닥글, 로그인 전반에 걸쳐 모든 전환 목표를 전달합니다. 민트 `` 및 흰색 알약 변형은 영웅 컨텍스트에만 예약되어 있습니다.
- 3색 브랜드 그라데이션(`` → `` → ``)은 전체 장식 시스템으로, 히어로 리본 그래픽으로 사용되며 다른 곳에서는 견본으로 축소되지 않습니다.
- 모든 곳에서 `` / ``의 올캡 모노 아이브로 및 버튼 라벨 — 섹션 제목, 모델 행 헤더, 가격표의 "ON-DEMAND" 라벨.
- 가벼운 둥근 카드 크롬(`` 4px); 일회성 `` 3.25픽셀은 가격 탭 알약 안에 더 엄격한 시스템으로 표시됩니다. `` 플로팅 채팅 실행기 구에만 해당됩니다.
- 이중 표면 모드 - `` 및 `` 밴드를 교대로 사용합니다. 회색 사이에는 없습니다. 단일 부드러운 표면 ``은 테이블 헤더 행을 표시하기 위해서만 존재합니다.
- 모든 페이지 맨 아래에 있는 대규모 `together.ai` 워드마크 배너는 ``로 설정되고 거의 캔버스에 색칠된(``) "현재 위치" 사인오프로서 바닥글 구분 기호로도 사용됩니다.
색상
브랜드 및 액센트
- **잉크 검정**(`` — ``): 단일 기본 CTA 색상입니다. 검은 알약에는 "로그인", "영업팀에 문의", "지금 시작하기", 모든 바닥글 CTA가 포함되어 있습니다.
- **브랜드 오렌지**(`` — ``): 3색 브랜드 그라데이션의 한쪽 다리입니다. 영웅 리본 그래픽에 나타납니다. 자체적으로 UI 채우기로 사용된 적이 없습니다.
- **브랜드 마젠타**(`` — ``): 그라데이션의 두 번째 구간입니다.
- **브랜드 Periwinkle** (`` — ``): 그라데이션의 세 번째 구간입니다. 일부 통계 타일의 소프트 채우기로도 사용됩니다.
- **브랜드 민트**(`` — ``): 그라데이션 외부에 존재하는 파스텔 청록색 — 영웅 보조 CTA 알약 및 `stats-card-tinted` 타일에 사용됩니다.
표면
- **캔버스** (`` — ``): 기본 제품/가격/문서 배경.
- **헤어라인/캔버스 소프트** (`` — ``): 브랜드의 단일 부드러운 표면 톤 — 데이터 테이블 헤더 행, 토글 알약 레일 및 테이블 행 사이의 1px 구분선에 사용됩니다.
- **캔버스 다크** (`` — ``): 브랜드의 다크 히어로 표면; `hero-band-dark` 및 `research-band-dark`에 나타납니다.
- **가는 선** (`` — ``): 밝은 표면의 1px 구분선 — 표 행, 카드 크롬, 배지 테두리.
- **어두운 부분의 헤어라인**(`` — ``): `` 표면에 1px 구분선 및 배지 배경; 브랜드의 어두운 바탕에 반투명한 흰색 헤어라인을 사전 혼합했습니다.
- **어두운 부드러운 표면**(`` — ``): 어두운 밴드 카드 내부에 사용되는 약간 더 밝은 어두운 채우기.
텍스트
- **잉크** (`` — ``): 밝은 표면의 모든 제목과 본문 단락.
- **본문**(`` — ``): 보조 텍스트 — 캡션, 표 셀 보조 값, 바닥글 링크 텍스트. 브랜드의 반투명 블랙 40% 바디 컬러를 사전 혼합했습니다.
- **바디 음소거**(`` — ``): 밝은 표면의 전체 대문자 모노 눈썹 텍스트 색상도 이 토큰에 적용됩니다. 별도의 "음소거" 톤이 없으며 브랜드는 보조 텍스트를 캡션 텍스트와 일관되게 유지합니다.
- **어두운 곳**(`` — ``): `` 표면의 모든 텍스트.
의미
브랜드는 공개 화면에 별도의 오류/성공 팔레트를 유지하지 않습니다. 검증 단서는 상황에 따라 기본 검정색 또는 브랜드 그라데이션을 사용합니다. 명시적인 오류 빨간색, 성공 녹색 또는 노란색 경고는 여기에 문서화되어 있지 않습니다. 프레임워크 기본값을 채택하는 것이 적절합니다.
브랜드 그라데이션
브랜드의 시그니처 장식은 `` → `` → ``의 3스톱 그라데이션으로, 유일한 장식 크롬 조각(히어로 리본 그래픽)으로 적용됩니다. 그라디언트를 하나의 통합 개체로 취급하십시오. 단일 색상으로 자르거나 정지점을 재정렬하거나 네 번째 정지점을 추가하지 마십시오. 대규모로 사용됩니다. 아이콘 크기로 축소되지 않았습니다.
타이포그래피
글꼴군
두 제품군이 전체 시스템을 담당합니다.
1. 모든 헤드라인, 리드 단락, 본문, 대문자가 아닌 버튼 라벨 및 인라인 링크에 대한 **사용자 지정 기하학적 디스플레이 산스**(`The Future`로 추출됨). 가중치 400과 500은 작동하는 쌍입니다. 얼굴은 굵게(700) 이상으로 표시되지 않습니다. 촘촘한 음수 문자 간격(64px 디스플레이에서 `-1.92 px`, 16px 본문에서 `-0.16 px`)은 얼굴에 약간 응축되어 페이지에 쏟아진 듯한 느낌을 줍니다.
2. 모든 눈썹, 버튼 라벨, 표 헤더 셀 및 가격표 탭에 대한 **대문자 모노 캡션 페이스**(`PP Neue Montreal Mono`로 추출됨). 11~16픽셀에서 무게 500; 항상 대문자입니다. 양수 문자 간격(`0.05 – 0.55 px`). 모노는 브랜드의 기술적인 목소리를 담고 있습니다. "PRICING", "INFERENCE", "MODEL", "GPU", "GA-DEC '25"라고 적힌 모든 라벨이 이 문자반에 설정되어 있습니다.
계층
| 토큰 | 사이즈 | 무게 | 라인 높이 | 문자 간격 | |
사용
|---|---|---|---|---|---|
| _`` | 64px | 500 | 70.4px | -1.92px | 영웅 헤드라인("AI 네이티브 클라우드에서 미래를 구축하세요"). |
| _`` | 40px | 500 | 48px | -0.8px | 섹션 헤드라인("Together AI 플랫폼", "Together AI 구축 시작") |_
| _`` | 28px | 500 | 32.2px | -0.42px | 하위 섹션 헤드라인 및 통계 타일 큰 숫자. |
| _`` | 22px | 500 | 25.3px | -0.22px | 카드 제목, 연구 카드 제목. |
| _`` | 18px | 400 | 23.4px | -0.18px | 섹션 헤드라인 아래에 단락을 삽입하세요. |
| _`` | 18px | 500 | 23.4px | -0.18px | 강조는 리드 단락 내부에서 실행됩니다. |
| _`` | 16px | 400 | 20.8px | -0.16px | 기본 본문 단락. |
| _`` | 16px | 500 | 20.8px | -0.16px | 굵은 글씨의 인라인 본문. |
| _`` | 14px | 400 | 19.6px | 0 | 작은 글씨, 바닥글 보조 텍스트. |
| _`` | 14px | 500 | 19.6px | 0 | 굵은 캡션. |
| _`` | 16px | 500 | 16px | 0.08px | 기본 버튼 레이블 — 대문자, 모노. |
| _`` | 11px | 500 | 11px | 0.55px | 섹션 눈썹, 표 머리글 셀 레이블. |
| _`` | 11px | 500 | 15.4px | 0.055px | 텍스트 컨텍스트 내의 인라인 태그 레이블. |
| _`` | 10픽셀 | 400 | 14px | 0.05픽셀 | 모노 세밀한 인쇄(코드 편집기 모형 내부) |
원칙
- **두 얼굴의 대조는 음성입니다.** 설명을 위해 sans를 표시합니다. 기술 라벨의 경우 대문자 모노입니다. 모노에 단락을 전달하지 마십시오. 디스플레이에 버튼 라벨을 붙이지 마세요.
- **디스플레이 산세에서만 음수 문자 간격이 있습니다.** 모노 페이스는 작은 양수 추적을 사용합니다. 이를 되돌리는 것은 잘못된 것입니다.
- **헤드라인은 문장 대소문자를 유지합니다.** 모든 대문자 모멘트는 모노 페이스에 속합니다. 모두 대문자로 표시하면 대비가 흐려집니다.
글꼴 대체에 대한 참고사항
두 개의 기본 얼굴은 독점적입니다. 오픈 소스 대체물:
- **디스플레이 산세** — `font-feature-settings: "ss01"`이 활성화된 *인터*(400/500)가 가장 가깝습니다. 디스플레이 크기에서 글자 간격을 ~0.6% 줄여 브랜드의 압축된 느낌을 줍니다. *Geist*는 차선책이지만 읽기 폭이 약간 더 넓습니다.
- **대문자 모노 눈썹** — *JetBrains Mono* 또는 *Geist Mono*(가중치 500), 11픽셀, `text-transform: uppercase` 추적이 `0.04em`에 부딪힌 후 브랜드의 목소리와 일치합니다.
레이아웃
간격 시스템
- **기본 단위**: 4px. 캡처된 거의 모든 값은 레이아웃 결정이 아닌 간격 승수 파생인 두 가지 예외(7.2px, 55.2px)를 제외하고 4의 배수입니다.
- **토큰**: `` 2px · `` 4px · `` 8px · `` 12px · `` 16px · `` 20픽셀 · `` 24픽셀 · `` 32픽셀 · `` 44픽셀 · `` 48픽셀 · `` 55.2픽셀 · `` 80 px.
- **섹션 패딩**: 마케팅 밴드는 데스크탑에서 `` 80px 상단/하단을 사용합니다. 영웅과 "연구" 다크 밴드는 80px 리듬을 유지합니다. 밀도가 높은 데이터를 읽기 쉽게 유지하기 위해 가격표가 ``로 강화되었습니다.
- **카드 내부 패딩**: 연구 카드와 평가 카드는 `` 24px 내부에 위치합니다. 통계 카드 타일은 `` 32픽셀을 사용하여 큰 숫자의 여유 공간을 제공합니다.
- **인라인 간격**: 버튼 + 탐색 행은 형제 간에 `` 12픽셀을 사용합니다. 칩 그룹은 `` 8픽셀을 사용합니다.
그리드 및 컨테이너
- **최대 너비**: 데스크탑 컨테이너 ~1280px; 그 위에는 아무것도 렌더링되지 않았습니다. 데스크탑에서 `` 32px, 모바일에서 `` 16px의 수평 여백이 있는 콘텐츠 센터.
- **열 패턴**:
- 연구/평가 그리드: 데스크톱에서 3-up, 모바일에서 1-up.
- 통계 타일 그리드: 데스크탑에서 3-up, 모바일에서 1-up.
- 기사 카드 그리드: 데스크톱에서는 2업, 모바일에서는 1업.
- 가격 데이터 테이블: 전체 너비, 모바일의 모델 행 스택.
- Hero: 데스크탑에서 50/50 분할(헤드라인 왼쪽, 리본 그래픽 오른쪽); 위의 그래픽과 함께 모바일에 쌓여 있습니다.
공백 철학
표면 대비가 대부분의 분리를 수행합니다. 어두운 띠가 끝나고 → 80px의 호흡 공간 → 다음 밝은 띠가 시작됩니다. 밴드 내에서 헤드라인과 리드 단락이 서로 밀착되고(`` 16픽셀 사이) 지원 시각적 개체 또는 CTA 클러스터 앞의 간격이 더 넓어집니다. 가격 데이터 표 내에서 브랜드는 행을 빽빽하게 유지합니다(`` 세로 12픽셀). 표는 마케팅 구성 요소라기보다는 시트처럼 읽혀집니다.
반응형 전략
#### 중단점
| 이름 | 폭 | 주요 변경 사항 |
|---|---|---|
| 모바일 | _< 479px | Hero stacks; nav collapses to hamburger; all multi-col grids drop to 1-up. |
| 모바일-대형 | 479~767px | 모바일과 동일합니다. 일부 테이블에서는 가로 스크롤이 가능합니다. |
| 태블릿 | 768~991px | 기사 그리드가 2업으로 이동합니다. 추천 그리드는 컨테이너가 900픽셀을 초과하는 경우에만 3장으로 유지되고, 그렇지 않으면 1장으로 유지됩니다. |
| 데스크탑 | 992~1279px | 전체 3업 연구 그리드, 2업 기사 그리드, 영웅 50/50 분할. |
| 데스크탑-대형 | ≥ 1280px | 1280px의 컨테이너 캡; 콘텐츠가 중앙에 위치하는 동안 밴드의 색상은 가장자리에서 가장자리까지 유지됩니다. |
#### 터치 대상
모노 캡 버튼 라벨은 16픽셀로 설정되어 있습니다. _`` 4px 상단/하단 및 24px 가로 패딩과 결합하면 기본 알약은 대략 32px 높이로 렌더링됩니다. 모바일 뷰포트에서는 터치 행 내부의 추가 수직 패딩을 통해 버튼 높이가 44픽셀 이상으로 확장되어 WCAG AAA를 충족합니다. 원형 아이콘 버튼(`button-icon-circular`)은 모든 뷰포트에서 최소 44 × 44픽셀로 렌더링됩니다.
#### 축소 전략
- **탐색**: 전체 링크 행 + 검은색 "로그인" 알약 + 데스크탑의 "시작하기" 알약. 모바일에서는 로고 + 햄버거로 축소됩니다. 메뉴는 동일한 링크 목록이 수직으로 쌓인 전체 오버레이 서랍으로 열립니다.
- **히어로**: 데스크탑에서 헤드라인 왼쪽 + 그라데이션 리본 오른쪽(50 / 50). 모바일에서는 헤드라인이 작은 리본 위에 표시되며 아래에는 표시되지 않습니다.
- **연구 밴드**: 데스크톱의 4-up 그리드는 태블릿의 2-up 그리드, 모바일의 1-up 그리드로 떨어집니다. 카드 크롬은 동일하게 유지됩니다.
- **가격 데이터 테이블**: 데스크톱에서 모든 열이 표시되는 전체 너비입니다. 태블릿에서는 하위 탭 행에서 가로 스크롤이 가능합니다. 모바일에서는 셀 행에 모델 이름이 가격 블록 위에 쌓입니다.
- **바닥글 워드마크 배너**: 유동적으로 확장됩니다. 거대한 `together.ai` 워드마크는 뷰포트에 관계없이 가장자리에서 가장자리까지 유지됩니다.
#### 이미지 동작
- **Hero 리본 그래픽**: SVG로 렌더링되며 Hero 컨테이너에 따라 유연하게 크기가 조정됩니다. 자르거나 위치를 변경하지 않습니다.
- **평가 인물 사진**: 정사각형 또는 4:5 인물 사진, 상단 부분 잘림; 그리드 전체에 걸쳐 일관된 사각형 프레임.
- **기사 미리보기**: 16:9 가로, 이미지의 `` 모서리로만 카드 상단을 채웁니다.
- **로고 바**: 래핑 플렉스 행에서 회색조 SVG로 렌더링된 고객 로고.
고도 및 깊이
| 레벨 | 치료 | |
사용
|---|---|---|
| 레벨 0 — 평면 | 그림자도 없고 국경도 없습니다. | 밝은 표면에 있는 대부분의 카드는 그림자가 아닌 가는 선 테두리에 기대어 있습니다. |
| 레벨 1 - 헤어라인 | `` 카드의 1px 솔리드 ``. | 추천 카드, 기사 카드, 데이터 테이블 행. |
| 레벨 2 — 어두운 부분의 헤어라인 | `` 카드의 1px 솔리드 ``. | 연구 밴드 카드, 어둠 속의 배지. |
| 레벨 3 — 소프트 드롭 | `rgba(1, 1, 32, 0.1) 0px 4px 10px 0px` — 브랜드의 다크 네이비 색조로 거의 알아볼 수 없는 그림자입니다. | 부동 요소(채팅 실행기 구, 표시되는 경우 고정 하단 탐색 행). |
장식적 깊이
- **깊이 있는 그라데이션 리본**: 영웅의 3스톱 그라데이션 리본은 페이지의 유일한 진정한 분위기 효과입니다. 브랜드 팔레트를 벗어나지 않으면서 깊이를 암시하는 레이어드 반투명 모양을 통해 반복됩니다.
- **섹션 깊이 구분으로 코드 편집기 모형**: 흰색 제품 밴드 내부의 어두운 코드 편집기 표면은 영웅의 극성 반전을 반영하여 한 단계 리프트 역할을 합니다.
- **터미널 깊이로서의 워드마크 배너**: 하단의 거대한 `together.ai` 문자는 기술적으로 `` 내부에 있지만 `` 방향으로 착색되어 희미한 스텐실처럼 읽혀 페이지에 최종 "도착했습니다" 사인오프를 제공합니다.
도형
경계 반경 배율
| 토큰 | 가치 | |
사용
|---|---|---|
| _`` | 0픽셀 | 영웅/연구 풀블리드 밴드; 바닥글 워드마크 배너입니다. |
| _`` | 3.25픽셀 | 가격 페이지의 하위 탭과 개요 버튼이 약간 더 촘촘해졌습니다. |
| _`` | 4픽셀 | 브랜드의 표준 반경 — 버튼, 배지, 카드, 데이터 테이블 행, 통계 타일. |
| _`` | 8픽셀 | "풀 스택 클라우드" 섹션 내부의 기능 탭 알약, 더 큰 가격 탭 컨테이너. |
| _`` | 9999px | 떠다니는 채팅 실행기 구체(`button-icon-circular`). 시스템에서 유일하게 완전한 알약 모양입니다. |
사진 기하학
- **히어로 리본**: SVG 그라데이션, 자유 형식; 종횡비 제약이 없습니다.
- **고객 로고**: 벡터, 래핑 플렉스 행에서 일관된 높이(~24px)로 회색조로 렌더링됩니다.
- **평가 인물 사진**: 가장자리가 딱딱한 1:1 정사각형 크롭 — 아바타 알약 없음.
- **기사 미리보기**: 16:9, 이미지에만 `` 4픽셀 상단 모서리 반경; 카드 크롬은 정사각형을 유지합니다.
구성요소
버튼
**`button-primary`** — 모든 기본 CTA를 담고 있는 검은 알약입니다.
- 배경 ``, 텍스트 ``, ``로 설정된 라벨(대문자 모노, 16px/500/0.08px 추적), 모양 `` 4px, 패딩 ` `. 그림자가 없습니다.
**`button-secondary-mint`** — 영웅 보조 CTA 알약.
- 배경 ``, 텍스트 ``, `button-primary`과 동일한 활자체 및 모양. 히어로 컨텍스트에만 표시됩니다.
_**`button-secondary-white`** — 영웅 내부의 `button-secondary-mint`과 쌍을 이루는 흰색 알약입니다.
- 배경 ``, 텍스트 ``, 동일한 서체 및 모양. 항상 민트 또는 기본 버튼 옆에 위치합니다.
_**`button-ghost-on-dark`** — 다크 히어로/연구 표면에 사용되는 반투명 버튼입니다.
- 배경 ``, 텍스트 ``, 모양 `` 4px. 다크 밴드의 "자세히 보기"/"공지 보기" 어포던스에 사용됩니다.
**`button-outline`** — 가격 페이지 및 기능 토글 내부에 사용되는 흰색 바탕에 흰색 윤곽선 버튼입니다.
- 배경 ``, 텍스트 ``, 1px 실선 `` 테두리, 모양 `` 3.25px.
_**`button-icon-circular`** — 모든 페이지의 오른쪽 하단에 있는 떠다니는 채팅 실행기 구체.
- 배경 ``, 흰색 아이콘, 모양 ``. 시스템에서 유일하게 완전한 알약 모양입니다.
카드 및 용기
_**`research-card`** — 어두운 "최첨단 연구 기반" 밴드의 4업 그리드 카드.
- 배경 ``, 텍스트 ``, 1px 실선 `` 테두리, 패딩 ``, 모양 `` 4px. 내부: 모노 눈썹 태그 + 디스플레이 헤드라인 + 본문 단락.
**`testimonial-card`** — 3업 "Together AI를 기반으로 한 AI 네이티브 구축" 카드.
- 배경 ``, 텍스트 ``, 패딩 ``, 모양 `` 4px. 내부: 1:1 세로 자르기 + 디스플레이 MD 이름 + 본문 인용문 + 모노 캡션 통계 행.
_**`article-card`** — 2-up "Together AI의 새로운 기능" 기사 카드.
- 배경 ``, 텍스트 ``, 패딩 ``, 모양 `` 4px. 내부: 16:9 상단 이미지 + 모노 눈썹 태그 + 디스플레이-MD 제목 + 본문 요약 + 모노 캡션 바이라인.
**`code-editor-mockup`** — 제품 밴드 내부의 어두운 코드 미리보기 표면.
- 배경 ``, 텍스트 ``, 본문 ``, 패딩 ``, 모양 `` 4px. 윈도우 크롬은 최소한으로 유지됩니다. 신호등 점이나 제목 표시줄이 없습니다.
**`stats-card-tinted`** — 흰색 중간 띠에 파스텔 색조의 통계 타일(민트, 복숭아, 대수리)이 있습니다.
- 배경 ``(또는 형제 악센트 색조), 텍스트 ``, ``의 큰 숫자 + ``의 레이블, 패딩 ``, 모양 `` 4 px.
입력 및 양식
**`text-input`** — 시작 가속기 신청서에 입력한 양식입니다.
- 배경 ``, 텍스트 ``, 1px 실선 `` 테두리, ``에 설정된 본문, 모양 `` 4px.
탐색
_**`nav-bar`** — 고정 상단 탐색
영웅 밴드의 _- 배경 ``은 사용자가 영웅을 스크롤하면 ``으로 전환됩니다. 어두운 색에는 ``, 흰색에는 `` 텍스트를 입력하세요. 레이아웃: 왼쪽 로고, 링크 행 중앙, "영업팀에 문의" + "로그인" 오른쪽.
**`nav-link`** — `nav-bar`.
내부의 중앙 링크 행
- 텍스트 ``(또는 스크롤 후 ``), `` 400 가중치로 설정됩니다. 링크는 형제 간 `` 24픽셀로 구분됩니다.
**`footer`** — 하단 4열 탐색
- 배경 ``, 텍스트 ``, 패딩 ` `. ``의 눈썹 라벨; ``.
의 링크 행
서명 구성요소
_**`hero-band-dark`** — 모든 제품/마케팅 페이지를 여는 다크 네이비 영웅입니다.
- 배경 ``, 텍스트 ``, 패딩 ` `. ``의 헤드라인(문장 케이스, 모두 대문자로 사용하지 않음) ``의 눈썹. 2열 레이아웃: 왼쪽의 헤드라인 + CTA 클러스터, 오른쪽의 그라데이션 리본 SVG.
**`research-band-dark`** — "최첨단 연구 기반" 4업 카드 그리드를 주최하는 다크 네이비 밴드.
- 배경 ``, 텍스트 ``, 패딩 ` `. ``의 섹션 헤드라인 뒤에 `research-card` 그리드가 옵니다.
_**`feature-tab-pill`** — "풀 스택 클라우드" 섹션 내부의 탭 알약 행.
- 배경 ``, 텍스트 ``, 라벨 ``, 패딩 ` `, 모양 `` 8px. 탭 그룹은 `` 레일에 위치합니다.
**`pricing-sub-tab`** — 가격 페이지 모델 테이블 내의 보조 탭 행(TEXT / VISION / IMAGE / AUDIO / VIDEO).
- 배경 ``, 텍스트 ``, 라벨 ``, 패딩 ` `, 모양 `` 3.25px
**`data-table-row`** — 가격 서버리스 추론 테이블 내부의 모델 행.
- 배경 ``, 텍스트 ``, 1px 실선 `` 하단 테두리, 패딩 ` `. 내부: 모델 아이콘 + 모델 이름(표시 없음) + 입력 비용 셀 + 출력 비용 셀.
**`data-table-header`** — 테이블 헤더 행.
- 배경 ``, 텍스트 ``, ``(대문자 모노)로 설정, 패딩 ` `.
**`toggle-pill-group`** — 미세 조정 테이블 위의 "표준 가격/도매 가격" 세그먼트 제어.
- 배경 `` 레일, 개별 알약 ``(비활성) 또는 ``(활성), 라벨 ``, 모양 `` 4px, 레일 패딩 ``.
**`badge-neutral`** — 밝은 표면의 인라인 태그 알약.
- 배경 ``, 텍스트 ``, 본문 ``, 1px 단색 `` 테두리, 패딩 ` `, 모양 `` 4 px.
_**`badge-subtle-on-dark`** — 다크 히어로/연구 표면의 인라인 태그 알약.
- 배경 ``, 텍스트 ``, 본문 ``, 패딩 ` `, 모양 `` 4px.
_**`footer-wordmark-banner`** — 모든 페이지 하단에 있는 거대한 `together.ai` 워드마크.
- 배경 ``, 워드마크 색상 ``(희미한 스텐실 색조), ``에 설정되어 뷰포트 너비에 맞춰 유동적으로 조정됩니다. 가장자리에서 가장자리까지 정사각형 모서리입니다. 최종 페이지 승인 역할을 합니다.
예(설명)
> 자동 파생 키트-미러 데모 표면(`scripts/derive-examples-block.mjs`). 각 `ex-*` 항목은 브랜드 기본 기본 요소를 참조하므로 다운스트림 소비자(`/preview-design`, `/generate-kit`)는 동일한 10개 표면을 일관되게 다시 스킨합니다. `TO_FILL` 마커는 누락된 기본 요소를 나타냅니다. LLM 판단 단계에서 해결됩니다.
**`ex-pricing-tier`** — 기본 가격 등급 카드. 브랜드 캔버스처럼 부드러운 표면에 기능 카드 크롬을 재사용합니다.
- 속성: `backgroundColor`, `textColor`, `borderColor`, `rounded`, `padding`
**`ex-pricing-tier-featured`** — 추천/강조 표시된 계층 — 극성이 반전된 표면(밝은 모드에서 어두운 채우기 + 밝은 텍스트, 어두운 모드에서 밝은 채우기 + 어두운 텍스트).
- 속성: `backgroundColor`, `textColor`, `rounded`, `padding`
**`ex-product-selector`** — 포함된 내용 요약 카드 — SaaS/B2B 업종에 맞게 용도가 변경되었습니다(문자 그대로의 제품 갤러리 아님).
- 속성: `backgroundColor`, `rounded`, `padding`
**`ex-cart-drawer`** — 구독 요약 — SaaS/B2B용으로 재사용됨(리터럴 카트가 아닌 추가 기능당 항목).
- 속성: `backgroundColor`, `rounded`, `padding`, `item-divider`
_**`ex-app-shell-row`** — 앱 셸 예시 내부의 사이드바 탐색 행. 활성 상태는 기본 브랜드를 지표로 사용합니다.
- 속성: `backgroundColor`, `activeIndicator`, `rounded`, `padding`
**`ex-data-table-cell`** — 기본 데이터 테이블 th + td chrome. 헤더는 모노 캡 눈썹 타이포그래피를 사용합니다. body는 body-sm을 사용합니다.
- 속성: `headerBackground`, `headerTypography`, `bodyTypography`, `cellPadding`, `rowBorder`
**`ex-auth-form-card`** — 로그인/가입 카드. 내부에 텍스트 입력 기본 요소가 포함된 기능 카드 크롬을 재사용합니다.
- 속성: `backgroundColor`, `rounded`, `padding`
**`ex-modal-card`** — 모달 대화 상자 표면 — 높은 그림자가 있는 기능 카드와 동일한 크롬.
- 속성: `backgroundColor`, `rounded`, `padding`
**`ex-empty-state-card`** — 빈 상태 그림 프레임.
- 속성: `backgroundColor`, `rounded`, `padding`, `captionTypography`
**`ex-toast`** — 토스트 알림 표면 — 기능 카드 모양 + 중간 그림자.
- 속성: `backgroundColor`, `rounded`, `padding`, `typography`
해야 할 일과 하지 말아야 할 일
하라
- 모든 기본 CTA에 대해 ``(``)을 예약하세요. 표시되는 뷰포트당 하나의 검은 알약 - 일관성이 브랜드의 전체 전환 스토리입니다.
- `` / ``에서 모든 섹션 눈썹과 버튼 레이블을 설정합니다 — 대문자 모노, 포지티브 추적
- 브랜드 그라데이션(`` → `` → ``)을 히어로 규모로만 페어링하세요. 그라데이션은 브랜드 크롬입니다. 아이콘 크기로 축소되지 않습니다.
- 사이클 페이지 표면은 `` → `` → `` 리듬으로 표시됩니다. 어두운 빛의 대비는 어떤 그림자보다 더 높은 느낌을 줍니다.
- 시스템 전체에서 표준 카드/버튼 반경으로 `` 4픽셀을 사용합니다. 단일 부동 채팅 실행기 구에 대해 ``을 예약합니다.
- ``의 모든 긴 페이지 하단에 있는 거대한 `together.ai` 워드마크 배너를 렌더링합니다. `` 방향으로 색조가 지정되어 두꺼운 바닥글 제목이 아닌 스텐실로 읽혀집니다.
하지 마세요
- 다섯 번째 강조 색상을 도입하지 마세요. 3스톱 그라데이션 + 민트 알약이 전체 장식 팔레트입니다. 새로운 액센트가 브랜드를 돋보이게 합니다.
- 모노페이스에 본문 단락을 설정하지 마세요. 모노는 라벨 전용입니다. 긴 형식의 모노는 마케팅 카피가 아닌 콘솔 로그로 읽혀집니다.
- 왼쪽 정렬 디스플레이 헤드라인 아래 본문 단락을 가운데 정렬하지 마세요. 브랜드는 카피 스택 내에서 텍스트 블록 정렬을 일관되게 유지합니다.
- 밝은 표면 카드에 부드러운 그림자를 추가하지 마세요. 이 브랜드는 입체감을 위해 헤어라인과 표면 대비를 사용합니다. 부드러운 그림자는 떠다니는 채팅 실행기 구체에만 속합니다.
- 브랜드 그라데이션을 단일 색상 채우기로 줄이거나 정지 순서를 변경하거나 네 번째 정지를 추가하지 마십시오. 그라데이션은 고정된 개체입니다.
- 기본 버튼 모양을 전체 알약 모양으로 전환하지 마세요 ``. 브랜드의 CTA 모양은 완전한 알약 모양이 아닌 약간 둥근 직사각형입니다.
- 모두 대문자로 된 모노에 헤드라인을 설정하지 마세요. 모든 대문자의 순간은 모노 페이스에 속합니다. 모든 헤드라인은 문장의 대소문자 구분 없이 표시에 속합니다.
概要
Together AI は AI クラウド インフラストラクチャ プラットフォームであり、モデル推論、GPU クラスター、微調整、「AI ネイティブ クラウド」を開発者チームに提供できるようにするすべての配管です。ブランドの Web 表面はまさにその姿勢を示しています。上部に黒に近いヒーロー、中央に白い技術コンテンツの長いリボン、そして繰り返し使用される単一のブランド クロム (オレンジ、マゼンタ、ツルニチニチソウの 3 色のグラデーション リボン) です。これは、「当社は単なる灰色の企業 SaaS ではありません」という役割を果たします。他にイラストシステムはありません。グラデーションがブランドです。
Type は 2 番目の決定的な音声です。各ページには 2 つの面が表示されます。見出しと本文には (__CODEBCK_782___ として抽出) を含まないカスタムの幾何学的な表示があり、ウェイト 500 に設定され、文字間隔が狭くわずかに負の間隔になっているため、64 ピクセルのヒーロー タイプは入力されたというよりも流し込まれたように感じられます。そして、すべてのセクション、すべてのボタン、すべてのセル ヘッダーにラベルを付ける大文字の等幅眉毛 (`PP Neue Montreal Mono`)。見出しは文例ごとに決まります。技術的なものはすべて大文字のモノラルです。このコントラストは、ブランドのトーン ジョークです。このプラットフォームは等幅ラベルを使用するほど真剣でありながら、見出しを入れないほど現代的です。
サーフェスは積極的に交互に表示されます。__CODEBCK_784___ (``) バンドはヒーロー / 研究 / 「最先端の研究に基づいている」 — 続いて `` (白) が製品、価格設定、および紹介文に使用され、_`` はテーブル ヘッダー行と背景の切り替え用に予約されています。パステル色の `` 色の統計タイルが白い中央を分割します。カードは全体的に軽く丸みを帯びており (`` 4 ピクセル)、ヘアラインの境界線があり、影が浮いてしまうことはありません。
**主な特徴:**
- 単一の黒い `` CTA ピルには、価格設定、フッター、ログインに至るまでのあらゆるコンバージョン目標が含まれます。ミント `` および白い錠剤のバリアントは、ヒーロー コンテキスト専用に予約されています。
- 3 色のブランド グラデーション (`` → `` → ``) が装飾システム全体であり、ヒーロー リボン グラフィックとして使用され、他の場所で見本に縮小されることはありません。
- __CODEBCK_795___ / `` のすべての大文字のモノラル眉とボタン ラベル — セクション タイトル、モデル行ヘッダー、価格表の「オンデマンド」ラベル。
- __CODEBCK_797___ 4 ピクセルの軽く丸いカード クロム。 1 つ限りの `` 3.25 ピクセルが、より厳密なシステムとして価格設定タブの錠剤内に表示されます。 `` フローティング チャット ランチャー オーブのみ。
- デュアル サーフェス モード - `` バンドと `` バンドを交互に配置します。中間のグレーはありません。単一のソフト サーフェス `` は、テーブル ヘッダー行をマークするためにのみ存在します。
- すべてのページの最下部にある巨大な__CODEBCK_803___ワードマーク バナー。__CODEBCK_804___で設定され、キャンバスのほぼ内側に色付けされています(``)。フッター区切り文字としても機能する「ここにいます」というサインオフです。
色
ブランドとアクセント_
- **インク ブラック** (`` — ``): CTA の単一の原色。黒い錠剤には、「サインイン」、「営業へのお問い合わせ」、「今すぐ始めましょう」、すべてのフッター CTA が含まれています。
- **ブランド オレンジ** (`` — ``): 3 色のブランド グラデーションの 1 脚。 ヒーローのリボングラフィックに表示されます。単独で UI 塗りつぶしとして使用されることはありません。
- **ブランド マゼンタ** (`` — ``): グラデーションの 2 番目の区間。
- **ブランドツルニチニチソウ** (`` — ``): グラデーションの 3 番目の区間。一部の統計タイルのソフト フィルとしても使用されます。
- **ブランド ミント** (`` — ``): グラデーションの外側にあるパステル シアン — ヒーローの二次 CTA 錠剤と `stats-card-tinted` タイルに使用されます。
サーフェス
- **キャンバス** (`` — ``): デフォルトの製品 / 価格設定 / ドキュメントの背景。
- **ヘアライン/キャンバス ソフト** (`` — ``): ブランドの単一の柔らかい表面トーン — データ テーブルのヘッダー行、トグル ピル レール、およびテーブルの行間の 1 ピクセルの仕切りに使用されます。
- **キャンバス ダーク** (`` — ``): ブランドのダーク ヒーローの表面。 `hero-band-dark` および `research-band-dark` に表示されます。
- **ヘアライン** (`` — ``): ライト サーフェス上の 1 ピクセルの仕切り — テーブルの行、カード クロム、バッジの境界線。
- **ダークのヘアライン** (`` — ``): `` サーフェス上の 1 ピクセルの仕切りとバッジの背景。ブランドの半透明の暗地に白のヘアラインから事前にブレンドされています。
- **Surface Dark Soft** (`` — ``): ダークバンド カード内で使用されるわずかに明るいダーク フィル。
テキスト
- **インク** (`` — ``): ライト サーフェス上のすべての見出しと本文の段落。
- **本文** (`` — ``): セカンダリ テキスト — キャプション、テーブル セルのセカンダリ値、フッター リンク テキスト。ブランドの半透明の黒のボディ カラーを 40 % ブレンドしてあります。
- **ボディミュート** (`` — ``): ライト サーフェス上のすべて大文字のモノ眉テキスト カラーもこのトークンに基づいています。個別の「ミュート」トーンはなく、ブランドはセカンダリ テキストとキャプション テキストの一貫性を保ちます。
- **ダーク上** (`` — ``): `` の表面上のすべてのテキスト。
セマンティック
このブランドは、公の場で個別のエラー/成功パレットを維持していません。検証キューでは、コンテキストに応じて、プライマリの黒またはブランドのグラデーションが使用されます。ここでは、明示的なエラーの赤、成功の緑、または警告の黄色は文書化されていません。フレームワークのデフォルトを採用することが適切です。
ブランド グラデーション
ブランドの特徴的な装飾は、__CODEBCK_841___ → `` → `` の 3 段階のグラデーションであり、唯一の装飾クロム (ヒーロー リボン グラフィック) として適用されます。グラデーションを 1 つの統一されたオブジェクトとして扱います。単一の色にトリミングしたり、ストップの順序を変更したり、4 番目のストップを追加したりしないでください。大規模に使用されます。アイコン サイズまで縮小されることはありません。
タイポグラフィ
フォント ファミリー
2 つのファミリーがシステム全体を搭載:
1. **すべての見出し、リード段落、本文、大文字ではないボタン ラベル、およびインライン リンクのカスタム幾何学的表示はありません** (__CODEBCK_844___ として抽出されます)。重み 400 と 500 が動作ペアです。顔が太字 (700) 以上で表示されることはありません。 負の文字間隔が狭い (`-1.92 px` 64 ピクセルのディスプレイ、`-0.16 px` 16 ピクセルの本体) により、顔にわずかに凝縮された、ページ上に注がれたような雰囲気が与えられます。
2. **すべての眉毛、ボタン ラベル、テーブル ヘッダー セル、および価格表タブの、大文字のモノクロ キャプション面** (__CODEBCK_847___ として抽出)。 11 ～ 16 ピクセルでウェイト 500。常に大文字。正の文字間隔 (`0.05 – 0.55 px`)。モノラルには、ブランドの技術的な声が伝えられています。「価格」、「推論」、「モデル」、「GPU」、「GA-DEC '25」というすべてのラベルがこの面に設定されています。
階層_
|トークン |サイズ |重量 |行の高さ |文字間隔 | |
を使用します
|---|---|---|---|---|---|
| `` | 64ピクセル | 500 | 70.4ピクセル | -1.92ピクセル |ヒーローの見出し (「AI ネイティブ クラウドで次のものを構築する」)。 |
| `` | 40ピクセル | 500 | 48ピクセル | -0.8ピクセル |セクションの見出し (「Togetter AI プラットフォーム」、「Togetter AI の構築を開始」)。 |
| `` | 28ピクセル | 500 | 32.2ピクセル | -0.42ピクセル |サブセクションの見出しと統計タイルの大きな数字。 |
| `` | 22ピクセル | 500 | 25.3ピクセル | -0.22ピクセル |カードのタイトル、研究カードの見出し。 |
| `` | 18ピクセル | 400 | 23.4ピクセル | -0.18ピクセル |セクションの見出しの下に段落を置きます。 |
| `` | 18ピクセル | 500 | 23.4ピクセル | -0.18ピクセル |強調は先頭段落内に実行されます。 |
| `` | 16ピクセル | 400 | 20.8ピクセル | -0.16ピクセル |デフォルトの本文段落。 |
| `` | 16ピクセル | 500 | 20.8ピクセル | -0.16ピクセル |太字のインライン本文。 |
| `` | 14ピクセル | 400 | 19.6ピクセル | 0 |細字、フッターの補助テキスト。 |
| `` | 14ピクセル | 500 | 19.6ピクセル | 0 |太字のキャプション。 |
| `` | 16ピクセル | 500 | 16ピクセル | 0.08ピクセル |プライマリ ボタン ラベル — 大文字、モノラル。 |
| `` | 11ピクセル | 500 | 11ピクセル | 0.55ピクセル |セクションの眉毛、テーブルヘッダーのセルラベル。 |
| `` | 11ピクセル | 500 | 15.4ピクセル | 0.055ピクセル |テキストコンテキスト内のインラインタグラベル。 |
| `` | 10ピクセル | 400 | 14ピクセル | 0.05ピクセル |モノラルの細字 (コード エディターのモックアップ内)。 |
原則
- **2 つの顔のコントラストが声です。** 物語のための表示はありません。技術ラベルの場合は大文字のモノラル。決してモノラルに段落を持たせないでください。ディスプレイにボタンのラベルを表示しないでください。
- **マイナスの文字間隔は表示なしでのみ使用されます。** モノラル面では小さなプラスのトラッキングが使用されます。これを逆にするのは間違っています。
- **見出しは文と文字を区別しません。** すべての大文字の瞬間はモノフェイスに属します。すべて大文字の表示を混在させると、コントラストが濁ります。
フォントの代替に関する注意
2 つの主要な顔は独自のものです。オープンソースの代替品:
- **ディスプレイなし** — `font-feature-settings: "ss01"` を有効にした *Inter* (400 / 500) が最も近くなります。ブランドの圧縮された雰囲気を表現するために、ディスプレイ サイズで文字間隔を最大 0.6 % 狭めます。 *Geist* は 2 番目に良いオプションですが、読み取り幅がわずかに広くなります。
- _**大文字のモノラル眉** — *JetBrains Mono* または *Geist Mono* (ウェイト 500)、11 ピクセル、__CODEBCK_864___ は、追跡が `0.04em` に到達すると、ブランドの声と一致します。
レイアウト
間隔システム
- **基本単位**: 4 ピクセル。キャプチャされたほぼすべての値は 4 の倍数ですが、2 つの例外 (7.2 ピクセル、55.2 ピクセル) はギャップ乗数の導関数であり、レイアウトの決定ではありません。
- **トークン**: `` 2 px · `` 4 px · `` 8 px · `` 12 px · `` 16 px · `` 20 px · `` 24 ピクセル · `` 32 ピクセル · `` 44 ピクセル · `` 48 ピクセル · `` 55.2 ピクセル · `` 80 ピクセル.
- **セクション パディング**: マーケティング バンドはデスクトップ上で `` 80 ピクセルの上下を使用します。主人公と「研究」のダークバンドは 80 ピクセルのリズムを保ちます。価格表は__CODEBCK_879___に厳格化され、高密度データを読みやすく保ちます。
- **カード内部のパディング**: 研究カードと紹介カードは__CODEBCK_880___ 24 ピクセルの内部に配置されます。統計カード タイルは、__CODEBCK_881___ 32 ピクセルを使用して、大きな数字に余裕を与えます。
- **インライン ギャップ**: ボタン + ナビゲーション行では、兄弟間で `` 12 ピクセルが使用されます。チップ グループは__CODEBCK_883___ 8 px.
を使用します
グリッドとコンテナ
- **最大幅**: ~1280 ピクセルのデスクトップ コンテナ。それ以上には何もレンダリングされません。デスクトップでは `` 32 ピクセル、モバイルでは `` 16 ピクセルの水平方向の余白を持つコンテンツ センター。
- **列パターン**:
- リサーチ/推薦グリッド: デスクトップでは 3 アップ、モバイルでは 1 アップ。
- 統計タイル グリッド: デスクトップでは 3 アップ、モバイルでは 1 アップ。
- 記事カード グリッド: デスクトップでは 2 アップ、モバイルでは 1 アップ。
- 価格データ テーブル: 全幅、モバイル上のモデル行スタック。
- _ヒーロー: デスクトップでは 50/50 分割 (見出しが左、リボンのグラフィックが右)。上のグラフィックをモバイルに重ねて表示します。
ホワイトスペースの哲学
_表面のコントラストによってほとんどの分離が行われます。暗いバンドが終了→ 80 ピクセルの呼吸室→ 次の明るいバンドが始まります。バンド内では、見出しとリード段落が近くにあり (`` 間隔は 16 ピクセル)、その後、サポートするビジュアルまたは CTA クラスターの前に幅が広がります。価格データ テーブル内では、ブランドは行をタイトに保持しています (`` 縦方向 12 ピクセル)。テーブルはマーケティング コンポーネントというよりもシートのように見えます。
レスポンシブ戦略
#### ブレークポイント
|名前 |幅 |主な変更点 |
|---|---|---|
|モバイル | < 479px | Hero stacks; nav collapses to hamburger; all multi-col grids drop to 1-up. |
|モバイル-大 | 479–767ピクセル |モバイルと同じ。一部のテーブルでは水平スクロールが可能です。 |
|タブレット | 768–991ピクセル |記事グリッドが 2 アップに移動します。証言グリッドは、コンテナが 900 ピクセルを超える場合にのみ 3 アップのままで、それ以外の場合は 1 アップのままです。 |
|デスクトップ | 992–1279ピクセル |完全な 3 アップのリサーチ グリッド、2 アップの記事グリッド、ヒーローは 50/50 に分割されます。 |
|デスクトップ-大 | ≥ 1280 ピクセル |コンテナのキャップは 1280 ピクセル。バンドの色は端から端まで維持され、コンテンツの中心が中央になります。 |
#### タッチターゲット
_モノキャップ ボタンのラベルは 16 ピクセルに設定されています。 `` 4 ピクセルの上下と 24 ピクセルの水平パディングと組み合わせると、主錠剤は約 32 ピクセルの高さでレンダリングされます。モバイル ビューポートでは、タッチ行内の追加の垂直パディングによってボタンの高さが 44 ピクセル以上に拡張され、WCAG AAA に準拠します。円形のアイコン ボタン (`button-icon-circular`) は、すべてのビューポートで最小 44 × 44 ピクセルでレンダリングされます。
#### 戦略の崩壊
- **ナビゲーション**: デスクトップの完全なリンク行 + 黒の「サインイン」ピル + 「始める」ピル。モバイルではロゴとハンバーガーに折りたたまれます。メニューは、同じリンク リストが垂直方向に積み重ねられた完全なオーバーレイ ドロワーとして開きます。
- **ヒーロー**: デスクトップで、見出しが左 + グラデーション リボンが右 (50 / 50)。モバイルでは、見出しは小規模なリボンの上に重ねられ、下には重なりません。
- **リサーチ バンド**: デスクトップでは 4 アップのグリッドが、タブレットでは 2 アップ、モバイルでは 1 アップに減少します。カードのクロムは同じままです。
- **価格データ テーブル**: デスクトップでは全幅ですべての列が表示されます。タブレットではサブタブ行で横スクロールが可能です。モバイルでは、セル行はモデル名を価格ブロックの上に積み重ねます。
- **フッター ワードマーク バナー**: 流動的に拡大縮小します。巨大な `together.ai` ワードマークは、ビューポートに関係なく端から端まで表示されます。
__HTMLTAG_454__#### 画像の動作
- **ヒーロー リボン グラフィック**: SVG としてレンダリングされ、ヒーロー コンテナーに合わせて柔軟にスケールされます。決してトリミングしたり、再配置したりしません。
- **証言ポートレート**: 正方形または 4:5 のポートレート、上部がハードトリミングされています。グリッド全体で一貫した正方形のフレーム。
- **記事のサムネイル**: 16:9 の横長、カード上部を画像の `` コーナーのみで埋めます。
- **ロゴ バー**: 折り返しフレックス行にグレースケール SVG としてレンダリングされた顧客のロゴ。
標高と深さ
|レベル |治療 | |
を使用します
|---|---|---|
|レベル 0 — フラット |影も境界線もありません。 |明るい表面上のほとんどのカードは、影ではなくヘアラインの境界線に寄りかかっています。 |
|レベル 1 — ヘアライン | `` カード上の 1 ピクセルのソリッド ``。 |お客様の声カード、記事カード、データテーブルの行。 |
|レベル 2 — 暗い色のヘアライン | `` カード上の 1 ピクセルのソリッド ``。 |研究バンドカード、オンダークバッジ。 |
|レベル 3 — ソフト ドロップ | `rgba(1, 1, 32, 0.1) 0px 4px 10px 0px` — ブランドのダークネイビーで着色された、かろうじて認識できる影。 |フローティング要素 (チャットランチャーオーブ、表示される場合はスティッキーボトムのナビゲーション行)。 |
装飾の深さ_
- **深さとしてのグラデーション リボン**: ヒーローの 3 ストップのグラデーション リボンは、ページの唯一の真の雰囲気効果です。 ブランド パレットから離れることなく、深さを暗示するレイヤー状の半透明の形状をループします。
- **セクション深度ブレークとしてのコード エディターのモックアップ**: 白い製品バンド内の暗いコード エディターの表面は、ヒーローの極性反転を反映して、1 段階のリフトとして機能します。
- **ターミナルの深さとしてのワードマーク バナー**: 下部の巨大な `together.ai` 文字は、厳密には `` の中にありますが、__CODEBCK_899___ に向かって着色されているため、かすかなステンシルとして読み取れ、ページに最終的な「到着しました」というサインオフを与えます。
図形
境界線の半径スケール
|トークン |値 | |
を使用します
|---|---|---|
| `` | 0ピクセル |ヒーロー/リサーチフルブリードバンド。フッターのワードマーク バナー。 |
| `` | 3.25ピクセル |価格ページの少しタイトなサブタブとアウトライン ボタン。 |
| `` | 4ピクセル |ブランドの正規半径 — ボタン、バッジ、カード、データテーブルの行、統計タイル。 |
| `` | 8ピクセル | 「フルスタック クラウド」セクション内の機能タブの丸薬、大きな価格タブのコンテナ。 |
| `` | 9999ピクセル |浮遊チャットランチャー オーブ (`button-icon-circular`)。システム内で唯一の完全錠剤形状。 |
写真の幾何学
- **ヒーロー リボン**: SVG グラデーション、自由形式。アスペクト比の制約はありません。
- **顧客ロゴ**: ベクトル、折り返しフレックス行で一定の高さ (~24 ピクセル) でグレースケールでレンダリングされます。
- **証言ポートレート**: ハードエッジのコーナーを備えた 1:1 の正方形のトリミング — アバター ピルはありません。
- **記事のサムネイル**: 16:9、__CODEBCK_906___ 画像のみ上隅の半径 4 ピクセル。カード クロムは正方形のままです。
コンポーネント
ボタン
**`button-primary`** — すべての主要 CTA を運ぶ黒い錠剤。
- 背景 ``、テキスト ``、__CODEBCK_910___ で設定されたラベル (大文字のモノラル、16 ピクセル / 500 / 0.08 ピクセルのトラッキング)、形状 `` 4 ピクセル、パディング ` `。影はありません。
**`button-secondary-mint`** — ヒーローのセカンダリ CTA ピル。
- 背景__CODEBCK_914___、テキスト__CODEBCK_915___、__CODEBCK_916___と同じタイポグラフィと形状。ヒーロー コンテキストでのみ表示されます。
_**`button-secondary-white`** — 主人公の体内で__CODEBCK_918___と組み合わされた白い錠剤。
- 背景__CODEBCK_919___、テキスト__CODEBCK_920___、同じタイポグラフィと形状。常にミント ボタンまたは主ボタンの隣に配置されます。
**`button-ghost-on-dark`** — ダーク ヒーロー/リサーチの表面で使用される半透明のボタン。
- 背景__CODEBCK_922___、テキスト__CODEBCK_923___、図形__CODEBCK_924___ 4ピクセル。 ダークバンドの「続きを読む」/「発表を見る」アフォーダンスに使用されます。
**`button-outline`** — 価格設定ページおよび機能切り替え内で使用される白地に白のアウトライン ボタン。
- 背景__CODEBCK_926___、テキスト__CODEBCK_927___、1ピクセルの実線__CODEBCK_928___境界線、形状__CODEBCK_929___ 3.25ピクセル
_**`button-icon-circular`** — 各ページの右下にあるフローティング チャット ランチャー オーブ。
- 背景__CODEBCK_931___、白いアイコン、形状__CODEBCK_932___。システム内で唯一の完全に錠剤の形状。
カードとコンテナ
**`research-card`** — 「最先端の研究に基づいた」という暗い帯の 4 面グリッド カード。
- 背景__CODEBCK_934___、テキスト__CODEBCK_935___、1ピクセルのソリッド__CODEBCK_936___の境界線、パディング__CODEBCK_937___、形状__CODEBCK_938___ 4ピクセル。内部: モノ眉タグ + 表示見出し + 本文段落。
_**`testimonial-card`** — 3 枚の「AI ネイティブは Together AI 上に構築される」カード。
- 背景__CODEBCK_940___、テキスト__CODEBCK_941___、パディング__CODEBCK_942___、形状__CODEBCK_943___ 4ピクセル。内部: 1:1 ポートレートクロップ + ディスプレイMD名 + 本文引用 + モノラルキャプション統計行。
_**`article-card`** — 2 つの「Togetter AI の最新情報」記事カード。
- 背景__CODEBCK_945___、テキスト__CODEBCK_946___、パディング__CODEBCK_947___、形状__CODEBCK_948___ 4ピクセル。内部: 上部に 16:9 の画像 + モノラル眉タグ + ディスプレイMDタイトル + 本文概要 + モノラルキャプション署名欄。
**`code-editor-mockup`** — 製品バンド内の暗いコード プレビュー サーフェス。
- 背景__CODEBCK_950___、テキスト__CODEBCK_951___、本文__CODEBCK_952___、パディング__CODEBCK_953___、形状__CODEBCK_954___ 4ピクセル。ウィンドウのクロムは最小限のままです。信号機のドットやタイトル バーはありません。
_**`stats-card-tinted`** — 白い中間バンド上のパステル色の統計タイル (ミント、ピーチ、ツルニチニチソウ)。
- 背景__CODEBCK_956___(または兄弟のアクセントティント)、テキスト__CODEBCK_957___、__CODEBCK_958___の大きな数字+__CODEBCK_959___のラベル、パディング__CODEBCK_960___、形状__CODEBCK_961___ 4ピクセル
入力とフォーム
**`text-input`** — スタートアップ アクセラレータ アプリケーション フォームのフォーム入力。
- 背景__CODEBCK_963___、テキスト__CODEBCK_964___、1ピクセルの実線__CODEBCK_965___枠線、本文は__CODEBCK_966___に設定、形状__CODEBCK_967___ 4ピクセル
ナビゲーション
**`nav-bar`** — スティッキートップナビゲーション
ヒーロー バンドの - 背景 `` は、ユーザーがヒーローをスクロールして通過すると `` に切り替わります。濃い色に__CODEBCK_971___、白に_``というテキストを入力します。レイアウト: 左にロゴ、中央にリンク行、右に「営業へのお問い合わせ」+「サインイン」。
_**`nav-link`** — `nav-bar`.
内の中央にあるリンク行
- テキスト `` (またはスクロール後の__CODEBCK_976___)、__CODEBCK_977___ 400 ウェイトに設定。 兄弟間のリンクは__CODEBCK_978___ 24 ピクセルで区切られます。
**`footer`** — 下部の 4 列ナビゲーション
- 背景__CODEBCK_980___、テキスト__CODEBCK_981___、パディング__CODEBCK_982___。 `` の眉毛ラベル。 ``.
の行をリンクします
署名コンポーネント
**`hero-band-dark`** — すべての製品/マーケティング ページを開くダークネイビーのヒーロー。
- 背景__CODEBCK_986___、テキスト__CODEBCK_987___、パディング__CODEBCK_988___。 `` の見出し (文を大文字にして、すべて大文字にしないでください)。眉毛は__CODEBCK_990___。 2 列レイアウト: 左側に見出し + CTA クラスター、右側にグラデーション リボン SVG。
_**`research-band-dark`** — 「最先端の研究に基づいた」4 枚のカード グリッドを主催するダーク ネイビーのバンド。
- 背景__CODEBCK_992___、テキスト__CODEBCK_993___、パディング__CODEBCK_994___。 `` のセクション見出しとそれに続く `research-card` グリッド。
**`feature-tab-pill`** — 「フルスタック クラウド」セクション内のタブ ピル行。
- 背景__CODEBCK_998___、テキスト__CODEBCK_999___、ラベル__CODEBCK_1000___、パディング__CODEBCK_1001___、形状__CODEBCK_1002___ 8ピクセル。タブ グループは `` レール上にあります。
**`pricing-sub-tab`** — 価格設定ページのモデル テーブル内の 2 番目のタブ行 (TEXT / VISION / IMAGE / AUDIO / VIDEO)。
- 背景__CODEBCK_1005___、テキスト__CODEBCK_1006___、ラベル__CODEBCK_1007___、パディング__CODEBCK_1008___、形状__CODEBCK_1009___ 3.25ピクセル
_**`data-table-row`** — 価格サーバーレス推論テーブル内のモデル行。
- 背景__CODEBCK_1011___、テキスト__CODEBCK_1012___、1ピクセルの実線__CODEBCK_1013___下枠、パディング__CODEBCK_1014___。 内部: モデル アイコン + モデル名 (表示なし) + 入力コスト セル + 出力コスト セル。
**`data-table-header`** — テーブルのヘッダー行。
- 背景__CODEBCK_1016___、テキスト__CODEBCK_1017___、__CODEBCK_1018___（大文字モノラル）で設定、パディング__CODEBCK_1019___.
_**`toggle-pill-group`** — 微調整テーブルの上にある「標準価格/卸売価格」セグメント コントロール。
- 背景 `` レール、個々の錠剤 `` (非アクティブ) または `` (アクティブ)、__CODEBCK_1024___ のラベル、形状 `` 4 ピクセル、レール パディング``.
**`badge-neutral`** — ライト サーフェス上のインライン タグ ピル。
- 背景__CODEBCK_1028___、テキスト__CODEBCK_1029___、本文__CODEBCK_1030___、1ピクセルのソリッド__CODEBCK_1031___の境界線、パディング__CODEBCK_1032___、形状__CODEBCK_1033___ 4ピクセル
**`badge-subtle-on-dark`** — ダーク ヒーロー/研究面でのインライン タグ ピル。
- 背景__CODEBCK_1035___、テキスト__CODEBCK_1036___、本文__CODEBCK_1037___、パディング__CODEBCK_1038___、形状__CODEBCK_1039___ 4ピクセル
**`footer-wordmark-banner`** — 各ページの下部にある巨大な `together.ai` ワードマーク。
- 背景__CODEBCK_1042___、ワードマークの色__CODEBCK_1043___(薄いステンシルの色合い)、__CODEBCK_1044___で設定され、ビューポートの幅に合わせて柔軟にスケールされます。端から端まで、直角なコーナー。最終ページの承認として機能します。
例 (説明)
> 自動派生キットミラー デモンストレーション サーフェス (`scripts/derive-examples-block.mjs`)。各 `ex-*` エントリはブランドネイティブのプリミティブを参照するため、下流のコンシューマ (`/preview-design`、__CODEBCK_1048___) は同じ 10 個のサーフェスを一貫して再スキンします。 `TO_FILL` マーカーはプリミティブが欠落していることを示しています — LLM 判定パスで解決されます。
_**`ex-pricing-tier`** — デフォルトの価格帯カード。ブランドキャンバスのような柔らかい表面を備えたフィーチャーカードクロムを再利用します。
- プロパティ: `backgroundColor`、__CODEBCK_1052___、__CODEBCK_1053___、__CODEBCK_1054___、__CODEBCK_1055___
**`ex-pricing-tier-featured`** — 注目/ハイライト層 — 極性反転サーフェス (ライト モードでは暗い塗りつぶし + 明るいテキスト、ダーク モードでは明るい塗りつぶし + 暗いテキスト)。
- プロパティ: `backgroundColor`、__CODEBCK_1058___、__CODEBCK_1059___、__CODEBCK_1060___
_**`ex-product-selector`** — 含まれるもの概要カード — SaaS / B2B 業種向けに再利用されています (文字通りの製品ギャラリーではありません)。
- プロパティ: `backgroundColor`、__CODEBCK_1063___、__CODEBCK_1064___
_**`ex-cart-drawer`** — サブスクリプションの概要 — SaaS / B2B 用に再利用されました (文字通りのカートではなく、アドオンごとの品目)。
- プロパティ: `backgroundColor`、__CODEBCK_1067___、__CODEBCK_1068___、__CODEBCK_1069___
**`ex-app-shell-row`** — App Shell サンプル内のサイドバーのナビゲーション行。 アクティブな状態では、ブランドのプライマリを指標として使用します。
- プロパティ: `backgroundColor`、__CODEBCK_1072___、__CODEBCK_1073___、__CODEBCK_1074__HTMLTAG_714___
**`ex-data-table-cell`** — デフォルトのデータテーブル th + td chrome。ヘッダーにはモノキャップの眉毛タイポグラフィが使用されています。 body は body-sm を使用します。
- プロパティ: `headerBackground`、__CODEBCK_1077___、__CODEBCK_1078___、__CODEBCK_1079___、__CODEBCK_1080___
**`ex-auth-form-card`** — サインイン/サインアップ カード。テキスト入力プリミティブを内部に備えた機能カード クロムを再利用します。
- プロパティ: `backgroundColor`、__CODEBCK_1083___、__CODEBCK_1084___
_**`ex-modal-card`** — モーダル ダイアログ サーフェス — 影が高くなったフィーチャー カードと同じクロム。
- プロパティ: `backgroundColor`、__CODEBCK_1087___、__CODEBCK_1088___
**`ex-empty-state-card`** — 空の状態のイラスト フレーム。
- プロパティ: `backgroundColor`、__CODEBCK_1091___、__CODEBCK_1092___、__CODEBCK_1093___
**`ex-toast`** — トースト通知サーフェス — フィーチャー カードの形状 + 中程度の影。
- プロパティ: `backgroundColor`、__CODEBCK_1096___、__CODEBCK_1097___、__CODEBCK_1098___
推奨事項と禁止事項
実行
- すべてのプライマリ CTA に__CODEBCK_1099___ (``) を予約します。表示されるビューポートごとに 1 つの黒い錠剤 — その一貫性がブランドのコンバージョン ストーリー全体です。
- __CODEBCK_1101___ / `` ですべてのセクションの眉とボタンのラベルを設定します — 大文字のモノラル、ポジティブ トラッキング。
- ブランド グラデーション (`` → `` → ``) をヒーロー スケールでのみペアリングします。グラデーションはブランドのクロムです。アイコン サイズまで縮小することはありません。
- __CODEBCK_1106___ → `` → `` のリズムでページ画面を循環させます。暗い部分と明るい部分のコントラストは、どんな影よりも高揚感をもたらします。
- __CODEBCK_1109___ システム全体の正規のカード/ボタン半径として 4 ピクセルを使用します。単一のフローティング チャット ランチャー オーブ用に `` を予約します。
- __CODEBCK_1112___ のすべての長いページの下部にある巨大な__CODEBCK_1111___ ワードマーク バナーを、__CODEBCK_1113___ に向かって色を付けてレンダリングします。これにより、重いフッター タイトルとしてではなく、ステンシルとして読み取れるようになります。
しないでください
- 5 番目のアクセント カラーを導入しないでください。 3 ストップのグラデーション + ミントの丸薬が装飾パレット全体です。新しいアクセントがブランドをフラットにします。
- モノフェイスに本文段落を設定しないでください。モノラルはラベル専用です。長い形式のモノラルは、マーケティング コピーとしてではなく、コンソール ログとして読み取られます。
- 左揃えの表示見出しの下に本文の段落を中央揃えしないでください。ブランドは、コピー スタック内でテキスト ブロックの配置の一貫性を保ちます。
- _明るい表面のカードにソフト ドロップ シャドウをドロップしないでください。このブランドは、ヘアラインと表面のコントラストを使用して高さを表現しています。ソフト シャドウは、フローティング チャット ランチャー オーブにのみ属します。
- ブランドのグラデーションを単色の塗りつぶしに減らしたり、ストップの順序を変更したり、4 番目のストップを追加したりしないでください。グラデーションは固定オブジェクトです。
- 主ボタンの形状を完全な錠剤__CODEBCK_1114___に切り替えないでください。 ブランドの CTA の形状はわずかに丸みを帯びた長方形であり、完全な錠剤ではありません。
- すべて大文字のモノラルで見出しを設定しないでください。すべて大文字の瞬間はすべてモノフェイスに属します。すべての見出しは、大文字小文字を除いて表示に属します。