touchline / ds — design system

// 00 / principles

design discipline.

// six règles. la rigueur éditoriale appliquée comme code. elles gouvernent chaque décision en dessous.

// 01 / signalUne couleur dominante. Un seul accent.

Papier crème, encre chaude. Le rouge de signal ne sert qu'au focus et à l'action. Le doré aux honneurs (finales, podium). Le vert au statut live. Jamais deux couleurs vives en compétition sur la même surface.

// 02 / metaphorLe tableau, pas l'app.

Chaque primitive a un code produit — mc-001, pb-001, dr-001. "Utilise mc-001" gagne contre "utilise la carte de match". Le code donne la permanence d'un objet plutôt que l'évanescence d'un widget.

// 03 / lowercaseMinuscules, partout.

Les majuscules s'annoncent. La minuscule fait confiance au lecteur. Réservée aux micro-capitales mono (≤10px) et au display Anton — la voix éditoriale s'autorise les capitales condensées, le reste se tait.

// 04 / honestyPas de décoration au-delà de la fonction.

Pas de dégradés. Pas d'ombres portées. Pas d'arrondis généreux. Bordures hairline, coins quasi droits (2–6px). Une seule exception : le remplissage de zone graphique via color-mix.

// 05 / pressLe système est un journal.

Anton pour l'impact (titres, scores, heures, phases). DM Sans pour le texte courant. IBM Plex Mono pour la donnée. Trois voix, trois rôles stricts. Le tableau de match emprunte au journal sportif, pas au dashboard saas.

// 06 / longevityConstruit pour durer.

Coins carrés, hairlines, micro-capitales mono. Rien dans ce système ne sera daté dans cinq ans parce que rien n'est à la mode aujourd'hui. La rigueur traverse les saisons.

à faire / à éviter

// pr-001 / discipline pair

// + do

Une couleur dominante + un accent tranchant.
Le mono uniquement pour la donnée et les labels.
Surlignage plat plutôt qu'ombres portées.
Barres pleines pour scander les phases.
Tracking large sur les capitales mono micro.

// – don't

Dégradés, surtout violet sur blanc.
Arrondis généreux (> 8px).
Plus d'un accent vif à l'écran.
Polices système (Inter, Roboto, Arial).
Ombres floues et profondeur décorative.

// 01 / foundations

color system.

// dix neutres pour la surface et le type, cinq familles chromatiques pour la fonction. le rouge mène, le doré honore, le vert annonce la vie.

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

poule b 15h35 live

// night · :root.theme-night

poule b 15h35 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.

// trois voix, trois rôles stricts. anton porte l'impact, dm sans porte le texte, ibm plex mono porte la donnée. ne jamais mélanger les rôles.

families / three voices

// fm-001 · fm-002 · fm-003

Aa

Antondisplay// fm-001 · titres, scores, phases

Aa

DM Sansbody// fm-002 · texte, boutons, labels

Aa

IBM Plex Monodata// fm-003 · terrains, codes, micro

display anton / impact

// fm-001 / scale

--t-72→120heroHazard Tournament

--t-42→72h1Quarts de finale

--t-42h2Poule B · Terrain 2

--t-28h315h35 · Live

dm sans / body

// fm-002 / scale

--t-18h4 / subBX Brussels joue cinq matchs.

--t-15leadUn système éditorial-sportif, dérivé du Hazard Tournament U12.

--t-13bodyRUTB A affronte SK Pepingen sur le terrain B à 09h50.

ibm plex mono / data

// fm-003 / scale

--t-11code / metaterrain b · 09h50 · poule b · 5 matchs

--t-10meta// touchline / ds · v0.1 · editorial-sport

--t-9cap micropoule b · terrain b · 5 matchs

// 03 / foundations

space & matter.

// échelle modulaire base 2px. coins quasi droits. mouvement court. la rigueur passe par des angles francs.

// s-001 / spacing

2px base · 19 increments

--s-2 (2) → --s-80 (80). tokens utilisés pour padding, gap, margin. les composants ne fixent jamais de px hors token.

// l-001 / line

hairline 1px

--line-w 1px partout. --line-w-2 2px pour les tabs actifs. --line-w-4 4px pour le rail focus du match-card.

