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
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
|
---
name: Waterloo AGI
description: UWaterloo students doing AGI research, shown as a graph of equal members on a dark latent-space ground.
colors:
ground: "#07090d"
ground-raised: "#0d1016"
ink: "#ebe9e2"
ink-soft: "#bfc2c9"
muted: "#8d929c"
rule: "rgba(235,233,226,.13)"
rule-strong: "rgba(235,233,226,.24)"
pen: "#8fa0ff"
pen-ink: "#0b0f2a"
amber: "#d8a36c"
typography:
display:
fontFamily: "Newsreader, Iowan Old Style, Georgia, serif"
fontSize: "clamp(3.3rem, 10.5vw, 6rem)"
fontWeight: 360
lineHeight: 0.95
letterSpacing: "-0.035em"
headline:
fontFamily: "Newsreader, Iowan Old Style, Georgia, serif"
fontSize: "clamp(2.2rem, 5vw, 3.6rem)"
fontWeight: 360
lineHeight: 1.02
letterSpacing: "-0.03em"
title:
fontFamily: "Newsreader, Iowan Old Style, Georgia, serif"
fontSize: "clamp(1.6rem, 3vw, 2.2rem)"
fontWeight: 400
lineHeight: 1.1
letterSpacing: "-0.02em"
lede:
fontFamily: "Newsreader, Iowan Old Style, Georgia, serif"
fontSize: "clamp(1.12rem, 1.6vw, 1.3rem)"
fontWeight: 400
lineHeight: 1.5
body:
fontFamily: "Newsreader, Iowan Old Style, Georgia, serif"
fontSize: "1.0625rem"
fontWeight: 400
lineHeight: 1.6
label:
fontFamily: "IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
fontSize: "0.78rem"
fontWeight: 400
letterSpacing: "0.01em"
rounded:
hairline: "2px"
panel: "3px"
pill: "9px"
round: "50%"
spacing:
gutter: "clamp(16px, 4.4vw, 56px)"
section: "clamp(96px, 16vh, 168px)"
panel: "clamp(20px, 3vw, 32px)"
row: "22px"
maxw: "1240px"
components:
button-outline:
backgroundColor: "transparent"
textColor: "{colors.ink-soft}"
typography: "{typography.label}"
rounded: "{rounded.hairline}"
padding: "6px 10px"
button-outline-active:
textColor: "{colors.pen}"
button-icon:
backgroundColor: "transparent"
textColor: "{colors.ink-soft}"
rounded: "{rounded.round}"
size: "32px"
button-text:
backgroundColor: "transparent"
textColor: "{colors.muted}"
typography: "{typography.label}"
padding: "4px"
status-tag:
backgroundColor: "transparent"
textColor: "{colors.ink-soft}"
typography: "{typography.label}"
rounded: "{rounded.hairline}"
padding: "6px 10px"
panel:
backgroundColor: "rgba(9,11,16,.88)"
rounded: "{rounded.panel}"
padding: "{spacing.panel}"
nav-link:
textColor: "{colors.ink-soft}"
typography: "{typography.label}"
nav-link-hover:
textColor: "{colors.ink}"
range-slider:
backgroundColor: "{colors.ground}"
height: "22px"
---
# Design System: Waterloo AGI
## Overview
**Creative North Star: "The Latent Space Notebook"**
The site sits on a near-black ground that reads as the inside of a model's representation space. Everything drawn on it is pale ink: hairline rules, thin field lines, points and edges. A single periwinkle pen colour marks what the reader is touching or what the page wants them to follow. The world is built from the materials an ML researcher already recognizes (dipole field lines, attention arcs, conv feature plates, a memory lattice, a graph of nodes), rendered as line and point work instead of filled illustration.
Newsreader carries the reading voice at light weights with tight tracking at display sizes. IBM Plex Mono appears only where the page reports data: identifiers, labels, readouts, controls, captions and hints. Density is low. Sections are tall, text columns are narrow, and the interactive figures get the width.
Depth comes from canvas layers and translucency, not shadows. Surfaces that sit over moving canvases use a dark scrim of the ground colour so text stays legible while the scene keeps moving behind it.
**Key Characteristics:**
- Dark ground (#07090d) with pale ink linework and one pen-blue accent.
- Newsreader for everything read, IBM Plex Mono for everything reported.
- Hairline 1px rules at 13% or 24% ink instead of boxes and fills.
- Point, line and node drawings that an ML reader recognizes.
- No box shadows anywhere; translucent ground scrims carry layering.
- Every slow load shows an indeterminate pen bar with a plain sentence.
## Colors
A near-monochrome dark palette of warm off-white ink on blue-black, with one cool accent and one warm data colour.
### Primary
- **Pen Blue** (pen): the only interactive accent. Hover and focus states, active toggles, slider fill and thumb ring, attention arcs in the hero, the hovered member node and its links, loading bar fill, text selection, and the Moby-Dick text series in the WP-001 figure. The filled "Read the paper here" button is the one pen-filled control. Text on a pen fill uses **Pen Ink** (pen-ink).
### Tertiary
- **Lab Amber** (amber): a data and caveat colour, never interactive. It marks the changed-details series in the WP-001 figure and the 3D trail, and it colours figure source labels and the sample-profiles note. The build uses it where the direction contract named only pen blue; the build wins, and amber stays confined to comparison series and caveat labels.
### Neutral
- **Latent Ground** (ground): page background, 3D fog colour, theme colour, and the base of every scrim.
- **Raised Ground** (ground-raised): the one step up, used for control trays and the scrollbar track.
- **Paper Ink** (ink): headings, active text, node outlines and point clouds.
- **Soft Ink** (ink-soft): body copy in ledes and lists, nav links, button text.
- **Graphite** (muted): captions, hints, identifiers, secondary mono text, the off state of switches.
- **Hairline** (rule): section dividers, list row rules, panel inner borders.
- **Strong Hairline** (rule-strong): outlines of buttons, tags, panels and slider tracks; link underlines at rest.
### Named Rules
**The One Pen Rule.** Pen blue is the only colour that responds to the reader. If something turns pen blue, it is interactive or it is the thing being followed.
**The Amber Is Evidence Rule.** Amber labels a data series or a caveat about the data. It never marks a link, button or state.
## Typography
**Display Font:** Newsreader (with Iowan Old Style, Georgia, serif), loaded with the optical size axis (6 to 72) and weights 300 to 600.
**Body Font:** Newsreader, same stack.
**Label/Mono Font:** IBM Plex Mono (with ui-monospace, SFMono-Regular, Menlo), weights 400 and 500.
**Character:** A light, optically sized book serif reads like a paper, and the mono beside it reads like the instrument output next to the paragraph. The two never swap roles.
### Hierarchy
- **Display** (360, clamp(3.3rem, 10.5vw, 6rem), 0.95): the site title in the hero only.
- **Headline** (360, clamp(2.2rem, 5vw, 3.6rem), 1.02): one per section.
- **Title** (400, clamp(1.6rem, 3vw, 2.2rem), 1.1): paper titles such as WP-001. Member names in the person panel use 2rem, and list row heads use 1.3rem.
- **Lede** (400, clamp(1.12rem, 1.6vw, 1.3rem), 1.5): section intros in soft ink, capped at 34 to 36rem. The hero sentence is a larger lede at weight 350.
- **Body** (400, 1.0625rem, 1.6): running text, capped near 34 to 44rem.
- **Label** (400, 0.78rem, 0.01em tracking, sentence case): nav links, identifiers, status, readouts, captions, hints, buttons. Slider outputs use 0.76rem in pen blue. Canvas labels use Plex Mono at 10 to 11px.
### Named Rules
**The Reported Not Read Rule.** Mono is for values, identifiers, controls and captions. A sentence the reader is meant to read as prose is set in Newsreader.
**The Light Display Rule.** Headings stay at weight 360 to 400 with negative tracking (minus 0.015em to minus 0.035em). Bold serif headings are not part of this world.
## Layout
Content sits in a centred column capped at 1240px with a fluid gutter (clamp 16px to 56px). Sections are tall, with vertical padding of clamp(96px, 16vh, 168px), so each one holds a single idea and its figure. The hero fills the viewport (100svh) and anchors the title to the bottom left over a full-bleed canvas.
Two-column splits use a 5 to 7 fraction ratio and collapse to one column under 860px. List rows use an 11rem label column beside the text and stack under 560px. The member stage takes min(78vh, 760px) with a 520px floor; its person panel docks at the right at min(360px, 38%) and moves below the canvas under 760px. The nav drops the wordmark text under 520px.
A fixed 3D canvas behind all sections fades in after the hero scrolls away, reaching 85% opacity, so sections read as layered over one continuous scene.
## Elevation & Depth
This system uses no box shadows. Depth comes from three layers: the fixed 3D scene with ground-coloured fog, translucent ground scrims over it (82% for the stuck nav with an 8px backdrop blur, 88% for the research panel, 90% for floating notes and the load bar), and hairline borders that separate surfaces. Horizontal scrims (72% to 50% ground, or 60% to 90% on the person panel) keep text legible over moving linework.
### Named Rules
**The Scrim Not Shadow Rule.** A surface that needs to sit above the scene gets a translucent ground fill and a hairline border. It never gets a drop shadow or glow.
## Shapes
Corners are nearly square. Rectangles use a 2px radius (buttons, tags, notes, load bar) or 3px (the research panel). Round shapes are fully round: icon buttons, slider thumbs, switch knobs and member nodes. The switch track is the only pill (9px). Borders are 1px at rule or rule-strong opacity; focus rings and slider thumbs use 1.5px pen blue. Charts and scenes draw with 0.5px to 2.5px strokes and round caps.
## Components
### Buttons
Outlined, quiet and set in mono.
- **Shape:** near-square corners (2px), or fully round for icon buttons (32px).
- **Outline:** transparent fill, strong hairline border, soft ink mono text, 6px 10px padding. Used for view toggles and the back button.
- **Hover / Focus:** border and text shift to pen blue over 0.2s on the house ease. Focus shows a 1.5px pen outline offset 3px.
- **Pressed toggle:** aria-pressed buttons keep the pen border and text.
- **Text button:** no border, muted mono with a hairline underline, pen blue on hover. Used for Reset.
### Chips
- **Status tag:** mono label with a strong hairline border and 2px corners. It states status and does not respond to pointer input.
### Cards / Containers
- **Corner Style:** 3px.
- **Background:** ground at 88% over the scene; control trays inside use raised ground at 60%.
- **Shadow Strategy:** none, see Elevation.
- **Border:** strong hairline outside, hairlines between header, figure and controls.
- **Internal Padding:** clamp(20px, 3vw, 32px).
### Inputs / Fields
- **Range slider:** 2px track in strong hairline with a pen fill up to the value, a 14px round thumb in ground colour with a 1.5px pen ring. The value shows in a pen blue mono output beside the label, and a muted serif hint sits under it.
- **Switch:** 34 by 18px outlined pill; the knob is muted when off and slides 16px to pen blue when on, with the track border turning pen.
### Navigation
Fixed top bar with the SVG arc mark and wordmark on the left and mono section links on the right in soft ink. Links turn paper ink on hover or when current. The bar is transparent over the hero and gains a 82% ground scrim, blur and hairline bottom border once the page scrolls.
### Lists
Row lists use a top hairline and a hairline under every row, 22px vertical padding, and a serif head in an 11rem column beside soft ink text. Fact rows in the person panel use a 7.2rem mono key column and highlight the key in pen when pressed.
### Loading Line
Every slow load shows a fixed or inline strip: an 88px by 2px track in strong hairline with a 36% pen segment sliding across on a 1.2s ease-in-out loop, beside a plain mono sentence that says what is loading. Under reduced motion the segment stops and shows as a full half-opacity bar.
### Member Graph and Portrait (signature)
Members are equal circular nodes on a canvas, joined by 1px ink edges at 16% opacity when they share an interest. Hovering a node turns its ring, name and edges pen blue and labels each edge with the shared interest in mono on a ground chip. Names sit under nodes in Newsreader (12 to 20px with zoom), with the program in 11px mono. Opening a member dissolves the node into a point and edge portrait over 1.5s, which then turns to about 55 degrees (0.95 rad) to reveal a second layer of fact nodes behind it. Closing takes 0.9s.
### Motion
One house ease (cubic-bezier(.16,1,.3,1)) drives CSS transitions at 0.2s to 0.45s. Canvas tweens use an exponential ease out. Every animated script checks prefers-reduced-motion and drops to instant states, and the stylesheet collapses all CSS transitions and animations under the same query.
## Do's and Don'ts
### Do:
- **Do** draw figures as points, lines and nodes in ink on the ground colour, and pick forms an ML researcher would recognize.
- **Do** reserve pen blue (#8fa0ff) for interaction, focus, selection and the followed series.
- **Do** set identifiers, values, controls, captions and hints in IBM Plex Mono at 0.72 to 0.78rem, and everything read as prose in Newsreader.
- **Do** separate surfaces with 1px hairlines at 13% or 24% ink.
- **Do** put a translucent ground scrim under any text that sits over a moving canvas.
- **Do** show the loading line with a plain sentence for anything slower than about half a second.
- **Do** honour prefers-reduced-motion in both CSS and every canvas script.
### Don't:
- **Don't** add box shadows or glows; use a scrim and a hairline.
- **Don't** use amber for links, buttons or states; it is for data series and caveat labels.
- **Don't** round rectangles beyond 3px.
- **Don't** set headings in bold serif weights.
- **Don't** give any member a larger node, a role or a title; every node in the graph is the same size.
|
