Design System — NewTon DC Tournament Manager

Palette

Two grounds, ink and paper, both warm. Red is the only accent; green only marks small good news.

Ink#141210Hero, navigation, footer, code

Ink 2#1e1b18Cards on ink

Ink line#34302bBorders on ink

On ink#f3eee6Text on ink

On ink 2#b4aca1Quieter text on ink

Paper#f7f5f1Page background

Paper 2#eeeae3Bands, inline code, table heads

Line#ddd7cdBorders and rules on paper

Text#1a1815Headings and text

Text 2#5e574eQuieter text

Board red#d63b2bThe accent: main buttons, labels, links, the final

Red, pressed#b32f21Hover on red

Board green#2f8a57Ticks, the live dot, terminals

Amber#e0a43aThe terminal’s middle dot only

Typography

Insignia is the club’s typeface, from the maintainer’s first darts: every heading and the wordmark. Inter carries everything you read. Cascadia Code is for code.

DisplayInsignia · 44–78 px · line-height 1.02

Run the whole darts night. Offline.

Section headingInsignia · 38–60 px

From the door to the podium.

Card headingInsignia · 28–38 px

Give the winner their moment.

LabelInter 700 · 13 px · uppercase, tracked 0.14em · red

How a night runs

LeadInter · 19 px · Text 2

One app carries the whole evening, and every result lands in your club’s history.

BodyInter · 17 px · line-height 1.55–1.65

Add your regulars from the player database, or sign up walk-ins on the spot. One click marks a player paid, and the draw waits until everyone has.

CodeCascadia Code · 13.5 px

docker compose up -d

Buttons

One red button per view: the thing to do. The rest step back. They lift a pixel on hover; an arrow nudges right.

On ink

Launch Tournament Manager → Download

No accountNo subscriptionNo cloud

.btn-red · .btn-ghost · .hero-meta

On paper

Latest release Docker quickstart Read the Guide

.btn-ink · .btn-line (home.css) · .btn-github (landing.css; red as a release page’s Download)

Cards

White on paper, ink 2 on ink, 14 px corners, a hairline border. Pictures sit on a band of the ground beneath.

Double Elimination

Two lives each.

Frontside and backside, then a grand final.

.f-card — the app’s pictograms, recoloured by their fills, the final in red

Yours, not theirs

No signup, no subscription, no tracking. Your results stay on your computer, or on your own server.

.t-card — a line icon on a paper 2 tile

Try it now

It runs in this browser.

Nothing to install.

Launch →

.s-card.lead — the one dark card among white ones

The night, step by step

A numbered timeline: Insignia numbers in rings on a hairline, text left, the screenshot right. The ring turns red on hover.

5

The final

Give the winner their moment.

A podium with the night’s highlights, made to be photographed for the club chat.

The night ends. The record doesn’t.

.steps · .step · .step-dot · .shot

Documentation pages

The same language at reading size: a contents card, code on ink, tables and steps as white cards.

Open tournament.html in your browser, or read the user guide.

docker compose up -d

Download — the latest release.
Open — double-click tournament.html.

Token	Value
Corner radius	14 px cards, 10 px buttons
Page width	1180 px landing, 808 px docs

Footer

A dark band closes every page.