carlos / carloku Public

🤖 Keep a white-background version of the mark in brand/

The same rack, in purple on a white tile, with a deep purple thickness
so the 3D still shows at 16px. Picked alongside the purple-tile mark so
it exists when someone needs one for a light page, a document or print.

It lives outside src/ on purpose: the Eleventy build copies an explicit
list of files, and a stray SVG in src/ would look like a forgotten asset.
DESIGN.md points at it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Paul Campbell pushed by claude 3 weeks ago 735ca6402b0b54e47c4320b99ba3a55fa5bc4ed1 parent 1f76dce

2 files changed, +12 −1

DESIGN.md +1 −1
brand/mark-light.svg +11 −0

diff --git a/DESIGN.md b/DESIGN.md

index 8480328..3a3ab42 100644

--- a/DESIGN.md

+++ b/DESIGN.md

@@ -179,7 +179,7 @@ Essentially flat: hairline borders and background-tint shifts convey nearly all

## Shapes

-Soft-but-businesslike radii in three sizes: **0.3em** for inline chips, **~0.55–0.7rem** for controls (buttons 0.65rem, header CTA 0.55rem, `pre` 0.7rem), **0.85rem** for the big framed objects (terminal, dashboard). Step numerals, terminal traffic-light dots, and icon-tile contents use circles; icon tiles themselves are 2.4rem squares at 0.6rem radius. Borders are always 1px hairlines — there are no 2px+ borders and no hard-cornered rectangles anywhere. The brand mark is a rounded square (rx 14/64) holding a small rack of rounded slabs, every row the same width (one server, two apps, four instances), each with a short down-right thickness — the same soft-cornered geometry as the page.

+Soft-but-businesslike radii in three sizes: **0.3em** for inline chips, **~0.55–0.7rem** for controls (buttons 0.65rem, header CTA 0.55rem, `pre` 0.7rem), **0.85rem** for the big framed objects (terminal, dashboard). Step numerals, terminal traffic-light dots, and icon-tile contents use circles; icon tiles themselves are 2.4rem squares at 0.6rem radius. Borders are always 1px hairlines — there are no 2px+ borders and no hard-cornered rectangles anywhere. The brand mark is a rounded square (rx 14/64) holding a small rack of rounded slabs, every row the same width (one server, two apps, four instances), each with a short down-right thickness — the same soft-cornered geometry as the page. For white backgrounds there is an inverted version, purple on a white tile, in `brand/mark-light.svg`; the site does not serve it.

## Components

diff --git a/brand/mark-light.svg b/brand/mark-light.svg

new file mode 100644

index 0000000..cc26c00

--- /dev/null

+++ b/brand/mark-light.svg

@@ -0,0 +1,11 @@

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">

+ <!-- 🤖 Carloku mark for white backgrounds: the same rack as src/favicon.svg,

+ in purple on a white tile, with a deep purple thickness so the 3D still

+ reads at small sizes. Not served by the site; kept here so it exists. -->

+ <rect x=".5" y=".5" width="63" height="63" rx="13.5" fill="#fff" stroke="#e4dcf2"/>

+ <path fill="#3b2668" d="M11.65 37.15H50.65A2.5 2.5 0 0 1 52.42 37.88L54.19 39.65A2.5 2.5 0 0 1 54.92 41.42V48.42A2.5 2.5 0 0 1 52.42 50.92H13.42A2.5 2.5 0 0 1 11.65 50.19L9.88 48.42A2.5 2.5 0 0 1 9.15 46.65V39.65A2.5 2.5 0 0 1 11.65 37.15ZM10.65 26.15H28.15A1.5 1.5 0 0 1 29.21 26.59L30.63 28.01A1.5 1.5 0 0 1 31.07 29.07V33.07A1.5 1.5 0 0 1 29.57 34.57H12.07A1.5 1.5 0 0 1 11.01 34.13L9.59 32.71A1.5 1.5 0 0 1 9.15 31.65V27.65A1.5 1.5 0 0 1 10.65 26.15ZM34.15 26.15H51.65A1.5 1.5 0 0 1 52.71 26.59L54.13 28.01A1.5 1.5 0 0 1 54.57 29.07V33.07A1.5 1.5 0 0 1 53.07 34.57H35.57A1.5 1.5 0 0 1 34.51 34.13L33.09 32.71A1.5 1.5 0 0 1 32.65 31.65V27.65A1.5 1.5 0 0 1 34.15 26.15ZM10.65 15.15H16.4A1.5 1.5 0 0 1 17.46 15.59L18.88 17.01A1.5 1.5 0 0 1 19.32 18.07V22.07A1.5 1.5 0 0 1 17.82 23.57H12.07A1.5 1.5 0 0 1 11.01 23.13L9.59 21.71A1.5 1.5 0 0 1 9.15 20.65V16.65A1.5 1.5 0 0 1 10.65 15.15ZM22.4 15.15H28.15A1.5 1.5 0 0 1 29.21 15.59L30.63 17.01A1.5 1.5 0 0 1 31.07 18.07V22.07A1.5 1.5 0 0 1 29.57 23.57H23.82A1.5 1.5 0 0 1 22.76 23.13L21.34 21.71A1.5 1.5 0 0 1 20.9 20.65V16.65A1.5 1.5 0 0 1 22.4 15.15ZM34.15 15.15H39.9A1.5 1.5 0 0 1 40.96 15.59L42.38 17.01A1.5 1.5 0 0 1 42.82 18.07V22.07A1.5 1.5 0 0 1 41.32 23.57H35.57A1.5 1.5 0 0 1 34.51 23.13L33.09 21.71A1.5 1.5 0 0 1 32.65 20.65V16.65A1.5 1.5 0 0 1 34.15 15.15Z"/>

+ <path fill="#6a4bb0" d="M45.9 15.15H51.65A1.5 1.5 0 0 1 52.71 15.59L54.13 17.01A1.5 1.5 0 0 1 54.57 18.07V22.07A1.5 1.5 0 0 1 53.07 23.57H47.32A1.5 1.5 0 0 1 46.26 23.13L44.84 21.71A1.5 1.5 0 0 1 44.4 20.65V16.65A1.5 1.5 0 0 1 45.9 15.15Z"/>

+ <g fill="#5b3e96"><rect x="9.15" y="37.15" width="44" height="12" rx="2.5"/><rect x="9.15" y="26.15" width="20.5" height="7" rx="1.5"/><rect x="32.65" y="26.15" width="20.5" height="7" rx="1.5"/><rect x="9.15" y="15.15" width="8.75" height="7" rx="1.5"/><rect x="20.9" y="15.15" width="8.75" height="7" rx="1.5"/><rect x="32.65" y="15.15" width="8.75" height="7" rx="1.5"/><rect x="44.4" y="15.15" width="8.75" height="7" rx="1.5" fill="#9b7ce0"/></g>

+ <g fill="#fff"><circle cx="13.15" cy="43.15" r="1.6"/><circle cx="49.15" cy="43.15" r="1.6"/></g>

+ <circle cx="43.15" cy="43.15" r="1.6" fill="#c9b2f7"/>

+</svg>