Traceline — Design tokens

Base and surfaces

Deep midnight base with four surface steps. Glass surfaces are used only where content scrolls beneath: header, preview panel, toolbars.

--base #070912 · 1.0:1 on base Canvas for the whole product

--base-deep #04050C · 1.02:1 on base Recessed wells, inputs, code

--base-alt #0A0D1A · 1.03:1 on base Alternating section band

--surface #101527 · 1.1:1 on base Cards, panels

--surface-2 #161C31 · 1.18:1 on base Nested rows, chips, headers

--surface-3 #1D2440 · 1.3:1 on base Pressed states, active tabs

--glass rgba(18, 23, 42, 0.62) Sticky header and glass panels

--glass-strong rgba(12, 16, 30, 0.86) Toolbars, sheets, toasts

Text

Three text levels plus an inverse for light chips. Text 3 is for non-essential labels only and never for a value the user needs to act on.

--text #F2F5FF · 18.24:1 on base Headlines and primary copy

--text-2 #A8B0C8 · 9.19:1 on base Body and secondary copy

--text-3 #8D97B0 · 6.8:1 on base Hints, captions, axis labels

--text-inverse #070912 · 1.0:1 on base On light chips and primary buttons

Borders

1px throughout. Luminous borders only sit on gradient or glass, where a neutral hairline disappears.

--border rgba(255, 255, 255, 0.08) Default 1px hairline

--border-soft rgba(255, 255, 255, 0.05) Rows inside a card

--border-strong rgba(255, 255, 255, 0.16) Inputs, hover states

--border-luminous rgba(148, 168, 255, 0.22) Lifted card on gradient

Gradient stops

Electric violet into cyan into lime is the brand energy and carries no meaning. Risk never borrows these hues for anything other than atmosphere.

--g-violet #7B5CFF · 4.56:1 on base

--grad-violet-deep #5B34F2 · 3.05:1 on base

--g-cyan #2DE2E6 · 12.43:1 on base

--g-lime #C6F24E · 15.34:1 on base

Chain colours

Chain identity uses the official brand colours of each network. The colour is always paired with the official logo and the chain name: a colour alone never identifies a chain.

--chain-eth #627EEA · 5.39:1 on base Official Ethereum brand blue

--chain-eth-tint rgba(98, 126, 234, 0.14) Badge and pill background

--chain-bnb #F0B90B · 11.02:1 on base Official BNB Chain yellow

--chain-bnb-tint rgba(240, 185, 11, 0.14) Badge and pill background

Risk ramp

Four tiers, four hues, one semantic ladder. The ramp is verified for contrast on both the base and on cards, and every tier is paired with an icon and a word so colour is never the only signal. L* and greyscale values are measured, not estimated: each step differs by at least 9.5 L*, which is what keeps the tiers readable in a printed greyscale report.

Tier	Token	Score band	L*	ΔL*	Greyscale	On base	On card	Chip
Low	#2BD9A4	0 – 24	77.8		#C0C0C0	10.94:1	9.98:1	Low
Moderate	#FFD75E	25 – 49	87.3	Δ 9.5	#DBDBDB	14.32:1	13.06:1	Moderate
High	#FF8A2B	50 – 74	69.2	Δ 18.1	#A9A9A9	8.44:1	7.7:1	High
Severe	#FF2E6B	75 – 100	56.4	Δ 12.8	#878787	5.54:1	5.05:1	Severe

GREYSCALE PROOF · rendered with filter: grayscale(1) and no hue information left

Low

Moderate

High

Severe

Light-mode equivalents use a darker ink of the same hue on a tint, so the tier survives a printed report and a white dashboard: low #067A57 on #E6FBF4, moderate #8A5B00 on #FFF6DB, high #A33B00 on #FFEBDD, severe #B00A3C on #FFE3EC. All four clear 4.9:1.

Feedback and focus

Feedback colours are reserved for system messages and never reuse the risk ladder, so a red alert is not mistaken for a severe finding.

--ok #2BD9A4 · 10.94:1 on base Positive confirmation

--warn #FFD75E · 14.32:1 on base Attention, not failure

--danger #FF2E6B · 5.54:1 on base Blocking error

--info #2DE2E6 · 12.43:1 on base Neutral explanation

Focus ring

--focus: #C6F24E

2px ring at 3px offset on every interactive element, on both themes. Lime on dark, deep violet on light: both above 4.5:1 against the surface they sit on.

