its-swiss

Every component the library ships, the type scale, the value scale and the grid primitives — version 0.6.0, rendered by the library itself. The accent is one custom property: unset it and the value scale is left to do the work, which is the whole argument.

Value scale

Six steps of OKLCH lightness, paper to ink. Neutral as shipped; a consumer warms the whole ladder with --value-chroma and --value-hue.

--value-0
--value-1
--value-2
--value-3
--value-4
--value-5
--accent

Type scale

Five sizes on an alternating 1.33 / 1.5 ratio. Every line box is a whole number of lines, so a heading never lands the type under it off the grid.

Labels and metadata — --size-1 on --line

Body copy — --size-2 on --line

Section — --size-3 on --line-2

Subhead — --size-4 on --line-2

Page title — --size-5 on --line-3

Registers

Body. The measure holds prose to three fields, which is where it stops rather than where the window does.

Quiet. This is secondary.

Micro. Labels, metadata, captions — never capitals.

Hint. What a field needs said about it.

Tabular 0123456789 — figures read down a column.

A link keeps its underline and a button does not.

Grid primitives

The library ships the machinery and never the grid. This page declares --columns: 6; a child says how many fields it takes with --span, and a child that says nothing runs the field.

Runs and columns

Almost every arrangement in an interface is one of two: items on a shared baseline a space apart, wrapping when they must — a .run — or the same turned ninety degrees, a .stack.

A stack puts a whole line between its children. So the column below it is still on the grid.

Masthead and navigation

Wordmark

The current destination carries the accent and the weight. Two signals, because colour alone is not one.

Buttons

Destroying is set apart by a gap before it is coloured on hover: a reader scanning the row has not hovered anything yet.

— a value on screen to be taken somewhere else.

Form

As it appears in the nav.

Refused cannot be blank

Inline

A field and the button that submits it are a pair, not a run: they do not wrap away from each other.

Pictures

A picture at 1.618, in a fluid column. Its box is its natural height taken up to the next whole line, so the column below it is still on the grid — whatever the window is doing.
The same box, cropped rather than fitted. Müller-Brockmann sized photographs to a field and cropped to fit; this is that, and it is only yours to do where you own the picture.

Table

Ruled horizontally, never vertically. No zebra: a filled row is a filled area.
Token Lightness For
Paper98%The ground
Hairline89%A rule you barely see
Quiet ink54%Secondary text
Ink18%Ink

The numeric column is deliberately not the last one: a figure that runs straight into the next column is what this table shipped with.

Definition list

Baseline
8px. Everything vertical is a whole number of these.
Measure
Three fields wide, derived from the page rather than chosen.
Accent
State and emphasis only. The consumer's to set.

Stacked

When the terms are long enough that a two-column set would strand the values across the page.

What the library will not ship
A typeface, a palette, a hue, or a grid.
What it ships instead
A value scale, a baseline, and a way to divide a page.

Pagination

What a page has to say

It worked. This does not interrupt.

2 problems stopped this being saved.

  • Name cannot be blank
  • Name is already taken

Nothing here yet.

Footer