← design system

Logo & signature

The heart is the signature. Every BBS artifact ends with a jadeite heart linking home — that's the whole rule. Lockups are composed from the parts — two wordmarks and one heart — never saved as flattened artwork, so the heart is current everywhere by construction.

The marks

horizontal · theme-tinted
stacked
stacked · all-jadeite
483216
heart · favicon scale

Monochrome · one-ink print only

The only place the heart legally stops being jadeite: a medium that physically cannot produce it — one-ink screen print, engraving, fax, laser etch. Not for screens. On screen you always have jadeite available, so an unreadable ground is fixed with a scrim, a keyline, or a plate — see when you can't control the ground.

light bg · ink fill
dark bg · white fill

Clear space

Clear space is one heart-height on every side. Nothing — type, edges, other marks — enters the inner box.

1 ♥1 ♥
Horizontal lockup · clear space equals the height of the heart in the mark.
1 ♥1 ♥
Stacked lockup · same rule. When in doubt, add more, never less.

Minimum sizes

Below these widths the heart closes up and the wordmark stops being legible. Each specimen below is drawn at its true minimum. Total width is a fixed multiple of the cap height — 8.427× horizontal, 4.927× stacked — so divide the width you need by that to get --bbs-lockup-size.

horizontal · min 120px
stacked · min 88px
heart · min 16px

App icon & avatar crops

At icon sizes the heart stands alone — never the wordmark. Centred, with the heart at roughly 55% of the tile.

rounded square · 96
circle avatar · 96
on midnight · 96
small · 48

Heart hierarchy · use in order

01 · default
Solid jadeite
Every BBS artifact. Hero moments, inline text, footers — the signature that says Stephen made it. Always wrapped in <a href="https://builtbystephen.me">.
02 · large & quiet only
Outline heart · jadeite
Large quiet moments only — section marks, watermarks, anywhere the solid heart is too loud at size. Never below 32px: the stroke carries far less ink than the solid form, so it loses contrast exactly where legibility matters most. Small stays solid.

Never

Red — generic
Blue — fights theme
Purple — not brand
🧡
Any emoji heart

Lockup misuse

The lockup is fixed artwork. Scale it, and nothing else.

Stretched
Rotated
Recoloured
Effects added
Faded out
Parts reordered

On photography & busy backgrounds

Scrim the image, then keep the heart jadeite. A scrimmed photo puts jadeite around 6.8:1 — well past the 3:1 WCAG asks of a meaningful graphic — so there's no reason to drop the thread. Fix the ground, not the mark. Drop your own photos in to test. Full working at mono heart on screen.

scrimmed · heart stays jadeite
Do
no scrim · ground left uncontrolled
Don't

When you can't control the ground

User-uploaded backgrounds, partner templates, print-on-demand. You can't guarantee a ratio you don't own, so give the heart its own ground instead of recolouring it.

at 44px keyline — holds the silhouette plate — also fine, just heavier
at 16px keyline — 1.5px now eats the shape plate — still legible, still jadeite
controlled ground jadeite, untreated jadeite, untreated

The plate is the only route that keeps the heart jadeite and guarantees the ratio — you own both sides of the contrast. Prefer it. It's solid on purpose: at 84% over a pale photo jadeite drops to 2.2:1, under the bar, so the plate is the one surface in the system that is never glass.

Signature in context

built by stephen labradorite · electric glow
built by stephen opalite · static anchor
built by stephen jadeite · single-hue glow