268 lines
16 KiB
CSS
268 lines
16 KiB
CSS
|
/* ─────────────────────────────────────────────────────────────────────────
|
|||
|
|
* design-systems/x-ai/tokens.css
|
|||
|
|
*
|
|||
|
|
* Structured token bindings for "x-ai" — the dark-first, monospace-driven
|
|||
|
|
* brutalist minimalism of Elon Musk's AI lab. A design system that
|
|||
|
|
* communicates through absence: pure white on warm near-black, GeistMono
|
|||
|
|
* as the display voice, zero shadows, zero gradients, zero accent color.
|
|||
|
|
* Restraint as sophistication.
|
|||
|
|
*
|
|||
|
|
* Brand identity in three sentences:
|
|||
|
|
* 1. Dark-first canvas at #1f2228 (warm near-black with a subtle blue
|
|||
|
|
* undertone, NEVER pure #000000) carries pure-white text as "the
|
|||
|
|
* voice", with hierarchy expressed through opacity (100 / 70 / 50 / 30)
|
|||
|
|
* rather than hue. There is no gray middle ground.
|
|||
|
|
* 2. GeistMono runs at display sizes (up to a hero-only 320px at weight
|
|||
|
|
* 300) and as the uppercase, letter-spaced button face. universalSans
|
|||
|
|
* handles body and section headings. The monospace-as-display choice
|
|||
|
|
* is the brand: terminal aesthetic as luxury.
|
|||
|
|
* 3. Zero box-shadows, zero gradients, near-zero radii (0px default,
|
|||
|
|
* 4px occasional softening). Depth comes from opacity-based borders
|
|||
|
|
* and surface tints, not from simulated light. The single chromatic
|
|||
|
|
* exception is the keyboard focus ring (Tailwind's default blue).
|
|||
|
|
*
|
|||
|
|
* Brand-specific schema decisions (each bends a schema convention to
|
|||
|
|
* match xAI's voice rather than the cross-brand default):
|
|||
|
|
*
|
|||
|
|
* 1. `--bg` is `#1f2228`, NOT `#000000`. DESIGN.md §2 names this hue
|
|||
|
|
* explicitly: "This specific hue prevents the harsh eye strain of
|
|||
|
|
* `#000000` while maintaining deep darkness." Pure black is
|
|||
|
|
* forbidden by the brand.
|
|||
|
|
*
|
|||
|
|
* 2. `--accent` is `#ffffff`, not a chromatic color. xAI has no
|
|||
|
|
* accent palette — white IS the chromatic move. Primary CTAs render
|
|||
|
|
* with `var(--accent)` as background and `var(--accent-on)` as
|
|||
|
|
* foreground, producing the signature white-on-dark button. The
|
|||
|
|
* "≤2 accent uses per screen" lint still holds; the primary CTA and
|
|||
|
|
* the focus indicator are the only places white reverses against
|
|||
|
|
* the canvas.
|
|||
|
|
*
|
|||
|
|
* 3. `--font-display` is a GeistMono stack. Monospace AS the display
|
|||
|
|
* face is the defining aesthetic decision (DESIGN.md §3) — it
|
|||
|
|
* positions xAI not as a consumer product but as infrastructure,
|
|||
|
|
* as something built by people who live in terminals. `--font-mono`
|
|||
|
|
* aliases the same stack because GeistMono IS the monospace face
|
|||
|
|
* used for code, kbd, and tabular metrics.
|
|||
|
|
*
|
|||
|
|
* 4. The four-level foreground ramp is opacity-based (rgba 1.0 / 0.7
|
|||
|
|
* / 0.5 / 0.3), NOT a grayscale hex ramp. DESIGN.md §2 documents
|
|||
|
|
* the system literally as "white at α". Binding `--fg-2`, `--muted`,
|
|||
|
|
* and `--meta` as `rgba(255,255,255,α)` preserves the "white over
|
|||
|
|
* canvas" voice and keeps the tiers chromatically locked to the
|
|||
|
|
* single foreground color.
|
|||
|
|
*
|
|||
|
|
* 5. `--border` is `rgba(255, 255, 255, 0.1)` — DESIGN.md §2's default
|
|||
|
|
* "Border Default" alpha, NOT a solid hex. `--border-soft` drops to
|
|||
|
|
* 0.05 for inner-row separators. The 0.2 "Border Strong" tier from
|
|||
|
|
* DESIGN.md lives inline per-component (hover/active state edges).
|
|||
|
|
*
|
|||
|
|
* 6. Radii are aggressively small: 0 / 0 / 4 / 9999. DESIGN.md §5:
|
|||
|
|
* "The near-zero radius philosophy is core to the brand's brutalist
|
|||
|
|
* identity." Buttons, inputs, and cards all default to 0px;
|
|||
|
|
* `--radius-lg` softens to 4px for the rare secondary container
|
|||
|
|
* (DESIGN.md's "Subtle (4px) occasional"). `--radius-pill` stays at
|
|||
|
|
* 9999px because the schema slot requires a pill value, even though
|
|||
|
|
* xAI rarely renders one.
|
|||
|
|
*
|
|||
|
|
* 7. `--elev-raised` is literally `none`. DESIGN.md §6: "xAI rejects
|
|||
|
|
* the conventional shadow-based elevation system entirely. There
|
|||
|
|
* are no box-shadows anywhere on the site." Depth is communicated
|
|||
|
|
* through three other mechanisms documented in the same section:
|
|||
|
|
* opacity-based borders that brighten on interaction, subtle
|
|||
|
|
* background-opacity shifts (0.03 → 0.08), and the massive
|
|||
|
|
* typographic scale contrast. `--elev-ring` is kept as a hairline
|
|||
|
|
* border-as-shadow so components that target the elevation token
|
|||
|
|
* still get a visible edge.
|
|||
|
|
*
|
|||
|
|
* 8. `--focus-ring` is the ONLY chromatic exception to the otherwise
|
|||
|
|
* strictly monochromatic palette. DESIGN.md §2 names Tailwind's
|
|||
|
|
* default `--tw-ring-color` (`rgb(59, 130, 246) / 0.5`) as the
|
|||
|
|
* keyboard focus indicator. We reproduce it as a 3px halo
|
|||
|
|
* (Tailwind's `ring-2` shape) — the blue is intentional and
|
|||
|
|
* non-negotiable for a11y, even though the rest of the system is
|
|||
|
|
* achromatic.
|
|||
|
|
*
|
|||
|
|
* 9. The type scale tops out at 64px (`--text-4xl`), NOT the 320px
|
|||
|
|
* hero display DESIGN.md §3 names. 320px is a hero-only treatment,
|
|||
|
|
* not a token tier — components.html overrides `font-size` inline
|
|||
|
|
* for that one cinematic moment. Reserving `--text-4xl` at 64px
|
|||
|
|
* keeps the slot useful as the H1-equivalent ceiling for cards,
|
|||
|
|
* sections, and modals across the system. (See vercel/tokens.css
|
|||
|
|
* §6 for the same reasoning: tokens encode reusable tiers, not
|
|||
|
|
* one-off hero crops.)
|
|||
|
|
*
|
|||
|
|
* 10. `--tracking-display` stays `normal`. GeistMono at display scale
|
|||
|
|
* does NOT compress letter-spacing — the monospace grid is part of
|
|||
|
|
* the aesthetic and tightening would collapse it. The uppercase
|
|||
|
|
* button tracking (`1.4px`, DESIGN.md §4) is an interaction-specific
|
|||
|
|
* value that lives inline on `.btn` since it applies only to
|
|||
|
|
* command-line-styled labels, not display headlines.
|
|||
|
|
*
|
|||
|
|
* Source contracts:
|
|||
|
|
* - Standard token names: design-systems/_schema/tokens.schema.ts
|
|||
|
|
* - A2 fallback parity: design-systems/_schema/defaults.css
|
|||
|
|
* - Lint enforcement: apps/daemon/src/lint-artifact.ts
|
|||
|
|
*
|
|||
|
|
* Keep this file additive: never invent token names not also documented
|
|||
|
|
* in DESIGN.md or the shared schema. The GeistMono and universalSans
|
|||
|
|
* faces are referenced by name only — artifacts that render acceptably
|
|||
|
|
* fall back to the OS monospace and sans-serif stacks listed inside the
|
|||
|
|
* font-family declarations.
|
|||
|
|
* ─────────────────────────────────────────────────────────────── */
|
|||
|
|
|
|||
|
|
:root {
|
|||
|
|
/* ─── Surface ─────────────────────────────────────────────────────
|
|||
|
|
* #1f2228 is the singular canvas — warm near-black with a subtle
|
|||
|
|
* blue undertone. `--surface` is the barely-visible 0.03 white tint
|
|||
|
|
* that cards sit on; `--surface-warm` rises to 0.05 for hover and
|
|||
|
|
* elevated rows. DESIGN.md §6's elevation ramp uses both values
|
|||
|
|
* verbatim as "Surface (Level 1)" and "Surface Hover". */
|
|||
|
|
--bg: #1f2228; /* warm near-black canvas — NEVER #000 */
|
|||
|
|
--surface: rgba(255, 255, 255, 0.03); /* subtle card surface */
|
|||
|
|
--surface-warm: rgba(255, 255, 255, 0.05); /* hover / elevated tier */
|
|||
|
|
|
|||
|
|
/* ─── Foreground ──────────────────────────────────────────────────
|
|||
|
|
* Four-level opacity ramp per DESIGN.md §2. Pure white is "the
|
|||
|
|
* voice"; subsequent tiers express hierarchy by dimming rather
|
|||
|
|
* than by hue. Binding as rgba (not hex) keeps the ramp locked
|
|||
|
|
* chromatically to the single foreground color. */
|
|||
|
|
--fg: #ffffff; /* primary — headings, links, body */
|
|||
|
|
--fg-2: rgba(255, 255, 255, 0.7); /* secondary — descriptions */
|
|||
|
|
--muted: rgba(255, 255, 255, 0.5); /* tertiary — captions, timestamps */
|
|||
|
|
--meta: rgba(255, 255, 255, 0.3); /* quaternary — disabled, annotations */
|
|||
|
|
|
|||
|
|
/* ─── Border ──────────────────────────────────────────────────────
|
|||
|
|
* Opacity-based borders — barely visible, never absent. 0.1 is the
|
|||
|
|
* default card / divider edge; 0.05 is the inner-row separator
|
|||
|
|
* that should not visually compete. The 0.2 "strong" tier from
|
|||
|
|
* DESIGN.md §2 lives inline per-component (hover/active states). */
|
|||
|
|
--border: rgba(255, 255, 255, 0.1); /* default card / divider */
|
|||
|
|
--border-soft: rgba(255, 255, 255, 0.05); /* inner row separator */
|
|||
|
|
|
|||
|
|
/* ─── Accent ──────────────────────────────────────────────────────
|
|||
|
|
* White IS the accent. There is no chromatic color in xAI's
|
|||
|
|
* monochromatic palette — primary CTAs are white-on-dark.
|
|||
|
|
* `--accent-hover` dims to 0.9 alpha per DESIGN.md §4 (primary
|
|||
|
|
* button hover); `--accent-active` drops a further step. The
|
|||
|
|
* convention is REVERSED from most systems: hover dims, it does
|
|||
|
|
* not brighten. */
|
|||
|
|
--accent: #ffffff; /* the voice as bg */
|
|||
|
|
--accent-on: #1f2228; /* canvas as fg on accent */
|
|||
|
|
--accent-hover: rgba(255, 255, 255, 0.9); /* slight dimming on hover (DESIGN.md §4) */
|
|||
|
|
--accent-active: rgba(255, 255, 255, 0.8); /* deeper dim on press */
|
|||
|
|
|
|||
|
|
/* ─── Semantic ────────────────────────────────────────────────────
|
|||
|
|
* DESIGN.md §7 actively discourages colored status indicators
|
|||
|
|
* ("Don't use colored status indicators unless absolutely
|
|||
|
|
* necessary — keep everything in the white/dark spectrum"). We
|
|||
|
|
* inherit schema defaults so the slots remain useful for the rare
|
|||
|
|
* cases where status truly must render chromatically — but
|
|||
|
|
* components should prefer monochrome cues (opacity, weight). */
|
|||
|
|
--success: #16a34a;
|
|||
|
|
--warn: #eab308;
|
|||
|
|
--danger: #dc2626;
|
|||
|
|
|
|||
|
|
/* ─── Typography — fonts ──────────────────────────────────────────
|
|||
|
|
* GeistMono is the brand's defining typographic decision: a
|
|||
|
|
* monospace face used at display sizes. universalSans handles
|
|||
|
|
* body and section headings. `--font-mono` aliases the display
|
|||
|
|
* stack because GeistMono IS the monospace face — there is no
|
|||
|
|
* separate code typeface. */
|
|||
|
|
--font-display: "GeistMono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
|
|||
|
|
--font-body: "universalSans", "universalSans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|||
|
|
--font-mono: "GeistMono", ui-monospace, "SF Mono", "Roboto Mono", Menlo, Monaco, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;
|
|||
|
|
|
|||
|
|
/* Type scale — DESIGN.md §3 hierarchy table.
|
|||
|
|
* The 320px display hero is intentionally NOT a token tier;
|
|||
|
|
* components.html overrides `font-size` inline for that one
|
|||
|
|
* cinematic treatment. `--text-4xl` instead caps at 64px, the
|
|||
|
|
* realistic ceiling for marketing H1s across cards/sections.
|
|||
|
|
* `--text-2xl` (30px) matches DESIGN.md's "Section Heading" tier. */
|
|||
|
|
--text-xs: 12px; /* small / meta — timestamps, footnotes */
|
|||
|
|
--text-sm: 14px; /* button label / caption */
|
|||
|
|
--text-base: 16px; /* body — universalSans 1.5 */
|
|||
|
|
--text-lg: 20px; /* body large / introductions */
|
|||
|
|
--text-xl: 24px; /* card title */
|
|||
|
|
--text-2xl: 30px; /* section heading — DESIGN.md §3 */
|
|||
|
|
--text-3xl: 40px; /* H1 */
|
|||
|
|
--text-4xl: 64px; /* display ceiling (320px hero is inline-only) */
|
|||
|
|
|
|||
|
|
/* Leading + tracking.
|
|||
|
|
* `--leading-body: 1.5` is universalSans body (DESIGN.md §3).
|
|||
|
|
* `--leading-tight: 1.2` matches the 30px section heading.
|
|||
|
|
* `--tracking-display: normal` because GeistMono at scale does
|
|||
|
|
* NOT compress letter-spacing — the monospace grid is the
|
|||
|
|
* aesthetic and tightening would collapse it. */
|
|||
|
|
--leading-body: 1.5;
|
|||
|
|
--leading-tight: 1.2;
|
|||
|
|
--tracking-display: normal;
|
|||
|
|
|
|||
|
|
/* ─── Spacing ─────────────────────────────────────────────────────
|
|||
|
|
* DESIGN.md §5 documents a deliberately sparse scale concentrated
|
|||
|
|
* at the small end: 4 / 8 / 24 / 48. We bind the full schema slot
|
|||
|
|
* range — components reach for 1/2/6/12 most often; the
|
|||
|
|
* intermediate tiers are preserved for edge cases where a
|
|||
|
|
* narrower step is structurally required. */
|
|||
|
|
--space-1: 4px;
|
|||
|
|
--space-2: 8px;
|
|||
|
|
--space-3: 12px;
|
|||
|
|
--space-4: 16px;
|
|||
|
|
--space-5: 20px;
|
|||
|
|
--space-6: 24px;
|
|||
|
|
--space-8: 32px;
|
|||
|
|
--space-12: 48px;
|
|||
|
|
|
|||
|
|
/* Section rhythm — DESIGN.md §5: "generous section padding 48px–
|
|||
|
|
* 96px". 96 desktop / 64 tablet / 48 phone preserves the
|
|||
|
|
* cinematic emptiness that is itself a design statement; the
|
|||
|
|
* absence of decoration means whitespace is the primary structural
|
|||
|
|
* tool. */
|
|||
|
|
--section-y-desktop: 96px;
|
|||
|
|
--section-y-tablet: 64px;
|
|||
|
|
--section-y-phone: 48px;
|
|||
|
|
|
|||
|
|
/* ─── Radius ──────────────────────────────────────────────────────
|
|||
|
|
* Brutalist precision. DESIGN.md §5: "Sharp (0px) primary
|
|||
|
|
* treatment for buttons, cards, inputs — the default. Subtle (4px)
|
|||
|
|
* occasional softening on secondary containers." `--radius-pill`
|
|||
|
|
* stays at 9999px because the schema slot requires a pill value,
|
|||
|
|
* even though xAI rarely renders one. */
|
|||
|
|
--radius-sm: 0px; /* buttons, inputs — sharp */
|
|||
|
|
--radius-md: 0px; /* cards — sharp */
|
|||
|
|
--radius-lg: 4px; /* occasional secondary softening */
|
|||
|
|
--radius-pill: 9999px; /* schema-required slot */
|
|||
|
|
|
|||
|
|
/* ─── Elevation ───────────────────────────────────────────────────
|
|||
|
|
* Shadow-free system per DESIGN.md §6: "xAI rejects the
|
|||
|
|
* conventional shadow-based elevation system entirely. There are
|
|||
|
|
* no box-shadows anywhere on the site." `--elev-raised` is
|
|||
|
|
* literally `none`; depth comes from opacity-based borders and
|
|||
|
|
* background tints. `--elev-ring` preserves the hairline edge for
|
|||
|
|
* components that read the elevation token. */
|
|||
|
|
--elev-flat: none;
|
|||
|
|
--elev-ring: 0 0 0 1px var(--border);
|
|||
|
|
--elev-raised: none;
|
|||
|
|
|
|||
|
|
/* ─── Focus ───────────────────────────────────────────────────────
|
|||
|
|
* The single chromatic exception. Tailwind's default
|
|||
|
|
* `--tw-ring-color` (DESIGN.md §2 "Ring Blue") at 50% opacity, as
|
|||
|
|
* a 3px halo matching the `ring-2` shape xAI uses for keyboard
|
|||
|
|
* accessibility focus states. Non-negotiable for a11y. */
|
|||
|
|
--focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.5);
|
|||
|
|
|
|||
|
|
/* ─── Motion ──────────────────────────────────────────────────────
|
|||
|
|
* Schema defaults. xAI does not choreograph — transitions are
|
|||
|
|
* short, purposeful, utilitarian. No long-form entrances. */
|
|||
|
|
--motion-fast: 150ms;
|
|||
|
|
--motion-base: 200ms;
|
|||
|
|
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
|||
|
|
|
|||
|
|
/* ─── Layout ──────────────────────────────────────────────────────
|
|||
|
|
* DESIGN.md §5: "Max content width: approximately 1200px." Gutters
|
|||
|
|
* narrow on mobile so the dense-but-deliberate vertical rhythm
|
|||
|
|
* keeps reading even when the dark canvas reaches the edge. */
|
|||
|
|
--container-max: 1200px;
|
|||
|
|
--container-gutter-desktop: 24px;
|
|||
|
|
--container-gutter-tablet: 16px;
|
|||
|
|
--container-gutter-phone: 12px;
|
|||
|
|
}
|