Full lockup
Default. Headers, documents, report covers.
Minimum 160px wide
Brand guidelines
Two colors, one type scale, and a rule about adjectives.
Everything on this page is read from the stylesheet the site actually runs on. It cannot show you a color we do not use, because nothing here is typed twice.
01 — The name
Beacon Lite Digital, in full, always.
Not "Beacon Lite", not "BLD". There is no approved short form. Splitting a name across variants is the exact problem this practice is paid to fix for other people, so it would be a poor advertisement to do it here.
02 — Color
No hue. Anywhere. Ever.
Two colors and six greys. Emphasis is carried by weight, size and rule thickness instead — so nothing is lost when a page is printed in black and white, or read by someone who cannot distinguish the colors we would otherwise have reached for.
| Sample | Token | Hex | On white | On black | Use |
|---|---|---|---|---|---|
--black | #000 | 21:1 AA | 1:1 — | Ink. Backgrounds for inverted sections, all body text, borders. | |
--white | #fff | 1:1 — | 21:1 AA | Paper. Page background, and text on inverted sections. | |
--grey-90 | #111 | 18.88:1 AA | 1.11:1 — | Code blocks only. | |
--grey-80 | #1a1a1a | 17.4:1 AA | 1.21:1 — | Hairlines inside inverted sections. | |
--grey-60 | #444 | 9.74:1 AA | 2.16:1 — | Secondary text on white. Table headers, captions, muted notes. | |
--grey-40 | #767676 | 4.54:1 AA | 4.62:1 AA | The lightest grey permitted on white text. Eyebrows, small print. | |
--grey-20 | #d4d4d4 | 1.48:1 — | 14.17:1 AA | Borders and rules on white. Text on inverted backgrounds. | |
--grey-10 | #ededed | 1.17:1 — | 17.94:1 AA | Section tints. Never used for text. |
Ratios are computed at build time from the hex values, not typed in.--grey-40 is the lightest grey permitted for text on white: it clears the 4.5:1 threshold at 4.54, and nothing lighter carries words. --grey-20 and --grey-10 are borders and tints on white, and become legitimate text colors on black.
03 — Typography
The face is whatever loads instantly.
The brand typeface for anything digital is the reader's own system font — San Francisco on Apple, Segoe on Windows, Roboto on Android. Zero requests, zero bytes, no render delay, no layout shift.
This means the site is not pixel-identical across devices, deliberately. We would rather be legible in 100ms than distinctive in 400ms, and a business paying us for speed should not be handed a webfont that spends it.
Print and PDF are the exception, because a PDF has no system to fall back on. Those embed Inter, licensed under the SIL Open Font License so it costs nothing to put in a client deliverable.
Stacks
ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace
Measure
68ch — body copy never runs wider.
--step-4Get found in search
--step-3Get found in search
--step-2Get found in search
--step-1Get found in search
--step-0Get found in search
--step--1Get found in search
Six steps, all fluid. Each interpolates with the viewport rather than jumping at a breakpoint, which is why there are no separate mobile sizes to keep in sync.
04 — Logo
Three lockups. Nine files. No exceptions.
Wordmark
Where the mark already appears nearby.
Minimum 90px wide
Icon
Favicons, avatars, anywhere square.
Minimum 24px wide
Clear space and size
Keep clear space on all sides of at least the height of the icon's circle — roughly 15% of the lockup height. Nothing intrudes into it. Below 160px wide, drop to the wordmark. Below 90px, use the icon alone.
The unsuffixed files use fill="currentColor" and take their color from CSS when embedded inline. The -black and -white variants carry fixed fills, for <img> tags where currentColor cannot inherit.
Never
- Recolor it, or place it on a background that drops contrast below 4.5:1
- Add a shadow, outline, gradient or container
- Stretch it out of proportion, or rotate it
- Rebuild the wordmark by typing the name in another typeface
- Place it over photography — there is no approved photography
05 — Voice
Every claim should be checkable.
That is the product, so it has to be the writing. Three rules do most of the work:
- No contractions. "Does not", "it is", "you will". Across every published page there are 87 uncontracted forms and zero contractions. It is the most recognizable feature of the voice.
- Numbers over adjectives, with their date attached. Not "extremely fast" but "18 KB and zero scripts, measured August 2026". An undated performance claim cannot be defended a year later.
- Name the limits. Every substantial page says who should not buy the thing it is describing. That is not modesty, it is what makes the positive claims believable.
Banned outright: seamless, robust, world-class, best-in-class, cutting-edge, revolutionary, game-changing, synergy, and "leverage" used as a verb. If a sentence still works with the adjective removed, remove it.
The full guidelines, including print, applications and the conditions that would make this brand wrong, live in BRAND.md in the repository.
Every site we build gets one of these.
A brand guide that reads from your own stylesheet, so it cannot go stale the way a PDF does.