feat(brand): add Recl∆Im lockup + mark as standalone SVG assets

Two scalable artefacts under assets/branding/ so the brand can
travel outside the Flutter app — favicon source, slide footers,
press kit, GitHub social-preview, README hero. Both files use
prefers-color-scheme so a single asset inverts cleanly on
ink/paper backdrops, with the petrol signal (#2E8F9E) staying
constant on the ∆-eye and the ∆I letters in the wordmark.

  reclaim-lockup.svg — 720×200 viewBox, mark on the left, the
                       wordmark 'Recl∆Im' on the right, ∆I in
                       petrol. The single artefact a stage or
                       browser tab wants to show.

  reclaim-mark.svg   — 160×160 viewBox, just the triangle and
                       the eye. Favicon source, social cards,
                       any tight-box context.

Signed-off-by: flemming-it <sf@flemming.it>
This commit is contained in:
flemming-it 2026-06-18 15:38:23 +02:00
parent 7a8bd339be
commit cf8c7bf1fd
2 changed files with 91 additions and 0 deletions

View file

@ -0,0 +1,63 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
Recl∆Im — primary brand lockup
Mark (the ∆ triangle with petrol eye) + wordmark on a single row.
Single-colour palette so it inverts cleanly on dark/light ink/paper
backdrops. ASCII spelling: reclaim.
Geometry mirrors fai_web's Logo.astro: the eye sits at the geometric
centroid of the triangle (a third up from the base). Stroke widths
are tuned for legibility down to 24 px tall.
Author: Dr. Stefan Flemming, F∆I (Flemming.AI). Apache-2.0.
-->
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 720 200"
role="img"
aria-label="Recl∆Im">
<defs>
<style>
:root { color-scheme: light dark; }
.ink { fill: #08090A; }
.paper { fill: #F4F3EF; }
.signal { fill: #2E8F9E; }
.stroke-ink { stroke: #08090A; }
.stroke-paper { stroke: #F4F3EF; }
@media (prefers-color-scheme: dark) {
.auto-ink { fill: #F4F3EF; }
.auto-stroke { stroke: #F4F3EF; }
}
@media (prefers-color-scheme: light) {
.auto-ink { fill: #08090A; }
.auto-stroke { stroke: #08090A; }
}
</style>
</defs>
<!--
Mark: 160 x 160 box at left, triangle inset by 12 px.
Stroke 6 px, no fill, petrol eye at (80, 110) radius 10.
-->
<g transform="translate(20,20)">
<polygon class="auto-stroke"
points="80,12 148,148 12,148"
fill="none"
stroke-width="6"
stroke-linejoin="miter" />
<circle class="signal" cx="80" cy="110" r="10" />
</g>
<!--
Wordmark "Recl∆Im" starting at x=210. Hand-fitted glyph
positions so the ∆ matches the mark's stroke weight and the I
above the ∆ becomes the dot/eye of "i". Petrol on the ∆I block.
-->
<g font-family="'Space Grotesk', 'Inter', system-ui, sans-serif"
font-weight="600"
font-size="120"
letter-spacing="-4">
<text x="210" y="138" class="auto-ink">Recl</text>
<text x="430" y="138" class="signal">∆I</text>
<text x="546" y="138" class="auto-ink">m</text>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2 KiB

View file

@ -0,0 +1,28 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
Recl∆Im — standalone mark (just the ∆ + eye).
Use as favicon source, social-share preview, and any context where
the wordmark would be too wide.
-->
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 160 160"
role="img"
aria-label="Recl∆Im — Mark">
<defs>
<style>
.signal { fill: #2E8F9E; }
@media (prefers-color-scheme: dark) {
.auto-stroke { stroke: #F4F3EF; }
}
@media (prefers-color-scheme: light) {
.auto-stroke { stroke: #08090A; }
}
</style>
</defs>
<polygon class="auto-stroke"
points="80,12 148,148 12,148"
fill="none"
stroke-width="6"
stroke-linejoin="miter" />
<circle class="signal" cx="80" cy="110" r="10" />
</svg>

After

Width:  |  Height:  |  Size: 812 B