Design system
Brand guidelines
The living design system. Every swatch below reads the same token the site and the app render with, so this page cannot drift from what ships.
Brand
eth-blue
eth-blue-lift
eth-blue-deep
eth-blue-text
Links and data on dark
Surfaces
surface-void
surface-slab
surface-inset
surface-ridge
Signals
Never decorative. Green means something succeeded on chain — if a thing is merely pleasant, it is a brand colour, not a signal.
signal-confirmed
signal-pending
signal-reverted
Text
content-primaryThe quick brown fox jumps over the lazy dog
content-secondaryThe quick brown fox jumps over the lazy dog
content-mutedThe quick brown fox jumps over the lazy dog
content-faintThe quick brown fox jumps over the lazy dog
Type
Sarun Pro for anything a human wrote, JetBrains Mono for anything a chain produced: addresses, hashes, amounts, dates.
Sarun Pro Black 900
Sarun Pro Bold 700
Sarun Pro Medium 500
Sarun Pro Regular 400
JetBrains Mono · 0xB6BDe4fB…6da64
Sarun Pro has no 600. It steps Medium 500 to Bold 700, so font-semibold is mapped to 700 rather than synthesised.