@dante · AI & LLM
AI-infrastructure design language that alternates near-black hero bands with bright white research surfaces, unified by a three-stop orange-magenta-periwinkle gradient and uppercase-mono technical labels.
An AI-infrastructure platform that dresses like the tooling it sells: near-black hero bands stacked against bright white research, pricing, and docs surfaces, with no in-between greys. The single recurring piece of brand chrome is a three-stop orange-magenta-periwinkle gradient ribbon — the whole decorative system in one object. There is no other illustration language; the gradient is the brand. Type carries the second voice: a compressed display sans for narrative and an uppercase monospace for every technical label, so the surface reads serious enough for a mono tag but modern enough to keep headlines out of it.
Dual-surface, not gradient-heavy. Canvas white (#ffffff) hosts product, pricing, and testimonials; canvas-dark (#010120) opens every hero and the research band. A single hairline tone (#ebebeb) marks table headers, toggle rails, and 1px dividers; #313641 / #26263a do the same on dark. Black (#000000) is the only primary CTA colour — one black pill per viewport. The three-stop gradient (#fc4c02 → #ef2cc1 → #bdbbff) plus pastel mint (#c8f6f9) is the entire accent palette; a fifth accent flattens the brand.
Two faces carry every page. The Future (Inter as the open substitute, weights 400/500) sets headlines, leads, body, and non-caps buttons with tight negative tracking — -1.92px at 64px display down to -0.16px at 16px body — for a poured-on-the-page feel; it never goes bold. PP Neue Montreal Mono (JetBrains/Geist Mono substitute) sets every eyebrow, button label, table header, and pricing tab: weight 500, uppercase, small positive tracking (0.05–0.55px). Headlines stay sentence-case; all-caps belongs to the mono only.
4px base spacing up to an 80px section rhythm; the ~1280px container centres inside 32px desktop gutters. Cards are universally lightly rounded at 4px with hairline borders — never floating with drop shadows. Depth comes from alternating dark and light bands, not elevation: a dark band ends, 80px of air, then a white band begins. The one soft drop shadow (rgba(1,1,32,0.1) 0 4px 10px) is reserved for the floating chat-launcher orb, the only full-pill (9999px) shape in the system.
A black mono-caps pill carries every primary CTA; mint and white pills are hero-only. Research and article cards flip polarity between canvas-dark (surface-dark-soft border) and white (hairline border). Pricing tables read like a sheet — mono-caps header row on a hairline fill, tight 12px rows. Stat tiles use pastel mint/periwinkle fills. Every long page closes on the giant together.ai wordmark banner in display-xxl, tinted to hairline as a faint stencil sign-off.
Derived view rendered server-side from package tokens and components — no authored copy.
#000000#ffffff#000000#959494#999999#ebebeb#ffffff#010120#313641#26263a#ffffff#fc4c02#ef2cc1#bdbbff#c8f6f9The Future, Inter, 'Helvetica Neue', Arial, sans-serifThe Future, Inter, 'Helvetica Neue', Arial, sans-serifThe Future, Inter, 'Helvetica Neue', Arial, sans-serifThe Future, Inter, 'Helvetica Neue', Arial, sans-serif'PP Neue Montreal Mono', ui-monospace, 'SF Mono', Menlo, monospace{
"displayXxl": "64px/70.4px",
"displayXl": "40px/48px",
"displayLg": "28px/32.2px",
"displayMd": "22px/25.3px",
"bodyLg": "18px/23.4px",
"bodyMd": "16px/20.8px",
"caption": "14px/19.6px",
"monoButton": "16px/16px",
"monoEyebrow": "11px/11px",
"monoCaption": "10px/14px"
}Uppercase-mono pill CTAs. A single black pill carries every primary conversion; mint and white pills are hero-only; a translucent dark-soft ghost lives on dark bands.
Flat white field with a translucent-black hairline border and 4px radius; body text in the display sans, mono-caps label above.
Flat white article card at 4px radius with a hairline border — leans on surface contrast, never a drop shadow. Mono eyebrow, display-md title, body summary.
Inline tag pill — hairline neutral on light surfaces, surface-dark-soft fill on dark hero and research bands.
Display-sans hierarchy at weight 500 with tight negative tracking — sentence-case always; every all-caps moment belongs to the mono eyebrow.
Quiet inline links in the display sans — underline on hover on light surfaces; white on canvas-dark bands.
Near-black hero band with a 64px sentence-case headline, mono eyebrow, and the three-stop orange-magenta-periwinkle gradient ribbon as the sole decorative chrome.
Sticky nav that rides canvas-dark over the hero and flips to white on scroll — logo left, link row centre, black sign-in pill right.
White 4-column footer with mono-caps section labels, closed by the massive together.ai wordmark banner tinted toward hairline as a faint stencil sign-off.
Pastel-tinted stat tile — mint fill, big display-xl number, mono-caps eyebrow label — breaking up the white middle band.
Testimonial card on white — 1:1 hard-cropped portrait, display-md name, body quote, mono-caps stat caption. Flat, hairline-bordered.
Pricing sub-tab / segmented pill row — mono-caps labels on a hairline rail; active pill flips to solid black.
Square 4px-cornered avatar — hard-cropped like the testimonial portraits; no round pill. Initials or image.
Feature-tab pill row inside the 'Full-stack cloud' section — body-md-strong labels on a hairline rail at 8px radius.
An AI-infrastructure platform that dresses like the tooling it sells: near-black hero bands stacked against bright white research, pricing, and docs surfaces, with no in-between greys. The single recurring piece of brand chrome is a three-stop orange-magenta-periwinkle gradient ribbon — the whole decorative system in one object. There is no other illustration language; the gradient is the brand. Type carries the second voice: a compressed display sans for narrative and an uppercase monospace for every technical label, so the surface reads serious enough for a mono tag but modern enough to keep headlines out of it.
Dual-surface, not gradient-heavy. Canvas white (#ffffff) hosts product, pricing, and testimonials; canvas-dark (#010120) opens every hero and the research band. A single hairline tone (#ebebeb) marks table headers, toggle rails, and 1px dividers; #313641 / #26263a do the same on dark. Black (#000000) is the only primary CTA colour — one black pill per viewport. The three-stop gradient (#fc4c02 → #ef2cc1 → #bdbbff) plus pastel mint (#c8f6f9) is the entire accent palette; a fifth accent flattens the brand.
Two faces carry every page. The Future (Inter as the open substitute, weights 400/500) sets headlines, leads, body, and non-caps buttons with tight negative tracking — -1.92px at 64px display down to -0.16px at 16px body — for a poured-on-the-page feel; it never goes bold. PP Neue Montreal Mono (JetBrains/Geist Mono substitute) sets every eyebrow, button label, table header, and pricing tab: weight 500, uppercase, small positive tracking (0.05–0.55px). Headlines stay sentence-case; all-caps belongs to the mono only.
4px base spacing up to an 80px section rhythm; the ~1280px container centres inside 32px desktop gutters. Cards are universally lightly rounded at 4px with hairline borders — never floating with drop shadows. Depth comes from alternating dark and light bands, not elevation: a dark band ends, 80px of air, then a white band begins. The one soft drop shadow (rgba(1,1,32,0.1) 0 4px 10px) is reserved for the floating chat-launcher orb, the only full-pill (9999px) shape in the system.
A black mono-caps pill carries every primary CTA; mint and white pills are hero-only. Research and article cards flip polarity between canvas-dark (surface-dark-soft border) and white (hairline border). Pricing tables read like a sheet — mono-caps header row on a hairline fill, tight 12px rows. Stat tiles use pastel mint/periwinkle fills. Every long page closes on the giant together.ai wordmark banner in display-xxl, tinted to hairline as a faint stencil sign-off.
DESIGN.mdtext/markdownSKILL.mdtext/markdowntokens/colors.jsonapplication/jsontokens/typography.jsonapplication/jsontokens/components.jsonapplication/jsonadapters/tokens.csstext/cssadapters/html/index.htmltext/htmladapters/html/styles.csstext/css