Type scale

Golos Text for display, Inter for UI, JetBrains Mono for addresses, hashes and audit IDs. All three carry latin and latin-ext; cyrillic subsets are included so a future locale does not need a new typeface. Scores and amounts always use tabular numerals.

Display 1
60px / 1.02 / -0.035em

Wallet screening for Ethereum

Display 2
48px / 1.05 / -0.03em

Two chains, one workflow

Heading 1
36px / 1.12 / -0.025em

Findings and evidence

Heading 2
28px / 1.18 / -0.02em

Counterparty tracing

Heading 3
20px / 1.3 / -0.012em

Mixer and tumbler exposure

Heading 4
17px / 1.35 / 0

Source of funds

Lead
19px / 1.55 / 0

Paste an address and get an AML risk report in seconds.

Body
15px / 1.6 / 0

The risk score is indicative and supports a decision.

Small
13px / 1.55 / 0

Dataset sanctions-2026.10.24, weighting w-2.4.

Caption
12px / 1.45 / 0

Generated 26 Oct 2026 · audit TL-8F42-01C9

Score numeric
128 / 0.86 / −0.05em
tabular numerals

68

Mono / addresses
13 / 1.6

0x7a3f…e17f1a · TL-8F42-01C9 · chain ID 56

Spacing

4px base scale. Section rhythm on desktop is 120px, tablet 80px, mobile 48px.

--sp-14px

--sp-28px

--sp-312px

--sp-416px

--sp-520px

--sp-624px

--sp-732px

--sp-840px

--sp-948px

--sp-1064px

--sp-1180px

--sp-1296px

--sp-13120px

Radii

12px controls, 16px large buttons, 24px cards, 32px hero panels. Nothing is fully square except table rows.

r-1 · 4px

r-2 · 8px

r-3 · 12px

r-4 · 16px

r-5 · 20px

r-6 · 24px

r-7 · 32px

Shadows and glow

Dark surfaces carry shadow plus an inset hairline, because shadow alone disappears on a midnight base. The primary button carries a coloured glow instead.

--sh-1 · Hairline lift

--sh-2 · Card

--sh-3 · Floating panel

--sh-4 · Hero / modal

--glow-cta

--inset-hair

Motion

Motion explains a change, it does not perform. Hover and press stay under 150ms; panels and accordions at 200–320ms; the gauge sweeps once at 600ms. Everything respects prefers-reduced-motion.

--dur-1

90msHover tint

--dur-2

140msButtons, inputs

--dur-3

200msPanels, borders

--dur-4

320msReveals, accordions

--dur-5

600msGauge sweep

--ease-outcubic-bezier(0.16, 1, 0.3, 1)Enter, expand, reveal

--ease-in-outcubic-bezier(0.65, 0, 0.35, 1)Skeletons, loops

--ease-springcubic-bezier(0.34, 1.4, 0.64, 1)Selection ticks, chips

Light mode

The light set exists for institutional buyers, printed reports and screen-sharing into a bank's own tooling. It is a full token override, not a filter: surfaces become white, text becomes near-black, and the risk ladder switches to ink-on-tint.

base

#F5F6FB

surface

#FFFFFF

surface-2

#F7F8FC

text

#0B1020

text-2

#4C5673

border

rgba(11, 16, 32, 0.10)

risk-low

#067A57

risk-mod

#8A5B00

risk-high

#A33B00

risk-severe

#B00A3C

Ethereum

BNB Smart Chain Severe High Moderate Low

Same components, same tokens, data-theme="light"

The light panel above is a live token scope, not an image. Toggle the theme in the header to see the whole product follow.

Accessibility contract

What the tokens guarantee, and where the design hands the job to something other than colour.

Requirement	How the tokens deliver it
Body text on base	#F2F5FF = 18.24:1 · #A8B0C8 = 9.19:1
Body text on cards	#A8B0C8 on #101527 = 8.38:1
Risk tier as text	low 10.94:1 · moderate 14.32:1 · high 8.44:1 · severe 5.54:1 on base
Touch targets	44px minimum on every control; 68px for the hero primary
Tier without colour	Icon shape (shield / triangle / triangle / octagon) + the word, always
Focus	2px lime ring, 3px offset, both themes
Motion	All durations collapse to 0.001ms under prefers-reduced-motion

The whole system in hex, space and time.