// r-001 / radius

2 / 3 / 6 / circle

coins serrés. --r-sm tag/bouton, --r-md card, --r-lg exception, --r-circle réservé au dot et à l'avatar.

// el-001 / elevation

presque rien

pas d'ombre portée. --shadow-low pour une élévation de 1px ton-sur-ton, --glow-live pour signaler une activité live.

// mo-001 / motion

snap · quick · base

90ms · 150ms · 220ms · ease cubic-bezier(0.2,0,0,1). respecté par prefers-reduced-motion (durées → 0).

// lay-001 / layout

max 1500 · gutter 24

--max-w 1500, --max-w-text 700, --gutter 24. utilisés par .frame, le seul container global.

0

1500

// 04 / primitives

controls.

// boutons, sélecteurs, étiquettes. l'action passe par le signal rouge ; tout le reste s'efface.

button / four voices

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

select / filter

// i-001

badge / tag

// bd-001 · five tones

poule a terrain b focus finale live draft

// 05 / primitives

sport.

// phase-bar pour scander le tournoi, match-card pour annoncer le duel, data-row pour la lecture en grille.

phase-bar / bannière

// pb-001 · ink · gold · field

Demi-finales16h50 · terrain b

Quarts de finale15h35 · terrain a

Pause20 minutes

match-card / duel

// mc-001 · signal / gold / field rails

09h50

terrain b

BX BrusselsvsFuturs Stars Academy

15h35

terrain a · finale

BX BrusselsvsRWDM

11h20

terrain c · live

RUTB A2–1SK Pepingen

data-row / lecture en grille

// dr-001 · alternating + focus

aRUTB A — SK Pepingen09h50

bBX Brussels — RWDM10h20

cRUTB C — Plessy10h50

aFuturs Stars — RWDM11h20

bSK Pepingen — Plessy11h50

// 06 / primitives

docs.

// trois primitives pour documenter le système lui-même. utilisées sur cette page partout au-dessus.

// sw-001

swatch-grid

grille de couleurs cliquables. utilisée pour les sections paper/ink, night, et chromatic accents au §01.

// sr-001

scale-row

ligne nom · valeur · exemple. utilisée pour documenter les échelles de type au §02.

// sp-001

spec-grid

grille code / nom / desc / démo. utilisée pour space & matter au §03 et primitives docs ici-même au §06.

// 07 / patterns

tournoi tableau.

// composition complète : filtres → phase-bar → match-cards → data-rows. la primitive est l'instrument, le pattern est la pièce.

Hazard Tournament U1225 mai · journée 1

09h50

terrain b · live

BX Brussels1–0Futurs Stars Academy

11h20

terrain b

BX BrusselsvsRWDM

aRUTB A — SK Pepingen09h50

bBX Brussels — Futurs Starslive

cRUTB C — Plessy10h50

// patternpt-001 / tableau

// primitivespb-001 · i-001 · mc-001 · dr-001

// rolesscander · filtrer · annoncer · lister

// signalfocus = équipe sélectionnée

// derivedhazard tournament u12

// statuslive composition

// 08 / usage

install.

// quatre étapes. lier la feuille, charger les polices, composer les primitives, étendre via les tokens.

// u-001 / link

une seule feuille

system.css importe tokens.css. tout le système tient en deux fichiers.

<link rel="stylesheet"
  href="https://design.thinkspark.dev/touchline_ds/system.css?v=01">

// u-002 / fonts

trois familles, google fonts

anton + dm sans + ibm plex mono. preconnect pour la latence.

<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

composer, ne pas forker

utiliser les classes telles quelles. si une variante manque, ajouter un modifieur dédié plutôt que de patcher.

<!-- mc-001 match-card -->
<div class="matchcard matchcard--gold">
  <div>
    <div class="matchcard-time">15h35</div>
    <div class="matchcard-court">terrain 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

étendre via tokens

jamais éditer system.css. surcharger les tokens dans :root. theme-night est une simple classe.

/* override the signal, keep everything else */
:root {
  --signal: #0066ff;
}

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

// 09 / tokens

reference.

// variables css prêtes à coller. exportable en config tailwind ou en json w3c si besoin.

/* 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;
}