its-swiss
Every component the library ships, the type scale, the value scale and the grid primitives — version 1.1.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 in --face-200
Body copy — --size-2 on --line in --face-150
Section — --size-3 on --line-2 in --face-200
Subhead — --size-4 on --line-2 in --face-150
Page title — --size-5 on --line-3 in --face-150
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.
The module
A field's height, in lines: --module. The columns divide the
page across and the module divides it down. .modules is a
block of whole modules, and .figure--modular a picture in
one.
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. This one is
also a .subgrid: small type on the half-line.
Masthead and navigation
The current destination carries the accent and the weight. Two signals,
because colour alone is not one. A menu is a destination that opens into
destinations, and carries both when where you are is inside it. The
subnav is a second layer, inside the one you are in: a shaded band under
the masthead, rendered by the shell when the application fills
:subnav.
Page head
What a page is and what can be done to it: the title and its lede on the left, the actions on the right, wrapping under when the page is narrow. One shape for every page, so the name and the buttons are always where they were on the last one.
Palettes
Every palette in the library, including the ones no colour has claimed yet.
Sections
A page with several surfaces names them under the title, the one shown in the weight, and shows that one alone. What is done daily is reached from the head, never by scrolling past what was done yesterday.
Deck Chair
Explanations
What a section means, behind one word in the small register, for the day it is first read. Closed, in the hint register, and there when it is asked for.
About
The repeat, in order along the stripe normal. Widths sum to one.
Buttons
One filled button, in ink, for the action a page exists to offer; the rest are keylines or words. 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
Dense
The label on the control's line of air, directly above the text on its rule: a field is two lines, three with the gap, for a form of many fields or a panel. The focus is the rule going heavy in the accent, not a box.
Inline
A field and the button that submits it are a pair, not a run: they do not wrap away from each other.
Pictures
--module
lines each — which is the grid's proportion rather than the window's.
Table
| Token | Lightness | For |
|---|---|---|
| Paper | 98% | The ground |
| Hairline | 89% | A rule you barely see |
| Quiet ink | 54% | Secondary text |
| Ink | 18% | 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
- 24px. 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.
Filters and cards
What narrows a list, and the list. A search that filters as you type, and a register for each other way of narrowing it: the same two positions every time, a quiet label and the choices, the one in force carrying the weight. Under it, cards on the page's own fields — this page says a card is two fields wide.
3 of 12 palettes
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.