Brand identity
Brand Kit
An identity isn't designed because a logo is needed: it's designed to stop deciding the same thing over and over. This is that language, with its rules and its pieces, downloadable in light and dark.
What it is made of
The idea behind it and the three signs that carry it: the monogram, the two-layer palette and the type pairing.
- 01Concept
- 02Logotype
- 03Color
- 04Typography
01 — Concept
01. A two-layer brand
The symbol is a ring, the focus resting on a solid base: product judgment built on a stable foundation. It's not decoration: it's the signature of the method. From discovery to data, two planes that separate and realign into a single clean shape.
A single ink layer. For small UI, favicon and monochrome.
Three stacked strokes, no blend. Only at ≥48px, where color reads as a layer.
02 — Logotype
02. The logo and its rules
Two compositions (symbol alone and lockup with wordmark), each in flat and split. Cropped exactly to the ink: the height you give it is the real height of the symbol.
Everything you need to put this brand anywhere: the 1024, 512 and 256 px PNGs, both inks and the favicon. In a single file.
Inline in markup · 382 B · sized by height.
The standalone SVG uses the dark ink. In the kit: 1024, 512 and 256 px PNGs and both inks.
Inline in markup · 220 B · sized by height.
The standalone SVG uses the dark ink. In the kit: 1024, 512 and 256 px PNGs and both inks.
One pure ink · 220 B · for light backgrounds.
In the kit: 1024, 512 and 256 px PNGs.
One pure ink · 220 B · for dark backgrounds.
In the kit: 1024, 512 and 256 px PNGs.
Never inline · 23 KB outlined · sized by width.
The standalone SVG uses the dark ink. In the kit: 1024, 512 and 256 px PNGs and both inks.
Never inline · 23 KB outlined · sized by width.
The standalone SVG uses the dark ink. In the kit: 1024, 512 and 256 px PNGs and both inks.
Usage table
All sizes are the visible height of the symbol.
The seven rules
Split → flat threshold: 48px
The color offset is 5.1% of the symbol height, so at 48px the crescent measures 2.5px. Below that it reads as dirty fringing, not as a layer.
Minimum size: 24px
The stroke is 8.6% of the height: at 24px that's 2.1px and holds; at 15px it's 1.3px and antialiasing washes it to gray.
No circular container
The symbol is already a circle. Putting it inside another shrinks it and turns it into a target.
Never smaller than adjacent UI
It's the brand, not just another icon. It must weigh at least as much as the LinkedIn or © next to it.
Symbol/wordmark proportion
40–45% composed in UI, ~60% in a closed lockup. Outside that range the symbol floats alone or the wordmark dominates.
Nav transition: continuous
Color extinguishes before dropping below 48px and the wordmark fades in opacity without clipping glyphs. It never passes through a mis-registration state.
prefers-reduced-motion: jump
No interpolation: it jumps between states at once, with no intermediate transition. The symbol goes from 48px to 28px and the bar from 80px to 64px: two distinct measures.
Rule 1 · the threshold, seen
Where the split stops working
The color crescent is 5.1% of the height. Below 48px it reads as dirty registration, not as a layer. The ladder shows it on its own.
03 — Color
03. Palette and two layers
The two-layer rule: an ink layer (background + stroke) that switches with the theme, and a color layer (cyan + purple) that only appears in the split and doesn't change between light and dark. Each swatch carries its token, its hex and its measured contrast ratio. Switch the theme with the nav toggle to watch the ink layer flip.
--background#F7F3EC#191D21--foreground#21262B#F7F3EC--primary · --brand-cyan#005859#3FC9C4--brand-purple#9B87F5--brand-purple-accent#B7A3FF#583DA6--brand-cyan-split#16BDBD--brand-purple-split#9B87F5--brand-cyan-soft#A7E1DE--brand-purple-soft#C6B9F0Pastels never as text color. They're backgrounds. If text goes over a pastel, always in foreground (ink), never the other way around.
04 — Typography
04. Two typefaces, two jobs
What the typefaces are and why, as a brand asset. The scale, sizes and line heights live in the Design System.
Display · weights 600 / 700
A grotesque with character: humanist details and slight irregularities that give it personality without losing rigor. It's the voice of headlines and the wordmark: firm, contemporary, recognizable.
ABCDEFGHIJKLM
abcdefghijklm 0123456789
Text · weights 400 / 500 / 600
Neutral, with very high on-screen legibility at any size. It does the quiet work: body, labels, data and UI. Let Bricolage carry the voice while it sustains the reading.
ABCDEFGHIJKLM
abcdefghijklm 0123456789
How it is used
Where the brand lives outside this site, and the rules that stop every application from interpreting it its own way.
- 05Applications
- 06Correct and incorrect use
05 — Applications
05. The brand in its place
Where the logo lives: inside the site, where every piece can be downloaded, and outside it, where it is only placed. The symbol PNG is sized by height and the lockup PNG by width. It's not obvious, which is why it's stated here.
On the site
The two surfaces this domain serves itself. Here the piece can be downloaded.
A dedicated asset, not a rescale. At 16px the stroke rises to 10 units for optical compensation. Flat, centered.
In the kit: 32 and 16 px PNGs and both inks.
The real card served to social: split logo, wordmark, title and kicker over the brand background. Fixed in light and dark, each page generates its own. The lockup below is the piece that builds it.
The PNG suffix names the ink, not the background. tintaOscura (dark ink) goes over light backgrounds; tintaClara (light ink) over dark ones. Available at 256 / 512 / 1024 px.
Off the site
Three pieces that don't live on this domain and carry the same brand. They are the proof a system can only give away from its own page, and that is why there is nothing to download here: none of them is placed here. All three are versioned with the repository, which is what stops two versions of the truth from existing.
The split symbol at 75px, the name in bold and the two channels, split by a vertical rule. It is built as a table with inline styles, the only thing an email client leaves intact, and the images point at absolute URLs on this domain because Gmail strips data URIs.
Where it lives Gmail, pasted into its signature settings
1584 × 396 over the site's dark background, with the Hero headline and the domain. The bottom-left corner is left empty on purpose: that is where LinkedIn lays the profile photo, so the banner doesn't carry one.
Where it lives LinkedIn, at the top of the profile
The card GitHub shows when the repo is shared, with that same headline. It carries no figures at all: GitHub serves it from its settings and won't take a URL, so nothing could keep it current. A figure that can't have a guardian isn't a figure, it's a promise.
Where it lives GitHub, in the repository settings
06 — Correct and incorrect use
06. The real mistakes of this system
Not a catalog of generic ✓ / ✗: the failures this brand had in the process, the figure that caught them and how they were fixed.
The viewBox that lied
height:40px → 23px · −42%It was "0 0 120 120" but the ink filled only 58% of the height. Everyone who used the component undersized it without knowing.
Fix: viewBox cropped to the ink: the height you give IS the symbol's.
The split used at 24px
color crescent = 1.2pxAt that height the offset read as a print registration error, not a signature.
Fix: split → flat threshold at 48px (rule 1). Below it, the flat variant.
The favicon with no optical compensation
8.2% ink at 16px vs 8.1% at 32pxThe 16px one was the 32px rescaled; at that size the stroke washed out to gray.
Fix: dedicated 16px asset with stroke-width 10 instead of 6.
The logo weighing less than a foreign icon
12×15px next to LinkedIn 18×18pxIn the footer the brand sat below a UI icon and at the same visual weight as the © next to it.
Fix: the logo is never smaller than adjacent icons (rule 4).
The lockup at 29%
symbol 24→64px, wordmark at 18pxThe symbol grew and the wordmark lagged behind. The logo wasn't big: it was alone.
Fix: controlled symbol/wordmark proportion (rule 5).
The circle inside the circle
symbol at 35% of its footprintThe nav put the symbol inside a circular container, turning it into a target.
Fix: no circular container: the symbol is already a circle (rule 3).
The four colors of this page
4 drifted tokensThe page documenting color was the one that had it wrong: bone, dark and the two pastels.
Fix: #F5F3EE→#F7F3EC · #181B1F→#191D21 · pastel cyan #CFEFEE→#A7E1DE · pastel purple #E6E0FB→#C6B9F0.