Variant — Design System Reference

1. Visual Theme & Atmosphere

Variant is “endless designs for your ideas — just scroll,” and the homepage is built to stage exactly that: a dark editorial canvas (rgb(34, 34, 34)) on which a right-hand grid of dashed-outline cards will fill with generated variations as the user scrolls. The left column holds the entire brand — a small pixel-grid glyph, a wordmark in the house display face, a two-sentence manifesto set in a custom warm off-white (rgb(240, 237, 229)), two discreet chrome buttons, and a prompt input pinned to the bottom. The tone is quietly cinematic. Nothing in the composition competes with the content that will stream in from the right. Typography does emotional work — a condensed “Variant Neue Display” for headlines, a “Variant Neue Text” for body — while the color system is strictly monochromatic grays plus warm cream ink, with blues and corals reserved entirely for application-state chrome the user rarely sees. This is a product homepage that behaves like a portfolio: most of the design effort is in restraint.

2. Color Palette & Roles

Foundation (the monochrome frame)

• rgb(34, 34, 34) — page canvas (--color-gray-dark) — an off-black editorial charcoal
• rgb(7, 7, 6) — button surface / deeper frame (.app container) — nearly black, very slightly warm
• rgb(30, 30, 28) — homepage input container — a step above the page dark, warm-toned
• rgb(240, 237, 229) — cream ink (--color-white equivalent via brand) — used for all body/heading text
• rgb(255, 255, 255) — pure white, reserved for absolute-contrast moments (body default, before override)

Accent — present in design tokens, absent from the homepage hero

• #2688f9 / #3a86ff / #3291ff — a trio of primary/secondary/tertiary blues (product UI only)
• rgb(59, 130, 246) / rgb(37, 99, 235) — accent + brand blue (product UI)
• rgb(248, 113, 113) — coral accent (billing / past-due states)
• rgba(223, 99, 78, *) — the “past due” family (error text, backdrop, hover bg, border, modal bg)
• red, green, yellow, blue — CSS-named semantic slots (success/error/warning/info)

The transparency ladder — the system’s real vocabulary

• A full rgba(255, 255, 255, 0.03 → 0.90) ramp (--color-white-03 through --color-white-90) and a mirror rgba(0, 0, 0, *) ramp
• This ramp is the primary depth vocabulary: almost every border, divider, and hover state is expressed as a white-on-black percentage rather than as a separate grey value

Supporting grays

• #222222 dark / #363636 medium / #dadada light / #ccc lighter — named, but used sparingly

The palette is disciplined: a black-ink frame, a cream-paper text color, and a whisper of blue/coral only when the app’s state demands it. The homepage itself reads as two colors (charcoal + cream) enriched by ~15 gradations of transparency.

3. Typography Rules

Typefaces (all proprietary)

• Variant Neue Display — condensed display face, used for H1 (“Endless designs for your ideas, just scroll.”)
• Variant Neue Text — body face, used for paragraphs, buttons, and inline <Variant> brand mentions
• Inter — fallback only, never the designed default

Scale

Principles

• Weight locked at 400. Hierarchy comes from face (Display vs Text), size, and tracking — not from bold/light contrast.
• Positive tracking on every tier. H1 +0.32px, P +0.28px, Button +0.22px — a consistent ~1% wider-than-default. This makes the condensed display feel open and the body copy feel composed.
• Italic as a stylistic device, not an emphasis tool. The hero headline sets “just scroll.” in italic serif/italic display — a deliberate typographic gesture that signals product voice, not syntactic emphasis.
• Button type is tiny. 11px with +0.22px tracking, line-height equal to font-size (compression of 0) — buttons read as labels, not as affordances.

What’s absent: no webfont bold, no sans-serif display alternative, no rounded/decorative face. The two-family system (Display + Text) is the whole palette.

4. Component Stylings

Primary button — e.g. “Sign up / Sign in”

• Background: rgb(7, 7, 6) (slightly-warmer-than-black)
• Text: rgb(240, 237, 229) (cream)
• Border: rgba(255, 255, 255, 0.1) — a 10% white hairline, the house bordering style
• No shadow. No transform on hover (hover is null in the extracted data for the suggestion button — the button doesn’t respond visually until focus)
• Focus: adds native rgb(0, 95, 204) auto 1px outline

Ghost / chrome button — e.g. the “+” icon in the homepage input

• Background: transparent
• Text: rgba(255, 255, 255, 0.5) — 50% white (soft)
• Border: rgba(255, 255, 255, 0.5) matching
• Hover: background becomes rgba(255, 255, 255, 0.07) — a 7% white wash, the text and border don’t change
• The hover pattern here — bg darkens by ~7%, text holds still — is Variant’s signature interaction grammar

Homepage input

• Container background: rgb(30, 30, 28) (warmer than the page)
• Border: rgba(255, 255, 255, 0.1) (same 10% white as buttons)
• Inline action icons (+, @, send) sit at 50% white, hover to 7% white bg

Dashed grid cards (the variation slots)

• Stroke: dashed rgba(255, 255, 255, 0.1) (implied from the extracted palette — the 10% white is the house divider)
• Corners: 6px or 8px (the only two border-radii in the extracted system)
• Content: empty until scroll fills them; each card eventually holds a rendered design

Border radii

• 12px (--border-radius token — base)
• 6px and 8px (actual usage on buttons/cards)

Shadows — none in the extracted system. Depth is entirely a percentage of white.

5. Layout Principles

