Brand identity
Brand Kit
Francisco López's identity system: the logo and its exact geometry, the palette with its two layers, the typography and the rules that govern its use. All downloadable, in light and dark.
01 — Concept
A two-layer brand
The symbol is a ring over a base: a lens, an eyelet, a zero. The split version offsets two color layers —cyan and purple— behind the ink stroke. 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
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.
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
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#005E5F · #3FC9C4--brand-purple#9B87F5--brand-purple-accentoklch(0.62 0.16 290)--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
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
05 — Applications
The brand in its place
Where the logo lives and how each piece is downloaded. The symbol PNG is sized by height and the lockup PNG by width — it's not obvious, which is why it's stated here.
A dedicated asset, not a rescale. At 16px the stroke rises to 10 units for optical compensation. Flat, centered.
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.
06 — Correct and incorrect use
The real mistakes of this system
Not a catalog of generic ✓ / ✗: the failures this brand actually had, the figure that caught them and how they were fixed. A record of judgment.
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.
Identity goes here: what the brand is and how it's used. The engineering rigor —grid, breakpoints, spacing scale, motion and the full accessibility measurement— lives in the Design System.