Design system
Signet style guide
Mark
Mark
Lockup
On dark
No canonical logo existed in the Signet repositories, so this one is drawn from the protocol’s own idea: a seal whose ring is six separate arcs. The ring is visibly not one piece, and one arc is picked out in the accent — the operator set is chosen, and no single arc is the seal.
Colour
Primary
Slate blue — trust and depth. Headings, body text, dark surfaces, primary buttons.
Accent
Sunset orange to burnt umber. CTAs, selected states, warnings. Used sparingly — it should catch the eye, not fill the page.
Neutral
Warm stone. Backgrounds, borders, secondary text — warm-tinted so it sits with the accent rather than fighting it.
Semantic
Status and feedback. Sage green for healthy, warm red for failure.
Typography
Inter · 42 / 600 / -0.03em
Page headline
Inter · 24 / 600
Section heading
Inter · 15 / 600
Subsection
Inter · 15 / 400
Body text. Signet splits the trust so you can keep the control.
Inter · 14 / 400
Secondary text for descriptions and helper copy.
JetBrains Mono · 12.5
0x1234…abcd — JetBrains Mono for addresses, keys, and code
Buttons
On light
On dark
Status
Green means healthy, orange means waiting on something, red means failing, grey means not yet known. Grey and red are kept distinct throughout: a node that has never been probed has not failed.
Data display
Active wallets
Distinct users this period.
Status
3-of-5, two can fail.
Error rate
Above the usual band.
Configuration
Copyable value
Forms
Helper text explaining what this field decides.
Feedback
Neutral
Warning
Error
Success
Nothing here yet
Motion
Reveals are driven by an IntersectionObserver, not a library: .fx rises and fades, .fx-scale also scales, and .fx-d1 through .fx-d5 stagger. Entrances that should run on load rather than on scroll use .anim-rise. Everything eases on cubic-bezier(0.22, 1, 0.36, 1), and every animation collapses to nothing under prefers-reduced-motion.
Principles
Accent sparingly
Sunset orange marks the one action on a screen that matters, plus selected and warning states. A page with three accent buttons has none.
Say what is enforced where
The single most important thing this product communicates is the difference between a rule the operators check, a rule the chain checks, and a note to yourself. Never let those three look alike.
Errors carry their cause
Show what the server actually said. A developer debugging a group has to see the message; a generic apology sends them to the logs.
Grey is not red
Never probed is not offline. Not synced is not broken. Distinguish absence from failure everywhere.
Addresses are copyable
Anything a developer might paste into a terminal gets a copy affordance, and is truncated the same way on every screen.
Motion explains, never decorates
Reveals establish reading order and progress states show real work. Nothing moves to be interesting.