carlos / carloku Public

🤖 New mark: a rack of one server, two apps and four instances

The C ring gives way to a picture of what Carloku does. A server sits at
the bottom, the two apps it runs above it, and two instances of each on
top. Every row is the same width, so the mark reads as one solid rack
even at 16px. Each unit has a short down-right thickness, and the lilac
instance keeps the old mark's full stop.

Chosen from about thirty options, with the header and a 16px tab as the
deciding views. Applied to the favicon and to the inline header mark on
both hand-written pages; DESIGN.md's description of the mark follows.

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

Paul Campbell pushed by claude 3 weeks ago 1f76dce0c1f3cc7e12e4aed1dbf689d759c3f105 parent a71ce06

4 files changed, +12 −8

DESIGN.md +1 −1
src/favicon.svg +9 −5
src/get-started/index.html +1 −1
src/index.html +1 −1

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

index 02be172..8480328 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 an open circular stroke — the same geometry family 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.

## Components

diff --git a/src/favicon.svg b/src/favicon.svg

index b93e81a..66c4c03 100644

--- a/src/favicon.svg

+++ b/src/favicon.svg

@@ -1,8 +1,12 @@

- <!-- 🤖 Carloku mark: a C drawn as a ring with its gap at three o'clock,

- and the wordmark's full-stop resting in the gap. -->

+ <!-- 🤖 Carloku mark: a rack seen from the front. One server at the bottom,

+ the two apps it runs above that, two instances of each on top, every

+ row the same width. Each unit has a little thickness down and to the

+ right, and the lilac instance carries on the old mark's full stop. -->

- <circle cx="30" cy="32" r="17" fill="none" stroke="#ffffff" stroke-width="8"

- stroke-linecap="round" stroke-dasharray="88.8 18" stroke-dashoffset="-9"/>

- <circle cx="51" cy="44" r="5" fill="#c9b2f7"/>

+ <path fill="#b9a1ea" 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="#9a7bd6" 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="#ffffff"><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="#c9b2f7"/></g>

+ <g fill="#5b3e96"><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>

diff --git a/src/get-started/index.html b/src/get-started/index.html

index e3088fc..ef8b72a 100644

--- a/src/get-started/index.html

+++ b/src/get-started/index.html

@@ -20,7 +20,7 @@

<a class="skip" href="#main">Skip to content</a>

- <a class="brand" href="/"><svg class="mark" viewBox="0 0 64 64" aria-hidden="true"><rect width="64" height="64" rx="14" fill="#5b3e96"/><circle cx="30" cy="32" r="17" fill="none" stroke="#ffffff" stroke-width="8" stroke-linecap="round" stroke-dasharray="88.8 18" stroke-dashoffset="-9"/><circle cx="51" cy="44" r="5" fill="#c9b2f7"/></svg>Carloku</a>

+ <a class="brand" href="/"><svg class="mark" viewBox="0 0 64 64" aria-hidden="true"><rect width="64" height="64" rx="14" fill="#5b3e96"/><path fill="#b9a1ea" 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="#9a7bd6" 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="#ffffff"><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="#c9b2f7"/></g><g fill="#5b3e96"><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>Carloku</a>

<a href="/#workflow">How it works</a>

<a href="/#open">Open source</a>

diff --git a/src/index.html b/src/index.html

index 56ff07f..fb52897 100644

--- a/src/index.html

+++ b/src/index.html

@@ -35,7 +35,7 @@ the verdict, and DESIGN.md.

<a class="skip" href="#main">Skip to content</a>

<a href="#workflow">How it works</a>

<a href="#open">Open source</a>