igneum/docs/plans/site-ui-3.md

Site UI 3: the website and litepaper through the miner app's lens

6 October 2026. Branch site-ui-3. The audit is docs/plans/site-ui-3-audit.md; this is the design the build follows. The standard is the miner app's third redesign (docs/plans/miner-ui-3.md on branch miner-ui-3): one job per screen, one primary control, hierarchy by type not boxes, no developer text on a user surface, no n/a cells, plain state words with reasons, light and dark, phone width, nothing lost.

1. What changes and what does not

Stays	Changes
Every claim, number, date, link and feature in the audit's tick list (appendix A of the audit)	Fifteen pages each carrying their own <style> become one shared stylesheet, site/site.css, plus a short per-page block
The ledger's statuses and stated sentences, verbatim (docs/fud-ledger.md)	Copy edited to the copy law where it is not a ledger sentence or a measured figure
The live pages read /api/live, /api/stats, /api/supply, /api/explorer	The two canvas scenes (home, live) become one module, site/live-dag.js, a real DAG view
The nav's pages and the footer's links	Nav and footer rebuilt once in site/partials/, same links, one visual system
Dark by default	Light mode on every page (today only the litepaper has one, and it is light by default: inverted against the rest of the site)

2. The design system (site/site.css)

One file, loaded by every page from the head partial. Tokens first, then type, then the six components every page shares (nav, footer, card, tile, table, button), then the state words. Page blocks stay under 60 lines each.

2.1 Colour tokens

The app's set (app/igneum-app/ui/app.css on miner-ui-3, lines 19-33), with two site additions for text accents in light mode, because the app's light ember and molten fail 4.5:1 as body text (measured in the audit, section 6).

Token	Dark	Light	Use
--obsidian	#0C0C0E	#F4F1EC	page
--graphite	#16161A	#FFFFFF	card
--row	#111114	#FAF8F5	row, table stripe, code
--line	#2A2A30	#E2DED8	every hairline
--line-2	#3A3A42	#CFCAC2	hover, open, input borders
--ember	#F2541B	#D0420D	the one primary fill per page, the live dot, the lock ring (white text on it: 4.7:1)
--ember-hi	#FF6A2B	#E04A14	primary hover
--ember-text	#F2541B	#B8390C	ember as text and as a link (5.1:1 on the light page)
--molten	#FFB35C	#B8731F	the proving fill, the active pill
--molten-text	#FFB35C	#8F5810	molten as text (5.2:1 on the light page)
--bone	#F4F1EC	#16161A	ink
--ink-2	#C9C7C2	#3C3C42	body on cards
--ash	#9A9A9E	#6B6B70	labels, notes, units
--ember-ink	#0C0C0E	#FFFFFF	text on an ember fill
--ok	#FFB35C	#B8731F	a verified tick
--scrim	rgba(12,12,14,.72)	rgba(244,241,236,.72)	menu scrim
--top-bg	rgba(12,12,14,.86)	rgba(244,241,236,.88)	sticky nav
--shadow	rgba(0,0,0,.6)	rgba(0,0,0,.18)	the one shadow, on the menu sheet and the hero frame

