Brand

This file is the contract for how Lasbolt looks and sounds outside the logo geometry. docs/LOGO.md is the contract for the keyhole itself. The user chose this tone on 2026-10-18 (wordmark exploration A2).

The wordmark

• The name in lowercase, lasbolt, set in Besley Bold (700), a Clarendon. Letter spacing −0.02 em.
• A cursor follows the name: a flat block in the tile colour of the active palette (Lapis #26619C), with the keyhole in solid paper colour #F3F1EC. The keyhole is not cut out. It has the same paper colour on light and on dark grounds. (Decision 2026-10-20. Before, the keyhole was cut out and showed the background.)
• Cursor size and place: width 0.5 em, height 0.74 em, gap 0.07 em after the t. The top of the block lines up with the top of the crossbar of the t (0.52 em above the baseline in Besley Bold: the crossbar top is at 1040 of 2000 units, the x-height). So the block hangs 0.22 em below the baseline, as a terminal block cursor does. This is the A2 design; docs/brand/a2-wordmark.png is the reference. The keyhole is centred in the block, its height 0.42 of the block height. The block has no gradient and no shadow.
• A layout box around the wordmark must include the 0.22 em below the baseline (padding or the frame), so the hang does not overlap the next line and centring stays true.
• The cursor is the app tile in text form. Wordmark and icon share one shape.
• The cursor may blink on a page (1 s period, steps, no fade). It does not blink when the viewer asks for reduced motion.
• Do not set the wordmark in a monospace face, in capitals, or in italic. Do not put the keyhole in place of a letter.

Tone

• Older type, current technology. A Clarendon and plain book typography over a modern, exact product. The age is in the type and the paper, not in ornament.
• Technical and plain. The copy states what the product does: facts, numbers, algorithms, commands. No slogans, no adjectives about how secure or fast it is, no flavour text.
• Quiet. Few elements, wide margins, thin rules. One accent colour. No gradients, no shadows, no illustrations except the keyhole. The one exception is the icon renderings “cut” and “enamel” (docs/LOGO.md): only there are gradients and shadows allowed.

Colours

Source of truth: brand/tokens.json. Every brand colour is in that file. make brand writes it into the CSS, the SVG files, the Swift, Kotlin and Android files, the PNG icons and the previews. Do not edit a brand colour by hand in another file. make brand-check fails if a file is not up to date, or if a contrast check fails.

The neutral tokens are the same for both palettes:

The blue: decision of 2026-10-20

The brand blue changes from Signal #2350D2 to Lapis #26619C. Lapis is the active palette. Ultramarine #3442D9 is the recorded alternative. Both are in brand/tokens.json. The generator makes previews of both, always: docs/brand/preview.html shows them side by side (icons, wordmark, buttons, links, contrast numbers).

Derived UI tokens (written out in the file, not computed; the generator checks the contrast):

Checks (brand/internal/brand/tokens.go): white on the tile and on the tile top at least 4.5 : 1; the accent on white, paper and the web and popup grounds at least 4.5 : 1; the dark accent and the dark link on every dark ground (#14130F, the web app surface #15181C and background #0E1013, the popup grounds) at least 4.5 : 1; the focus ring at least 3 : 1; the paper keyhole on the tile at least 4.5 : 1. Measured for Lapis: white on tile 6.42 : 1, on tile top 4.70 : 1; accent on paper 5.69 : 1; dark accent on the dark paper 8.95 : 1. For Ultramarine: 7.17, 5.31, 6.36 and 8.70.

The layered iOS icon

The iOS 26 app icon is a layered Icon Composer document that make brand writes from the tokens: a glass plate with the keyhole cut out, and a hole layer behind it. The tokens are iconPlateDarkTop, iconPlateDarkBottom, iconHoleTop and iconHoleBottom in each palette, and render.glassIcon (shadow opacity, specular, hole scale). The hole is lighter than the holeTop and holeBottom of the cut icon, because the glass plate shades it. Layers, the reason for the glass plate, and how to edit: docs/LOGO.md, “The layered icon (iOS 26)”. Do not edit the document by hand.

How to switch the blue

1. In brand/tokens.json change "active" ("lapis" or "ultramarine"). Nothing else.
2. Run make brand.
3. Open docs/brand/preview.html and look at the result. The layered iOS icon (apple/LasboltiOS/AppIcon.icon) follows the switch too. Each palette has its own iconPlateDarkTop, iconPlateDarkBottom, iconHoleTop and iconHoleBottom, so no other edit is needed. The dark pair is tileBottom mixed with black (12 % and 55 %). The renders in the preview need Xcode 26 (ictool).
4. Run make check, then commit the changed files.

The cursor block is always the tile colour with the keyhole in paper colour (about 5.7 : 1 for Lapis). The tile of the framed logo is white on the tile colour in light and dark UIs. The dark accent (Lapis #8CB8E6) is the colour of the bare glyph on dark UIs only.

Type

Self-host every font. Do not load fonts or other assets from a CDN.

Where it applies

• The public site (site/).
• Release notes, the README and other public text.
• The wordmark in the web app (top bar and sign-in pages, Besley self-hosted in server/internal/web/static/fonts/) and in the macOS app (menu bar header, Wordmark in Style.swift, Besley bundled in apple/Lasbolt/Fonts/). Where it goes: docs/LOGO.md.
• The rest of the app UIs keep their native look (docs/APPLE.md, the web app design in docs/DESIGN.md 7.2) until a design pass moves them to this tone.