Logo

The logo is a keyhole. This file is the contract for its shape, its colours and where the product uses it. Do not change the shape. One generator (brand/, fed by brand/tokens.json) makes every output from the same geometry (see “Files and generator”). The brand blue is Lapis #26619C since 2026-10-20 (docs/BRAND.md).

Geometry

Start with a pointy-top hexagon. Its side is s. Its centre is the origin, y is up. The top vertex is T = (0, s).

The keyhole is the union of two shapes:

• a circle with centre T and radius r = s(√3 − 1);
• a kite with the corners T, (s√3/2, −s/2), (0, −s) and (−s√3/2, −s/2).

The rule: every straight edge of the outline is s long. The outline has four straight edges: two from the shoulder points to the side corners, and two from the side corners to the bottom point. The shoulder is the point where an edge of the kite leaves the circle. A kite edge from T is s√3 long. The circle covers r = s(√3 − 1) of it, and s is left.

Derived numbers:

The DXF files docs/logo-shape.dxf and docs/logo-construction.dxf have the construction.

Master files

The files are in docs/logo/. They are generated (make brand). Each one has s = 10 and the view box -8.661 -17.321 17.321 27.321 (the glyph) or 0 0 100 100 (the tile). The path of the glyph (y down):

M3.660 -3.660 L8.660 5 L0 10 L-8.660 5 L-3.660 -3.660 A7.321 7.321 0 1 1 3.660 -3.660 Z

The tile transform is translate(50 50) scale(2.196) translate(0 3.6605) in a 100 x 100 box.

The framed tile is a rounded square (corner radius 22 % of the side). The keyhole is 60 % of the tile height. It is in the middle of its bounding box (not of its circle). The macOS app icon uses the standard grid: a 824 px squircle (|x|⁵ + |y|⁵ ≤ 1) in a 1024 px canvas, with the same 60 % keyhole. It has no drop shadow in the file (as before).

Two renderings: cut and enamel

Decision (2026-10-20). The same keyhole has two renderings. Both use the vertical tile gradient (top, mid, bottom). The numbers are in brand/tokens.json (render).

Cut (large: app icons, store icons, 64 px and larger). The keyhole is a hole in the tile.

• The tile has a vertical gradient (tile top, tile, tile bottom) and a soft white sheen at the top left (radial, 18 % opacity, fading to 0).
• The hole has an umber vertical gradient (hole top to hole bottom).
• An inner shadow at the top edge of the hole: black, 75 %, offset down 0.9 % of the tile, blur 0.6 glyph units (0.6 × 2.196 % of the tile).
• A light rim: the keyhole shape in the rim colour at 85 %, moved down 0.32 glyph units, drawn behind the hole. A thin light edge shows under the bottom edges.

Enamel (small and inline: favicon, extension toolbar and inline button, apple-touch-icon, in-app marks, the Android splash mark, the 64 px preview).

• The same gradient tile. The keyhole is white with a very light vertical gradient (white to key bottom) and a soft drop shadow (drop colour, 45 %, offset down 0.7 glyph units, blur 0.7).
• At 32 px and smaller the tile is flat (the tile mid colour) and the keyhole is white, with no shadow, rounded to whole pixels. This keeps small icons crisp.

Gradients and shadows are allowed only in these two icon renderings. The rest of the brand stays flat and quiet (docs/BRAND.md). The wordmark cursor is flat, and its keyhole is solid paper colour #F3F1EC, light and dark. It is not cut out.

Where a vector format has no blur (the Android launcher icon), the inner shadow is a darker first stop of the hole gradient.

Colours

The values are in brand/tokens.json. The active palette is Lapis. The alternative is Ultramarine. Both are in docs/BRAND.md.

Decision (2026-10-17, renewed 2026-10-20): the framed tile is always white on the tile colour (Lapis: 6.42 : 1), in light and dark UIs. The dark-UI accent is too light for a white keyhole.

The layered icon (iOS 26)

apple/LasboltiOS/AppIcon.icon is an Icon Composer document. make brand writes it (icon.json, Assets/plate.svg, Assets/hole.svg). It has two groups. The first group is the front:

1. Plate (plate.svg): the 1024 px square with the keyhole cut out by an SVG mask. It is the glass layer (glass: true). The colour is a gradient from tileTop to tileBottom. Dark appearance: iconPlateDarkTop to iconPlateDarkBottom. The group has a neutral shadow and specular: true. Translucency is off.
2. Hole (hole.svg): the keyhole with the umber gradient iconHoleTop to iconHoleBottom, scaled by render.glassIcon.holeScale (1.04) about the glyph centre, so it fills the cut. It is not glass and has no shadow. In the tinted appearance it is white.

