Blackalgo

Dark-first tokenized canvas — `#01010d` primary background paired with `#040410` deep variant and `#ededf8` near-white foreground (the dominant text token at 2876 measured occurrences). Cool periwinkle support tones `#e9e9fb`, `#c9cafd` for tinted panels and frosted overlays. Dual brand-tier accent: `#ff587a` (coral pink) and `#5fffd7` (mint cyan), each appearing only as pivot signals — surface area combined < 1%. The CSS variable vocabulary is Radix-style: `--text-{loud,default,muted,faint,disabled}` 5-tier descender (alpha ff → b8 → a3 → 7a → 52), `--border-{loud,default,muted,disabled}` 4-tier (alpha 29 → 1f → 14 → 0d), `--accent-1` through `--accent-12` 12-step alpha scale (05/0a/0d/0f/14/1f/29/52/66/a3/e0/ff).

• Near-white `#ededf8` text handling ~2876 measured surface occurrences via `--text-loud` — dominant reading layer
• Background pair `#01010d` (page) + `#040410` (deep panel), maintaining 19:1+ contrast with `#ededf8`
• Cool periwinkle support `#e9e9fb` / `#c9cafd` for tinted overlays and frosted glass surfaces
• Coral `#ff587a` reserved for pivot signals, hover accents — never as CTA fill
• Mint `#5fffd7` reserved for active state highlights, secondary pivot — never as background

linear-gradient(rgba(235, 234, 251, 0) 25%, rgba(235, 234, 251, 0.05) 65%, rgba(235, 234, 251, 0) 95%) — single-pass light beam
linear-gradient(92deg, rgb(208, 206, 253) 0%, rgb(158, 183, 248) 50%, rgb(210, 236, 249) 100%) — pastel lavender→periwinkle→sky display gradient
linear-gradient(270deg, rgba(5, 26, 34, 0.12) 35%, rgba(0, 255, 213, 0.12) 100%) — mint accent edge fade
radial-gradient(50% 50%, color(xyz-d65 0.367 0.28 1.054 / 0.059), rgba(1, 1, 14, 0) 85%) — modern colorspace atmospheric pass
linear-gradient(rgba(237, 236, 249, 0.96), rgba(237, 237, 249, 0.77)) — frosted glass card overlay

• Primary family: TWK Lausanne (prose, headings, UI). Counterpart family: GeistMono (numerics, inline code labels, version pills).
• Weight ladder: 300 (light display) / 350 (custom in-between, deliberate display register) / 400 (reading body) / 500 (emphasis + GeistMono caps). The 350 stop is the signature — do not substitute.
• Size scale: 10 / 13 / 15 / 16 / 32 / 36 / 64 px. Display headings extend up the same scale; body and UI cluster at 13-16 px.
• Line-height pattern: tight on display (lh 36 on 32 px = 1.125, lh 52 on 36 px = 1.44, lh 68 on 64 px = 1.06); standard on body (lh 22-26 on 13-16 px); GeistMono lh 16 on 10 px (1.6).
• GeistMono signals developer affinity — version pills, status badges, inline tokens. Don't use for prose paragraphs; that flips the register.
• TWK Lausanne 350 is the display register weight — use for heading clusters and feature labels, never for body copy.

• Mixed-density rhythm — 8px (102 measured occurrences) and 16px (98) dominate; 6px (51), 12px (41), 4px (19), 2px (20) form the support scale.
• Standard scale: 2 / 4 / 6 / 8 / 10 / 12 / 14 / 16 / 18 / 20 / 22 / 24 px. Pick from scale; never freehand values.
• Container max-width set: 700 / 800 / 1140 / 1240 / 1312 px — narrow modules + wide hero rails.
• Section vertical rhythm follows the same 8/16/24 px scale × multipliers, never freehand.
• Card padding: 16-24 px on desktop, 12-16 px on mobile. Border via `--border-default` (alpha 1f) before reaching for shadow.

• Primary elevation is the alpha-tinted border — `border: 1px solid var(--border-default)` (alpha 1f) before any shadow.
• Multi-layer shadows for dimensional surfaces: 3-4 stacked rules combining inset highlight + tinted drop + outer halo.
• Inset highlight pattern (light-on-dark): `rgba(235, 234, 251, 0.04) 0px 12px 24px 0px inset, rgba(235, 234, 251, 0.04) 0px 6px 12px 0px inset`.
• Drop pattern with periwinkle tint: `rgba(218, 214, 255, 0.12) 3px 3px 6px 0px, rgba(218, 214, 255, 0.08) 1px 1px 3px 0px` — the rgb(218, 214, 255) tint is the signature.
• Hero panels add a deep blue drop: `rgba(2, 0, 28, 0.24) 0px 16px 24px -6px` plus periwinkle inset glow `rgba(208, 203, 255, 0.08) 0px 0px 32px 0px inset`.