• Two-column, asymmetric. Left column: ~240–300px fixed brand + controls rail. Right column: flex-fill grid of dashed variation tiles (2–3 columns depending on width).
• Max content width. --max-width: 1100px — a conservative editorial width that prevents the variation grid from feeling infinite.
• Bottom-pinned input. The homepage prompt sits at the bottom of the left rail, inside a warm-toned container — a “footer” in visual hierarchy but a primary action in behaviour.
• Breakpoints: 600, 764, 900, 932, 980. An unusually dense cluster between 900 and 980 suggests the layout has a specific treatment for laptop-class widths (likely the point where the 2-column fold collapses to 1).
• Global body/main/section { padding: 0, margin: 0 } — all spacing is delegated to inner containers, never to global resets.

Z-index layer system (from custom properties)

• --z-panel, --z-sidebar: 2000
• --z-chat-topbar: 2005
• --z-detail-view: 2010
• --z-options-menu: 2020
• --z-chat-topbar-left: 2025
• --z-sidemodel: 2050
• --z-stylemodal: 2100

A 100-point band starting at 2000 — tightly choreographed, no ad-hoc values. This is a product built expecting many overlapping surfaces.

6. Depth & Elevation

Variant communicates depth through warmth and transparency, not through shadow:

• Canvas rgb(34, 34, 34) → app container rgb(7, 7, 6) → input container rgb(30, 30, 28) — three closely-spaced dark surfaces where the depth cue is a 3–30 point shift in luminance and a ~2° shift in warmth. The page literally feels like paper-on-paper but in the dark register.
• Borders are almost always rgba(255, 255, 255, 0.1) — a 10% white hairline that registers as “the edge of something” without drawing attention to itself.
• There are no box-shadows in the extracted system. This is deliberate — shadows on a near-black page collapse to invisible or require heavy gradients that would conflict with the editorial tone.

7. Do’s and Don’ts

Do

• Use rgb(34, 34, 34) as the page canvas — pure black kills the editorial warmth.
• Pair with rgb(240, 237, 229) (cream) for text — never pure white on this canvas.
• Express borders and dividers as rgba(255, 255, 255, 0.1). If you need a softer line, drop to 0.05; if you need a stronger one, go to 0.15. Keep the ramp consistent.
• Use the rgba(255, 255, 255, 0.07) wash as the hover state for ghost buttons — the number is precise.
• Set all body and heading type at weight 400 in the Variant Neue pair, with slight positive tracking (+0.2px to +0.3px).
• Reserve blues and corals for product chrome (billing states, error states, primary action) — never for marketing/brand surfaces.
• Let italic serve as a stylistic gesture in headlines (“just scroll.”) — it’s not italicized for emphasis, it’s italicized for voice.

Don’t

• Don’t add drop-shadows — the palette has no room for them and the editorial mood rejects them.
• Don’t introduce new blues or accent colors outside the existing token list. The --color-primary-blue / --color-secondary-blue / --color-tertiary-blue trio is deliberate; don’t mint a fourth.
• Don’t use bold weights to create hierarchy. Switch face (Display ↔ Text) or scale up/down instead.
• Don’t apply button hover transforms (scale, translate) — Variant’s interactions are pure tonal shifts.
• Don’t set body text in pure white #ffffff. The cream rgb(240, 237, 229) is load-bearing for the brand warmth.
• Don’t use border-radii larger than 12px. The card/chip language is subtle rectilinear, not pill.

8. Responsive Behavior

Breakpoints are dense — 600 / 764 / 900 / 932 / 980 — with the 900/932/980 triplet suggesting very specific treatments around laptop-class widths. The most likely layout flow:

• <600px — single column, brand stack on top, dashed grid beneath, input pinned to bottom of viewport
• 600–900px — still single-column but with wider gutters; the variation grid is 1–2 cards wide
• 900–980px — the tipping point where the two-column layout engages (left rail pins to the side, variation grid fills the remainder)
• >980px — the full desktop layout with the 1100px max-width constraining the grid

The input container and buttons carry their sizes through every breakpoint — type does not compress. This is a design that assumes a pointer + keyboard first and treats mobile as a graceful-degradation case.

9. Agent Prompt Guide

Build a UI that matches Variant’s design language.

Set the canvas to rgb(34, 34, 34) (warm charcoal — never pure black) and body ink to rgb(240, 237, 229) (cream — never pure white). Use Variant Neue Display for headlines (32px, weight 400, +0.32px tracking — italic permitted as a stylistic flourish) and Variant Neue Text for body (14px, weight 400, +0.28px tracking) and buttons (11px, weight 400, +0.22px tracking, line-height = font-size). Hold every weight at 400; hierarchy comes from face + size + tracking. Primary buttons are rgb(7, 7, 6) background, rgb(240, 237, 229) text, rgba(255, 255, 255, 0.1) border, no shadow, no transform. Ghost buttons are transparent with rgba(255, 255, 255, 0.5) text and border; hover adds a rgba(255, 255, 255, 0.07) background wash — text and border don’t change. Inputs sit in a warm rgb(30, 30, 28) container with the same 10% white border. Use rgba(255, 255, 255, 0.1) for every divider, hairline, and card edge — it’s the house stroke. Reserve the token blues (#2688f9, #3a86ff, #3291ff) and corals (rgba(223, 99, 78, *)) strictly for product states (primary action, billing, error) — never for landing-page chrome. Corners are 6px or 8px, never pills. No drop-shadows anywhere. Depth is always expressed as a percentage of white over the charcoal frame.

Generated by Sparkbites — extracted from live CSS analysis