The Bytown brand system
Everything you need to put the brand on something — the logo files themselves, the exact color tokens, the type and spacing scale, and worked examples of the mark in the wild. If a rule here disagrees with something you’ve seen, this page wins.
01 — Logos
The mark, and where to get it
Bytown’s mark is a single b, set in charcoal. The wordmark is always live text set in Inter Bold — there is no wordmark image file, by design.
Bytown
Bytown
Never do this
Download the files
Raster only. There is no vector master and no wordmark file — set the wordmark in Inter Bold, tracking −0.02em.
Two things worth knowing before you use these. The charcoal mark is invisible on dark grounds — reach for the white file rather than applying a CSS filter. And the app tile is a tile, not a reversed logo: the white b is baked onto a #1A1A1A rounded square, so it only disappears into a background that is also #1A1A1A.
02 — Color palette
One blue, earned sparingly
The palette is neutral-first. Blue is the only accent, and it means “act here” — it is never decoration. Every value below is a named token; use the token, not a hand-picked hex.
Neutrals
#0A0A0A
#1A1A1Ast-dark
#4A4A4Ast-body
#808080st-muted
#FAFAFAst-bg
#FFFFFFst-card
#E5E7EBst-border
#F0F0F0st-hairline
Signature blue
#3B82F6st-blue · st-accent
#2563EBst-blue-hover
#1E40AF
#DBEAFE
#EFF6FF
The two-CTA rule. On the marketing site the primary CTA is ink; inside the product it is blue. One primary per view; secondary actions are outlined in border. Blue on a marketing page means a genuine action — not a highlight, not a wash, not a decorative glow.
Status and data
#16A34A
#DCFCE7
#B45309
#FEF3C7
#DC2626
#FEE2E2
#F97316
Solid tokens carry text and icons; tints are backgrounds only. Never reach for raw Tailwind emerald, amber, rose, green or red classes — they drift from these pairs.
Gradients: single hue, 180°, CTAs only
Section washes may fade a single blue into canvas — #EFF6FF to #FAFAFA. Neutral and charcoal buttons stay flat; the gradient finish is reserved for primary CTAs.
Off the palette, permanently
- ✗ Purple, in any tint or role.
- ✗ Multi-hue gradients and gradient-filled text.
- ✗ Neon, and pastels outside the blue family.
- ✗ The five retired legacy blues from the pre-2026 identity. A build guard fails the site if any of them reappears in source, which is why they are named here and not printed.
Accessibility — WCAG AAMeasured contrast ratios
Measured contrast ratios, not estimates. Two of these constrain how you may use the token.
| Pair | Ratio | Rating | What it means |
|---|---|---|---|
| charcoal on canvas | 16.67:1 | AAA | Any size. |
| body on canvas | 8.49:1 | AAA | Any size. |
| charcoal on surface | 17.40:1 | AAA | Any size. |
| white on charcoal | 17.40:1 | AAA | Any size. |
| blue-hover on surface | 5.17:1 | AA | Use this blue for link text at body size. |
| blue on surface | 3.68:1 | Large only | Fine on a filled button; too weak for body-size text on white. |
| muted on canvas | 3.78:1 | Large only | Captions must stay 18.66 px, or 14 px bold. |
- ✓ Focus is a 2 px
#3B82F6outline at 2 px offset, visible on every interactive element. - ✓ Touch targets are 44×44 px minimum.
- ✓ Semantic landmarks, one
h1per page, no skipped heading levels. - ✓ Alt text on every meaningful image; aria-labels on icon-only controls.
03 — Typography & spacing
Inter, with extreme weight contrast
One typeface does all the work. Headlines are tight and heavy, body is open and light, and the gap between them carries the hierarchy — not size alone.
Body copy sits at 1.7 line-height and never exceeds 75 characters per line. It is set in body grey, not black — the contrast between a charcoal headline and grey body is doing the work.
Type scale
| Element | Fluid size | Weight | Line height | Color |
|---|---|---|---|---|
| Hero / H1 | clamp(2.25rem, 5vw, 3.5rem) | 700 | 1.08 | charcoal |
| Section H2 | clamp(1.75rem, 3.5vw, 2.5rem) | 700 | 1.15 | charcoal |
| Sub H3 | clamp(1.5rem, 3vw, 2rem) | 700 | 1.2 | charcoal |
| Card H3 | 18 px | 700 | 1.3 | charcoal |
| Marketing body | clamp(1rem, 0.5vw + 0.9rem, 1.15rem) | 400 | 1.7 | body |
| In-app chat body | clamp(1.0625rem, 0.5vw + 1rem, 1.25rem) | 400 | 1.6 | charcoal |
| UI label / nav | 14–16 px | 500 | 1.4 | body |
| Small / meta | 13 px in app, 14 px on marketing — never smaller | 500 | 1.5 | muted |
Headlines use sentence case, never title case, and carry letter-spacing: -0.02em. Inter sets everything. JetBrains Mono is for code and stat accents only; Source Serif 4 appears only in the company-story narrative. Never system fonts, Roboto, Arial or Open Sans.
Spacing — 8 pt grid
Every margin, padding and gap comes from this ladder. Nothing in between.
Section padding runs 80–120 px on desktop and 48–64 px on mobile — roughly a 30–40% reduction. Content maxes out at 1200 px.
Radii
Four steps, chosen by what the thing is — not by taste.
Never fully rounded cards, never 0 px corners.
Shadows
Ink-based and subtle — opacity never above 0.08. Shadow separates a card from the ground; a heavy border does not.
04 — Product placement
The mark in the wild
Four surfaces the brand actually has to survive. Each one is drawn to spec — the proportions below are the ones to build against.
Bytown
05 — Merch
Things people actually keep
Merch is monochrome. The mark or the lockup, in charcoal on light goods or white on dark goods — one placement per item, never both. These are placement diagrams, not product photography.