Binonce
Binonce brand system
One system for the landing page and the app, in light and dark. Paper is what people see; night is what the chain records and stays dark in both themes. Ember marks the breach. Full rationale in DESIGN_SYSTEM.md.
Paper
bn-paper
#F3EFE6
Page
bn-paper-2
#ECE7DB
Bands
bn-line
#D8D1C2
Hairlines
bn-muted
#686358
Metadata
bn-ink-2
#3A3730
Body
bn-ink
#15140F
Headings, primary
Night
bn-night
#0E0F11
Chain world
bn-night-2
#16181B
Raised
bn-night-line
#282B30
Hairlines
bn-fog-2
#9C988D
Muted
bn-fog
#E8E4DA
Text
Signal & semantic
bn-ember
#E5431F
Signal · fills & large text
bn-ember-ink
#B2310E
Ember small text on paper
bn-ember-glow
#FF6B45
Ember on night
bn-seal
#1F7A59
Held / live
bn-seal-glow
#5EC99C
Seal on night
bn-amber
#8A570B
Warning / in progress
bn-amber-glow
#E9B44C
Amber on night
bn-info
#2C54C4
Information
Type
Display · Instrument Serif
Section lead — italic for the turn of phrase
Body large · Geist 19/1.6. Used for section intros.
Body · Geist 16/1.6
01Eyebrow · Geist Mono 12, tracked 0.14em
0xef01005FbDB2315678afecb367f032d93F642f64180aa3Buttons
Status tags
LiveIn progressPlannedBreachHeldNeutral
LiveIn progressPlannedBreach
Toasts
Example values for review only.
Highlight
One key phrase per section gets a marker stroke that sweeps in on scroll, in the same colours as text selection.
Mark
static
loop · busy state
binonce-loader.svg
Nine authorizations signed at consecutive nonces. Eight are spent spares; the first one lands. In the replay the matching nonce is always the first.
Radius & elevation
tag
panel
panel · float
hero object