• Radius scale 4-12 px for cards, buttons, inputs. Pill radii avoided — corners stay editorial.
• Hairline borders dominate (1px); use `--border-default` alpha tier for default surfaces, `--border-loud` for emphasis.
• Icons are monoline Lucide-style, never filled glyphs. Stroke 1.5-2 px.
• GeistMono numerics align to character grid for tabular columns.

• Primary CTA button

  background

  var(--accent-12)

  text

  #01010d

  border

  1px solid transparent

  radius

  8px

  padding

  10px 20px

  font

  TWKLausanne 500 14px / 20px

  transition

  0.2s cubic-bezier(0.6, 0.6, 0, 1) on color, background-color, border-color

  Tailwind

  Copy

  inline-flex items-center justify-center rounded-lg bg-[#ededf8] px-5 py-2.5 text-sm font-medium leading-tight text-[#01010d] transition-colors duration-200 ease-[cubic-bezier(0.6,0.6,0,1)] hover:bg-[#ededf8]/90

• Secondary ghost button

  background

  transparent

  text

  #ededf8

  border

  1px solid var(--border-default)

  radius

  8px

  padding

  10px 20px

  font

  TWKLausanne 500 14px / 20px

  hoverBackground

  var(--accent-3)

  Tailwind

  Copy

  inline-flex items-center justify-center rounded-lg border border-[#ededf81f] bg-transparent px-5 py-2.5 text-sm font-medium leading-tight text-[#ededf8] transition-colors duration-200 ease-[cubic-bezier(0.6,0.6,0,1)] hover:bg-[#ebeafa0d]

• Surface card with periwinkle shadow

  background

  var(--accent-2)

  text

  #ededf8

  border

  1px solid var(--border-muted)

  radius

  12px

  padding

  20px 24px

  shadow

  rgba(218, 214, 255, 0.12) 3px 3px 6px 0px, rgba(218, 214, 255, 0.08) 1px 1px 3px 0px

  Tailwind

  Copy

  rounded-xl border border-[#ededf814] bg-[#ebeafa0a] p-6 text-[#ededf8] shadow-[rgba(218,214,255,0.12)_3px_3px_6px_0px,rgba(218,214,255,0.08)_1px_1px_3px_0px]

• GeistMono pill

  background

  var(--accent-2)

  text

  var(--text-muted)

  border

  1px solid var(--border-muted)

  radius

  4px

  padding

  2px 6px

  font

  GeistMono 500 10px / 16px

  Tailwind

  Copy

  inline-flex items-center rounded-sm border border-[#ededf814] bg-[#ebeafa0a] px-1.5 py-0.5 font-mono text-[10px] font-medium leading-4 text-[#ededf8a3]

• Pivot signal (coral)

  text

  #ff587a

  font

  TWKLausanne 500 13px / 20px

  usage

  Hover state highlights, badges, inline pivot signals — never as CTA fill

  Tailwind

  Copy

  text-[13px] font-medium leading-5 text-[#ff587a]

• Pivot signal (mint)

  text

  #5fffd7

  font

  TWKLausanne 500 13px / 20px

  usage

  Active state highlights, secondary pivot — never as background fill

  Tailwind

  Copy

  text-[13px] font-medium leading-5 text-[#5fffd7]

• Three primary curves with non-overlapping jobs: Geist `cubic-bezier(0.6, 0.6, 0, 1)` for hover/focus, Quart `cubic-bezier(0.76, 0, 0.24, 1)` for scroll reveals, custom `linear()` with stops for sub-100ms overshoot/settle feedback.
• Duration ladder: 50 / 100 / 200 / 250 / 400 / 750 ms — never freehand timings.
• The `linear()` function with stops is reserved for fast micro-feedback (color/background-color/border-color/text-decoration-color); don't use it on transform or opacity.
• Transform-only animations stick to linear or ease-in-out; never apply Geist or Quart to transform.

• Hover states: color + background-color shift at 200ms with Geist easing — primary feedback channel.
• Focus rings inherit `--border-loud` (alpha 29) at 1-2 px; visible against dark canvas without an outer glow.
• Coral pivot signals appear inline (badges, highlight text); mint signals appear on active state. Don't combine in the same component.
• GeistMono pills act as silent metadata — never receive hover or focus treatment.
• Pivot signals never carry semantic meaning — never use coral/mint for state (success/error/warning). Reserve semantic states for separate tokens.

5-step custom set: sm 576 / md 768 / lg 996 / xl 1240 / 2xl 1536 px. The lg break at 996 (not Tailwind default 1024) is custom-tuned, suggesting a 1000-pixel-class threshold. Container max-width set (700-1312 px) provides narrow editorial rails plus a wide hero rail.

• Mobile-first authoring; lg/xl introduce columned layouts.
• Container max-width set: 700 / 800 / 1140 / 1240 / 1312 px — narrow rails for content modules, wide rail for hero.
• Section vertical rhythm shrinks ~40% on mobile.
• Atmospheric gradients render identically across breakpoints; never gate them behind md+.

• Foreground/background contrast: `#ededf8` on `#01010d` = 18:1 (AAA Large + Normal). `#ededf8b8` (--text-default alpha b8) on `#01010d` = ~13:1 (AAA). `#ededf8a3` (--text-muted) = ~10:1 (AAA). `#ededf87a` (--text-faint) = ~7:1 (AA Normal). `#ededf852` (--text-disabled) = ~4.7:1 (AA Normal pass with caveat).
• Audit accent contrasts: `#ff587a` coral on `#01010d` = 5.4:1 (AA Normal). `#5fffd7` mint on `#01010d` = 14:1 (AAA Large + Normal).
• Honor `prefers-reduced-motion` — collapse scroll choreography (750ms opacity tweens) to static when set.
• Focus rings use `--border-loud` (alpha 29) at 1-2 px; visible against #01010d without outer glow.
• Pivot accents (coral, mint) never carry semantic state — reserve semantic UI for separate tokens.
• All interactive controls keyboard-reachable; Tab + Enter parity with click on every button + link.

Blackalgo encodes its design system as CSS variables in `:root` and references them across components. Hero atmospheric background lives as a 1280×1000 webp light leak (lazy-loaded). 30 captured images, 0 preloaded fonts at runtime — TWK Lausanne and GeistMono ship through self-hosted woff2 (CORS may block @font-face inspection).

• CSS variables in `:root`: `--text-{loud,default,muted,faint,disabled}` + `--border-{loud,default,muted,disabled}` + `--accent-1` through `--accent-12` + `--icon-{loud,default,disabled}` + `--background-{black,menu,menu-item}`.
• Tailwind custom breakpoint config: `screens: { sm: '576px', md: '768px', lg: '996px', xl: '1240px', '2xl': '1536px' }`.
• Easing as a Tailwind theme extension: `transitionTimingFunction: { geist: 'cubic-bezier(0.6, 0.6, 0, 1)', quart: 'cubic-bezier(0.76, 0, 0.24, 1)', spring: 'linear(1 0%, 0.5 14.2857%, ...)' }`.
• Atmospheric gradients live as page-level background layers; modern colorspace passes use `color(xyz-d65 ...)` directly in `background-image`.

• Default to the dark-first canvas (`#01010d` ground + `#040410` deep + `#ededf8` near-white ink) for every surface unless light mode is required.
• Use TWK Lausanne for prose + GeistMono for numerics and inline code labels.
• Reserve coral (`#ff587a`) and mint (`#5fffd7`) for pivot signals and inline highlights only.
• Reference Radix-style CSS variables (`--text-loud`, `--border-default`, `--accent-3`) in components instead of hardcoded hex.
• Anchor hover transitions with Geist `cubic-bezier(0.6, 0.6, 0, 1)`, scroll reveals with Quart, sub-100ms feedback with `linear()` stops.

• Don't paint surfaces with the coral or mint accent — accents stay micro-surface (pivot + inline highlight).
• Don't use GeistMono for prose — it's a developer-trust signal, not a body typeface.
• Don't introduce a third typeface — TWK Lausanne plus GeistMono is the entire system.
• Don't substitute the 350 weight with 300 or 400 in display contexts — the custom step is the signature.
• Don't bypass Radix-style CSS variables with hardcoded hex literals in component code.

• Two typefaces only (TWK Lausanne + GeistMono) — no third family.
• Two-accent palette (`#ff587a` coral + `#5fffd7` mint) — no expansion to a chromatic accent system.
• Container max-width capped at 1312 px on the inner content rail.
• Motion duration ladder fixed: 50 / 100 / 200 / 250 / 400 / 750 ms — no freehand timings.
• Radix-style CSS variable foundation must remain the token source — do not bypass with hex literals in component code.

• Hex grep — `#01010d` ground + `#ededf8` ink dominate; `#ff587a` and `#5fffd7` appear only inline (< 1% surface combined).
• Font stack inspection — TWK Lausanne for prose, GeistMono for numerics + inline code; no third family present.
• CSS variable check — `--text-{loud,default,muted,faint,disabled}` + `--border-{loud,default,muted,disabled}` + `--accent-1` through `--accent-12` defined in `:root`.
• Easing audit — `cubic-bezier(0.6, 0.6, 0, 1)` for hover, `cubic-bezier(0.76, 0, 0.24, 1)` for scroll, `linear()` with stops for sub-100ms feedback. No fourth primary curve.
• TWK Lausanne weight check — 300, 350, 400, 500 only. Custom 350 stop must be present.
• Container max-width audit — every inner rail measures within 700-1312 px on desktop screenshots.