zugzbot 1.2.0 → 1.4.0

package/.opencode/oh-my-design/design-md/together.ai/DESIGN.md

@@ -1,389 +0,0 @@
----
-id: together.ai
-name: Together AI
-country: US
-category: ai
-homepage: "https://www.together.ai"
-primary_color: "#0f6fff"
-logo:
-  type: github
-  slug: togethercomputer
-verified: "2026-05-15"
-omd: "0.1"
-ds:
-  name: Together AI Brand
-  url: "https://www.together.ai/brand"
-  type: brand
-  description: Together AI's logo, color, and typography brand guidelines.
-  og_image: "https://cdn.prod.website-files.com/69654e88dce9154b5f1206dd/69a49f8243e74bf4b805d130_og-brand.jpg"
-tokens:
-  source: prose-derived
-  extracted: "2026-06-09"
-  colors:
-    primary: "#0f6fff"
-    magenta: "#ef2cc1"
-    orange: "#fc4c02"
-    dark-blue: "#010120"
-    lavender: "#bdbbff"
-    canvas: "#ffffff"
-    foreground: "#000000"
-    on-dark: "#ffffff"
-  typography:
-    family: { sans: "The Future", mono: "PP Neue Montreal Mono" }
-    display:      { size: 64, weight: 500, lineHeight: 1.05, tracking: -1.92, use: "Hero, dense blocks" }
-    section:      { size: 40, weight: 500, lineHeight: 1.20, tracking: -0.8, use: "Feature section titles" }
-    subheading:   { size: 28, weight: 500, lineHeight: 1.15, tracking: -0.42, use: "Card headings" }
-    feature-title: { size: 22, weight: 500, lineHeight: 1.15, tracking: -0.22, use: "Small feature headings" }
-    body-lg:      { size: 18, weight: 400, lineHeight: 1.30, tracking: -0.18, use: "Descriptions, sections" }
-    body:         { size: 16, weight: 400, lineHeight: 1.28, tracking: -0.16, use: "Standard body, nav, buttons" }
-    caption:      { size: 14, weight: 400, lineHeight: 1.40, use: "Metadata, descriptions" }
-    mono-label:   { size: 16, weight: 500, lineHeight: 1.00, tracking: 0.08, use: "Uppercase section labels" }
-    mono-small:   { size: 11, weight: 500, lineHeight: 1.00, tracking: 0.055, use: "Small uppercase tags" }
-  spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48 }
-  rounded: { sm: 4, md: 8, lg: 8, full: 9999 }
-  shadow:
-    subtle: "rgba(1,1,32,0.1) 0px 4px 10px"
-  components_harvested: true
-  components:
-    button-dark: { type: button, bg: "#010120", fg: "#ffffff", radius: 4, use: "Primary CTA on light surfaces" }
-    button-outline: { type: button, fg: "#000000", radius: 4, use: "Secondary actions on light surfaces" }
-    card: { type: card, bg: "#ffffff", radius: 8, use: "Container with dark-blue-tinted subtle shadow, stats numbers" }
-    badge: { type: badge, fg: "#000000", radius: 4, padding: "2px 8px", font: "16/500", use: "Compact uppercase mono tag" }
----
-
-# Design System Inspiration of Together AI
-
-## 1. Visual Theme & Atmosphere
-
-Together AI's interface is a pastel-gradient dreamscape built for enterprise AI infrastructure — a design that somehow makes GPU clusters and model inference feel light, airy, and optimistic. The hero section blooms with soft pink-blue-lavender gradients and abstract, painterly illustrations that evoke clouds and flight, establishing a visual metaphor for the "AI-Native Cloud" proposition. Against this softness, the typography cuts through with precision: "The Future" display font at 64px with aggressive negative tracking (-1.92px) creates dense, authoritative headline blocks.
-
-The design straddles two worlds: a bright, white-canvas light side where pastel gradients and stats cards create an approachable platform overview, and a dark navy universe (`#010120` — not gray-black but a deep midnight blue) where research papers and technical content live. This dual-world approach elegantly separates the "business" messaging (light, friendly, stat-driven) from the "research" messaging (dark, serious, academic).
-
-What makes Together AI distinctive is its type system. "The Future" handles all display and body text with a geometric modernist aesthetic, while "PP Neue Montreal Mono" provides uppercase labels with meticulous letter-spacing — creating a "technical infrastructure company with taste" personality. The brand accents — magenta (`#ef2cc1`) and orange (`#fc4c02`) — appear sparingly in the gradient and illustrations, never polluting the clean UI.
-
-**Key Characteristics:**
-- Soft pastel gradients (pink, blue, lavender) against pure white canvas
-- Deep midnight blue (`#010120`) for dark/research sections — not gray-black
-- Custom "The Future" font with aggressive negative letter-spacing throughout
-- PP Neue Montreal Mono for uppercase technical labels
-- Sharp geometry (4px, 8px radius) — not rounded, not pill
-- Magenta (#ef2cc1) + orange (#fc4c02) brand accents in illustrations only
-- Lavender (#bdbbff) as a soft secondary accent
-- Enterprise stats prominently displayed (2x, 60%, 90%)
-- Dark-blue-tinted shadows (rgba(1, 1, 32, 0.1))
-
-## 2. Color Palette & Roles
-
-### Primary
-- **Brand Magenta** (`#ef2cc1`): The primary brand accent — a vivid pink-magenta used in gradient illustrations and the highest-signal brand moments. Never used as UI chrome.
-- **Brand Orange** (`#fc4c02`): The secondary brand accent — a vivid orange for gradient endpoints and warm accent moments.
-- **Dark Blue** (`#010120`): The primary dark surface — a deep midnight blue-black used for research sections, footer, and dark containers. Not gray, not black — distinctly blue.
-
-### Secondary & Accent
-- **Soft Lavender** (`#bdbbff`): A gentle blue-violet used for subtle accents, secondary indicators, and soft UI highlights.
-- **Black 40** (`#00000066`): Semi-transparent black for de-emphasized overlays and secondary text.
-
-### Surface & Background
-- **Pure White** (`#ffffff`): The primary light-section page background.
-- **Dark Blue** (`#010120`): Dark-section backgrounds — research, footer, technical content.
-- **Glass Light** (`rgba(255, 255, 255, 0.12)`): Frosted glass button backgrounds on dark sections.
-- **Glass Dark** (`rgba(0, 0, 0, 0.08)`): Subtle tinted surfaces on light sections.
-
-### Neutrals & Text
-- **Pure Black** (`#000000`): Primary text on light surfaces.
-- **Pure White** (`#ffffff`): Primary text on dark surfaces.
-- **Black 8%** (`rgba(0, 0, 0, 0.08)`): Borders and subtle containment on light surfaces.
-- **White 12%** (`rgba(255, 255, 255, 0.12)`): Borders and containment on dark surfaces.
-
-### Gradient System
-- **Pastel Cloud Gradient**: Soft pink → lavender → soft blue gradients in hero illustrations. These appear in abstract, painterly forms — clouds, feathers, flowing shapes — that create visual warmth without literal meaning.
-- **Hero Gradient**: The hero background uses soft pastel tints layered over white, creating a dawn-like atmospheric effect.
-
-## 3. Typography Rules
-
-### Font Family
-- **Primary**: `The Future`, with fallback: `Arial`
-- **Monospace / Labels**: `PP Neue Montreal Mono`, with fallback: `Georgia`
-
-### Hierarchy
-
-| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
-|------|------|------|--------|-------------|----------------|-------|
-| Display / Hero | The Future | 64px (4rem) | 400–500 | 1.00–1.10 (tight) | -1.92px | Maximum impact, dense blocks |
-| Section Heading | The Future | 40px (2.5rem) | 500 | 1.20 (tight) | -0.8px | Feature section titles |
-| Sub-heading | The Future | 28px (1.75rem) | 500 | 1.15 (tight) | -0.42px | Card headings |
-| Feature Title | The Future | 22px (1.38rem) | 500 | 1.15 (tight) | -0.22px | Small feature headings |
-| Body Large | The Future | 18px (1.13rem) | 400–500 | 1.30 (tight) | -0.18px | Descriptions, sections |
-| Body / Button | The Future | 16px (1rem) | 400–500 | 1.25–1.30 | -0.16px | Standard body, nav, buttons |
-| Caption | The Future | 14px (0.88rem) | 400–500 | 1.40 | normal | Metadata, descriptions |
-| Mono Label | PP Neue Montreal Mono | 16px (1rem) | 500 | 1.00 (tight) | 0.08px | Uppercase section labels |
-| Mono Small | PP Neue Montreal Mono | 11px (0.69rem) | 500 | 1.00–1.40 | 0.055–0.08px | Small uppercase tags |
-| Mono Micro | PP Neue Montreal Mono | 10px (0.63rem) | 400 | 1.40 | 0.05px | Smallest uppercase labels |
-
-### Principles
-- **Negative tracking everywhere**: Every size of "The Future" uses negative letter-spacing (-0.16px to -1.92px), creating consistently tight, modern text.
-- **Mono for structure**: PP Neue Montreal Mono in uppercase with positive letter-spacing creates technical "label" moments that structure the page without competing with display text.
-- **Weight 500 as emphasis**: The system uses 400 (regular) and 500 (medium) — no bold. Medium weight marks headings and emphasis.
-- **Tight line-heights throughout**: Even body text uses 1.25–1.30 line-height — tighter than typical, creating a dense, information-rich feel.
-
-## 4. Component Stylings
-
-### Buttons
-
-**Glass on Dark**
-- Background: `rgba(255, 255, 255, 0.12)` (frosted glass)
-- Text: Pure White (`#ffffff`)
-- Radius: sharp (4px)
-- Opacity: 0.5
-- Hover: transparent dark overlay
-- Used on dark sections — subtle, glass-like
-
-**Dark Solid**
-- Background: Dark Blue (`#010120`) or Pure Black
-- Text: Pure White
-- Radius: sharp (4px)
-- The primary CTA on light surfaces
-
-**Outlined Light**
-- Border: `1px solid rgba(0, 0, 0, 0.08)`
-- Background: transparent or subtle glass
-- Text: Pure Black
-- Radius: sharp (4px)
-- Secondary actions on light surfaces
-
-### Cards & Containers
-- Background: Pure White or subtle glass tint
-- Border: `1px solid rgba(0, 0, 0, 0.08)` on light; `1px solid rgba(255, 255, 255, 0.12)` on dark
-- Radius: sharp (4px) for badges and small elements; comfortable (8px) for larger containers
-- Shadow: dark-blue-tinted (`rgba(1, 1, 32, 0.1) 0px 4px 10px`) — warm and subtle
-- Stats cards with large numbers prominently displayed
-
-### Badges / Tags
-- Background: `rgba(0, 0, 0, 0.04)` (light) or `rgba(255, 255, 255, 0.12)` (dark)
-- Text: Black (light) or White (dark)
-- Padding: 2px 8px (compact)
-- Radius: sharp (4px)
-- Border: `1px solid rgba(0, 0, 0, 0.08)`
-- PP Neue Montreal Mono, uppercase, 16px
-
-### Navigation
-- Clean horizontal nav on white/transparent
-- Logo: Together AI wordmark
-- Links: The Future at 16px, weight 400
-- CTA: Dark solid button
-- Hover: no text-decoration
-
-### Image Treatment
-- Abstract pastel gradient illustrations (cloud/feather forms)
-- Product UI screenshots on dark/light surfaces
-- Team photos in editorial style
-- Research paper cards with dark backgrounds
-
-### Distinctive Components
-
-**Stats Bar**
-- Large performance metrics (2x, 60%, 90%)
-- Bold display numbers
-- Short descriptive captions beneath
-- Clean horizontal layout
-
-**Mono Section Labels**
-- PP Neue Montreal Mono, uppercase, 11px, letter-spacing 0.055px
-- Used as navigational signposts throughout the page
-- Technical, structured feel
-
-**Research Section**
-- Dark Blue (#010120) background
-- White text, research paper thumbnails
-- Creates a distinct "academic" zone
-
-**Large Footer Logo**
-- "together" wordmark rendered at massive scale in the dark footer
-- Creates a brand-statement closing moment
-
-## 5. Layout Principles
-
-### Spacing System
-- Base unit: 8px
-- Scale: 1px, 2px, 4px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 44px, 48px, 80px, 100px, 120px
-- Button/badge padding: 2px 8px (compact)
-- Card internal padding: approximately 24–32px
-- Section vertical spacing: generous (80–120px)
-
-### Grid & Container
-- Max container width: approximately 1200px, centered
-- Hero: centered with pastel gradient background
-- Feature sections: multi-column card grids
-- Stats: horizontal row of metric cards
-- Research: dark full-width section
-
-### Whitespace Philosophy
-- **Optimistic breathing room**: Generous spacing between sections creates an open, inviting feel that makes enterprise AI infrastructure feel accessible.
-- **Dual atmosphere**: Light sections breathe with whitespace; dark sections are denser with content.
-- **Stats as visual anchors**: Large numbers with small captions create natural focal points.
-
-### Border Radius Scale
-- Sharp (4px): Buttons, badges, tags, small interactive elements — the primary radius
-- Comfortable (8px): Larger containers, feature cards
-
-*This is a deliberately restrained radius system — no pills, no generous rounding. The sharp geometry contrasts with the soft pastel gradients.*
-
-## 6. Depth & Elevation
-
-| Level | Treatment | Use |
-|-------|-----------|-----|
-| Flat (Level 0) | No shadow, no border | Page background, text blocks |
-| Contained (Level 1) | `1px solid rgba(0,0,0,0.08)` (light) or `rgba(255,255,255,0.12)` (dark) | Cards, badges, containers |
-| Elevated (Level 2) | `rgba(1, 1, 32, 0.1) 0px 4px 10px` | Feature cards, hover states |
-| Dark Zone (Level 3) | Dark Blue (#010120) full-width background | Research, footer, technical sections |
-
-**Shadow Philosophy**: Together AI uses a single, distinctive shadow — tinted with Dark Blue (`rgba(1, 1, 32, 0.1)`) rather than generic black. This gives elevated elements a subtle blue-ish cast that ties them to the brand's midnight-blue dark mode. The shadow is soft (10px blur, 4px offset) and always downward — creating gentle paper-hover elevation.
-
-## 7. Do's and Don'ts
-
-### Do
-- Use pastel gradients (pink/blue/lavender) for hero illustrations and decorative backgrounds
-- Use Dark Blue (#010120) for dark sections — never generic gray-black
-- Apply negative letter-spacing on all "The Future" text (scaled by size)
-- Use PP Neue Montreal Mono in uppercase for section labels and technical markers
-- Keep border-radius sharp (4px) for badges and interactive elements
-- Use the dark-blue-tinted shadow for elevation
-- Maintain the light/dark section duality — business (light) vs research (dark)
-- Show enterprise stats prominently with large display numbers
-
-### Don't
-- Don't use Brand Magenta (#ef2cc1) or Brand Orange (#fc4c02) as UI colors — they're for illustrations only
-- Don't use pill-shaped or generously rounded corners — the geometry is sharp
-- Don't use generic gray-black for dark sections — always Dark Blue (#010120)
-- Don't use positive letter-spacing on "The Future" — it's always negative
-- Don't use bold (700+) weight — 400–500 is the full range
-- Don't use warm-toned shadows — always dark-blue-tinted
-- Don't reduce section spacing below 48px — the open feeling is core
-- Don't mix in additional typefaces — "The Future" + PP Neue Montreal Mono is the pair
-
-## 8. Responsive Behavior
-
-### Breakpoints
-| Name | Width | Key Changes |
-|------|-------|-------------|
-| Mobile | <479px | Compact layout, stacked everything |
-| Large Mobile | 479–767px | Single column, hamburger nav |
-| Tablet | 768–991px | 2-column grids begin |
-| Desktop | 992px+ | Full multi-column layout |
-
-### Touch Targets
-- Buttons with adequate padding
-- Card surfaces as touch targets
-- Navigation links at comfortable 16px
-
-### Collapsing Strategy
-- **Navigation**: Collapses to hamburger on mobile
-- **Hero text**: 64px → 40px → 28px progressive scaling
-- **Stats bar**: Horizontal → stacked vertical
-- **Feature grids**: Multi-column → single column
-- **Research section**: Cards stack vertically
-
-### Image Behavior
-- Pastel illustrations scale proportionally
-- Product screenshots maintain aspect ratio
-- Team photos scale within containers
-
-## 9. Agent Prompt Guide
-
-### Quick Color Reference
-- Primary Text (light): "Pure Black (#000000)"
-- Primary Text (dark): "Pure White (#ffffff)"
-- Page Background: "Pure White (#ffffff)"
-- Dark Surface: "Dark Blue (#010120)"
-- Brand Accent 1: "Brand Magenta (#ef2cc1)"
-- Brand Accent 2: "Brand Orange (#fc4c02)"
-- Soft Accent: "Soft Lavender (#bdbbff)"
-- Border (light): "rgba(0, 0, 0, 0.08)"
-
-### Example Component Prompts
-- "Create a hero section on white with soft pastel gradients (pink → lavender → blue) as background. Headline at 64px 'The Future' weight 500, line-height 1.10, letter-spacing -1.92px. Pure Black text. Include a dark blue CTA button (#010120, 4px radius)."
-- "Design a stats card: large display number (64px, weight 500) with a small caption below (14px). White background, 8px radius, dark-blue-tinted shadow (rgba(1, 1, 32, 0.1) 0px 4px 10px)."
-- "Build a section label: PP Neue Montreal Mono, 11px, weight 500, uppercase, letter-spacing 0.055px. Black text on light, white on dark."
-- "Create a dark research section: Dark Blue (#010120) background. White text, section heading at 40px 'The Future' weight 500, letter-spacing -0.8px. Cards with rgba(255, 255, 255, 0.12) border."
-- "Design a badge: 4px radius, rgba(0, 0, 0, 0.04) background, 1px solid rgba(0, 0, 0, 0.08) border, 'The Future' 16px text. Padding: 2px 8px."
-
-### Iteration Guide
-1. Always specify negative letter-spacing for "The Future" — it's scaled by size
-2. Dark sections use #010120 (midnight blue), never generic black
-3. Shadows are always dark-blue-tinted: rgba(1, 1, 32, 0.1)
-4. Mono labels are always uppercase with positive letter-spacing
-5. Keep radius sharp (4px or 8px) — no pills, no generous rounding
-6. Pastel gradients are for decoration, not UI chrome
-
-## 10. Voice & Tone
-
-Together AI's voice is **AI-native cloud and OSS-research-positioned.** "The AI Native Cloud" — capability-driven, model-versioned. Marketing emphasizes open-weights model hosting + price-per-token transparency.
-
-| Context | Tone |
-|---|---|
-| CTA | Verb. "Start building", "Contact Sales", "Get started" |
-| Marketing | Model-listed. Hero shows MiniMax / DeepSeek / Qwen / Llama as supported |
-| Documentation | Code-first, model-spec heavy |
-| Error | Specific. "Model not available in region. Try alternate endpoint." |
-
-**Voice samples**
-- Marketing CTA: *"Start building"* / *"Contact Sales"* <!-- verified: together.ai homepage 2026-05 -->
-
-**Forbidden phrases.** "Revolutionary AI cloud". Generic OpenAI-comparison framing.
-
-## 11. Brand Narrative
-
-Together AI (legal name **Together Computer Inc.**) was founded **June 11 2022** by an unusually academic-heavy team of **four co-founders**: **Vipul Ved Prakash (Founder + CEO)**, **Ce Zhang** (ex-ETH Zurich, data-management-for-ML research), **Chris Ré** (Stanford professor; his lab produced foundational data-centric AI work), and **Percy Liang** (Stanford professor; leads Stanford's **Center for Research on Foundation Models (CRFM)**) ([Together AI — About Us](https://www.together.ai/about-us), [Vipul Ved Prakash — Wikipedia](https://en.wikipedia.org/wiki/Vipul_Ved_Prakash), [Latent Space — Cloud Intelligence at 5000 tok/s w/ Ce Zhang + Vipul Ved Prakash](https://www.latent.space/p/together)). Decentralized AI cloud positioned for OSS model hosting — Llama, DeepSeek, Mistral, Qwen, MiniMax served alongside Together's own models. **Funding ~$534M** at **$3.3B valuation** with investors including **Emergence Capital, General Catalyst, NVIDIA** ([TechCrunch — Together $20M for OSS gen-AI](https://techcrunch.com/2023/05/15/together-raises-20m-to-build-open-source-generative-ai-models/), [Tracxn — Together AI](https://tracxn.com/d/companies/togetherai/__fcIBLE0rJMeK3FAdcfzE0H41jE36bJd0FDBWalYo6cY)). Strong adoption among AI startups + research teams. The brand voice tracks this **academic-OSS-cloud** positioning — leading alternative to hyperscaler AI services on speed, cost efficiency, and deep OSS-ecosystem support.
-
-## 12. Principles
-
-1. **Open weights are first-class.** *UI implication:* model catalog leads with OSS models, not proprietary.
-2. **Sharp 4-8px radius.** *UI implication:* never pill chrome.
-3. **Pastel gradients for decoration only.** *UI implication:* never use gradients on UI chrome.
-4. **Token pricing is transparent.** *UI implication:* per-model pricing first-class on landing.
-5. **Black primary CTA.** *UI implication:* use `#000` for primary action.
-
-## 13. Personas
-
-*Personas are fictional archetypes informed by Together AI user segments (AI startup engineers, ML researchers, fine-tuning practitioners), not individual people.*
-
-**Sergey Volkov, 33, Berlin.** AI startup engineer. Together for serving fine-tuned Llama 3.
-
-**Aisha Patel, 31, San Francisco.** ML researcher. Uses Together for benchmarking OSS models.
-
-**Marcus Chen, 38, NYC.** Platform engineer. Cost-per-token transparency drove migration.
-
-## 14. States
-
-| State | Treatment |
-|---|---|
-| **Empty (no API keys)** | "Generate first API key" |
-| **Empty (no projects)** | "Try a model" with grid |
-| **Loading (inference)** | Per-token streaming |
-| **Loading (model loading)** | Cold-start indicator |
-| **Error (model)** | Specific error |
-| **Error (rate limit)** | Tier limit + upgrade |
-| **Success (generation)** | Result + share |
-| **Success (deployment)** | Endpoint URL |
-| **Skeleton (model list)** | 4px placeholders |
-| **Disabled (no quota)** | Add credits link |
-| **Loading (long task)** | Persistent progress |
-
-## 15. Motion & Easing
-
-| Token | Value | Use |
-|---|---|---|
-| `motion-instant` | 0ms | Selection |
-| `motion-fast` | 150ms | Hover |
-| `motion-standard` | 250ms | Modal, panel |
-| `motion-streaming` | continuous | Token streaming |
-
-Standard cubic-bezier; no bounce. `prefers-reduced-motion: reduce` removes hover transitions.
-
----
-
-**Verified:** 2026-05-08 (omd:migrate run 59 — Apple-tier)
-**Tier 1 sources:** together.ai home + /pricing (live DOM via playwright — **canonical 4px (not subpixel-rounded 3.33px)**: Primary `#000` Black 4px / 40px (32px header) / 16px / 16px·**500 ALL CAPS** + Light Outline `rgba(0,0,0,0.08)` + Dark-canvas Outline `rgba(255,255,255,0.12)` + pricing tab 3.25px sub-radius / 13px·500).
-**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
-**Tier 2 (Philosophy/founders/funding):** Together AI About Us, Wikipedia (Vipul Ved Prakash), Latent Space podcast (5000 tok/s), TechCrunch (2023-05 $20M), Tracxn, Clay.
-**Style ref:** `stripe`. **Conflicts unresolved:** none. **Earlier mistake reverted:** prior footer's 3.33px / 13.3px / 33px were subpixel-rounding artifacts from rem-based measurements; canonical is 4px / 16px / 40px / 16px·500.

package/.opencode/oh-my-design/design-md/together.ai/README.md

@@ -1,24 +0,0 @@
-# Together AI Inspired Design System
-
-[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/together.ai/DESIGN.md) extracted from the public [Together](https://together.ai/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
-
-## Files
-
-| File | Description |
-|------|-------------|
-| `DESIGN.md` | Complete design system documentation (9 sections) |
-| `preview.html` | Interactive design token catalog (light) |
-| `preview-dark.html` | Interactive design token catalog (dark) |
-
-
-Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/together.ai/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Together AI design language.
-
-## Preview
-
-A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
-
-### Dark Mode
-![Together AI Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/together.ai/preview-dark-screenshot.png)
-
-### Light Mode
-![Together AI Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/together.ai/preview-screenshot.png)