Writing

Quiet tonal: no borders, no shadows

The default answer to “these two things are different” is a line. When a line isn’t enough it becomes a card, and when a card isn’t enough it gets a shadow. Do that a few dozen times and the interface is mostly chrome: every element wearing a little frame, and the actual content sharing the page with a hundred pieces of scaffolding that exist to say this bit is separate from that bit.

This site doesn’t draw any of it. There is no border and no shadow anywhere in the CSS, and separation comes from one thing only: a step in lightness between two fills. I call it quiet tonal. Here is the whole system.

Four rungs

One axis, four values on it, named by their position in a nesting rather than by a number:

  • page: the canvas. Near-white, never pure white, so that something raised still has somewhere to go.
  • sunken: the gray container. It holds things and is never itself content.
  • raised: white. The content sits here, inset inside the sunken container.
  • recessed: gray again, but inside a raised surface. The de-emphasised state: completed, disabled, secondary.
--surface:          0 0% 98.4%;  /* #fbfbfb  the canvas   */
--surface-sunken:   0 0% 94.1%;  /* #f0f0f0  containers  */
--surface-raised:   0 0% 100%;   /* #ffffff  content     */
--surface-recessed: 0 0% 96.5%;  /* #f6f6f6  the recess  */

Notice that gray does double duty. As a container it is the parent of white; as a recess it is the child of white. The same value reads as two opposite things, and which one you see is decided entirely by what it is nested inside.

That is why the padding is load-bearing rather than decorative. A container with no gutter around its children is just two flat colours meeting at an edge, indistinguishable from a border you drew in gray. The gutter is what makes the child read as sitting inside the parent, and it is the only thing carrying the depth cue. Remove it and the system collapses back into lines.

Radii have to nest too

Two rounded rectangles, one inside the other, look wrong at the corners unless their radii differ by exactly the distance between them. The relationship is not “a bit tighter than the parent”, it is arithmetic:

--surface-gutter: 0.5rem;  /*  8px  the padding a container leaves */
--radius-outer:   1.5rem;  /* 24px  the container                 */
--radius:         1rem;    /* 16px  an inset      (24 − 8)        */
--radius-inner:   0.75rem; /* 12px  a control inside that inset   */

Change any one of the three and you have to change all three, or the corners stop being concentric and start merely coexisting. Writing it down as inner = outer − gutter is what makes that obvious to whoever touches it next, including me, four months later.

Removing the shortcut

A rule you have to remember is a rule you will break at 1am. Deciding not to use borders is worth about a week; the interesting part is making the shortcut unavailable.

/* Transparent, deliberately. */
--border: 0 0% 50% / 0;

* {
  @apply border-border;
}

Every border in the codebase resolves through that token, so border and border-b still lay out, occupying their pixel with nothing reflowing; they just don’t draw. Reaching for a divider out of habit produces no divider, and the habit dies on its own without anyone having to police it in review.

There is an escape hatch, and it is deliberately slightly annoying: a genuine hairline has to name its colour at the call site. The cost of the exception is one explicit line in the diff, which is exactly where you want an exception to be visible.

Dark is not the inverse

The obvious move is to flip the four values and ship it. That produces a dark mode where nesting inward means getting darker, and it looks wrong immediately, because on a dark canvas, the thing that comes forward is the thing that is lighter. The direction of the scale has to invert along with the values.

.dark {
  --surface:          240 6% 7%;
  --surface-sunken:   240 5% 10.5%;
  --surface-raised:   240 5% 15%;    /* now the brightest rung */
  --surface-recessed: 240 5% 12.5%;  /* falls back toward the container */
}

The steps are tighter too, 3–4% against light’s 4–6%. An equal delta in lightness reads louder against dark, so matching the numbers would give you a dark mode with visibly harder edges than the light one, which is the tell that a theme was derived rather than designed. Same relationship, different arithmetic.

The ink ramp gets the same treatment. Light runs 84% down to 10%; dark runs 34% up to 98%, a wider spread at the quiet end, because a dim grey on black loses its shape long before a light grey on white does. Neither ramp is the other one subtracted from 100.

What it costs

You give up the cheapest separator there is, and you find out how often you were using it to avoid a decision. Every grouping now has to be argued in space and tone: related rows are separate insets with a small gap, a section ends because the next one starts further away, a footer signals a change of register with smaller, greyer type instead of a rule across the page.

That is more work per screen and it is the entire benefit. A line will separate anything from anything, which is why it lets you ship a layout you never actually resolved. Take it away and the hierarchy has to be real before the page will read at all.