NORTHWARD
01 — A WHOLE PAGEEVERY ROLE AT ONCE

We are as we are, of ourselves!

The thirty spokes unite in the one nave; but it is on the empty space (for the axle), that the use of the wheel depends.

START A PROJECTSee selected work
24Colour roles, every one of them here
7Corners cut from one number
34Relief tokens, flat until you ask
0Breakpoints in any of it
02 — ONE OF THEM IS CURRENT

Its largest square doth yet no corner show

He who knows other men is discerning; he who knows himself is intelligent.

Softness and weakness

Corridor
corridor.raw2400 x 1600 · RGB · NO EDITS
A concrete corridor with one seam of light

Without going outside his door, one understands (all that takes place) under the sky.

Treeline
treeline.raw2400 x 1600 · RGB · NO EDITS
Fog sitting on a treeline, nothing in the top half

The highest excellence is like (that of) water.

Ink
ink.raw2400 x 1600 · RGB · NO EDITS
Coral ink opening in water

There is nothing in the world more soft and weak than water.

03 — SURFACES

Clay is fashioned into vessels; but it is on their empty hollowness, that their use depends.

The door and windows are cut out (from the walls) to form an apartment; but it is on the empty space (within), that its use depends.

Folded metal panels on a facade
MEDIA

Therefore, what has a (positive) existence serves for profitable adaptation, and what has not that for (actual) usefulness.

Marbled endpaper, combed by hand
AND THE BOARD

The Tao that can be trodden is not the enduring and unchanging Tao.

01 / GROUND

The soft overcomes the hard; and the weak the strong.

It is better to leave a vessel unfilled, than to attempt to carry it when it is full.

02 / SUNK

Sincere words are not fine; fine words are not sincere.

The softest thing in the world dashes against and overcomes the hardest.

03 / RAISED

When there is this abstinence from action, good order is universal.

All difficult things in the world are sure to arise from a previous state in which they were easy.

A NOTICEThe sage manages affairs without doing anything, and conveys his instructions without the use of speech.

TYPEFACETwo families, neither shipped
SCALEFluid, from the container
MOTIONAdded under no-preference

A CHIPSELECTEDOPENMUTED

He who stands on his tiptoes does not stand firm; he who stretches his legs does not walk (easily).

@import "tailwindcss";
@import "@pipejesus/higreg-ds";
04 — WHAT IT COSTS

He who devotes himself to the Tao seeks from day to day to diminish his doing.

He who knows (the Tao) does not (care to) speak (about it); he who is (ever ready to) speak about it does not know it.

A CARD, RAISEDThe partial becomes complete

The sage is always skilful at saving men, and so he does not cast away any man.

  • The thirty spokes unite in the one nave
  • Clay is fashioned into vessels
  • The door and windows are cut out
FROM£0
AND THE WARM ONEThe crooked, straight

In the Way of Heaven, there is no partiality of love; it is always on the side of the good man.

  • The softest thing in the world
  • Sincere words are not fine
  • Fine words are not sincere
STILL£0
AND A THIRDThe empty, full

Therefore all in the world delight to exalt him and do not weary of him.

  • Without going outside his door
  • He who knows himself is intelligent
  • The journey of a thousand li
ALSO£0
npm i @pipejesus/higreg-ds
# then two lines in your stylesheet

A terminal is a well, like a field and a code block. Three parts, one rung. Press the corner: what it fills with is the accent's deep plate, and the ink on it is the one role that exists for that plate.

RungWhat it isParts
wellA slot cut into the page3
controlResting on the page1
raisedA card laid on it7
floatingSomething that has left it2
overlayOver everything1

The overlay rung

The kingdom is a spirit-like thing, and cannot be got by active doing.

THE ONE WARM SURFACEThe journey of a thousand li commenced with a single step.
BACK TO THE TOP

The highest excellence is like (that of) water.

← THE BOOK
GENERATE
GENERATEONE COLOUR · BOTH GROUNDS · 48 VALUES
1.00
WHAT IT MADEHOVER FOR THE ROLE
ROLES
WHAT EACH ROLE IS FOR
--ds-ground

Page ground and the deepest surface

--ds-sunk

Alternating sections and control wells

--ds-raised

Hover states and held rows

--ds-cream

The one warm surface — CTAs and open slots

--ds-ink

Headings and primary text

--ds-ink-read

Long-form body copy at 17px and up

--ds-ink-soft

Supporting paragraphs and descriptions

--ds-ink-faint

Labels, meta, captions

--ds-ink-on-cream

Anything sitting on the cream surface

