Design system

1. Null is the cuta print, a tile

Where there is silver, we do not draw a mark on top of it. We cut the mark out of the silver, so a plate appears as a hole in its print or in a silver tile.

This rule applies only at larger sizes. Next to a title, in a README or as an icon, a plate at 16 to 32px is a solid glyph placed directly on the background, without a tile.

2. Null is a valueone treatment everywhere

Threshold

0.6

Final split

not read yet

Outcome

untested

GPU time

3.40 h

When a value is missing, its cell keeps its place and its label, but its background is cut away to null. The reason the value is missing is written in the cell in the dimmer text colour.

We use this for every kind of missing value: not read yet, untested, invalid, or none. A missing value is not an error and not a loading state, so nothing turns red and nothing animates.

The margin holds only keys

The margin contains the mark, a date, a number, a time or the chapter index, and nothing else. All other content is placed in the column next to it, which extends to the far edge of the page.

Two shapes, one rule

A pill is a single line that names something. A sheet has a 12px corner and holds anything taller than one line. Inside a sheet, a 1px line separates the cells. We do not use borders or shadows.

Three depths, one light

There are three background levels: pure null, the page, and a sheet. We reserve solid silver for three things: the current page in the header, the main action on a view, and the best row in a table.

One typeface, two weights

We use one type family at two weights and five sizes. Body text is 17px at regular weight, in silver instead of white. We show hierarchy by switching between silver and a dimmer tone that we call clay, and never with bold or capitals.

Images are the lightest part

Prints and figures are lighter than the page around them. A print fades to dark before it reaches its own edge, so that an image does not put a hard bright edge on a dark page.

What is shown is true

Placeholder content is labelled as a placeholder, and an empty log is shown empty. We avoid any description that the data does not support.

Numberscells

Em

6

Corner

0.25

Stem

2.5

Shoulder, and its round

2.5

Slit

0.5

Slit, below 48px

1

Sizes32, 20, 16

The mark is 20px in the header, next to 14px labels. On a silver background it is cut out in null. We never make it the largest element on a screen, with one exception: the print at the top of this page.

Table 1Roles: the colours a component may use

Contrast is measured against the background each role is used on. Clay is the dimmest value we use for text, and line and wash are never used for text. Silver on the page has a contrast of 13.2:1, compared with 21:1 for white on black.

On paperthe same roles, remapped with one attribute

No component changes for the light version. Each role above is given a second value under data-tone="paper" in tokens.css. Prints do not change either, and stay silver on null. The light version is a proof of concept that we have not tuned yet.

The five sizes are display, statement, read, label and code. Display and statement shrink on a phone, to 34 and 19px, and the other three stay the same. Read and label are each one pixel larger than we would use on a light page, because light text on a dark background looks smaller than it is.

SatoshiFontshare Free Font License

IBM Plex MonoSIL OFL 1.1

0123456789
c0011  0.735
2026-08-07T09:12Z

The gridthe chapter index on the left is in the margin

1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11

The margin is exactly as wide as the widest thing it holds, which is a date in a pill. Running text is limited to about 68 characters per line. Entries, figures, tables and prints are laid out on the columns.

Table 2Space

Shape999px, 12px, 1px

A pill: a single line that names something, 28px high

A ruled cell

one value

Beside it

no value

A table row is a 34px line inside a sheet. That is the height of a pill plus one gap, so a table has the same rhythm as a stack of pills. We do not use any other corner radius.

Table 3Durations: point at a row to play it

We animate only colour and transform, and never layout.

Under the header

Content that scrolls under the header is blurred in five stacked steps, each one stronger and closer to the top of the screen. The content is blurred but not faded out, and the pills in the header stay opaque.

A pilla name, or a command

A pill is a single line that names the content next to it or below it, or it is a button. A straight arrow means the link stays on this site, and a slanted arrow means it leaves. The main action on a view is solid silver. When a pill is only slightly wider than its text, like the date above, the text is centred. When it has 24px or more to spare, like the pill under the date, the text starts at the left.

A ruled cella value in a set

Kind

Artifacts

Status

Released

We use ruled cells for the facts of an entry, the rows of a table and the lines of a log. The cells share one sheet and are separated by 1px lines. The most important row is filled with solid silver.

A plain linka way somewhere

A link inside a sentence is already underlined.

We use plain links in the chapter index, in the footer and inside sentences. When you point at a link it gains an underline, and it never turns into a pill. In the chapter index, the chapter that is on screen is shown in silver, together with its part of the line next to the index.

Nothing

Running text, captions and notes.

Text on the page does not need a container.

A pill's statesfixed, for reference

The pointer state is shown only to a pointer that can hover. On a touch screen a pill, a link or a row does not change when it is tapped, so nothing stays highlighted after the tap.

A link's statesfixed, for reference

Lab logplaceholder rows

Each line has its date in the first column, a short description next to it and its time at the end. Lines are listed newest first, in Rome time. A line that leads somewhere is a link: its text is underlined when you point at it, and the row does not change shape. Below the example is the log as it is today. It is empty, so it is shown as a cut to null.

What Flint's plate representsread from plates.js

These lines are read from the plate's own source file when the marks are generated, so this page cannot drift from the plate itself.

One entry pointplate.js

function plate(name, opts) {
  if (!name) return Logo.svg(opts);
  return Plates.svg(name, opts);
}

A page asks for a plate by name, and a print asks for the same name. Both requests go through this one function. No page depends on the outline of a particular plate, so redrawing a plate means changing one file.

Plates at small sizes

Each plate above is shown large, at 32px and at 16px, in silver on the background. Below 28px we use a coarser drawing, in which thin threads and slots are widened to a whole cell.

2. Out of focusenlarged, rotated

3. Through a screendot, enlarged 6 times

4. Exposed around the plate

Where we use prints

We use prints in the feed, on entry cards, and at the top of a README or a paper. We never use them as a background for text, and never in the footer.

What changed

An earlier draft had five screens and a mid-grey tint. We kept three screens and two tones. We removed the mosaic screen because on a dark page it looked like a terminal.

One callprints.js

NullsilverPrints.draw(
  canvas, 'flint', { tone: 'null' })

Labloop: a research harness for coding agentsfrom the entry

The header's pills, at actual sizenot interactive

The first row shows the header at rest. The second shows it on the Artifacts page with the pointer over About, and the third on the Research page with keyboard focus on About. The pill for the current page is solid silver. When you point at another pill it becomes one step lighter and its arrow appears. The last pill is the main action. It is two columns wide and always shows its arrow, so when you point at it, it turns silver the way a title pill does. On a small phone the four pills share the row, each only slightly wider than its text, so their text is centred.

A paperfirst page

A READMEgithub.com/nullsilver-labs/labloop

On GitHub the ruled rows become a two-column Markdown table, and the print and the plate are PNG files of the kind that Plate, our generator, already produces.