Skip to content
Ink

The principles

Drawn once, and left alone.

Most interfaces are built to hold attention: they move, glow, count and refresh. Ink is built to give attention back. Each rule here removes something that asks for the eye, so what remains is the text and the reader.

Six principles

What Ink promises

  1. Ink or paper.

    Every mark is one of sixteen grays, and most of a page is just two: the ink and the paper it sits on.

  2. Nothing moves.

    A change happens in one step, never as a transition. Movement pulls the eye whether the reader wants to look or not, so there is none.

  3. Pages, not scroll.

    Long content arrives a page at a time with the count in view, and turning a page changes all of it at once. A page can be finished. Then it ends.

  4. A press is black and white.

    Feedback inverts the control, ink for paper and paper for ink, at once. It is unmistakable, and it asks for nothing more.

  5. Type is the interface.

    Lora for anything read, Atkinson Hyperlegible Next for anything operated. A notch heavier than usual, large, and well leaded.

  6. Still is free.

    Nothing ticks, refreshes or updates itself. A page left alone stays as it was left, and asks for nothing.

Refused

Ten things Ink leaves out

None of them has a token or a class in this system. Most are also checked: tools/check-stillness.mjs fails the build on any gradient, shadow, blur, partial opacity, transition, animation, hover state, thin weight or color that is not one of the sixteen levels.

Transitions and animation

Why not: Motion draws the eye on its own schedule, not the reader’s. Even a short fade asks to be watched.

Instead: Change state in one step. A press is an instant inversion.

Scrolling feeds, smooth and infinite

Why not: A scroll has no natural place to stop, and an infinite feed is built so that there is none.

Instead: Pages, with the count in view (.ink-pager), and an ending (.ink-end).

Gradients

Why not: A gradient is decoration that never settles on a value. Ink on paper is flat.

Instead: A flat level, or a rule.

Shadows and blur

Why not: A shadow lifts a card off the page to make it louder than its neighbors. Nothing here needs to be louder.

Instead: A one-pixel ink border, and space.

Transparency

Why not: Translucent ink lands on a gray nobody chose, which changes with whatever lies beneath it.

Instead: Name the level you mean.

Hover states

Why not: Touch has no hover, and many readers never point. Anything revealed on hover is hidden from them.

Instead: Every control is visible and labeled at rest.

Meaning in color

Why not: There is no hue here to carry it, and many readers cannot see hue anyway.

Instead: Words first, then shape, fill and border style: dashed means look again; filled means on.

Live clocks, counters and shimmer

Why not: Every tick is a small demand: a movement in the corner of the eye, attention pulled.

Instead: Show the time or the count when asked. Loading says “Loading” and holds still.

Carousels and autoplay

Why not: They move by themselves, and they decide when the reader has finished looking.

Instead: A page the person turns.

Hairlines and thin weights

Why not: Strokes thinner than a pixel, and weights below 400, fade on many screens and for many eyes.

Instead: Rules of at least 1px, control edges of 2px, body text at 450.

The test

Would it look right drawn once?

Ahimsa asks of every change: did the person cause this, here, now? Ink adds a question for every screen: would this look right if it were drawn once, and not again until someone touched it? If the answer is no, the design depends on motion to hold the eye.

From Ahimsa

Laws carried over unchanged

These come from the Ahimsa design system, unchanged.

  • Nothing appears unasked: no modal on load, no toast, no role="alert", no autoplay, no setInterval. The attention gate runs here too.
  • No red, and no danger token. Something that needs a look goes dashed.
  • Components read semantic tokens only, so markup moves between Paper and Night untouched.
  • Corners stay rounded.
  • Nothing is loaded over a network. The offline gate runs here too.
  • No pure black or pure white by default, so there is no glare and no smear. When the full range is wanted, ink-full opens the grounds to pure paper and pure ink.