--ds-ink-on-accent

Anything sitting on the filled accent — a chip that is open, an avatar, the selection

--ds-rule

Section and grid dividers

--ds-rule-strong

Control borders and focusable edges

--ds-accent

Section numbers, links, active state

--ds-accent-deep

Filled accent surfaces and selection

--ds-accent-warm

Captions on the warm placeholder tint

--ds-rule-on-cream

The hairline ON the cream surface — the dark rule is far too harsh there

--ds-state-error

Error border, label and hint — 7.4:1 on ground

--ds-state-success

Success border and kicker — 8.4:1 on ground

--ds-ink-disabled

Disabled controls only — 2.4:1 on sunk, below AA by intent

--ds-muted-on-cream

Secondary text on the cream surface — 6.1:1

--ds-tint-cool

Default media placeholder

--ds-caption-on-cool

Captions on tint-cool — 6.1:1

--ds-tint-warm

Alternate placeholder, breaks a run of blue

--ds-caption-on-warm

Captions on tint-warm — 7.2:1

SHAPE
WHAT THESE MOVE
--ds-radius

The corner of the largest control, and the root the two smaller rungs are cut from. Turn this one and every control in the system rounds with it.

--ds-radius-frame

Pictures, video and the empty placeholder. Square as shipped, and off the ladder on purpose — square media is a decision this design made rather than a value it forgot.

DEPTH
THE MASTER · ZERO IS FLAT, AND ZERO IS WHAT SHIPS
THE FAMILIES · EACH A SHARE OF THE MASTER
WHAT A SHADOW IS, IN FOUR NUMBERS
THE PAGE · ITS OWN DIAL, INDEPENDENT OF THE MASTER
WHAT THESE MOVE
--ds-relief

How far this site lets a surface leave the page — ONE decision for the whole document, and the only one most consumers ever make. It scales every family at once, so turning it moves the lit edge, the sheen and the cast shadow together. Zero is flat and is what ships, so a consumer who never heard of it gets the page this library has always drawn. One is the depth the reference was designed at. There is no ceiling, but past about two a page stops reading as paper and starts reading as a stack of cards.

--ds-lift

The THIRD shadow in the list — the one cast below the box, `0 2px 8px -2px` at one unit. The only family that scales its geometry as well as its ink, because a thing that is higher casts further as well as darker. On ink it is by far the loudest of the three, 52% against the rim at 24% and the sheen at 9%, which is why turning it feels like turning the master: it IS most of what the master does. On paper the balance inverts. Like the other three it is a SHARE of the master rather than a value of its own: 1 takes all of the dial, 0 takes none, 2 takes double.

--ds-rim

The FIRST shadow in the list — an inset hairline along the top edge, `inset 0 1px 0 0`, and its geometry never moves. Light catching the top edge of something standing up. THE TWO GROUNDS NEED OPPOSITE MIXES, which is the whole reason these are separate dials and not one: on ink the rim is 24% and the cast shadow 52%; on paper the rim is 55% and the shadow 22%. It is what makes depth read at all on a dark ground, where a shadow under a card is a dark shape on a dark page and says nothing.

--ds-gloss

The SECOND shadow in the list — an inset wash falling down the fill, `inset 0 14px 14px -14px`, its geometry fixed like the rim's. A sheen washing down a filled surface, quietest of the three on ink at 9% and four times that on paper. Turn it up on its own for a glassy look; leave it at zero for shadows with no shine in them at all.

--ds-lift-drop

How far a shadow falls at one unit of lift. Take it to zero and pair it with a wide blur for an omnidirectional glow, which is how depth reads on near-black.

--ds-lift-blur

How soft the edge is. At zero you get a hard offset block, which suits a hairline-ruled design better than it has any right to.

--ds-lift-spread

How much narrower than its box a shadow is. Negative on purpose: at zero a soft shadow haloes evenly on all four sides and the card reads as printed rather than as lifted.

--ds-gloss-depth

How far down a fill the sheen washes before it is gone. Short is a highlight on the top edge; long is a gradient across the whole surface.

--ds-grain

Noise over the page ground, and the one family here that is NOT depth. Lift, rim and gloss are three ways a surface says how far it stands off the page; this says whether the page is printed or screen-flat, which is true of a document whether or not anything on it is raised. So it is a dial of its own, independent of the master, and it ships at nothing. At the strengths worth using you do not see it — you notice its absence when it is switched off. A theme that wants the two coupled writes `--ds-grain: var(--ds-relief)` and gets the old behaviour back in one line.

THEMES
THEMES3 TO LOAD