1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
---
title: "Loop — task dashboard"
summary: >-
A recurring-task web dashboard. Dense rows, mono meta columns, overdue in
danger red, one primary action. A generic demonstration of the system, not
a recreation of any real product's actual screens.
---
Loop is not a real product — it is the system's own reference layout for a
dense, table-ish list screen: the shape a recurring-task tracker would take
if it were rebuilt on this token set. Every visible value below is a
component from this system, composed with real page-specific CSS
(`_sass/site/patterns.css`) rather than inline styles — the same thing an
actual project built on this system would write.
<figure class="example">
<figcaption>Loop</figcaption>
<div data-layout="stack">
<div class="pattern-dashboard">
<header class="pattern-dashboard__header">
<span class="pattern-dashboard__title">Loop</span>
<div class="pattern-spacer"></div>
<button data-variant="primary" data-size="sm" style="--gl-icon: var(--gl-icon-plus)">
New
</button>
<span class="avatar">km</span>
</header>
<div class="pattern-dashboard__body">
<div class="pattern-dashboard__main">
<section class="pattern-section">
<div class="pattern-section__heading">
<span class="type-label" style="color: var(--gl-color-danger);">Overdue</span>
<span class="badge" data-tone="danger">2</span>
</div>
<ul class="card pattern-list">
<li>
<button class="pattern-complete" data-tone="danger" aria-label="Complete"></button>
<div class="pattern-row">
<div class="pattern-row__title" data-tone="danger">Call Mom</div>
<div class="type-mono pattern-row__meta">every 2 weeks</div>
</div>
<span class="type-mono pattern-row__trailing" data-tone="danger">3d overdue</span>
</li>
<li>
<button class="pattern-complete" data-tone="danger" aria-label="Complete"></button>
<div class="pattern-row">
<div class="pattern-row__title" data-tone="danger">Water the ferns</div>
<div class="type-mono pattern-row__meta">every 5 days</div>
</div>
<span class="type-mono pattern-row__trailing" data-tone="danger">1d overdue</span>
</li>
</ul>
</section>
<section class="pattern-section">
<div class="type-label pattern-aside__label">Upcoming</div>
<ul class="card pattern-list">
<li>
<button class="pattern-complete" aria-label="Complete"></button>
<div class="pattern-row">
<div class="pattern-row__title">Renew passport</div>
<div class="type-mono pattern-row__meta">every 10 years</div>
</div>
<span class="type-mono pattern-row__trailing" data-tone="secondary">in 3 months</span>
</li>
<li>
<button class="pattern-complete" aria-label="Complete"></button>
<div class="pattern-row">
<div class="pattern-row__title">Dentist checkup</div>
<div class="type-mono pattern-row__meta">every 6 months</div>
</div>
<span class="type-mono pattern-row__trailing" data-tone="secondary">in 2 weeks</span>
</li>
<li>
<button class="pattern-complete" aria-label="Complete"></button>
<div class="pattern-row">
<div class="pattern-row__title">Rotate mattress</div>
<div class="type-mono pattern-row__meta">every 6 months</div>
</div>
<span class="type-mono pattern-row__trailing" data-tone="secondary">in 5 weeks</span>
</li>
</ul>
</section>
</div>
<aside class="pattern-dashboard__aside">
<div class="type-label pattern-aside__label">This week</div>
<div class="pattern-week">
<div class="pattern-week__day">
<span class="type-mono pattern-week__label">S</span>
<span class="pattern-week__value">0</span>
</div>
<div class="pattern-week__day">
<span class="type-mono pattern-week__label">M</span>
<span class="pattern-week__value">1</span>
</div>
<div class="pattern-week__day">
<span class="type-mono pattern-week__label">T</span>
<span class="pattern-week__value">0</span>
</div>
<div class="pattern-week__day" data-active>
<span class="type-mono pattern-week__label">W</span>
<span class="pattern-week__value">2</span>
</div>
<div class="pattern-week__day">
<span class="type-mono pattern-week__label">T</span>
<span class="pattern-week__value">0</span>
</div>
<div class="pattern-week__day">
<span class="type-mono pattern-week__label">F</span>
<span class="pattern-week__value">1</span>
</div>
<div class="pattern-week__day">
<span class="type-mono pattern-week__label">S</span>
<span class="pattern-week__value">0</span>
</div>
</div>
<div class="type-label pattern-aside__label--tight">Series</div>
<div>
<div class="pattern-series-item">Call Mom</div>
<div class="pattern-series-item">Water the ferns</div>
<div class="pattern-series-item">Renew passport</div>
</div>
</aside>
</div>
</div>
</div>
</figure>
## The New series dialog
<figure class="example">
<figcaption>New series</figcaption>
<div data-layout="stack">
<div class="dialog-demo" style="min-height: 36rem;">
<dialog open style="width: 22rem;">
<header>New series</header>
<div>
<div class="field-stack">
<label class="field">
Note
<input placeholder="Call Mom" />
<small>First line becomes the display name.</small>
</label>
<div class="form-row">
<label class="field">
Every
<input type="number" placeholder="2" />
</label>
<label class="field">
Unit
<select><option>Day</option><option selected="">Week</option><option>Month</option><option>Year</option></select>
</label>
</div>
</div>
</div>
<footer>
<button>Cancel</button>
<button data-variant="primary">Create</button>
</footer>
</dialog>
</div>
</div>
</figure>
## After completing a task
<figure class="example">
<figcaption>Toast</figcaption>
<div>
<div role="status">
<span>Completed "Call Mom"</span>
<button aria-label="Dismiss">×</button>
</div>
</div>
</figure>
## What this screen is testing
- **Dense rows next to a mono meta column.** A recurring-task list is
fundamentally tabular even though it never touches an actual `<table>`.
- **Overdue in `--gl-color-danger`, everywhere at once.** Row text, the
complete-button border, and the trailing meta all pick it up from the same
`overdue` state — color never drifts row to row.
- **One primary action.** `New` is the only accent-filled control on screen;
everything else is neutral or bordered.
- **Accent used exactly once, decoratively.** The "km" avatar and the
highlighted day both use `--gl-color-accent-soft` / `-ink` — never the raw
accent fill outside of `New`.