// design system / v0.1 reference

Touchline/ds.

An editorial-sport design system. Rigorous Swiss grid, condensed typography, a single signal color. Built for match tableaus, standings, and dense data interfaces.

// systemtouchline/ds
// version0.1
// editioneditorial-sport
// tokens110 / css vars
// primitives18
// statusv0.1 / minimum viable
// 00 / principles

design discipline.

// six rules. editorial rigor applied as code. they govern every decision below.

// 01 / signalOne dominant color. One single accent.

Cream paper, warm ink. The signal red is reserved for focus and action. Gold for honours (finals, podium). Green for live status. Never two vivid colors competing on the same surface.

// 02 / metaphorThe tableau, not the app.

Every primitive has a product code — mc-001, pb-001, dr-001. "Use mc-001" beats "use the match card". The code gives the permanence of an object rather than the evanescence of a widget.

// 03 / lowercaseLowercase, everywhere.

Capitals announce themselves. Lowercase trusts the reader. Reserved for mono micro-caps (≤10px) and Anton display — the editorial voice allows itself condensed capitals; everything else quiets down.

// 04 / honestyNo decoration beyond function.

No gradients. No drop shadows. No generous roundness. Hairline borders, near-square corners (2–6px). One exception only: graphic area fills via color-mix.

// 05 / pressThe system is a newspaper.

Anton for impact (headlines, scores, times, phases). DM Sans for body. IBM Plex Mono for data. Three voices, three strict roles. The match tableau borrows from the sports paper, not the SaaS dashboard.

// 06 / longevityBuilt to last.

Square corners, hairlines, mono micro-caps. Nothing in this system will look dated in five years because nothing is in fashion today. Rigor outlasts the seasons.

do / don't

// pr-001 / discipline pair

// + do

  • One dominant color + one cutting accent.
  • Mono only for data and labels.
  • Flat highlights instead of drop shadows.
  • Solid bars to mark out the phases.
  • Wide tracking on mono micro caps.

// – don't

  • Gradients, especially purple on white.
  • Generous roundness (> 8px).
  • More than one bright accent on screen.
  • System fonts (Inter, Roboto, Arial).
  • Fuzzy shadows and decorative depth.
// 01 / foundations

color system.

// ten neutrals for surface and type, five chromatic families for function. red leads, gold honours, green announces life.

paper / ink · day

// p-001
paper#f4f2ec--paper · bg
paper-2#ebe8df--paper-2
paper-3#e0dccf--paper-3
card#ffffff--card
line#d9d5ca--line · border
dim#9a978d--dim · fg-faint
mid#6b6960--mid · fg-muted
mid-2#3d3b35--mid-2
ink#0e0e10--ink · fg
ink-2#1c1b18--ink-2

night palette

// p-002 / :root.theme-night
night#13110d--night · bg
night-2#1d1a13--night-2
night-3#27231a--night-3
line-n#33301f--line-n
milk-dim#5e5b54--milk-dim
milk-mid#8a8880--milk-mid
milk#f1ede1--milk · fg

day / night side-by-side

// th-002 / inversion holds
// day · :root
group b 3:35 pm live
// night · :root.theme-night
group b 3:35 pm live

chromatic accents

// p-003 / one signal, one honour, one live
signal#e6321e--signal · accent
signal-deep#b8230f--signal-deep · hover
signal-soft#fde7e2--signal-soft · row hi
gold#b8932f--gold · honours
gold-soft#f3e9cf--gold-soft
field#2f7d4f--field · live / win
field-soft#dff0e4--field-soft
warn#caa015--warn
info#2864e8--info
// 02 / foundations

type system.

// three voices, three strict roles. anton carries impact, dm sans carries text, ibm plex mono carries data. never mix the roles.

families / three voices

// fm-001 · fm-002 · fm-003
Aa
Antondisplay// fm-001 · headlines, scores, phases
Aa
DM Sansbody// fm-002 · text, buttons, labels
Aa
IBM Plex Monodata// fm-003 · courts, codes, micro

display anton / impact

// fm-001 / scale
--t-72→120heroSpring Tournament
--t-42→72h1Quarter-finals
--t-42h2Group B · Court 2
--t-28h33:35 pm · Live

dm sans / body

// fm-002 / scale
--t-18h4 / subBX Brussels plays five matches.
--t-15leadAn editorial-sport system, derived from the Hazard Tournament U12.
--t-13bodyRUTB A faces SK Pepingen on court B at 9:50 am.

ibm plex mono / data

// fm-003 / scale
--t-11code / metacourt b · 09:50 · group b · 5 matches
--t-10meta// touchline / ds · v0.1 · editorial-sport
--t-9cap microgroup b · court b · 5 matches
// 03 / foundations

space & matter.

// modular scale on a 2px base. near-square corners. short motion. rigor comes through clean angles.

// s-001 / spacing
2px base · 19 increments
--s-2 (2) → --s-80 (80). tokens used for padding, gap, margin. components never set px outside a token.
// l-001 / line
hairline 1px
--line-w 1px everywhere. --line-w-2 2px for active tabs. --line-w-4 4px for the match-card focus rail.
// r-001 / radius
2 / 3 / 6 / circle
tight corners. --r-sm tag/button, --r-md card, --r-lg exception, --r-circle reserved for dot and avatar.
// el-001 / elevation
almost nothing
no drop shadow. --shadow-low for a 1px tone-on-tone lift, --glow-live to flag live activity.
// mo-001 / motion
snap · quick · base
90ms · 150ms · 220ms · ease cubic-bezier(0.2,0,0,1). honoured under prefers-reduced-motion (durations → 0).
// lay-001 / layout
max 1500 · gutter 24
--max-w 1500, --max-w-text 700, --gutter 24. used by .frame, the only global container.
0
1500
// 04 / primitives

