The By Default logo system has five lockups and two colour variants of each. Pick the lockup that fits the layout, then pick the colour that gives the strongest contrast against the surface behind it.
Every variant is hardcoded as either pure black () or pure white () so it survives being embedded into third-party tools, slide decks, and email — anywhere CSS currentColor doesn't apply.
1.1 Our Logotype
Our logotype is designed with confidence in mind. The use of a slightly irregular typeface and an unusual lockup allows our logotype to be bold by celebrating its differences and distinctiveness.
1.2 Logotype Variation
Inspired by the way puzzles seamlessly connect together, our logotype can be applied using numerous lockups. It is designed to be unexpected, reflecting our core belief that there are always alternative solutions.
Primary Centered
Secondary
Tertiary
Avatar
The compact "bd" mark. Use this when the space is too small for the wordmark to be legible — favicons, profile photos, app icons, navigation toggles. The minimum legible size is around 16px.
1.3 Logotype Positioning
Having this variation in our logotype offers flexibility when positioned on any application. The logotype can adapt to where it sits — placed in corners, centralised, or running vertically — without losing its read.
- Corners — anchor a lockup in any corner of a layout. Use the variation that points the wordmark toward the empty space.
- Centralised — when the layout is symmetrical, use the centered lockup so the mark balances on its own vertical axis.
- Vertical — for tall, narrow surfaces (book spines, side rails, sidebars), use a vertical lockup so the wordmark reads top-to-bottom.
1.4 Clearspace & Minimum Sizes
As much as we like our logotype to be flexible, we still require a few rules to make sure it is used correctly.
Clearspace
The logotype requires a clearspace equal to the width of the d in "default". Any element that sits alongside the logotype in a composition should not pass into this clearspace unless there is a deliberate reason.
Minimum Sizes
Follow these minimums to keep the logotype readable on every surface.
| Medium | Minimum width |
|---|---|
| Digital | 100 px |
| 8 mm |
Because the lockups vary in width and height, measure the width of the word "default" when checking against the minimum.
1.5 Logo Don'ts
We embrace variation and flexibility in our logotype, but there are limits. The rules below are non-negotiable — they keep the mark recognisable across every surface it shows up on.
Don't hide the logotype
Make sure the logotype is clearly visible against its background. Avoid low-contrast surfaces that wash it out.
Don't break legibility in new lockups
If you build a new variation, the wordmark must still read "by default" — never reverse, mirror, or rotate parts that destroy the read.
Don't apply an outline
The logotype is solid. Outlines, strokes, and hairline borders are not part of the system.
Don't apply effects or filters
No drop shadows, glows, embosses, blurs, or any decorative filter.
Don't apply multiple colours
The wordmark is monochrome — pure black or pure white only. No colour overlays, no gradient fills, no per-letter recolouring.
Don't stretch or distort
Scale uniformly. Never squash, stretch, skew, or warp the proportions.
Don't crop the logotype
The full mark must always be visible. Never clip, mask, or partially hide it.
Respect the clearspace
Other elements should not enter the clearspace around the logotype unless there is a deliberate reason.
Don't apply at an angle
Keep the logotype upright. No tilts, no rotations, no "playful" angles.