Lobee.ca
① Typography Scale
Display Heading (--text-2xl)
Page Title (--text-xl)
Section Heading (--text-lg)
Body text at --text-base. Readable, comfortable, 16–18 px range.
Small text (--text-sm) — nav links, card CTAs, captions.
Tiny label (--text-xs) — metadata, demo labels, badges.
② Colour Tokens
③ Floating Dock — fixed to bottom of every page
The pill-shaped dock replaces the old header and footer. It floats at the bottom of every page with a frosted-glass blur effect. The active page link is highlighted in the accent colour. body { padding-bottom: var(--dock-clearance) } keeps content from being hidden behind it.
To copy into a new page — use template.html. Set aria-current="page" on the matching dock link.
④ Feed Cards — used on index.html
⑤ Card Blocks — class="card-block" on an <a> tag
⑦ Prose / Article Layout — <main class="prose">
⑧ Token Quick Reference
| Token | Purpose |
|---|---|
--color-bg | Page background |
--color-surface | Card / header surface |
--color-text | Primary body text |
--color-text-muted | Secondary / description text |
--color-text-faint | Metadata / placeholder text |
--color-accent | Brand orange — links, CTAs, pills |
--color-border | Subtle dividing lines |
--dock-clearance | Bottom padding to clear the dock (88px) |
--space-1 → --space-20 | 4 px spacing scale |
--radius-sm/md/lg/full | Border-radius tokens |
--transition | Standard easing curve |