Brand artwork
Brand artwork
The DeCLaRe robot. Both websites show this mark, so it lives here rather than in either one, which is the same test the rest of the core uses.
How the robot is built
One <rect fill="currentColor" mask="url(#robot-knockout)">. White in that mask
is ink, black is a transparent hole. Nothing is painted in a literal colour, so
the mark takes the theme colour and composites on any background; the cut-outs
are real holes rather than opaque light-coloured fills.
The green eye (#34A853) and the red angular eye (#EB4336) sit on top of the
silhouette and stay fixed in both themes.
The chest board
The chest panel is a circuit board. Its cut-outs were a window and a slot; they
are now one taller panel (59.3, 113.4, 70.9 × 39.5) carrying traces painted
white into the mask, so the board is ink like the rest of the silhouette.
Two optical cuts of the same board:
| Cut | Files | Use |
|---|---|---|
| display | declare-icon-*, declare-horizontal-*, declare-square-theme-* |
48 px and above, and every vector context |
| small | declare-icon-compact-* |
32 px and below: favicons, small chrome |
The display cut is two mirrored Z-traces: one enters from the left wall and steps down to a terminal node on the right, the other enters from the right wall and steps up to a node on the left, so the pair is rotationally symmetric about the panel centre. Stroke 6 against the 7.2 walls keeps the board subordinate to the silhouette.
The small cut is a single trace at wall weight. Below about 32 px the panel is roughly 7 px tall; two thin traces silt up into an even grey, while one heavy trace and its node still resolve. This is optical scaling, not a different mark: the silhouette is identical, so the two cuts are interchangeable at any size where both still read.
At 16 px the chest is about 3 px tall and no board survives in either cut. That is a property of the robot, not of the board: the mark reads by its head and base at that size.
Using it
Both websites point straight at this directory through their submodule:
<img src="/assets/declare-core/brand/logos/declare-icon-light.svg" alt="DeCLaRe Lab">
Each viewBox is tight to the drawn artwork, with no baked-in padding, so
these are drop-in replacements for a tight-cropped PNG and spacing stays with
the consumer’s CSS.
Rasters stay local to each site: favicons, touch icons and Open Graph images
need pixel dimensions and framing that belong to the site, not to the mark.
tools/build_brand.py writes those too.
Layout
src/ the robot as authored, before any board. Edit nothing else.
logos/ generated. Tight viewBox, dead defs stripped, board applied.
tools/ the generator.
python3 tools/build_brand.py # write everything
python3 tools/build_brand.py --check # verify src still matches, write nothing
logos/ and every consumer raster are generated, so do not hand-edit them. To
change the board, edit CUTS in the generator and re-run.
PNG crops are measured rather than assumed: each committed raster is a tight box around its own drawn content, so the tool renders a probe, finds the alpha bounding box, maps it back to user units, and re-renders at the committed pixel size. Headless Chrome does the rasterising; PNG decoding is stdlib only.
The generator also drops what nothing renders: an unused alternate line-art robot that still carried the pre-circuit chest, the styles only it used, and the wordmark the icon files never draw. That is verified by rendering before and after through one fixed viewBox and requiring the pixels to match.