The keyhole has the same place as in every other icon: translate(50 50) scale(2.196) translate(0 3.6605) in a 100 unit tile, times 10.24 on the 1024 px canvas. The path is GlyphPath(). No file has another copy.

Why the plate is the glass layer: a cut reads inward. The plate edge takes the light, and the plate shadow falls into the hole. If the keyhole is glass, it reads as embossed (it stands out of the plate). The preview has a plate without the edge light (icon-nospecular-*) to compare the edge ring. It is not shipped.

How to edit: change brand/tokens.json (iconPlateDark*, iconHole*, render.glassIcon), then run make brand. Do not edit the document by hand: the next make brand writes over it. You can open it in Icon Composer to look at it: the generator writes icon.json in the same format as Icon Composer (sorted keys, " : ", five decimals, no new line at the end), so opening and saving it gives no diff. A change that you make there must go into the tokens. The plate colours are the sRGB numbers of the tokens written as display-p3: on purpose: the glass material takes colour out of the plate, and the wider space gives it back (approved on an iPhone, 2026-10-20). The hole is in the SVG and keeps the exact token colours. Each dark plate colour is tileBottom mixed with black: 12 % (top) and 55 % (bottom). A test checks the rule for every palette.

Previews: with Xcode 26 on the machine, make brand renders the document with ictool for every palette into docs/brand/palettes/<name>/icon-<rendition>-<size>.png (Default, Dark, TintedLight, TintedDark, ClearLight, ClearDark at 180 px; Default and Dark also at 1024 px). make brand-check does not run ictool and does not compare these PNG files. It compares the three text files of the document. A render depends on the macOS version, and a check must run without Xcode.

Clear space and minimum sizes

• Clear space: keep free space of s / 2 on every side of the bare glyph. For a framed tile the tile edge is the edge of the logo, and the clear space is s / 2 of the keyhole around the tile.
• Minimum size of the bare glyph: 14 px high on a screen. The framed tile: 16 px.
• At 32 px and smaller the generator rounds the circle centre, the radius and the bottom point to whole pixels, so the icons are crisp. Larger sizes use the exact geometry.
• Do not rotate, stretch, outline or put text inside the keyhole. Add a shadow only in the enamel and cut renderings above.

Where the logo is used

“Framed” is the tile. “Bare” is the glyph alone. “Cut” and “enamel” are the renderings above. T is the tile colour (Lapis #26619C).

The semantic key icon (i-key: Keys page, approval dialog, “approval: each use” badge) is not the logo. Keep it.

Files and generator

• Source of truth: brand/tokens.json (palettes, neutrals, geometry constants, rendering numbers). Do not edit a brand colour in another file.
• Generator: brand/cmd/lasbolt-brand (Go, standard library only). It has a supersampled anti-aliased rasteriser with gradients, alpha compositing and a Gaussian blur. The same code makes every output.
• make brand writes the committed files. make brand-check makes them in memory and fails on any difference or failed contrast check. make logo and make logo-check are old names for them. A generated file has the header “Generated by make brand from brand/tokens.json. Do not edit.” A hand-written file has marked regions: /* brand:begin NAME */ and /* brand:end NAME */. The generator replaces only the lines between them.
• Generated, committed: docs/logo/*.svg; apple/LasboltiOS/AppIcon.icon/ (the layered iOS icon); site/favicon.svg; server/internal/web/static/favicon.svg, favicon-32.png, apple-touch-icon.png; server/internal/web/templates/logo.html; the regions in server/internal/web/static/lasbolt.css, extension/popup.css, extension/content.js and site/index.html; apple/LasboltKit/Sources/LasboltKit/BrandColors.swift; on Android values/brand_colors.xml, ui/BrandColors.kt, drawable/ic_launcher_background_gradient.xml, ic_launcher_foreground.xml, ic_launcher_monochrome.xml and splash_wordmark.xml; the previews docs/brand/preview.html and docs/brand/palettes/<name>/ for every palette (the icon-*.png renders there need ictool).
• Built, not committed: the PNG icons of the extension (make extension, in dist/), and the PNG and SVG files of the Apple asset catalogs (make apple-assets, which make apple-project and make ios-project run first). The Contents.json files of the catalogs are committed. .gitignore has the generated files. The popup and the inline button take the path from the marks @LOGO_PATH@ and @LOGO_VIEWBOX@, which the extension build replaces. No file has a copy of the digits.
• The splash wordmark has the letters as outlines (brand/internal/brand/data/wordmark-text.path: Besley Bold 700, 2000 units per em, y down). They came from the font once. The cursor and the keyhole are made from tokens.json.
• A PNG in the check may differ by 1 in a color value (the floating point math can differ between CPUs).
• A change of the shape is a change of this file and of brand/internal/brand/geometry.go. Then run make brand.