The Internet
of Chains
Warm pumice surfaces contain volcanic orange, compressed architectural type, and sparingly placed violet and sulfur accents.
Color system
Seven observed colors. Orange commands action; violet stays decorative and sulfur marks compact labels.
Compressed voice
PP Neue Corp Compact Ultrabold supplies the source display voice; Bebas Neue is used here as an open substitute. DM Sans remains medium-weight throughout body UI.
Bebas Neue · source: PP Neue Corp Compact Ultrabold
DM Sans · weight 500
display
96px / .95 / .02em
heading
56px / .94 / .02em
heading-sm
32px / 1 / .02em
subheading
30px / 1.11 / 500
body
16px / 1.55 / 500
body-sm
14px / 1.25 / 500
Rhythm & shape
A broad sixteen-step spacing scale supports dense labels and architectural display moments. Forty-pixel cards and exaggerated pills define the silhouette.
Spacing scale
4
8
9
10
12
16
18
20
24
32
40
48
56
64
80
92
Radius scale
16px
20px
24px
32px
40px
100px
800px
Flat hierarchy
Solid surface changes, borders, and scale carry depth across the system.
#e2e2df
#f7f6f2
#070607
Contained heat
Rounded containers keep the loud display type and molten orange deliberate rather than chaotic.
Primary and ghost actions
pill / 12×24
Stats row
40px radius / 40px pad
Content card
limestone / sulfur
One network, many worlds
Large compressed titles stay structural above concise DM Sans copy.
Dark input section
100px input radius
Usage rules
Concrete constraints drawn from the Caldera reference.
Preserve
- Use Pumice as the broad page canvas.
- Set structural headings at 48px or larger.
- Keep DM Sans body copy at weight 500.
- Reserve Ember for primary actions and key cards.
Avoid
- Using Plasma Violet for controls or body text.
- Adding extra chromatic accents beyond the three observed hues.
- Compressing the 40px card padding.
- Replacing compact display type with a generic sans.