Brand guide · v0.1
The Technical Domain
brand guide.
A starting point, not a straitjacket. This guide sets the brand every demo wears and the rules that keep a fictional brand safe to show anyone.
01
Name
The brand is fictional on purpose. Treat it as you would a real one, so the demos look real.
- Write Technical Domain — two words, both capitalized.
- Full name, where a legal-sounding line is needed: Technical Domain Placeholder Goods Co.
- The domain is always lowercase: technicaldomain.xyz.
- Never abbreviate to “TD”. Those initials belong to a major Canadian bank. No TD monogram, ever.
- In French the name does not change: Technical Domain, Marchandises fictives as the descriptor.
Tagline
Fine placeholder goods. Proudly fictional.
Des marchandises fictives de qualité. Fièrement imaginaires.
02
Logo
The mark is a placeholder box — the universal sign for “content goes here” — with a maple leaf in the centre. Something will go here, and it will be Canadian.
Rules
- 01Clear space on every side equals the frame’s corner radius — about one-sixth of the mark’s width.
- 02Minimum size: 20 px on screen, 8 mm in print. Below 24 px, drop the descriptor from the lockup.
- 03Do not stretch, rotate, outline or recolour the mark beyond the variants supplied.
- 04Do not replace the leaf with the flag’s leaf, place the mark on a red–white–red bar, or pair it with Government of Canada symbols.
03
Colour
Named after things you would find around Lake Lorem. Maple is for action and emphasis, never for large backgrounds. Click a swatch to copy its value.
Core palette
Site tokens — light
Site tokens — dark
All text pairs pass WCAG 2.2 AA (4.5:1) in both themes. White on Maple is 5.7:1; Lake Ink on Toque is 9.0:1. Toque is never used for text.
04
Typography
One family, Inter, in a variable weight. Self-hosted, Latin subset.
Specimen
Catalogue No. 1 · Lake Lorem, Ontario · Est. whenever
Everything you need.
Nothing that exists.
Technical Domain is a fictional Canadian company that sells everything and ships nothing. It is the brand demos wear when they need to look real without belonging to anyone.
Scale
- Display — 800, 40–64 px, −0.03 em
- Heading — 700, 26–36 px, −0.02 em
- Body — 400, 16 px, 1.6 line height
- Eyebrow — 600, 11.5 px, uppercase, +0.16 em
- Catalogue numbers and code — ui-monospace, 500
05
Voice
Dry, warm and brief. The joke is that a serious-looking company is entirely made up — never at anyone’s expense.
Tone
- Deadpan over loud. Understatement is funnier than exclamation marks.
- Canadian, not cliché: weather, canoes, toques, portages, two languages. Easy on the “eh”.
- Product copy is plain and accurate. The jokes stay in the novelty goods and the fine print.
Canadian English
- -ize with -our and -re: organization, colour, centre.
- catalogue, cheque, inquiry.
- Spaced em dashes — like this — and typographic apostrophes (’).
- Temperatures in Celsius with a space: −40 °C.
Canadian French
- courriel, never e-mail.
- No space before ? ! ; — a space before :.
- Numbers: 12,5 %, 1 000 $.
- Adapt headings and jokes; do not translate them word for word.
- Place names follow French usage: Lac-Lorem (Ontario).
06
Design tokens
Products read these custom properties. Download them as CSS or JSON below.
| Token | Default | Used for |
|---|---|---|
--brand-name | "Technical Domain" | Product name in headers, titles and notifications |
--brand-primary | #c22a2a | Buttons, active navigation, focus rings |
--brand-on-primary | #ffffff | Text and icons on primary |
--brand-accent | #1f5a85 | Links, badges, secondary highlights |
--brand-bg | #f7f4ee | Page background |
--brand-surface | #ffffff | Cards, panels, inputs |
--brand-text | #14212b | Body text; muted text and lines are derived from it |
--brand-radius | 8px | Corner radius for controls and cards |
--brand-font | Inter, system-ui, sans-serif | Typeface family |
07
Brand safety
A fictional brand is only harmless if it stays obviously fictional and never borrows someone else’s reputation.
Always
- Show the “fictional company” disclaimer on every page.
- Use the reserved fictional phone range: +1 613 555 0100–0199.
- Use placeholder postal codes (X0X 0X0) and invented places (Lake Lorem).
- Invent any company or person names used in demos, and check them with a quick web search before use.
Never
- Imitate real brands, logos or trade dress — or present a real company as a customer.
- Use the national flag, the Canada wordmark or any government symbol.
- Joke about alcohol, cannabis, gambling, politics, religion or any group of people.
- Collect real personal data in a demo. Demos run on made-up records only.
08
Downloads
Everything here is generated from the same tokens the site uses.