Theme: prefers-color-scheme plus html[data-theme], and a System / Light / Dark control in the footer, stored in localStorage under igneum-theme. Every page gets color-scheme set so form controls and scrollbars follow. No filled tint field anywhere except ::selection (the app's rule, miner-ui-3.md 302-306); the litepaper's --tint callouts become a row surface with a 1 px ember hairline on the left.

2.2 Type

Three faces, each with one job (the app's rule, miner-ui-3.md 170).

Face	Job on the site
Unbounded 700 and 900	the wordmark, page titles, section titles, hero numbers, the one primary button
IBM Plex Sans 400, 500, 600	every sentence
IBM Plex Mono 400, 500	eyebrows, units, labels, hashes, addresses, counters, code

Scale (px; the web scale sits two steps above the app's because the reading distance is longer):

Token	Size	Line	Use
--t-xs	11	1.4	mono units under a number
--t-sm	12	1.4	eyebrows (0.16em tracking, uppercase), table heads, footer imprint
--t-base	15	1.55	table cells, captions, notes
--t-md	17	1.6	body
--t-lg	19	1.5	lead paragraphs
--t-h3	20	1.25	card titles (Unbounded 700)
--t-h2	clamp(26, 3.2vw, 36)	1.1	section titles (Unbounded 700)
--t-h1	clamp(32, 5vw, 56)	1.05	page titles (Unbounded 900, -0.01em)
--t-hero	clamp(40, 7vw, 76)	0.98	the home headline only (Unbounded 900, -0.02em)
--t-num	clamp(26, 3vw, 40)	1	hero and tile numbers (Unbounded 700, tabular)

Headings use text-wrap: balance; paragraphs text-wrap: pretty. Headings are written under 28 characters where they can be, and the build's orphan check (section 6) fails a heading that leaves one word on its own line at 390 px.

2.3 Space, radius, shadow

Token	Value
--s-1 to --s-6	4, 8, 12, 16, 24, 32
--gutter	32, 24 under 1000 px, 16 under 720 px
--sec	96 between sections, 64 under 720 px
--max	1120 px
--r-card	16
--r-row	12
--r-btn	10
--r-pill	999
shadow	none on cards; 0 30px 80px var(--shadow) on the menu sheet and the one hero frame

Every surface has a 1 px --line border and no shadow. Hierarchy comes from type and space, not from stacked boxes: a page is a column of sections, each with an eyebrow, a title, one paragraph and then its content; cards are used only where a thing has edges (a live scene, a download, a table that scrolls).

2.4 Components

Component	Rule
Nav	sticky, 64 px, --top-bg blur; wordmark left; the pages as text links; one primary button (Download) on the right; under 900 px a burger that opens a sheet listing the same links, the primary button last, the theme control at the bottom
Footer	four columns at 1120, two at 720, one under 500; same links as today; the imprint line and the theme control; no claims in the footer
Card	--graphite, 1 px line, --r-card, padding --s-5; a card title is Unbounded 20
Tile	a number (--t-num) over a mono label; four across, two under 700 px; never a bare 0: a tile with no reading shows the state word in place of the number
Table	full width, 15 px; th mono 12 uppercase ash, left aligned; td border-top 1 px line; numbers right aligned, tabular; on phones the table scrolls inside its card with a fade at the right edge, the first column sticky
Button	primary: ember fill, ember-ink, Unbounded 700 15, 44 px tall; secondary: 1 px line, bone text; under 720 px the primary is full width
Pill	--r-pill, mono 12, a dot: molten for live, ash for off, ember for failed
Note	ash 15 px paragraph under a scene or table, saying where a number comes from
Callout	row surface, 1 px ember hairline on the left, body text (replaces the litepaper's tint boxes)
Code	--row, mono 14, no shadow

2.5 State words

A live element is always in exactly one state and says it in words, with the reason (the app's rule, miner-ui-3.md 39).

State	Words on the page	Dot
fresh	live devnet	molten
connecting	connecting to the devnet observer	ash
stale	observer offline, last update N min ago	ash
failed	live feed unavailable	ember
not active	proving not active or finality paused with the reason the API gives	ash
empty	one sentence with the reason: No blocks in the last 90 seconds. The observer is reading a node that has fallen behind.	ash

Block and proof words are the ledger's: pending, included, excluded, proven, locked. A counter without a reading shows pending (a value the API has not reported yet) and never n/a, -- or 0.

2.6 Focus and motion

Every focusable element has the 2 px ember outline at 3 px offset (today's rule, kept). Skip link kept. prefers-reduced-motion stops every canvas animation and shows a still frame with the same counters. Scroll-reveal animations are removed: content is visible on load (the audit found revealed sections invisible to a screenshot and to a slow scroller).

3. The home page: one screen tells the story

Reading order on a 1440 screen, each block one viewport or less; on a phone the same order, stacked.

#	Block	Job	Primary action
1	Headline and lead	what Igneum is in two sentences; the three facts as tiles (1 block/s, 0 premine, 4 B cap)	Download the miner
2	Live scene	the chain proving itself: the live-dag module with chain block, shards proven, last lock; the state word	none (the scene links to /live)
3	Three proofs a sceptic checks	the light client in this tab (checkpoint verified here), the ASIC model with its numbers, the ledger of what we do not claim	each links out
4	Download	the three installers with version and size, the hash verification line	Download
5	How it works	the hourly program, mining versus proving, finality, in three short cards	Read the litepaper
6	Journey	the phases and the log, as today, collapsed to the current phase with a "show all"	none

Every sentence of today's hero lead survives, split across blocks 1, 3 and 5 so no paragraph runs past 60 words. The "Mined by GPUs. Proven by fire." line is the tagline the ledger allows (row 820); it stays as the headline.

4. The litepaper: a readable long-form document

Rule	Detail
Measure	68 ch body, 17 px, 1.6
Section nav	sticky left rail at 1120+ listing every section, the current one marked; a top "contents" dropdown under 1000 px
Numbers	every measured figure in a table with its source column (bench-log date, or "approximate")
"What we do not claim"	every such sentence kept verbatim, set as the callout component so it is seen, not hidden in a tint box
Footnotes	kept, as a numbered list at the end with return links
Theme	dark by default like the rest of the site, light on request; the paper's light default goes
Print	a print stylesheet: no nav, no rail, black on white, tables unbroken, links shown with their URL

5. Per-page notes

Page	One job	Primary action	What moved	States
Home	say what Igneum is, show it alive, offer the download	Download the miner	the chip numbers to the sceptic card; the testnet terms behind a chevron; the simulation gone, the DAG module in	connecting, live, stale, failed in words; counters read the chain
Litepaper	read the paper	none (reading)	whole paper by default, the section mode kept; dark like the site; file paths off the surface; stale facts dated or corrected	print prints the whole paper
Live	watch the chain	Pause	the lane chart replaced by the DAG module; the tiles kept; "n/a" to "pending"	connecting, live, stale, failed; "proven A/B in 10 min"
Miners	the bench table	none	the eyebrow says what the page counts; the source-file notes become sentences	"not measured" with its reason
Miner	install, start, download	Download (the site-miner agent's copy; styled only)	shared chrome and tokens	the devnet and testnet notices
Wallet	what the wallet does, download	Download (the wallet-ui-3 agent's content; styled only)	shared chrome and tokens
Explorer, block, address	find a block, read it	Search	shared chrome and tokens; "n/a" stays for the build after this one (owned by the explorer agent)	the fetch words as today
Faucet	ask for 10 IGN	Send 10 IGN	shared chrome	the five status sentences
MetaMask	add the network	Add to MetaMask	its own canonical; the explorer link; the wallet's state said true	the five button sentences
404	find the way back	the four links	the page count said true; nineteen sections
Bench, evidence, ledger	read the records	none	the generated template on site.css; each page's own eyebrow

6. The live DAG module (site/live-dag.js)

the project lead's brief, 6 October 2026, on /live's scene: "can this look more advanced and cool?" One module, shared by /live and the home page, reading /api/live only.

Element	Rule
Layout	blocks placed by DAA score on x and by miner lane on y; lanes are the miners of the window, most blocks first; a phone shows the top lanes and folds the rest into one "others" lane, same blocks, same counts
Edges	parent edges drawn; the selected-parent edge heavier; merge-set edges thin
Colour	blue blocks lit, red blocks dim, pending grey; the selected chain as a continuous glowing path
Checkpoints	vertical bands at each checkpoint's blue score with its lock weight (fraction_total); a locked band is solid, a pending one dashed
Proofs	a second layer: a block fills when its segment record is paid (shards[].state paid); the proof lag is shown as the gap between the band of the proven block and the carrier
Time	the x axis scrolls at chain speed; new blocks arrive from the right with a brief glow; pause button; wheel and pinch zoom on time, 30 s to 300 s (?window=)
Details	hover and tap: hash, miner lane, blue score, DAA, parents, proof state, in the ledger's words
Render	one canvas at device-pixel-ratio, batched paths, 60 fps on a laptop (measured in the build), prefers-reduced-motion still frame
Truth	no invented blocks; the legend's words are the ledger's: pending, included, excluded, proven, locked; the counters read the chain (item 0's fix), never the window
Look	obsidian and ember, thin mono labels, restrained glow, no toy

The home page embeds the module with compact: true (fewer lanes, no axis labels, the three counters) and the live page with the full view and the finality and proving strips as today.

7. The build

Step	What
1	site/site.css with the tokens, type, components and states; the head partial loads it; every page's <style> reduced to its page block
2	nav and footer partials rebuilt; the theme control
3	home page rewritten to section 3; live-dag.js; /live on the module
4	litepaper to section 4
5	every other page to its per-page note
6	checks: identity grep, link check, forbidden strings, the ledger-text check (new, tools/ci/ledger-text-check.mjs: every stated sentence the ledger marks for the site must appear verbatim on the page it names), the orphan check (new, headless at 390 px), contrast check (new, token pairs 4.5:1)
7	screenshots after, beside the audit's before

Pages owned by other agents today: site/miner.html copy and site/img/miner-*.webp (site-miner), site/wallet.html content (wallet-ui-3). They are styled through site.css only; their bodies are not edited here.