Everything this site is made of: three type styles, five colours, one hairline, one icon set and a handful of numbers. Small enough to hold in your head, which is the point of it.
Every value here is read off this page while you are looking at it, and every specimen is drawn with the token it names — so none of it can quietly stop being true. Press the mark in the header and the colours follow. Press a name and it is copied, with the two dashes a custom property needs; they are left off here, being CSS’s punctuation rather than part of the name.
The page itself.
Everything read line by line.
Dates, footer links, the close mark — read at a glance.
Laid over the ground: a logo’s tile, the index’s hover preview. It does not turn with the page.
Every hairline. Mixed from the ink, so it turns with the page.
The two pairs text is set in, in both themes. The dark theme is the light one’s contrasts the other way up, so the ratios come out within a hundredth of each other. The theme you are not looking at is read off the stylesheet rather than off the page. AA is 4.5:1 for text this size, AAA is 7:1.
Geist, one weight at 350. Three sizes, and all three are the same 16 / 24 — they are kept apart because they are named for the job and not the value, so a later change to the chrome need not be made by finding every rule that happens to be 16px. Position and colour do the ranking that size usually does. Leading is written in pixels rather than as a ratio, so the line box lands on the 4px grid the rest of the page sits on.
Three equal columns with between them. The header, the index’s rows, a project’s head and the footer all sit on them, and so does this page: the sections down the first, names down the second, values down the third. The footer lays as many of these as the window has room for and drops one at a time; below 768px the rest become a single column.
Measured on this page:
There is one breakpoint, 768px, and it is written out rather than held in a token: a media query cannot read one. It is the width at which the three columns are worth having — below it the header becomes a name and two words, a project’s pictures take the whole page, and the footer drops to a single column.
One thing on the site is lifted off the page rather than drawn on it, and it is the only shadow there is. Black at eight hundredths, which comes to nothing in the dark — and wants to: a shadow is how a light page says above, and a dark one says it by being lighter instead.
Point at a row to play it. The three durations draw the same line across the same distance, so the only difference between them is the one being named.
Three of them, and the difference between them is what they do rather than what they are made of. A link is read as a link and draws a line under itself to say so. A control is quiet until it is pointed at. Whether a control is a button or a link is decided by whether it navigates: the close on a project goes back to the index and is an anchor, the close over a picture dismisses it and is a button, and they look the same because they are the same control.
TextLinkPoint at meThe line wipes in from the left and out to the right, so it is drawn rather than switched on.TextLink tone="muted"Point at meThe footer’s. currentColor, so a grey link cannot end up with a black line under it.TextLink currentThe page you are onWears the line already, and is no longer offered. current="section" marks it the same way but keeps it live, which is what Work does from inside a project — and what the index beside this does.IconButtonA mark in a box one line tall, so the target is the size of the text beside it. Quiet like the words that do the same job, and there is no second tone: a mark that could be pressed and does not answer is a mark you are not sure about. edge pulls it by the box’s overhang, which puts the mark itself on the page’s margin..quietThe same behaviour in words rather than a mark — the lightbox’s Previous and Next, and the names on this page. Shared, so a mark and a word cannot answer differently.Two of these are an icon set: the same twelve-unit box, the same stroke, both drawn rather than set. The stroke does not scale with the box, so a mark drawn larger keeps the weight the rest of them have. at , which is the stem of the 16px text, so a mark is exactly as heavy as the letters beside it.
Logo96px72px48px24pxDrawn as one filled path, so unlike the two below it scales whole. The header draws it a line tall; the rest are here to be looked at. It runs on scroll where a page is long enough, and under the pointer where it is not. It is also the theme switch, which is why the site has no mark for one: the page turning over is the answer, and a control that already moves did not need a second one beside it.CloseSystemThree columns, which is what this page is mostly about. Vertical rather than horizontal: three horizontal lines is a menu everywhere on the web and would promise something it does not do.RuleOne hairline everywhere. The page opens with it, and that one rises into the header and reaches the window’s edges as you scroll.