controls.

// buttons, selects, badges. action speaks through signal red; everything else recedes.

button / four voices

// b-001 · b-002 · b-003 · b-004

select / filter

// i-001

badge / tag

// bd-001 · five tones
group a court b focus final live draft
// 05 / primitives

sport.

// phase-bar to mark the tournament, match-card to announce the duel, data-row for grid-reading.

phase-bar / banner

// pb-001 · ink · gold · field
Semi-finals4:50 pm · court b
Quarter-finals3:35 pm · court a
Break20 minutes

match-card / duel

// mc-001 · signal / gold / field rails
9:50
court b
BX BrusselsvsFuturs Stars Academy
3:35
court a · final
BX BrusselsvsRWDM
11:20
court c · live
RUTB A2–1SK Pepingen

data-row / grid reading

// dr-001 · alternating + focus
aRUTB A — SK Pepingen09:50
bBX Brussels — RWDM10:20
cRUTB C — Plessy10:50
aFuturs Stars — RWDM11:20
bSK Pepingen — Plessy11:50
// 06 / primitives

docs.

// three primitives to document the system itself. used on this page throughout above.

// sw-001
swatch-grid
clickable color grid. used for the paper/ink, night, and chromatic accent sections at §01.
// sr-001
scale-row
name · value · example row. used to document the type scales at §02.
// sp-001
spec-grid
code / name / desc / demo grid. used for space & matter at §03 and primitives docs right here at §06.
// 07 / patterns

tournament tableau.

// full composition: filters → phase-bar → match-cards → data-rows. the primitive is the instrument, the pattern is the piece.

Hazard Tournament U12May 25 · day 1
9:50
court b · live
BX Brussels1–0Futurs Stars Academy
11:20
court b
BX BrusselsvsRWDM
aRUTB A — SK Pepingen09:50
bBX Brussels — Futurs Starslive
cRUTB C — Plessy10:50
// patternpt-001 / tableau
// primitivespb-001 · i-001 · mc-001 · dr-001
// rolesmark · filter · announce · list
// signalfocus = selected team
// derivedhazard tournament u12
// statuslive composition
// 08 / usage

install.

// four steps. link the sheet, load the fonts, compose the primitives, extend via the tokens.

// u-001 / link
a single sheet
system.css imports tokens.css. the entire system fits in two files.
<link rel="stylesheet"
  href="https://design.thinkspark.dev/touchline_ds/system.css?v=08">
// u-002 / fonts
three families, google fonts
anton + dm sans + ibm plex mono. preconnect for latency.
<link href="https://fonts.googleapis.com/css2?
  family=Anton&family=DM+Sans:wght@400;500;700&
  family=IBM+Plex+Mono:wght@400;500;600&display=swap"
  rel="stylesheet">
// u-003 / compose
compose, don't fork
use the classes as-is. if a variant is missing, add a dedicated modifier rather than patching.
<!-- mc-001 match-card -->
<div class="matchcard matchcard--gold">
  <div>
    <div class="matchcard-time">3:35</div>
    <div class="matchcard-court">court a</div>
  </div>
  <div class="matchcard-vs">
    <span class="home">BX Brussels</span>
    <span class="x">vs</span>
    <span class="away">RWDM</span>
  </div>
</div>
// u-004 / extend
extend via tokens
never edit system.css. override the tokens in :root. theme-night is a simple class.
/* override the signal, keep everything else */
:root {
  --signal: #0066ff;
}

/* switch to night */
document.documentElement.classList.add('theme-night');
// 09 / tokens

reference.

// css variables ready to paste. exportable to tailwind config or w3c json if needed.

/* touchline / tokens.css · t-001 · v0.1 */
:root {
  /* paper / ink — day */
  --paper:    #f4f2ec; --paper-2:   #ebe8df; --paper-3: #e0dccf;
  --card:     #ffffff; --line:      #d9d5ca;
  --dim:      #9a978d; --mid:       #6b6960; --mid-2:   #3d3b35;
  --ink:      #0e0e10; --ink-2:     #1c1b18;

  /* night palette */
  --night:    #13110d; --night-2:   #1d1a13; --night-3: #27231a;
  --milk:     #f1ede1; --milk-mid:  #8a8880; --milk-dim: #5e5b54;
  --line-n:   #33301f;

  /* chromatic accents — five families */
  --signal:   #e6321e; --signal-deep: #b8230f; --signal-soft: #fde7e2;
  --gold:     #b8932f; --gold-soft:   #f3e9cf;
  --field:    #2f7d4f; --field-soft:  #dff0e4;
  --warn:     #caa015;
  --info:     #2864e8;

  /* radius · line · motion */
  --r-sm: 2px; --r-md: 3px; --r-lg: 6px; --r-circle: 50%;
  --line-w: 1px; --line-w-2: 2px; --line-w-4: 4px;
  --dur-snap: 90ms; --dur-quick: 150ms; --dur-base: 220ms;

  /* spacing — 2px base */
  --s-2:2;--s-4:4;--s-8:8;--s-12:12;--s-16:16;--s-24:24;--s-32:32;--s-48:48;--s-64:64;--s-80:80;

  /* type families */
  --font-display: 'Anton', sans-serif;
  --font-sans:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;
}
copied