Design Standards

Visual Language

This site is one visual language: a quiet, modern document. A neutral sans carries every heading and every line of prose; a monospace face is reserved for recorded values, where the reader benefits from seeing at a glance that something is a literal — a component nickname, a port name, a path — rather than a sentence about one. Structure comes from hairline rules and whitespace rather than heavy bars, boxes or shadows, and a single deep red is the only accent.

The pieces particular to this reference — the component diagrams, above all — are styled to those same rules rather than introducing a second idiom. The token names and the class names for each kind of block (.doc, .kicker, .title, .section, .disclosure, .table, .caption, .nav) are deliberately plain, so a rule can be found from the markup and back again.

Every rule lives in one annotated stylesheet, web/assets/style.css, organised into sixteen numbered sections. It opens with a block of custom properties; restyling means changing a token, not hunting through rules.

Type

Inter carries every heading and every line of prose. IBM Plex Mono is reserved for recorded values — component nicknames, port names, data types, file paths, counts — so a reader can tell a literal from a written sentence at a glance. Anything that is not prose sits a step down in colour, which is most of what keeps the page feeling light.

The complete type scale. Every size on both pages comes from one of these tokens; the two exceptions — the masthead subtitle and byline — are noted in the stylesheet where they occur, and exist because each is used exactly once.

Weight

Three weights, and no bold. The step from regular to semibold is enough to mark a heading when the type around it is calm, and a page that never reaches for 700 reads lighter without giving up its hierarchy. Only these three are requested from Google Fonts, so reaching for a fourth would silently synthesise it.

Spacing & Rules

Every margin, padding and gap comes from the --space-* scale — never a bare pixel value. The scale is coarse on purpose: seven steps from 4px to 56px, plus a separate pair of page-frame values that sit outside it because they are larger than any gap between elements, which is what makes the document read as a page rather than as a scrolling feed.

Both rule weights are hairlines: they differ in contrast, not thickness. A divider should tell a reader where a section ends without drawing attention to itself while doing it, so the space above a section, not the weight of its rule, is what separates it from the one before.

Colour

A white ground with one accent, used sparingly and with one meaning: this is interactive. Links and the Show / Hide hints on the component reference carry it; nothing else does. Both the hover step and the faint wash behind a hovered button are derived from --color-accent with color-mix rather than written down separately, so all three move together when the accent changes.

Each swatch reads its own token, so this row cannot drift from the palette in the stylesheet. These inline style attributes are the only ones on either page.

Component Diagrams

The component reference draws every component as a schematic: input ports on the left, the component box in the centre, output ports on the right — or, where a component’s whole result is a side effect, a note in the box in place of an output column. They are the one place the language had to be extended beyond ordinary document prose.

The extension follows the same rules as everything else. The box is a hairline outline with no fill; anything that is a literal from a script (the nickname, a port name, a data type) is set in the mono face, and anything that is a sentence about one (the description) is set in the body face. Two consequences are worth stating because they look like omissions: the arrow between columns is muted rather than accented, because the accent means “you can click this” and an arrow in a diagram is not clickable; and no diagram is numbered or captioned, because the caption would have repeated the two names already printed in the box.

Port colour is the single exception to “one accent, one meaning”. Each Grasshopper data type has its own hue, shown as a dot beside the port name and as the colour of the type label, so the reference can be scanned for “everything that takes a curve” without reading every label. It is a data encoding rather than decoration, it is declared as its own token group, and it is confined to the diagrams.

• Number, Integer--type-number
• Curve--type-curve
• Boolean--type-boolean
• String--type-string
• Geometry, Brep, Box--type-geometry
• Point3d--type-point
• Data, DataTree--type-data
• Plane--type-plane
• Colour--type-colour

To add a type: add a --type-* token in section 1 of the stylesheet, a matching .port--* class at the foot of section 11, a row here, and then use the class on the port’s wrapper in index.html. A port with no class falls back to the muted text colour rather than rendering wrong.

Document Conventions

• Content flows as named sections — Introduction, Installation, Component Reference — indexed by a contents list at the top of the page. Nothing is numbered: the heading and the index entry carry the same name, which is all a reader needs to navigate by.
• A long list is a list of rows, each a native <details> disclosure that opens in place, so the page starts as an index. A row’s Show / Hide control names the action only, never a count — the count is already on the meta line under the heading.
• Rows are closed on load. All nine domains open at once is thirty-nine diagrams before a reader reaches anything after them.
• A figure or table carries a caption below it when the caption says something the content does not. Captions are sentence case and unnumbered — a caption describes the thing above it, and “Table 2” describes nothing.
• References are a plain list of links with a line of description each, gathered at the foot of the page. Nothing in the prose points at them with a bracketed marker; where the prose needs to send a reader to one, it links the words that name it.
• There are no footnotes. A note that is about one component belongs in that component’s own diagram; a note that is about the library belongs in the prose that raised it.
• All styling lives in assets/style.css. No inline style attributes, with the one documented exception of this page’s colour swatches.