Specimen · Lights Out · v2.0
Components. Every shared part of nett, in every state, on black.
Page builders copy markup from here and call nett.js. Nothing on a product page is styled outside this set.
01
Foundations
design/tokens.css
Black canvas, grey surfaces, white amounts, one hue. A token’s role is part of the token: Signal means money just landed, and nothing else.
Colour · dark only
Canvas--nt-canvas
#000000
Page background. X "Lights out", X Money.
Surface--nt-surface
#0F0F10
Cards, posts, banner strip, code panel.
Surface-2--nt-surface-2
#16181C
Raised card, input fill, active row, sheet, toast.
Border--nt-border
#2F3336
Hairlines, card borders, dividers. Active pill-tab fill.
Border-strong--nt-border-strong
#3E4144
Outlined pills, chart bars, pending timeline nodes.
Field--nt-field
#62676C
Input, select and checkbox edge at rest. 3.7:1 (WCAG 1.4.11).
Muted--nt-muted
#7D8187
@handles, times, headline line 2+. 5.4:1 · 4.5:1 on Surface-2.
Text--nt-text
#E7E9EA
Body text. 17.2:1.
Text-strong--nt-text-strong
#FFFFFF
Amounts, names, headline line 1.
Inverse--nt-inverse-bg
#FFFFFF
The primary pill, black text. One per view.
Signal--nt-signal
#FFD84D
The only hue: "money just landed". Live dots, the settled marker, the counter tick, the focus ring. Never a fill, never body text.
Signal tint--nt-signal-tint
12%
A new post or row flashes, then fades over 1.6s.
Type · Inter 400/500/700/800 + Geist Mono 400/500
Hero · .nt-heroInter 700 · clamp(36, 5.2vw, 68) / 1.04 / −0.03em · two-tone with .nt-tone
Pay any handle. Settle in public.
Display · .nt-displayInter 700 · clamp(30, 3.8vw, 48) / 1.06 / −0.03em
Escrow first. Proof second. Release last.
Counter · .nt-kpi--heroInter 700 tnum · clamp(48, 7.4vw, 96) / −0.03em · odometer digits
$128,440.00
Amount · .nt-post__amountInter 700 tnum · 30 (28 mobile) / −0.03em
$500.00
Title · .nt-titleInter 700 · 20 / 1.25 / −0.012em
Recent payments
Lead · .nt-leadInter 400 · 18 / 1.45 · Muted
A protocol puts USDG in escrow. A licensed desk pays the handle in X Money. The escrow releases after proof.
Body · .nt-bodyInter 400 · 15 / 1.45
If no desk locks an order before the deadline the protocol set, anyone can trigger the refund: the USDG is credited to the protocol’s escrow balance.
HandleDisplay name Inter 700 Text-strong + @handle Inter 400 Muted (never mono)
tipjar.fun @tipjar_fun
Label · .nt-labelGeist Mono 400 · 11 / +0.1em / caps · Muted
Settled · 30d · testnet
Data · .nt-dataGeist Mono 400 · 13 tnum · tx, IDs, blocks, times
settled 4.2s · tx 0x9f…3a · NT-9F3A…C21 · 12:04:09 UTC
Shape · pill, 16, 12
9999px · buttons, search, chips, tabs, avatars
16px · cards, posts, sheet, code
12px · inputs, inner chart panel, toast
Space · 4px base, X density
02
Logo
nett.logo.mark(size) · .lockup() · .brand() · .settle(el)
A lowercase n whose left stem is a hollow band with an entry spur: one stroke in outline, one solid. Hollow means the money is held; solid means it settled.
Sizes · 16/20/24 are hand-hinted (1px walls)
In use
favicon 16Meaning · hollow = held in escrow, solid = settled
HeldPosted, locked, paid, proven
SettledEscrow released
nett.logo.settle(el), 480ms
Monochrome only: white on black, ink on white. Never Signal, never X blue, never next to the X glyph, no double-struck alphabet for other letters.
Motion asset · (b) netting, never a logo
Gross in, net out.
Two thin flows run up the foot and over the shoulder, then net into one solid stem. Where money nets: the landing netting explainer and the settle confirmation only; the logo stays the double-struck n.
03
App shell
.nt-shell · .nt-side · .nt-top · .nt-search · .nt-tabbar
The UsePaid frame on every page, this one included: status strip, sidebar with outline icons, centred search pill, one white pill. Resize to see the rail and the mobile tab bar.
- ≥ 1100px
- sidebar 275 · search pill · outlined + white pill
- 768 – 1099
- icon rail 72 · labels as tooltips
- < 768
- top bar (mark | nett, Menu) · bottom tab bar
- Status strip
- .nt-banner · sticky ≥ 768
- Active item
- data-nt-page on the shell ↔ data-nt-nav
04
Receipt post
nett.post.html(s, {variant, open})
The signature component: shaped like a post, it carries money. The poster is the paying protocol; the body is the amount, who was paid, who filled it, and the mono facts. Details expand in place.
Card · settled, details open
States · locked, posted, refunded
Recent payments
SimulatedRow variant (UsePaid payments list): {variant:'row'}. Card lists replace tables for payments and orders.
05
Live feed
nett.post.mount(list) · nett.bus
One settlement event drives everything: a post slides in on top, counters roll, the live dot blinks once. Hovering or focusing the feed holds it; so do the Pause pill, a hidden tab and scrolling away.
Latest settlements
SimulatedRobinhood Chain · block 18,204,331 · 12:04:09 UTCAccelerated demo: one settlement every 2–4s
06
Counters and charts
nett.counter.roll(el, v) · nett.chart.bars(el, series)
Big white totals with odometer digits, and grey daily bars with today in white. Every figure says where it comes from.
Network analytics
Settled to X handles
$128,440.00
Last 30 days · simulated
Median settle
4.2s
0 unpaid · 37 refunded after their deadline · 30d
Settled volume
$0.00
Daily in UTC · last 14 days · simulated
Filler fees
$0.00
Fee per fill, paid to licensed desks · simulated
Payouts
0
Partial history · today still counting · simulated
07
Marquee
nett.marquee.mount(el)
A wall of receipt posts moving at 40–60s per loop, two rows in opposite directions.
08
Status
nett.statusMarker(state) · .nt-status · .nt-chip
Five states in one 8px glyph, always with a word. Refunded is a dash, a rejected proof a cross. No red, no green.
Markers at size · always with a word
4× for QA. Ship at 8px. Signal only on Settled.
Chips
09
Buttons and links
.nt-btn · .nt-iconbtn · .nt-link · .nt-copy · .nt-filter
Every control is a pill. The white pill is the primary, one per view. Focus is a 2px Signal ring that follows the shape: tab through to check.
Primary · white pill, one per view
Secondary · outlined pill · ghost · icon
Links · copy · filters
10
Tabs
.nt-pilltabs · .nt-tabs · .nt-seg · .nt-pager
Pill tabs filter lists; underline tabs switch views. Arrow keys move and select.
Pill tabs · UsePaid filters
Orders
148 orders in the last 30 days. Simulated.
118 settled. Median fill 3.8s.
24 waiting for a licensed desk. The soonest deadline is in 4:12.
6 not locked by their deadline; the USDG was credited to the protocol.
Underline tabs · with counts
24 orders are waiting for a desk.
3 locked by your desk. Pay within 30 min, prove within 2 h, or the lock lapses and the order reopens.
118 fills settled in 30 days, a fee per fill on each.
2 orders passed their deadline with no lock and were refunded to the protocol’s escrow balance.
11
Forms
.nt-field · .nt-input · .nt-handle · .nt-select · .nt-seg · .nt-checkbox
Surface-2 fields with a visible edge, a white edge and Signal ring on focus. Errors are white with a × line, never red. Every @handle field carries the same helper.
12
Tables
.nt-table · nett.table.render()
For power users (console, desk): Geist Mono caps headers, hairline rows, no zebra, amounts right-aligned in white. Under 768px rows become two-line entries.
Payouts · app density · click a row
Robinhood Chain · block 18,204,331 · 12:04:09 UTC6 payouts · simulated
Claimable orders · countdown · depletion bar · selection
Every order and every fill is public.An order no desk locks by its deadline becomes refundable (10:00 in this demo)
13
Receipt card
nett.receipt.html(s) · nett.timeline.html(s)
The standalone receipt: badge, amount, who was paid, mono facts, label and value rows, explorer link, non-affiliation line. The newest card flashes Signal tint.
Timeline · nett.timeline.html(s, {upTo})
Settled
In flight
Refunded
14
Code panel
.nt-code · nett.code.render()
A Surface card in Geist Mono 13, pill tabs, monochrome syntax. Wide lines scroll inside the panel, never the page. Run streams queued, locked, settled.
15
Sheet and overlays
nett.sheet.open() · nett.selbar · nett.toast()
Surface-2, 16px, 60% scrim. Esc or Close returns focus to what opened it; the live feed holds while a sheet is open.
16
Also restyled
.nt-faq · .nt-taccount · .nt-steps · .nt-checklist · .nt-card · .nt-meter
The v1 parts carry over with the same classes and APIs, in the dark grammar.
FAQ · <details>
Is nett affiliated with X or Robinhood?
No. nett is independent and is not affiliated with, endorsed by, or sponsored by X Corp. or Robinhood Markets, Inc. X Money and Robinhood Chain are named only to describe where money moves.
What happens if a desk doesn't pay?
Nothing is released without a proof. A lock lapses after 30 min to pay and 2 h to prove, and the order reopens. Once its deadline has passed, anyone can trigger the refund: the USDG is credited to the protocol’s escrow balance, to withdraw any time.
Who holds the money in flight?
An escrow contract on Robinhood Chain holds the protocol's USDG from the moment an order is posted until a proof is verified. nett never asks for your X login.
T-account · netting
X Money in Pay-to-Buy (preview)
X Money out Payouts
- @kofi_codes$KITE$1,450.00
- @sol_ana$LUMEN$2,200.00
- @juno_dev$OTTO$1,250.00
- Total in$4,900.00
- @alicetipjar.fun$500.00
- @mira_buildsroyalty.xyz$1,200.00
- @kenji_buildshandlepay$800.00
- Total out$2,500.00
Steps · nett.stepper()
Order ord_7Qk…
$500.00
to @alice via X Money
- Escrow
- 501.50 USDG locked
- Deadline
- 10:00
- Filler
- Waiting for a desk
Checklist · licensed desks only
- KYB and licensing
- Verify desk handle
- Connect payout wallet (current step)
- Post bond
- $1.00 test fill
USDG claimable
2,418.35 USDG
Principal and fees from 6 fills, released after proof.
Float vs open demand
$8,000.00 / $4,950.00
Pay-to-Buy inflows refilled $2,400.00 today (preview, simulated).