/ Design System / Catalog
An inspired interpretation of Together AI’s design language — an AI cloud-infrastructure brand 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.
/ 01 / Color Palette
A single primary black, a three-color brand gradient drawn from orange → magenta → periwinkle, and a pastel mint accent. Surfaces alternate between bright canvas and near-black canvas-dark; hairline gray carries every divider.
/ Brand & Accent
Ink Black
#000000
Single primary CTA color.
Brand Orange
#fc4c02
First stop of the brand gradient.
Brand Magenta
#ef2cc1
Middle stop of the brand gradient.
Brand Periwinkle
#bdbbff
Last stop of the brand gradient.
Brand Mint
#c8f6f9
Hero secondary CTA + tinted stat tiles.
/ Surface
Canvas
#ffffff
Default product / pricing background.
Hairline / Canvas Soft
#ebebeb
Data-table headers, toggle rails, 1 px dividers.
Canvas Dark
#010120
Hero / research dark surface.
Hairline On Dark
#26263a
Dividers on canvas-dark surfaces.
Surface Dark Soft
#313641
Inner dark cards / ghost buttons.
/ Text
Ink
#000000
Headings and body on light surfaces.
Body
#959494
Captions, footer links, mono eyebrow text.
On Dark
#ffffff
All text on canvas-dark.
/ 02 / Typography Scale
Two faces: a custom geometric display sans (substituted with Geist) for headlines, lead paragraphs, body, and inline links; an uppercase monospace eyebrow (substituted with Geist Mono) for every section label, button, and table-header cell. Sentence-case for the display; uppercase for the mono.
/ 04 / Cards & Containers
Universally lightly rounded at 4 px with hairline borders. Surface contrast does most of the elevation work — dark cards live on dark bands; light cards live on light bands; soft shadows belong only on the floating chat-launcher orb.
/ Inference research
A note on serving long-context models with parallel speculative draft passes — placeholder body copy mirrors the brand’s research-card chrome.
Placeholder quote from a customer about the platform’s reliability — the brand keeps testimonial copy short and stat-driven.
/ AI startup · founded 2023
/ Product update
A short summary of the latest platform release — placeholder text follows the brand’s article-card chrome.
2×
Throughput placeholder
60%
Latency placeholder
90%
Cost placeholder
/ 05 / Form Elements
Inputs sit on canvas with a 1 px translucent-black hairline border. Labels are uppercase mono in body-color; helper text drops to caption size. No invented focus color — focus collapses to the ink stroke.
/ 06 / Spacing Scale
A 4 px base with two named outliers (7.2 px, 55.2 px). Marketing bands use the 80 px section token top and bottom; card interiors sit at 24 px; stat tiles open to 32 px.
/ 07 / Border Radius Scale
The canonical card / button radius is 4 px. A tighter 3.25 px appears inside pricing sub-tabs and outline buttons; 8 px shows up only inside feature-tab pills. The fully-pill 9999 px is reserved for the floating chat-launcher orb.
/ 08 / Elevation & Depth
Most light-surface cards lean on hairlines, not shadow. The single soft-drop shadow tints with the brand’s navy ink and applies only to floating affordances.
/ 09 / Signature Components
Feature-tab pills, pricing sub-tabs, the toggle-pill segmented control, and the data-table chrome. Combined, these load the brand’s technical voice into product surfaces.
| Model | Input / 1M | Output / 1M | Context |
|---|---|---|---|
| Model A | $X.XX | $X.XX | 128K |
| Model B | $X.XX | $X.XX | 200K |
| Model C | $X.XX | $X.XX | 64K |
2×
Throughput
60%
Latency reduction
90%
Cost saved
/ 10 / Brand Gradient
A three-stop gradient drawn from orange → magenta → periwinkle. It is the brand’s entire decorative system — rendered at hero scale, never reduced to icon size, never reordered, never extended with a fourth stop.
accent-orange
#fc4c02
accent-magenta
#ef2cc1
accent-periwinkle
#bdbbff
/ 11 / Responsive Behavior
A 1280 px max-width container, 5 breakpoints, and a strict "stack-don’t-scroll" policy. The brand gradient and the wordmark banner are the only edge-to-edge elements; everything else centers inside the container.
| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 479 px | Hero stacks; nav collapses to hamburger; multi-col grids drop to 1-up. |
| Mobile-Large | 479–767 px | Same as Mobile; some tables enable horizontal scroll. |
| Tablet | 768–991 px | Article grid moves to 2-up; testimonial grid 3-up only if container > 900 px. |
| Desktop | 992–1279 px | Full 3-up research grid, 2-up article grid, hero 50/50 split. |
| Desktop-Large | ≥ 1280 px | Container caps at 1280 px; bands stay edge-to-edge while content centers. |
The mono-cap button label is set at 16 px; combined with 4 px top/bottom and 24 px horizontal padding, the primary pill renders at roughly 32 px tall on desktop. On mobile, vertical padding inflates the button to ≥ 44 px — meeting WCAG AAA. The circular icon button renders at 44 × 44 px minimum at all viewports.
Three-up plan grid with the middle tier polarity-flipped. Mono uppercase tier name, display numeral price, hairline-divided feature list.
For individuals getting started.
For teams ready to ship.
For organizations operating at scale.