trm/spa
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: import TRM design handoff + defer adoption to phase 3.8

Browse Source 
A design handoff bundle generated by Claude Design (claude.ai/design)
on 2026-05-02. Defines the Bloomberg/F1-pit-wall aesthetic for TRM:
- ink-on-paper base + race-flag red accent (#E8412B)
- square-edged everything, sharp printed offset shadows
- mono numerics (JetBrains Mono) for any changing value
- Goldplay (real licensed font, three weights in bundle fonts/)
- four surfaces designed: dashboard / leaderboard / mobile / marketing
  (SPA scope is the first two)

The bundle is committed in-tree at TRM_Design_System-handoff/ so 3.8
has the full source material when it picks the work up. Includes:
- Top-level + project READMEs (the design spec)
- chats/chat1.md (intent + iteration history)
- colors_and_type.css (token set, drop-in for Tailwind 4 @theme)
- fonts/ (Goldplay regular/semibold/bold)
- ui_kits/ (HTML prototypes per surface)
- preview/ (per-token visual reference cards)

Updated phase-3-dogfood-readiness/README.md task 3.8 row to point at
the bundle and document the recommended approach (retheme shadcn via
CSS variable overrides + Tailwind 4 @theme, not replace).

Why deferred: foundational tokens are non-blocking for Phase 1 (login
+ placeholder home) and Phase 2 (live map without chrome). Applying
them now would either delay dogfood-blocking work or land partial
styling that gets reworked when 3.8 lands the full pass.
This commit is contained in:
Julian Çuni
2026-05-02 19:10:11 +02:00
parent 0467a4b7ef
commit 8223a566e4
72 changed files with 3154 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
TRM_Design_System-handoff/trm-design-system/project/preview/_card.css
+17
View File
@@ -0,0 +1,17 @@
/* Shared base for preview cards. Each card = 700x<H>, no titles
(the asset name renders outside). Just show the thing. */
*,*::before,*::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
width: 700px;
background: var(--paper);
color: var(--ink);
font-family: var(--font-body);
padding: 20px;
}
.card-pad { padding: 20px; }
.row { display: flex; gap: 12px; align-items: center; }
.col { display: flex; flex-direction: column; gap: 8px; }
.fill { flex: 1; }
.dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
.hairline { border-top: 1px solid var(--hairline); }
TRM_Design_System-handoff/trm-design-system/project/preview/brand-icons.html
+35
View File
@@ -0,0 +1,35 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<link rel="stylesheet" href="_card.css">
<script src="https://unpkg.com/lucide@latest"></script>
<style>
body { padding: 24px; }
.grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 14px; }
.ic { display:flex; flex-direction:column; align-items:center; gap:6px; padding: 10px; border: 1px solid var(--hairline); }
.ic [data-lucide] { width: 22px; height: 22px; stroke-width: 2; color: var(--ink); }
.ic .nm { font-family: var(--font-mono); font-size: 9px; color: var(--ink-3); letter-spacing: 0.04em; text-transform: uppercase;}
.lbl { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); margin-top: 14px; }
</style></head>
<body>
<div class="overline" style="margin-bottom:14px;">Iconography · Lucide 2px stroke</div>
<div class="grid">
<div class="ic"><i data-lucide="flag"></i><div class="nm">flag</div></div>
<div class="ic"><i data-lucide="timer"></i><div class="nm">timer</div></div>
<div class="ic"><i data-lucide="map-pin"></i><div class="nm">pin</div></div>
<div class="ic"><i data-lucide="trophy"></i><div class="nm">trophy</div></div>
<div class="ic"><i data-lucide="users"></i><div class="nm">users</div></div>
<div class="ic"><i data-lucide="bar-chart-3"></i><div class="nm">chart</div></div>
<div class="ic"><i data-lucide="settings"></i><div class="nm">settings</div></div>
<div class="ic"><i data-lucide="bell"></i><div class="nm">bell</div></div>
<div class="ic"><i data-lucide="play"></i><div class="nm">play</div></div>
<div class="ic"><i data-lucide="pause"></i><div class="nm">pause</div></div>
<div class="ic"><i data-lucide="circle-stop"></i><div class="nm">stop</div></div>
<div class="ic"><i data-lucide="radio"></i><div class="nm">radio</div></div>
<div class="ic"><i data-lucide="route"></i><div class="nm">route</div></div>
<div class="ic"><i data-lucide="watch"></i><div class="nm">watch</div></div>
<div class="ic"><i data-lucide="wifi"></i><div class="nm">wifi</div></div>
<div class="ic"><i data-lucide="download"></i><div class="nm">export</div></div>
</div>
<div class="lbl">Sizes 14 / 16 / 20 / 24 / 32 · color inherits currentColor</div>
<script>lucide.createIcons();</script>
</body></html>
TRM_Design_System-handoff/trm-design-system/project/preview/brand-logo.html
+25
View File
@@ -0,0 +1,25 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<link rel="stylesheet" href="_card.css">
<style>
body { padding: 24px; }
.grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; align-items: stretch; }
.panel { border: 1px solid var(--ink); padding: 22px; display:flex; align-items:center; justify-content:center; }
.panel.dark { background: var(--ink); }
.panel img { max-width: 100%; height: auto; }
.panel.dark img { filter: invert(1) brightness(1.1); }
.meta { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); margin-top: 8px;}
</style></head>
<body>
<div class="overline" style="margin-bottom:14px;">Logo · primary wordmark</div>
<div class="grid">
<div>
<div class="panel"><img src="../assets/logo-trm.png" alt="TRM" style="width:260px;" /></div>
<div class="meta">Ink on paper · default</div>
</div>
<div>
<div class="panel dark"><img src="../assets/logo-trm.png" alt="TRM" style="width:200px;" /></div>
<div class="meta">Paper on ink · night surfaces</div>
</div>
</div>
</body></html>
TRM_Design_System-handoff/trm-design-system/project/preview/brand-patterns.html
+41
View File
@@ -0,0 +1,41 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<link rel="stylesheet" href="_card.css">
<style>
body { padding: 0; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; height: 240px; }
.panel { padding: 22px; position: relative; overflow: hidden; }
.a {
background-color: var(--paper);
background-image: radial-gradient(var(--ink) 1px, transparent 1px);
background-size: 16px 16px;
background-position: 0 0;
border: 1px solid var(--ink);
}
.b {
border: 1px solid var(--ink);
border-left: 0;
background:
repeating-linear-gradient(
45deg,
var(--paper-2),
var(--paper-2) 6px,
var(--paper) 6px,
var(--paper) 12px
);
}
.lbl { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); position: absolute; bottom: 12px; left: 14px; background: var(--paper); border: 1px solid var(--ink); padding: 3px 8px; }
.tag { position: absolute; top: 14px; right: 14px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
</style></head>
<body>
<div class="grid">
<div class="panel a">
<div class="tag">8% ink · 16px</div>
<div class="lbl">Dot grid</div>
</div>
<div class="panel b">
<div class="tag">45° · 12px</div>
<div class="lbl">Diagonal hatch · "estimated"</div>
</div>
</div>
</body></html>
TRM_Design_System-handoff/trm-design-system/project/preview/brand-pulse.html
+23
View File
@@ -0,0 +1,23 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<link rel="stylesheet" href="_card.css">
<style>
body { padding: 24px; background: var(--night); color: var(--night-fg); }
.row { display: flex; align-items: center; gap: 18px; }
.live { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: 0.10em; color: var(--paper); }
.dot-wrap { position: relative; width: 14px; height: 14px; }
.dot { position: absolute; inset: 3px; background: var(--flag); border-radius: 999px; animation: scale 2s infinite ease-in-out; }
.ring { position: absolute; inset: 0; border-radius: 999px; border: 1px solid var(--flag); animation: ring 2s infinite ease-out; opacity: 0; }
@keyframes scale { 0%,100% { transform: scale(1);} 50% { transform: scale(1.15);} }
@keyframes ring { 0% { transform: scale(1); opacity: 0.7;} 100% { transform: scale(2.6); opacity: 0; } }
.clk { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 56px; font-weight: 600; letter-spacing: -0.03em; color: var(--paper); }
.meta { font-family: var(--font-mono); font-size: 11px; color: var(--night-fg-3); margin-top: 14px; text-transform: uppercase; letter-spacing: 0.08em;}
</style></head>
<body>
<div class="overline" style="color:var(--night-fg-3); margin-bottom:14px;">Live pulse · signature motion</div>
<div class="row">
<div class="live"><span class="dot-wrap"><span class="ring"></span><span class="dot"></span></span>LIVE</div>
<div class="clk">01:23:45.6</div>
</div>
<div class="meta">2s loop · scale 1→1.15 · ring 0→2.6× · used at most once per screen</div>
</body></html>
TRM_Design_System-handoff/trm-design-system/project/preview/colors-accents.html
+34
View File
@@ -0,0 +1,34 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<link rel="stylesheet" href="_card.css">
<style>
body { padding: 20px; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.swatch { border: 1px solid var(--ink); }
.chip { height: 80px; display: flex; align-items: flex-end; padding: 8px 10px; }
.chip .name { font-family: var(--font-display); font-weight: 600; font-size: 13px; }
.meta { padding: 8px 10px; border-top: 1px solid var(--ink); font-family: var(--font-mono); font-size: 11px; line-height: 1.4; }
.meta .label { color: var(--ink-3); }
.meta .hex { color: var(--ink); }
</style></head>
<body>
<div class="overline" style="margin-bottom:12px;">Brand · accents</div>
<div class="grid">
<div class="swatch">
<div class="chip" style="background:var(--flag); color:#fff;"><span class="name">Flag</span></div>
<div class="meta"><div class="hex">#E8412B</div><div class="label">Primary CTA · Live · #1 pos</div></div>
</div>
<div class="swatch">
<div class="chip" style="background:var(--amber); color:var(--ink);"><span class="name">Amber</span></div>
<div class="meta"><div class="hex">#F2A516</div><div class="label">Caution · Yellow flag · Warn</div></div>
</div>
<div class="swatch">
<div class="chip" style="background:var(--green); color:#fff;"><span class="name">Green</span></div>
<div class="meta"><div class="hex">#2E8C4A</div><div class="label">Go · PB · Pass</div></div>
</div>
<div class="swatch">
<div class="chip" style="background:var(--blue); color:#fff;"><span class="name">Blue</span></div>
<div class="meta"><div class="hex">#2563C8</div><div class="label">Info · Link · Tracking</div></div>
</div>
</div>
</body></html>
TRM_Design_System-handoff/trm-design-system/project/preview/colors-neutrals.html
+36
View File
@@ -0,0 +1,36 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<link rel="stylesheet" href="_card.css">
<style>
body { padding: 20px; }
.row { display: grid; grid-template-columns: repeat(8, 1fr); border: 1px solid var(--ink); }
.step { height: 64px; display: flex; flex-direction: column; justify-content: flex-end; padding: 6px 8px; border-right: 1px solid var(--hairline); }
.step:last-child { border-right: 0; }
.step .name { font-family: var(--font-mono); font-size: 10px; opacity: 0.85; }
.step .hex { font-family: var(--font-mono); font-size: 10px; opacity: 0.7; }
.label { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; margin: 14px 0 6px; }
</style></head>
<body>
<div class="overline" style="margin-bottom:8px;">Paper / Ink scale — light surface</div>
<div class="row">
<div class="step" style="background:#FFFFFF;color:var(--ink);"><div class="name">white</div><div class="hex">#FFFFFF</div></div>
<div class="step" style="background:var(--paper);color:var(--ink);"><div class="name">paper</div><div class="hex">#FAFAF7</div></div>
<div class="step" style="background:var(--paper-2);color:var(--ink);"><div class="name">paper-2</div><div class="hex">#F2F2EE</div></div>
<div class="step" style="background:var(--paper-3);color:var(--ink);"><div class="name">paper-3</div><div class="hex">#E8E8E2</div></div>
<div class="step" style="background:var(--ink-6);color:var(--ink);"><div class="name">ink-6</div><div class="hex">#DCDCD4</div></div>
<div class="step" style="background:var(--ink-5);color:var(--ink);"><div class="name">ink-5</div><div class="hex">#B8B8B0</div></div>
<div class="step" style="background:var(--ink-4);color:#fff;"><div class="name">ink-4</div><div class="hex">#8A8A82</div></div>
<div class="step" style="background:var(--ink-3);color:#fff;"><div class="name">ink-3</div><div class="hex">#5A5A53</div></div>
</div>
<div class="label">Ink scale — type & strokes</div>
<div class="row">
<div class="step" style="background:var(--ink-3);color:#fff;"><div class="name">ink-3</div><div class="hex">#5A5A53</div></div>
<div class="step" style="background:var(--ink-2);color:#fff;"><div class="name">ink-2</div><div class="hex">#2A2A26</div></div>
<div class="step" style="background:var(--ink);color:#fff;"><div class="name">ink</div><div class="hex">#0E0E0C</div></div>
<div class="step" style="background:var(--night-3);color:#fff;"><div class="name">night-3</div><div class="hex">#1E222A</div></div>
<div class="step" style="background:var(--night-2);color:#fff;"><div class="name">night-2</div><div class="hex">#14171C</div></div>
<div class="step" style="background:var(--night);color:#fff;"><div class="name">night</div><div class="hex">#0B0D10</div></div>
<div class="step" style="background:#000;color:#fff;"><div class="name">black</div><div class="hex">#000000</div></div>
<div class="step" style="background:transparent;color:var(--ink);border-left: 1px solid var(--hairline);"><div class="name">—</div><div class="hex"></div></div>
</div>
</body></html>
TRM_Design_System-handoff/trm-design-system/project/preview/colors-night.html
+34
View File
@@ -0,0 +1,34 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<link rel="stylesheet" href="_card.css">
<style>
body { padding: 0; background: var(--night); color: var(--night-fg); }
.wrap { padding: 22px; }
.row { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--night-line); }
.step { height: 70px; display: flex; flex-direction: column; justify-content: flex-end; padding: 6px 8px; border-right: 1px solid var(--night-line); font-family: var(--font-mono); font-size: 10px; }
.step:last-child { border-right: 0; }
.pill { display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border:1px solid currentColor; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; margin-right:8px;}
.pill .dot { width:6px; height:6px; border-radius:999px; background: currentColor; }
.live-dot { display:inline-block; width:8px; height:8px; border-radius:999px; background: var(--flag); margin-right:6px; }
.lbl { font-family: var(--font-mono); font-size: 11px; color: var(--night-fg-3); text-transform: uppercase; letter-spacing: 0.06em; margin: 14px 0 6px; }
</style></head>
<body>
<div class="wrap">
<div class="overline" style="margin-bottom:8px; color: var(--night-fg-2);">Night mode · trackside / kiosk</div>
<div class="row">
<div class="step" style="background:var(--night); color:var(--night-fg);"><div>night</div><div style="opacity:.7">#0B0D10</div></div>
<div class="step" style="background:var(--night-2); color:var(--night-fg);"><div>night-2</div><div style="opacity:.7">#14171C</div></div>
<div class="step" style="background:var(--night-3); color:var(--night-fg);"><div>night-3</div><div style="opacity:.7">#1E222A</div></div>
<div class="step" style="background:var(--night-line); color:var(--night-fg);"><div>line</div><div style="opacity:.7">#2A2F38</div></div>
<div class="step" style="background:var(--night-fg-3); color:var(--night);"><div>fg-3</div><div style="opacity:.7">#8A8A82</div></div>
<div class="step" style="background:var(--night-fg); color:var(--night);"><div>fg</div><div style="opacity:.7">#F2F2EE</div></div>
</div>
<div class="lbl">Status pills on night</div>
<div>
<span class="pill" style="color:var(--flag);"><span class="live-dot"></span>LIVE</span>
<span class="pill" style="color:var(--green);"><span class="dot"></span>FINISHED</span>
<span class="pill" style="color:var(--amber);"><span class="dot"></span>FLAG</span>
<span class="pill" style="color:var(--night-fg-3);"><span class="dot"></span>DNS</span>
</div>
</div>
</body></html>
TRM_Design_System-handoff/trm-design-system/project/preview/colors-semantic.html
+34
View File
@@ -0,0 +1,34 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<link rel="stylesheet" href="_card.css">
<style>
body { padding: 20px; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.item { border: 1px solid var(--ink); }
.top { padding: 12px; background: var(--paper-2); border-bottom: 1px solid var(--ink); display:flex; align-items:center; gap:8px; }
.pill { display:inline-flex; align-items:center; gap:6px; padding:3px 8px; border:1px solid currentColor; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; }
.pill .dot { width:6px; height:6px; border-radius:999px; background: currentColor; }
.body { padding: 12px; font-size: 13px; color: var(--ink-3); line-height: 1.4; }
.body strong { color: var(--ink); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; }
</style></head>
<body>
<div class="overline" style="margin-bottom:12px;">Semantic · status</div>
<div class="grid">
<div class="item">
<div class="top"><span class="pill" style="color:var(--green); background: var(--green-tint);"><span class="dot"></span>OK</span></div>
<div class="body"><strong>green / ok</strong><br/>Started · finished · pass · personal best</div>
</div>
<div class="item">
<div class="top"><span class="pill" style="color:var(--amber-2); background: var(--amber-tint);"><span class="dot"></span>WARN</span></div>
<div class="body"><strong>amber / warn</strong><br/>Yellow flag · slow split · review</div>
</div>
<div class="item">
<div class="top"><span class="pill" style="color:var(--flag-2); background: var(--flag-tint);"><span class="dot"></span>DANGER</span></div>
<div class="body"><strong>flag / danger</strong><br/>DSQ · DNF · red flag · error</div>
</div>
<div class="item">
<div class="top"><span class="pill" style="color:var(--blue-2); background: var(--blue-tint);"><span class="dot"></span>INFO</span></div>
<div class="body"><strong>blue / info</strong><br/>Live · tracking · link</div>
</div>
</div>
</body></html>
TRM_Design_System-handoff/trm-design-system/project/preview/colors-viz.html
+35
View File
@@ -0,0 +1,35 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<link rel="stylesheet" href="_card.css">
<style>
body { padding: 20px; }
.swatches { display: grid; grid-template-columns: repeat(8, 1fr); border: 1px solid var(--ink); }
.sw { aspect-ratio: 1/1.1; display:flex; flex-direction:column; justify-content:flex-end; padding: 6px 8px; color:#fff; font-family: var(--font-mono); font-size: 10px; }
.sw .n { opacity:0.85; }
.sw .h { opacity:0.7; }
.chart { margin-top: 14px; height: 90px; border: 1px solid var(--ink); padding: 10px; display:flex; align-items:flex-end; gap: 4px; background: var(--paper-2);}
.bar { flex: 1; }
</style></head>
<body>
<div class="overline" style="margin-bottom:8px;">Categorical · data viz (8)</div>
<div class="swatches">
<div class="sw" style="background:var(--viz-1);"><div class="n">viz-1</div><div class="h">E8412B</div></div>
<div class="sw" style="background:var(--viz-2);"><div class="n">viz-2</div><div class="h">2563C8</div></div>
<div class="sw" style="background:var(--viz-3);"><div class="n">viz-3</div><div class="h">2E8C4A</div></div>
<div class="sw" style="background:var(--viz-4); color:var(--ink);"><div class="n">viz-4</div><div class="h">F2A516</div></div>
<div class="sw" style="background:var(--viz-5);"><div class="n">viz-5</div><div class="h">6B46C1</div></div>
<div class="sw" style="background:var(--viz-6);"><div class="n">viz-6</div><div class="h">188C8A</div></div>
<div class="sw" style="background:var(--viz-7);"><div class="n">viz-7</div><div class="h">C9296F</div></div>
<div class="sw" style="background:var(--viz-8);"><div class="n">viz-8</div><div class="h">5A5A53</div></div>
</div>
<div class="chart">
<div class="bar" style="background:var(--viz-1); height:60%"></div>
<div class="bar" style="background:var(--viz-2); height:80%"></div>
<div class="bar" style="background:var(--viz-3); height:42%"></div>
<div class="bar" style="background:var(--viz-4); height:90%"></div>
<div class="bar" style="background:var(--viz-5); height:35%"></div>
<div class="bar" style="background:var(--viz-6); height:65%"></div>
<div class="bar" style="background:var(--viz-7); height:48%"></div>
<div class="bar" style="background:var(--viz-8); height:25%"></div>
</div>
</body></html>
TRM_Design_System-handoff/trm-design-system/project/preview/comp-alerts.html
+40
View File
@@ -0,0 +1,40 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<link rel="stylesheet" href="_card.css">
<style>
body { padding: 24px; }
.row { display: flex; flex-wrap: wrap; gap: 14px; }
.alert { display: grid; grid-template-columns: 8px 1fr auto; gap: 12px; align-items: center; padding: 10px 14px; border: 1px solid var(--ink); background: var(--paper-2); width: 100%; }
.alert .bar { width: 4px; align-self: stretch; }
.alert .msg { font-family: var(--font-display); font-size: 13px; }
.alert .meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.alert.warn .bar { background: var(--amber); }
.alert.danger .bar { background: var(--flag); }
.alert.ok .bar { background: var(--green); }
.alert.info .bar { background: var(--blue); }
</style></head>
<body>
<div class="overline" style="margin-bottom:14px;">Inline alerts · race control</div>
<div class="row">
<div class="alert danger">
<div class="bar"></div>
<div><span class="msg">Bib 247 — missed split 3</span> &nbsp; <span class="meta">flagging for review</span></div>
<div class="meta">14:02:11</div>
</div>
<div class="alert warn">
<div class="bar"></div>
<div><span class="msg">Yellow flag — sector 2</span> &nbsp; <span class="meta">debris cleared in 90s</span></div>
<div class="meta">14:00:42</div>
</div>
<div class="alert ok">
<div class="bar"></div>
<div><span class="msg">Wave 3 cleared start mat</span> &nbsp; <span class="meta">412 / 412 starters</span></div>
<div class="meta">13:45:00</div>
</div>
<div class="alert info">
<div class="bar"></div>
<div><span class="msg">Tracking active</span> &nbsp; <span class="meta">14 of 14 mats online</span></div>
<div class="meta">13:30:00</div>
</div>
</div>
</body></html>
TRM_Design_System-handoff/trm-design-system/project/preview/comp-badges.html
+33
View File
@@ -0,0 +1,33 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<link rel="stylesheet" href="_card.css">
<style>
body { padding: 24px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pill { display:inline-flex; align-items:center; gap:6px; padding: 3px 10px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; border: 1px solid currentColor;}
.pill .dot { width:6px; height:6px; border-radius:999px; background: currentColor; }
.live .dot { background: var(--flag); animation: pulse 2s infinite ease-out; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--flag); } 100% { box-shadow: 0 0 0 8px rgba(232,65,43,0); } }
.chip { display:inline-flex; align-items:center; gap:6px; padding: 3px 8px; font-family: var(--font-mono); font-size: 11px; border: 1px solid var(--ink); background: var(--paper-2); border-radius: 2px;}
.lbl { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); margin: 16px 0 8px; }
</style></head>
<body>
<div class="overline" style="margin-bottom:14px;">Status badges</div>
<div class="row">
<span class="pill live" style="color:var(--flag);"><span class="dot"></span>LIVE</span>
<span class="pill" style="color:var(--green);"><span class="dot"></span>FINISHED</span>
<span class="pill" style="color:var(--amber-2);"><span class="dot"></span>FLAG</span>
<span class="pill" style="color:var(--blue-2);"><span class="dot"></span>STARTED</span>
<span class="pill" style="color:var(--ink-3);"><span class="dot"></span>DNS</span>
<span class="pill" style="color:var(--ink);"><span class="dot"></span>DNF</span>
<span class="pill" style="color:var(--flag-2);"><span class="dot"></span>DSQ</span>
</div>
<div class="lbl">Filter chips</div>
<div class="row">
<span class="chip">Wave 1</span>
<span class="chip">Wave 2</span>
<span class="chip" style="background:var(--ink); color:var(--paper); border-color:var(--ink);">Wave 3 ✕</span>
<span class="chip">M40–49</span>
<span class="chip">Elite</span>
</div>
</body></html>
TRM_Design_System-handoff/trm-design-system/project/preview/comp-buttons.html
+39
View File
@@ -0,0 +1,39 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<link rel="stylesheet" href="_card.css">
<style>
body { padding: 24px; }
.row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn {
font-family: var(--font-display); font-weight: 600; font-size: 14px;
border: 1px solid var(--ink); background: var(--paper); color: var(--ink);
padding: 0 16px; height: 36px; cursor: pointer; display: inline-flex;
align-items: center; gap: 8px; box-shadow: 2px 2px 0 0 var(--ink);
transition: transform 120ms var(--ease-snap), box-shadow 120ms var(--ease-snap);
border-radius: 0;
}
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.flag { background: var(--flag); color: #fff; border-color: var(--ink); }
.btn.ghost { box-shadow: none; }
.btn.sm { height: 28px; padding: 0 12px; font-size: 12px; }
.btn.lg { height: 44px; padding: 0 22px; font-size: 15px; }
.btn.disabled { opacity: 0.4; cursor: not-allowed; }
.lbl { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); width: 100%; margin-top: 6px; }
</style></head>
<body>
<div class="overline" style="margin-bottom:14px;">Buttons</div>
<div class="row">
<button class="btn primary">Start race</button>
<button class="btn flag">⏺ Go live</button>
<button class="btn">Export results</button>
<button class="btn ghost">Cancel</button>
<button class="btn disabled" disabled>Disabled</button>
</div>
<div class="lbl">Default · primary (ink) · flag (live) · ghost · disabled</div>
<div class="row" style="margin-top:18px;">
<button class="btn sm">Small</button>
<button class="btn">Default</button>
<button class="btn lg primary">Large primary</button>
</div>
<div class="lbl">Sizes — sm 28 · md 36 · lg 44</div>
</body></html>
TRM_Design_System-handoff/trm-design-system/project/preview/comp-inputs.html
+42
View File
@@ -0,0 +1,42 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<link rel="stylesheet" href="_card.css">
<style>
body { padding: 24px; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-3);}
.input {
border: 1px solid var(--ink); background: var(--paper); height: 36px;
padding: 0 12px; font-family: var(--font-mono); font-size: 14px; color: var(--ink);
border-radius: 2px;
}
.input:focus { outline: 2px solid var(--flag); outline-offset: 2px; }
.input.error { border-color: var(--flag); }
.hint { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); }
.err { color: var(--flag); }
.select { appearance: none; background-image: linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%); background-position: calc(100% - 14px) 14px, calc(100% - 9px) 14px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px;}
</style></head>
<body>
<div class="overline" style="margin-bottom:14px;">Inputs</div>
<div class="grid">
<div class="field">
<label>Bib number</label>
<input class="input" value="247" />
<div class="hint">Tabular figures — leading zeros optional</div>
</div>
<div class="field">
<label>Wave</label>
<select class="input select"><option>Wave 1 · Elite</option></select>
</div>
<div class="field">
<label>Start time</label>
<input class="input" value="09:15:00.000" />
</div>
<div class="field">
<label>Bib number</label>
<input class="input error" value="—" />
<div class="hint err">Bib already in use by Wave 2</div>
</div>
</div>
</body></html>
TRM_Design_System-handoff/trm-design-system/project/preview/comp-kpi.html
+34
View File
@@ -0,0 +1,34 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<link rel="stylesheet" href="_card.css">
<style>
body { padding: 24px; }
.grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.card { border: 1px solid var(--ink); padding: 14px; background: var(--paper); }
.lbl { font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-3); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.delta { font-family: var(--font-mono); font-size: 11px; }
.up { color: var(--green); }
.dn { color: var(--flag); }
.meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); }
</style></head>
<body>
<div class="overline" style="margin-bottom:14px;">Stat / KPI cards</div>
<div class="grid">
<div class="card">
<div class="lbl">Active bibs</div>
<div class="num" style="font-size: 40px; margin-top:8px;">1,247</div>
<div class="delta up" style="margin-top:6px;">↑ 12 in last 5 min</div>
</div>
<div class="card">
<div class="lbl">Lead time</div>
<div class="num" style="font-size: 40px; margin-top:8px;">42:18.4</div>
<div class="delta meta" style="margin-top:6px;">Bib 247 · split 3</div>
</div>
<div class="card" style="background: var(--ink); color: var(--paper); border-color: var(--ink);">
<div class="lbl" style="color: var(--paper-3);">Leader gap</div>
<div class="num" style="font-size: 40px; margin-top:8px; color: var(--paper);">+0:04.2</div>
<div class="delta dn" style="margin-top:6px;">↓ closing 0.3s/km</div>
</div>
</div>
</body></html>
TRM_Design_System-handoff/trm-design-system/project/preview/comp-table.html
+32
View File
@@ -0,0 +1,32 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<link rel="stylesheet" href="_card.css">
<style>
body { padding: 0; }
.wrap { padding: 18px; }
table { width: 100%; border-collapse: collapse; border: 1px solid var(--ink); }
th, td { text-align: left; padding: 0 10px; height: 28px; font-family: var(--font-mono); font-size: 12px; border-bottom: 1px solid var(--hairline); }
th { background: var(--paper-2); font-weight: 600; font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--ink); }
tr:nth-child(even) td { background: rgba(14,14,12,0.025); }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pos { font-weight: 700; color: var(--ink); }
.pos.gold { color: var(--flag); }
.gain { color: var(--green); }
.loss { color: var(--flag); }
.name { font-family: var(--font-display); font-weight: 500; font-size: 13px; }
</style></head>
<body>
<div class="wrap">
<div class="overline" style="margin-bottom:10px;">Leaderboard table · dense 28px</div>
<table>
<thead><tr><th style="width:40px;">POS</th><th style="width:50px;">BIB</th><th>NAME</th><th>WAVE</th><th class="num">SPLIT 3</th><th class="num">GAP</th><th class="num">PACE</th></tr></thead>
<tbody>
<tr><td class="pos gold">1</td><td>247</td><td class="name">Maya Chen</td><td>Elite</td><td class="num">00:42:18.4</td><td class="num">—</td><td class="num">04:13</td></tr>
<tr><td class="pos">2</td><td>188</td><td class="name">Ravi Park</td><td>Elite</td><td class="num">00:42:22.6</td><td class="num loss">+0:04.2</td><td class="num">04:14</td></tr>
<tr><td class="pos">3</td><td>044</td><td class="name">Noemi Vega</td><td>Elite</td><td class="num">00:42:30.1</td><td class="num loss">+0:11.7</td><td class="num">04:15</td></tr>
<tr><td class="pos">4</td><td>302</td><td class="name">Tomás Riera</td><td>Elite</td><td class="num">00:42:55.0</td><td class="num loss">+0:36.6</td><td class="num">04:18</td></tr>
<tr><td class="pos">5</td><td>119</td><td class="name">Anika Joshi</td><td>Elite</td><td class="num">00:43:01.2</td><td class="num loss">+0:42.8</td><td class="num">04:19</td></tr>
</tbody>
</table>
</div>
</body></html>
TRM_Design_System-handoff/trm-design-system/project/preview/layout-grid.html
+43
View File
@@ -0,0 +1,43 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<link rel="stylesheet" href="_card.css">
<style>
body { padding: 0; }
.frame { border: 1px solid var(--ink); margin: 20px; height: 220px; display: grid; grid-template-rows: 36px 1fr; }
.top { border-bottom: 1px solid var(--ink); display:flex; align-items:center; padding: 0 14px; gap: 10px; background: var(--paper-2); }
.logo { font-family: var(--font-display); font-weight:700; letter-spacing: -0.02em; }
.nav { display: flex; gap: 14px; margin-left: 18px; font-family: var(--font-display); font-size:13px; font-weight:500; color: var(--ink-3); }
.clk { margin-left: auto; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; }
.cols { display: grid; grid-template-columns: 64px 1fr; height:100%;}
.side { border-right: 1px solid var(--ink); background: var(--paper-2); }
.side-item { height: 36px; border-bottom: 1px solid var(--hairline); display:flex; align-items:center; justify-content:center; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.body { padding: 14px; }
.grid { display: grid; grid-template-columns: 4fr 4fr 2fr; gap: 12px; height: 100%; }
.col { border: 1px solid var(--hairline); padding: 8px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); display:flex; flex-direction:column; gap:4px;}
.col strong { color: var(--ink); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;}
</style></head>
<body>
<div class="frame">
<div class="top">
<div class="logo">TRM</div>
<div class="nav">Events · Live · Results · Settings</div>
<div class="clk">14:02:11</div>
</div>
<div class="cols">
<div class="side">
<div class="side-item">⌘</div>
<div class="side-item">▦</div>
<div class="side-item">▶</div>
<div class="side-item">⊙</div>
<div class="side-item">≡</div>
</div>
<div class="body">
<div class="grid">
<div class="col"><strong>Leaderboard 40%</strong>POS BIB NAME GAP<br/>1 247 M.Chen —<br/>2 188 R.Park +0:04.2<br/>3 044 N.Vega +0:11.7</div>
<div class="col"><strong>Map 40%</strong>Track view · checkpoints · live dots</div>
<div class="col"><strong>Detail 20%</strong>Selected athlete</div>
</div>
</div>
</div>
</div>
</body></html>
TRM_Design_System-handoff/trm-design-system/project/preview/spacing-radius.html
+22
View File
@@ -0,0 +1,22 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<link rel="stylesheet" href="_card.css">
<style>
body { padding: 20px; }
.row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.box { width: 80px; height: 80px; background: var(--paper-2); border: 1px solid var(--ink); }
.lbl { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }
.val { font-family: var(--font-mono); font-size: 11px; color: var(--ink); font-weight: 600; }
</style></head>
<body>
<div class="overline" style="margin-bottom:14px;">Corner radius · square by default</div>
<div class="row">
<div class="item"><div class="box" style="border-radius:0;"></div><div class="val">0</div><div class="lbl">r-0 default</div></div>
<div class="item"><div class="box" style="border-radius:2px;"></div><div class="val">2</div><div class="lbl">r-1</div></div>
<div class="item"><div class="box" style="border-radius:4px;"></div><div class="val">4</div><div class="lbl">r-2 chip</div></div>
<div class="item"><div class="box" style="border-radius:6px;"></div><div class="val">6</div><div class="lbl">r-3 sm card</div></div>
<div class="item"><div class="box" style="border-radius:10px;"></div><div class="val">10</div><div class="lbl">r-4 lg card</div></div>
<div class="item"><div class="box" style="border-radius:999px;"></div><div class="val">∞</div><div class="lbl">r-pill status</div></div>
</div>
</body></html>
TRM_Design_System-handoff/trm-design-system/project/preview/spacing-scale.html
+27
View File
@@ -0,0 +1,27 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<link rel="stylesheet" href="_card.css">
<style>
body { padding: 20px; }
.row { display: flex; align-items: flex-end; gap: 12px; }
.item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.bar { background: var(--ink); }
.lbl { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }
.val { font-family: var(--font-mono); font-size: 11px; color: var(--ink); font-weight: 600; }
</style></head>
<body>
<div class="overline" style="margin-bottom:14px;">Spacing scale · 4-px base</div>
<div class="row">
<div class="item"><div class="bar" style="width:4px;height:4px;"></div><div class="val">4</div><div class="lbl">s-2</div></div>
<div class="item"><div class="bar" style="width:8px;height:8px;"></div><div class="val">8</div><div class="lbl">s-3</div></div>
<div class="item"><div class="bar" style="width:12px;height:12px;"></div><div class="val">12</div><div class="lbl">s-4</div></div>
<div class="item"><div class="bar" style="width:16px;height:16px;"></div><div class="val">16</div><div class="lbl">s-5</div></div>
<div class="item"><div class="bar" style="width:20px;height:20px;"></div><div class="val">20</div><div class="lbl">s-6</div></div>
<div class="item"><div class="bar" style="width:24px;height:24px;"></div><div class="val">24</div><div class="lbl">s-7</div></div>
<div class="item"><div class="bar" style="width:32px;height:32px;"></div><div class="val">32</div><div class="lbl">s-8</div></div>
<div class="item"><div class="bar" style="width:40px;height:40px;"></div><div class="val">40</div><div class="lbl">s-9</div></div>
<div class="item"><div class="bar" style="width:48px;height:48px;"></div><div class="val">48</div><div class="lbl">s-10</div></div>
<div class="item"><div class="bar" style="width:64px;height:64px;"></div><div class="val">64</div><div class="lbl">s-11</div></div>
<div class="item"><div class="bar" style="width:80px;height:80px;"></div><div class="val">80</div><div class="lbl">s-12</div></div>
</div>
</body></html>
TRM_Design_System-handoff/trm-design-system/project/preview/spacing-shadow.html
+20
View File
@@ -0,0 +1,20 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<link rel="stylesheet" href="_card.css">
<style>
body { padding: 24px; }
.row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.item { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.box { width: 110px; height: 70px; background: var(--paper); border: 1px solid var(--ink); display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:600; font-size:14px;}
.lbl { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }
.val { font-family: var(--font-mono); font-size: 11px; color: var(--ink); font-weight: 600; }
</style></head>
<body>
<div class="overline" style="margin-bottom:18px;">Elevation · printed offset shadow</div>
<div class="row">
<div class="item"><div class="box">flat</div><div class="val">shadow-0</div><div class="lbl">surface · no shadow</div></div>
<div class="item"><div class="box" style="box-shadow: 2px 2px 0 0 var(--ink);">2px</div><div class="val">shadow-2</div><div class="lbl">button rest</div></div>
<div class="item"><div class="box" style="box-shadow: 4px 4px 0 0 var(--ink);">4px</div><div class="val">shadow-3</div><div class="lbl">button hover · card</div></div>
<div class="item"><div class="box" style="box-shadow: 0 8px 24px rgba(14,14,12,0.12);">soft</div><div class="val">shadow-pop</div><div class="lbl">menu · marketing</div></div>
</div>
</body></html>
TRM_Design_System-handoff/trm-design-system/project/preview/type-body.html
+34
View File
@@ -0,0 +1,34 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<link rel="stylesheet" href="_card.css">
<style>
body { padding: 24px; }
.stack > * + * { margin-top: 14px; }
.meta { color: var(--ink-4); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.line { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 16px; border-bottom: 1px solid var(--hairline); padding-bottom: 10px;}
.line:last-child { border-bottom: 0; padding-bottom: 0; }
</style></head>
<body>
<div class="stack">
<div class="line">
<div class="lead">Race directors trust TRM to time everything from a 60-runner park 5K to a 24-hour endurance event with 4,000 starters across six waves.</div>
<div class="meta">Lead · 17/24 · Inter 400</div>
</div>
<div class="line">
<div class="body">Body. Used in marketing copy and long-form documentation. The dashboard itself rarely contains body prose — it's all tables and tokens.</div>
<div class="meta">Body · 15/22 · Inter 400</div>
</div>
<div class="line">
<div class="small">Small. Field hints, table footnotes, secondary detail beneath a headline number.</div>
<div class="meta">Small · 13/18 · Inter 400</div>
</div>
<div class="line">
<div class="micro">Micro. Reserved for table meta and timestamp pills. Use sparingly — must remain legible at glance.</div>
<div class="meta">Micro · 12/16 · Inter 400</div>
</div>
<div class="line">
<div class="overline">Wave 3 · 4.2 km · 47 starters</div>
<div class="meta">Overline · 11/14 · Goldplay 600 · +0.10em</div>
</div>
</div>
</body></html>
TRM_Design_System-handoff/trm-design-system/project/preview/type-display.html
+34
View File
@@ -0,0 +1,34 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<link rel="stylesheet" href="_card.css">
<style>
body { padding: 24px; }
.stack > * + * { margin-top: 14px; }
.meta { color: var(--ink-4); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.line { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 16px; border-bottom: 1px solid var(--hairline); padding-bottom: 10px;}
.line:last-child { border-bottom: 0; padding-bottom: 0; }
</style></head>
<body>
<div class="stack">
<div class="line">
<div class="display" style="font-size:56px;">Lap 14&#8202;/&#8202;22</div>
<div class="meta">Display · 56/56 · Goldplay 700</div>
</div>
<div class="line">
<div class="h1">Run any event.</div>
<div class="meta">H1 · 48/52 · Goldplay 700</div>
</div>
<div class="line">
<div class="h2">Time any sport.</div>
<div class="meta">H2 · 34/38 · Goldplay 700</div>
</div>
<div class="line">
<div class="h3">Wave 3 starts at 09:15</div>
<div class="meta">H3 · 26/30 · Goldplay 600</div>
</div>
<div class="line">
<div class="h4">Live race control</div>
<div class="meta">H4 · 20/24 · Goldplay 600</div>
</div>
</div>
</body></html>
TRM_Design_System-handoff/trm-design-system/project/preview/type-mono.html
+41
View File
@@ -0,0 +1,41 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<link rel="stylesheet" href="_card.css">
<style>
body { padding: 24px; }
.meta { color: var(--ink-4); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.stack > * + * { margin-top: 12px; }
.clk { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); letter-spacing: -0.03em; line-height: 1; font-weight: 600; }
.row-meta { display: flex; justify-content: space-between; align-items: baseline; }
</style></head>
<body>
<div class="stack">
<div class="row-meta">
<div class="clk" style="font-size:80px;">01:23:45.6</div>
<div class="meta">Jumbo · JetBrains Mono 600 · 80px</div>
</div>
<div class="row-meta">
<div class="clk" style="font-size:40px;">+00:04.218</div>
<div class="meta">Mono lg · 40px · gap value</div>
</div>
<div class="grid" style="margin-top: 6px;">
<div>
<div class="num" style="font-size:22px;">04:13<span style="color:var(--ink-4)">/km</span></div>
<div class="meta" style="margin-top:4px;">Mono md · 22px · pace</div>
</div>
<div>
<div class="num" style="font-size:22px;">247</div>
<div class="meta" style="margin-top:4px;">Mono md · bib</div>
</div>
<div>
<div class="num" style="font-size:14px;">POS BIB NAME GAP</div>
<div class="meta" style="margin-top:4px;">Table header · 14px · uppercase</div>
</div>
<div>
<div class="num" style="font-size:14px;"> 1 247 M. CHEN —</div>
<div class="meta" style="margin-top:4px;">Table row · 14px · tabular figs</div>
</div>
</div>
</div>
</body></html>
TRM_Design_System-handoff/trm-design-system/project/preview/type-scale.html
+25
View File
@@ -0,0 +1,25 @@
<!doctype html><html><head><meta charset="utf-8">
<link rel="stylesheet" href="../colors_and_type.css">
<link rel="stylesheet" href="_card.css">
<style>
body { padding: 24px; }
.scale { display: grid; grid-template-columns: 60px 80px 80px 1fr; gap: 8px 16px; align-items: baseline; }
.scale > div:nth-child(4n+1) { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; }
.scale > div:nth-child(4n+2),
.scale > div:nth-child(4n+3) { font-family: var(--font-mono); font-size: 11px; color: var(--ink-4); }
.scale > div:nth-child(4n+4) { font-family: var(--font-display); color: var(--ink); }
.row-h { display:contents; }
</style></head>
<body>
<div class="overline" style="margin-bottom:14px;">Type scale</div>
<div class="scale">
<div>display</div><div>72px</div><div>1.05</div><div style="font-size:48px;font-weight:700;letter-spacing:-0.02em;">Aa Race</div>
<div>h1</div><div>48px</div><div>1.05</div><div style="font-size:36px;font-weight:700;letter-spacing:-0.02em;">Aa Race</div>
<div>h2</div><div>34px</div><div>1.20</div><div style="font-size:28px;font-weight:700;letter-spacing:-0.02em;">Aa Race</div>
<div>h3</div><div>26px</div><div>1.20</div><div style="font-size:22px;font-weight:600;">Aa Race</div>
<div>h4</div><div>20px</div><div>1.35</div><div style="font-size:18px;font-weight:600;">Aa Race</div>
<div>body</div><div>15px</div><div>1.55</div><div style="font-family:var(--font-body);font-size:15px;">The race begins at noon.</div>
<div>small</div><div>13px</div><div>1.55</div><div style="font-family:var(--font-body);font-size:13px;">The race begins at noon.</div>
<div>over</div><div>11px</div><div>+0.10em</div><div class="overline" style="font-size:11px;">Wave 3 · 47 starters</div>
</div>
</body></html>