DESIGN SYSTEM · v1 · "1A REDACTED"

Restraint as strength.

Dark steel by default, one cyan accent, hairline structure, square corners, and a signature dither = privacy motif. This page is the living spec: toggle the theme in the nav; every value below is a CSS custom property.

01

Color

--bg
D #101418
L #F6F5F1
page
--panel
D #14191F
L #FDFCFA
alt surface
--ink
D #EDF1F4
L #0E1114
primary text
--muted
D #AEB6BF
L #4C555E
secondary text
--dim
D #78818C
L #7A828B
labels / tertiary
--accent
D #35E0E8
L #0CA8B8
the one cyan
--hair
D rgba(237,241,244,.08)
L rgba(14,17,20,.14)
hairline border
--dither-dot
D #3B4754
L #C2C9CF
privacy texture
02

Typography

GEIST (300–700) · GEIST MONO (300–600) · labels, numerals, table data
Hero
64px · 500 · −.03em · 1.02
Composable liquidity
H2
40px · 500 · −.025em · 1.15
Composable liquidity
Card title
21px · 500
Composable liquidity
Body
17px · 400 · 1.6
Composable liquidity
Data / stat
26px · mono
Composable liquidity
03

Dither = privacy

PRIVATE CELL

Confidential values render as animated ordered-dither. ditherShift is a discrete scramble.

WIPE REVEAL
Private execution

Hero phrases reveal from under a dither block via a stepped clip-path wipe.

TEXTURE SPEC
radial-gradient(
  circle at 1.5px 1.5px,
  var(--dither-dot) 38%,
  transparent 40%);
background-size: 4px 4px;
04

Motion

KEYFRAMEWHATTIMING
risetranslateY 22px → 0, fade in.7s · cubic-bezier(.2,.7,.2,1) · +.1s stagger
blinkopacity 1 → .25 (live dot)2.4s · ease-in-out · infinite
ditherShiftbackground-position jumps.9s · steps(1) · infinite
wipeclip-path inset reveal2s · steps(16) · once
shimmerbg-position 150% → −150% (steel)5s · linear · infinite
Sparing (≈4/10). Steel-shimmer + rise fall back to flat under prefers-reduced-motion.
05

Layout

shell max
1520px
app min
1240px
pad-x
48px
section
72px
radius
0 (everywhere)
live dot
6px square
row bullet
5px accent square
microbar
56 × 2px
06

Components

BUTTONS
Launch AppRequest AccessView Markets →
INDICATORS
live 68%
STATS
STAKING APR
11.20%
TVL
$96M
PERCENT SLIDER
NO ICON SYSTEM. Typographic glyphs only: → ↗ ▾ ⇅ ☀︎ ☾ + accent squares.