Skip to content

Surfaces

The theme ships two motion surfaces. Same palette, same components, same content — different visual energy.

The full Abstract Data look. Animated hexagon grid, scanline drift on the hero, holographic shimmer on code blocks, glow on H1 and active sidebar items, glitch-pulse on version chip (Round 3b).

abstractData({ motion: 'full' })

Recommended for:

  • abstractdata.io and adjacent properties
  • Marketing-flavored docs and landing pages
  • Project sites where the brand should be loud

A one-line flag flips off every animation. Same palette and fonts, no hex grid, no scanline, no shimmer, no glitch. Glow only on focus/hover.

abstractData({ motion: 'calm' })

Recommended for:

  • Long-form prose-heavy documentation
  • Client internal wikis
  • Anywhere reading volume matters more than brand swagger

HUD mode automatically collapses to Calm behavior when the user’s OS reports prefers-reduced-motion: reduce. No extra config required — the same site serves the right experience for the user.

Both surfaces work in light and dark, follow prefers-color-scheme by default, and honor the user’s manual toggle in the top bar.

DarkLight
Background#0A0A0A charcoal#FAF7F2 cream
Primary accent#00D9FF cyan#007A8E teal
Inline code#D4AF37 gold#7A1F2C burgundy
H1 underlineCyan glowBurgundy fade