Brand¶

lattice holds the packages, and its identity is drawn in one system, which comes from print proofing. ADR-0001 records it. lattice prints on one plate, cyan: the ink artifactr and evalr share, and the hue of the blue that layout grids were printed in. Its mark is one cell of the lattice that every package's mark is drawn on: four strokes on lattice's two diagonals, artifactr's and reflexr's, which are square to each other. Where the cell's sides cross, the plate prints twice, into a deep cyan: lattice's working colour.

Files¶

Every file is an SVG with no embedded images or fonts. Text is outlined, so nothing depends on the viewer's fonts.

The site's colours are applied from lattice.css, to every section: lattice's palette is the site's, and each package's banner and lockup open its own section.

Colours¶

On paper, cyan printed over cyan makes a deeper cyan, so the light corners are a deep petrol blue. On screen, overlapping light makes a lighter colour, so on dark backgrounds the corners are a pale cyan. Keep that logic when drawing new material in the brand's colours. Every colour used for text has a contrast of at least 4.5:1 against the background it is used on: the overprint is 6.98:1 on paper and 7.47:1 on white, the accent 4.87:1 on white, and the dark scheme's link colour 10.80:1 on its background.

Type¶

Both are open-source (SIL Open Font License) and served by Google Fonts. The wordmark is always lowercase: lattice.

Using the brand¶

• Use the light files on light backgrounds and the dark files on dark ones; don't recolour them.
• Keep clear space around the mark of at least a quarter of its height.
• The mark stays legible down to 16 pixels. Below 24 pixels, use it without the wordmark.
• Cyan is the grid, so don't use it as decoration. Outside the mark, it only marks interaction on the site (a hovered link, the current page) and highlights code; the overprint is the working colour for everything else.
• Don't stretch, rotate, outline or add effects to the mark, and don't set the wordmark in another typeface.
• A package's section on the site opens with that package's lockup, and its own brand page holds its colours. lattice's colours are the site's.
• In a README, switch between the light and dark banners with a <picture> element, as the repository's README does.

The marks¶

artifactr, reflexr, evalr, relayr, stackr, portalr and grantr share one brand system, and lattice, which holds them, is drawn in it too, so that they read as a family wherever they appear together: a README that links its siblings, a stack that runs them all, a system built from them.

The system¶

• The inks are a printer's: cyan, magenta, yellow and key. artifactr, reflexr and evalr each print with two of the three process inks and name their own meaning for each, and where the two overlap they overprint into a third colour: the library's working colour. Any two of those three share one ink, as neighbouring jobs on a press share a plate. stackr prints in key. relayr and lattice each print on one plate, magenta and cyan, and their working colour is where that plate prints twice. portalr prints in all three process inks together, and grantr in yellow and key, which ADR-0001 reserved for them; neither set overprints into a colour of its own, so each chose its working colour, as ADR-0014 records.
• One grid. Every mark is drawn on a 64-unit square and sits in the same place on it in every file, so one mark can replace another without re-spacing a layout.
• One stroke. A stroke is a band 14 units wide, measured horizontally, on artifactr's diagonal of 27 across for every 52 down (about 62.6°). Strokes end in flat cuts along the grid, and meet in points where one stroke's edge cuts the other. reflexr's diagonal, the caret's turned a quarter, runs 52 across for every 27 down and is square to artifactr's; a stroke on it is 14 units measured vertically.
• One overprint. A mark's overlaps, and only those, are filled with its overprint colour. On paper the overprint is darker than both inks, except grantr's, which is lighter than key (lattice ADR-0014), and on screen lighter.
• One typographic layout. The wordmark is Schibsted Grotesk Bold, lowercase, outlined and tracked 1.2% tight. In a lockup it is set at 64 units, with the mark's grid scaled so that 52 grid units (from line 6 to line 58, the height of artifactr's caret) are 0.8 of the type size, line 58 on the baseline, 0.16 of the type size between the mark and the word, and 8 units of padding. A banner is 1280 × 400 with 24-unit corners: the wordmark at 136 units (baseline 196, from x = 104), a two-line tagline in the same face at weight 420 and 32 units (baselines 272 and 316, from x = 108) in the graphite, and the mark at 7.2 times its grid from (845.6, 0.8), running off the panel.
• One site palette rule. The overprint is the working colour (links, and the theme's primary colour; headings stay in the text colour), the darker ink marks interaction, and the lighter ink highlights code. The dark scheme's background is a near-black of the overprint's hue.

The siblings¶

portalr's tokens are also ui's CSS custom properties, which the UIs' theme is built from.

Known weaknesses¶

• lattice's cell is the heaviest mark, and the only closed one. Beside the siblings' open strokes it reads as a tile, and at 16 pixels as a ring or a tilted square before it reads as a lattice.
• It has no flat cuts. Every stroke ends where its neighbour's edge cuts it, which the stroke rule allows but no sibling does everywhere.
• Cyan was the last single plate that can carry text (magenta is relayr's, and yellow can't). That doesn't touch grantr or portalr, whose inks are a pair with key and the three-ink set, but a member after them can't print on one plate of its own: it prints in cyan or magenta with key, or shares a sibling's inks.
• lattice's colours are close to its neighbours'. The deep cyan sits between artifactr's indigo and evalr's green, and lattice's interactive accent, #0077B6, is evalr's. On the site the link colour and its hover are close, as relayr's are.
• portalr's and grantr's working colours are chosen, not overprinted. portalr's three inks overprint only into their siblings' colours, and grantr's into a near-black beside stackr's key, so portalr works in a violet and grantr in yellow's dark gold (ADR-0014). portalr's violet is a step from artifactr's indigo, and its mark reads as lattice's child; grantr's shield borrows artifactr's caret and stackr's slab, and sits near evalr's tick.