Brand · Twilight Blade

Twilight Blade.

One quiet surface, one accent. A dark, mono-typed system that reserves the indigo→violet→pink gradient for the single moments that matter.

// Concept

Quiet surface, single accent.

Twilight Blade earns its accent. The page is dark, structured by near-invisible borders and two type voices — Geist for body and headings, Geist Mono for labels and structural marks.

The indigo→violet→pink gradient is the single accent. It marks identity moments — the period in the wordmark, the orb behind the hero, the primary button hover — and stays out of everything else. The rest holds back so that one accent reads as deliberate.

Do
  • Use brand tokens for every color decision (var(--color-brand-*) or brandTokens.color.*).
  • Reserve the indigo→violet→pink gradient for a single accent moment per surface.
  • Keep backgrounds dark, foreground crisp, supporting text muted.
  • Use Geist for body and headings, Geist Mono for eyebrows and structural marks.
  • Compose mono labels in uppercase with letter-spacing.
  • Reuse the existing primitives in src/components/parts/.
Do not
  • Do not introduce new color literals (#xxx, rgb, rgba) outside brand tokens.
  • Do not apply box-shadow to indicate elevation — depth comes from borders.
  • Do not introduce gradients other than indigo→violet→pink.
  • Do not use Chakra UI, Emotion, or Framer Motion.
  • Do not use neon greens, yellows, oranges, or any saturated hue outside the brand tokens.
  • Do not apply background-image patterns beyond the existing tb-grain and tb-grid-overlay utilities.
// Tokens

Colors and type.

Color
  • bg#0a0a12var(--color-brand-bg)
  • fg#ffffffvar(--color-brand-fg)
  • muted#6b6b7bvar(--color-brand-muted)
  • borderrgba(255, 255, 255, 0.08)var(--color-brand-border)
  • borderStrongrgba(255, 255, 255, 0.14)var(--color-brand-border-strong)
  • orbIndigo#4f46e5var(--color-brand-orb-indigo)
  • orbViolet#8b5cf6var(--color-brand-orb-violet)
  • orbPink#ec4899var(--color-brand-orb-pink)
Type
  • sansTwilight Blade.'Geist', system-ui, sans-serifvar(--font-brand-sans)
  • monoTwilight Blade.'Geist Mono', ui-monospace, monospacevar(--font-brand-mono)
// In use

Live signature elements.

Gradient period
tokku.

The single identity accent — applied to the trailing period of the wordmark.

Eyebrow with pulse
Currently shipping

Mono uppercase label paired with a violet pulse dot for "live" sections.

Two-tier CTA
Primary actionGhost

Primary action is filled (`fg` on `bg` with hover gradient). Secondary is ghost — bordered, mono.

Diamond separator
Engineering ManagerMusic Producer

Rotated 45° violet square — separates titles or list items in mono runs.

12-col grid + Orb

The 12-column grid overlay (toggled on for this demo) and the radial Orb backdrop establish the underlying structure used by hero sections.

// Assets

Source files for AI and humans.

Files live in the public GitHub repository. Fetch them directly from the URLs below — paste into chat AIs, or import via @import url(...) for CSS use.

  • tokens.css
    Open ↗

    Brand CSS variables. Drop into any project with @import url(...) or copy the values.

    https://cdn.jsdelivr.net/gh/tokku5552/portfolio/brand/tokens.css
  • brand.md
    Open ↗

    AI-paste / fetch friendly spec. Tokens, DO / DO NOT, references — single file.

    https://cdn.jsdelivr.net/gh/tokku5552/portfolio/brand/brand.md

Source repository: https://github.com/tokku5552/portfolio

// Colophon

Set in Geist.

Type
Geist and Geist Mono, by Vercel.
Last updated
2026-04-29
License
MIT

Twilight Blade is the design system of tokku-tech.dev. It exists to keep the site coherent over time and to give AI agents a single reference to follow when generating new collateral. License: MIT.