4e727402ce
docs/plans/site-ui-3-audit.md: the project lead's ask of 6 October 2026 ("run the website and all pages and litepaper through the same
apple lens as the miner app", "leave no stone unturned") against the miner-ui-3 standard. Method, screen by screen with the
10-point scale (home 6, litepaper 5, live 6, miner 5, wallet 6, miners 5, explorer 7, block and address 6, faucet 7,
metamask 6, 404 6, bench 5, evidence 6, ledger 5), links and downloads (914 attributes followed, four installers hashed
against the host), the live elements' loading, failed and stale states, contrast of every token pair in both themes,
keyboard focus, phone width, the litepaper's print, the top ten findings, and appendix B listing the stones turned.
docs/plans/site-ui-3-ticklist.md (appendix A): 502 rows across 17 inventories, every claim, number, date, link and
feature with its source and today's verdict (MATCH, STALE, UNSOURCED, APPROX), the ledger's stated sentences and their
presence, the thirteen "does not claim" sentences verbatim, the scrub rules.
docs/plans/site-ui-3.md: the design: one stylesheet (tokens light and dark, type on Unbounded, Plex Sans and Plex Mono,
the card and table rules, state words, nav, footer), the home page as one screen, the litepaper as a readable paper
with a sticky section nav and the whole paper by default, per-page notes, and the live DAG module brief (the project lead's "can this
look more advanced and cool?").
docs/plans/site-ui-3-shots/before/ and before-states/: every page at 1440 and 390, dark and light, the failed-fetch and
stale-observer captures, the litepaper print PDFs, the focus captures; headless Chromium (Playwright's build, never
Chrome.app), one browser at a time, niced.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
215 lines
15 KiB
Markdown
215 lines
15 KiB
Markdown
# 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.
|