Redlines · handoff
Measurements, states and the rules behind them.
Everything on this page is taken from the built interface, not estimated from a mock. Where a number appears twice, the built CSS is the source of truth.
3 breakpoints5 pages
7 result states44 icon references
1 · Frame map
How the deliverable maps into a Figma file. Page names below are also the import order for html.to.design, so a frame keeps its name into the Figma file.
| Figma page | Frame | Size | Source |
|---|---|---|---|
| 01 Marketing | Home / Desktop | 1440 × variable | index.html @1440 |
| 01 Marketing | Home / Tablet | 768 × variable | index.html @768 |
| 01 Marketing | Home / Mobile | 390 × variable | index.html @390 |
| — | Report screen | — | Not part of this build: the wallet script renders the result after Check wallet |
| 03 Commerce | Pricing / Desktop | 1440 | pricing.html |
| 04 Docs | API stub / Desktop | 1440 | api.html |
| 05 System | Components / Desktop | 1440 | system.html |
| 05 System | Tokens / Desktop | 1440 | tokens.html |
| 06 Handoff | Redlines / Desktop | 1440 | spec.html |
Prototype: chain switch, validation, and check-wallet flow run live in the HTML build. Wire the Figma prototype to mirror it (frame links listed in section 8).
2 · Grid and shell
Desktop 12 columns inside a 1240px container; tablet 8 columns; mobile 4 columns. Margins are fixed per breakpoint, gutter grows with the viewport.
100
100
1440 frame·1240 container·12 × 79.3 col·24 gutter
| Breakpoint | Container | Margin | Header | Display 1 | Section padding |
|---|---|---|---|---|---|
| 1440 desktop | 1240 | 100 (gutter 32) | 72 | 64 / 1.02 | 120 |
| 1024 compact | 1120 max | 28 | 72 | 56 / 1.02 | 120 |
| 768 tablet | 704 | 32 | 64 | 46 / 1.04 | 80 |
| 390 mobile | 350 | 20 | 60 | 38 / 1.06 | 48 |
3 · Input card anatomy
The card is the centre of gravity: 600px maximum width, 32px radius, 20px padding, gradient hairline. Chain selection precedes the address in both eye order and tab order.
1
2
3
4
5
6
ChainRemembered
EVM address, 42 characters. A DEMO address is loaded.
Reads the connected account only
- 1Card: padding 20, radius 32, gradient border 1px (violet → cyan → lime at 70/35/45% alpha), shadow-4.
- 2Chain selector: 2 equal columns, 8 gap, 5 inner padding, 44 pill height, 20 logo, 12 horizontal padding. Selected = chain tint + chain border + logo + tick.
- 3Address field: 52 height, 13.5 mono, 46 left inset for the chain logo, 44 right inset for paste. Focus = cyan border + 3px 16% ring.
- 4Hint line: 18px reserved, 12 text. Channels: neutral, error (severe), ok (low). Text always states the rule, never just "invalid".
- 5Secondary action: 36 height, glass fill, 1px border-strong. Kept smaller than the primary on purpose.
- 6Primary: 68 height, radius 16, 20 display type, violet → cyan gradient, glow-cta. Full card width. This is the largest, brightest element above the fold at every breakpoint.
4 · Report screen
The report screen is not in this build. Check wallet hands off to the wallet script, which renders the result after connection, so the interface stops at the connect step. What stays in the design system is the vocabulary the report used: the score, the four tiers, the finding rows, the exposure bar and the audit ID, all still specified on this page and in the component library.
5 · Responsive behaviour
| Section | 1440 | 768 | 390 |
|---|---|---|---|
| Header | Logo, 6 nav links, lang, theme, sign in, CTA | Logo, lang, theme, CTA, menu button; nav hidden | Logo, CTA, menu; lang lives in the sheet |
| Hero | 2 columns 1.06/0.94, gap 64; preview on the right | 1 column; preview moves below the card | 1 column; floating chips become a row above the panel |
| Input card | 600 max, padding 20 | Full width of 704 | Full width 350, padding 16, radius 24 |
| Chain strip | 3 cards equal | 2 + 1 full-width soon card (horizontal) | 1 column, stacked |
| Sample report | 2 columns, gauge 190 | 2 columns, gauge 160 | 1 column, gauge 190 centered |
| What we screen | 4 × 2 grid | 2 × 4 grid | 1 column |
| How it works | 3 columns with step numbers | 1 column, stacked full width | 1 column |
| Use cases | 3 + 2 (span 3) | 2 + 2 + 1 full | 1 column |
| Compliance band | 4 columns | 2 × 2 | 1 column |
| CTA band | Copy + card side by side | Stacked, card full width | Stacked, no min-width on the card |
| Footer | Brand + 4 columns | Brand + 3 columns | Brand full + 2 × 2 |
6 · State matrix
| Surface | States | Behaviour |
|---|---|---|
| Chain selector | default, hover, selected, focus, disabled, loading | Switch rewrites the address, placeholder, hint and every chain badge; persists across visits |
| Address field | empty, typing, valid, invalid, unsupported shape, disabled, loading | Validation on input and blur; hint text states the rule |
| Check wallet | default, hover, active, focus, disabled, loading | Loading 480ms before navigation, so the press has feedback |
| Connect triggers | default, hover, active, focus, connected | Bound by the wallet script; the interface adds no handler, modal or gate |
| Export | default, hover, loading, error | Prototype shows a demo toast instead of a file |
7 · Keyboard, focus and semantics
Tab order follows the visual order inside the input card, with no positive tabindex anywhere.
- 1Chain option A (Ethereum) — radio, arrow keys move to B
- 2Chain option B (BNB Smart Chain)
- 3Connect wallet — hands off to the wallet script
- 4Check wallet — also hands off to the wallet script
- AFocus 2px lime ring at 3px offset; inside the input the ring is replaced by a cyan border plus a 3px soft ring.
- BTargets 44px minimum, 40px for the paste control with a 44px hit padding via the field.
- CRisk never colour-only: icon shape differs per tier (shield, triangle, triangle, octagon) and the tier word is always present.
- DScreen reader: gauge is a labelled image, findings are details/summary, alerts carry role status, the state toolbar is labelled as a preview control.
- EReduced motion: every animation collapses to 0.001ms.
- FDocument titles never contain an address; the report page title is generic.
8 · Prototype map
| From | Trigger | To | Detail |
|---|---|---|---|
| Results · loading | automatic | Results · result | Gauge sweeps once, findings stagger in |
| Home | Check wallet (invalid) | Inline error | Field turns severe, hint states the rule, no navigation |
| Home | Tron-shaped address | Results · unsupported | Explains the two supported chains and offers them |
| Any chain pill | click / arrow keys | Same screen | Address, placeholder, hint and badges update in place |
9 · Assets and icons
| Asset | Source | Size | Use |
|---|---|---|---|
| Ethereum logo | Official Ethereum brand mark, unmodified file | 192 png | Chain selector, badges, result header, export |
| BNB Smart Chain logo | Official BNB Chain brand mark, unmodified file | 256 png | Same four places |
| Traceline mark | Custom SVG, gradient stroke | 32 viewBox | Header, footer, PDF header |
| Icon set | Custom 24px stroke, 1.6–1.8 weight | 30 symbols | See list below |
| Type | Golos Text, Inter, JetBrains Mono (OFL) | woff2, self-hosted | Latin and latin-ext shipped, 60 subset files |
Chain logos are embedded at their official colour values and are never redrawn, masked, recoloured or placed on a competing background. On light surfaces they sit on their own tint, not on the brand gradient.
10 · Copy rules
| Rule | In practice |
|---|---|
| Never claim certainty | Banned: "guaranteed clean", "certified", "100% safe", "regulator-approved". A Low tier is described as absence of elevated exposure, not as safety. |
| No implied endorsement | Chain names and lists are cited as data sources only. A disclaimer appears in the footer, the compliance band and every report. |
| Demo data is labelled | Every demo address carries a DEMO badge on screen and in the export. Page titles never contain an address. |
| Numbers carry units | Score is "68 / 100", exposure is a share, hops are counted. Percentages use one decimal. |
11 · Acceptance checks
| Check | Evidence in this build |
|---|---|
| What is screened in 3s | H1 names wallet screening and both chains; the subhead lists sanctions, PEP, mixer, darknet, counterparties |
| Which chains | Two chain badges sit above the H1, the selector is inside the card, the chain strip is the next section |
| Where to click | 68px gradient primary inside the card, compact primary in the header, third primary in the final band |
| CTA above the fold | Verified at 1440 × 900, 768 × 1024 and 390 × 844 |
| Chain switch updates everything | Address, placeholder, hint, field logo, result badge, export badge |
| Greyscale tiers | ΔL* 9.5 / 18.1 / 12.8, documented with greyscale proof on the tokens page |
| Contrast | All tier text at 5.5:1 or better on base and cards; body text 9.2:1 |
| 44px targets | Every control; 32px copy buttons are exceptions inside a 44px chip |