Brand

The beacon, the wordmark, the amber.

The mark, the lockup, the colours and the type that make Beckon look like Beckon. Download the assets below; the rest of this page explains how to use them.

Logo

One drawing, three treatments: the lockup where there is room, the bare beacon where there is not, the amber tile wherever a square icon is required.

Beckon lockup on light
Beckon lockup on dark
The bare beacon mark
The app icon tile

Downloads

Download everything (.zip)

Lockup

Tile and wordmark together, for headers, documents and anywhere there is room.

beckon-lockup.svg SVG · light beckon-lockup-dark.svg SVG · dark beckon-lockup-mono.svg SVG · ink beckon-lockup-mono-white.svg SVG · white beckon-lockup-large.png PNG · 544px tall beckon-lockup-dark-large.png PNG · dark beckon-lockup-mono-large.png PNG · ink beckon-lockup-mono-white-large.png PNG · white

Mark

The bare beacon. Ink on light surfaces, white on dark, amber where a single colour has to carry the brand.

beckon-mark.svg SVG · ink beckon-mark-white.svg SVG · white beckon-mark-amber.svg SVG · amber beckon-mark-512.png PNG · 512 beckon-mark-1024.png PNG · 1024 beckon-mark-white-512.png PNG · white 512

App icon

Ink beacon on the amber rounded tile. Favicons, app icons and avatars only; it is what the app and this site use.

beckon-icon.svg SVG beckon-icon-square.svg SVG · square beckon-icon-256.png PNG · 256 beckon-icon-512.png PNG · 512 beckon-icon-1024.png PNG · 1024 beckon-icon.webp WebP · 512 favicon-32.png PNG · favicon apple-touch-icon.png PNG · 180 square

Social avatar

The beacon with extra air so circular crops (X, GitHub, Slack) keep the rays.

beckon-avatar.svg SVG · amber beckon-avatar-transparent.svg SVG · transparent beckon-avatar-1024.png PNG · 1024 beckon-avatar-400.png PNG · 400 beckon-avatar-transparent-1024.png PNG · transparent

Colour

Amber is the one constant: it does not change between schemes. Everything else is a token defined twice, once for light and once for dark, and nothing in the app or on this site is hardcoded.

Light

Amber #f2b134 · --brand The brand colour. The tile, the primary button, the eyebrow.
Ink #1a1f2b · --brand-ink The beacon and any text set on amber.
Accent #3556f5 · --accent Links, focus rings and actions inside the app.
Text #151a24 · --text Headings and body text.
Text 2 #4b5563 · --text-2 Secondary text.
Muted #7b8494 · --muted Meta, timestamps, placeholders.
Page #eef0f4 · --bg Page and board background.
Surface #ffffff · --surface Cards, lists and panels.
Line #dfe3e9 · --line Hairlines and card edges.
Ok #16a34a · --ok Done, on time, connected.
Warn #d97706 · --warn Due soon.
Danger #dc2626 · --danger Overdue and destructive actions.

Dark

Amber #f2b134 · --brand Unchanged. The one colour that does not flip with the scheme.
Ink #1a1f2b · --brand-ink The beacon and any text set on amber.
Accent #6b83ff · --accent Links, focus rings and actions inside the app.
Text #e8ebf0 · --text Headings and body text.
Text 2 #b6bcc7 · --text-2 Secondary text.
Muted #8b93a1 · --muted Meta, timestamps, placeholders.
Page #0f1218 · --bg Page and board background.
Surface #171b23 · --surface Cards, lists and panels.
Line #2a303b · --line Hairlines and card edges.
Ok #4ade80 · --ok Done, on time, connected.
Warn #fbbf24 · --warn Due soon.
Danger #f87171 · --danger Overdue and destructive actions.

Type

Beckon ships as one file and bundles no fonts, so it reads in the system face of whatever opens it. The wordmark is the exception: it is outlined from Inter ExtraBold and never retyped.

Where Markdown charts the course.
System sans
SF Pro on Apple, Inter, Segoe UI or Roboto elsewhere. Headings at 800, body at 400, tight tracking on display sizes.
AaAaAaAaAa
2026-09-22_a1b2 · 500 cards · v1.0.0
System mono
SF Mono, Menlo or Consolas. Card ids, dates, version tags, eyebrows and anything terminal-flavoured. Weights 400 to 700.
012301230123

Using the mark

Do

  • Use the amber tile wherever a square icon is required, and the bare beacon everywhere else.
  • Set the bare beacon in ink on light surfaces and in white on dark ones; use the amber beacon only where a single brand colour must carry it.
  • Scale the mark as one drawing. The rays and the gallery line are part of it.
  • Keep clear space of at least half the tile on every side of the lockup.
  • Use the SVG lockups; the wordmark is outlined, so it never depends on an installed font.

Don't

  • Do not redraw, thicken or thin the beacon, or drop the rays to simplify it.
  • Do not put the beacon on a tile of any colour other than amber.
  • Do not retype the wordmark in another face or weight, and do not add a tagline inside the lockup.
  • Do not recolour the amber to match a scheme; it is the same in light and dark.
  • Do not use the tile smaller than 16px or the lockup shorter than 24px.