consensor design
Use the standardJ

consensor design

One standard for BlueLabs, Habitat and consensor.

1

Type

Headings in BlueLabs, one weight. Body in Inter. Every size and line height is a multiple of 4.

BlueLabs Aa 0123
44/48 · 32/36 · 16/24 · 12/20
2

Grid

Everything moves in 4px steps:

tokens.cssgrid.css
--sp-1:4px;  --sp-2:8px;
--sp-3:12px; --sp-4:16px;
--sp-6:24px; --sp-8:32px;
Rule:nearest 4px, a tie goes to the multiple of 8, under 4px is a hairline
3

Colour

One ground, one ink, one blue. Dark is the standard. Light is complete and one attribute away.

groundcardinkblue

Type

SampleTokenSize / line · face · use
Page title--type-display44/48 · BlueLabs · h1
Section--type-h232/36 · BlueLabs · h2
Card titleh316/24 in cards, 20/24 on its own · BlueLabs
Body copy--type-body16/24 · Inter · copy, table rows, lead
Interface--type-ui12/20 · Inter · nav, buttons, small print
Badge--type-badge12/12 · Inter 500 · badges, chips
0x3f…9a2--type-code-block12/20 · system mono · code, hashes, addresses

BlueLabs carries letters and numbers only; punctuation in a heading falls back to Inter 400 so the weight matches.

Grid

--sp-1 4px · hairline gaps, icon to label
--sp-2 8px · chip and button rows
--sp-3 12px · control padding
--sp-4 16px · card gaps, gutter
--sp-6 24px · card padding
--sp-8 32px · step card padding
--sp-12 48px · heading to content
--sp-16 64px · sections on a phone
--sp-22 88px · between sections

Radii: 24 cards, 16 panels, 12 panes, 8 fields and chips, pills stay pills. Controls: 36, 32, 28, 24 high.

Colour

TokenValueUse
--bg#121212Page ground
--card#1a1a1aCards, with a lighter top edge
--fg#fffHeadings, primary text
--text#cfcfcfBody
--fg2#939393Secondary text
--blue#306ff3The one accent: steps, the filled CTA, focus
--navy#17233bPrimary nav action, badges
Every colour token, live from tokens.css

Parts

Buttons
Open CoderHOURGLASSView the script first
Badges and marks
Pro/csyntaxinline codeJConsensor Coder
Field
Code
curl -fsSL https://consensor.io/install.sh | sh
SHA-256 of install.sh:d1bae348cd2c1a05a3c2349cbb228e717e7dab5deeefd20b5833bdd15877fee5
1
Numbered rows carry steps. One action per row, bold for what to click.
2
Tables carry reference: thin rule under the header, no borders, muted third column.
3
Disclosures carry the rest, closed by default.

Use the standard

Load these, in this order:
<link rel="stylesheet" href="01-consensor-dark-CANONICAL/tokens.css">
<link rel="stylesheet" href="01-consensor-dark-CANONICAL/components.css">
<link rel="stylesheet" href="01-consensor-dark-CANONICAL/light.css">
<link rel="stylesheet" href="01-consensor-dark-CANONICAL/grid.css">
<link rel="stylesheet" href="01-consensor-dark-CANONICAL/standard.css">
Then build with the install page's parts: .nav, .hero, .cards of .step, .sec with .tbl, .rows, .code and details.disc, and .foot.
One file to send: python3 -I tools/bundle.py page.html out.html inlines every stylesheet and font.

Rulings

OnOwner, 12 Oct 2026State
Name“the overall group consensor uh, design um, design full stop”consensor design
Headings“all headings to be the blue lab.otf font”BlueLabs 400
Grid“the type is 4px / that is the design styling too”4px, type and space
Style“please style off this” (the install page)This page
Buttons“tbd -- i have a bunvh of new comoantants arriving soon”Pills, for now