Change log · 5 revisions
| Version | Date | By | Changes |
|---|---|---|---|
| v0.5 | 2026-09-10 | Claude | Replaced the flat cross-document nav bar with a single "Back to Hub" link, to match the Hub becoming the primary entry point; updated section 11's stylesheet to match. |
| v0.4 | 2026-09-10 | Claude | Added this change log; fixed the dark-background logo card to match the light card's size; turned section 10's pattern list into live visual mini-demos; added a copy-paste house-style stylesheet (section 11). |
| v0.3 | 2026-09-10 | Claude | Added section 10 (using this as the house style); trimmed open questions (color values confirmed, rollout question reworded to a Hockey/Basketball clash check); added the Junior Tigers open item; changed the pickleball/racquet color to Tennis Ball yellow-green; added the cross-document nav bar. |
| v0.2 | 2026-09-10 | Claude | Removed the "signature texture" section after confirming at native resolution it isn't real; added a measured clear-space diagram, a minimum-size ladder, and visual do/don't demo cards; added the program color system. |
| v0.1 | 2026-09-10 | Claude | Initial draft — real logo embedded, exact colors sampled from the source file, do/don't rules, typography pairing, voice starter. |
Draft · v0.5 · pending board review
KCAA Brand Identity Guide
Built directly from the approved core logo files. Colors are sampled pixel values from the source PNGs, not estimates. Measurements below are taken from the actual master file, not illustrative guesses.
01 · The logo
Primary — light backgrounds
Reverse — dark backgrounds
02 · Clear space
X = the width of the K's diagonal leg — 92px measured directly on the 2457px-wide master file (3.74% of the lockup's width). Keep that much clear space on every side, at any scale.
03 · Minimum size
320px200px160px — floor for the full lockup96px — subtitle unreadable, drop itBelow 160px wide, the "Korean Canadian Athletic Association" line stops reading as text. Switch to the KCAA mark alone rather than shrinking the full lockup further.
04 · Do / don't
05 · Core color
Roughly this split across any single piece — red and blue almost never appear as equal-sized fields side by side outside the logo itself.
06 · Program colors
Decided 2026-09-10. Each program gets one accent, used for its schedule blocks, jersey trim, and site section — paired with core black/white, never two program colors side by side.
07 · Typography
The wordmark's own letterforms are custom-drawn, not a licensable font — don't try to match it exactly for body text.
08 · Voice & tone (starter)
09 · Open questions for the board
- CHECKColor clash — Hockey & BasketballThese are the two currently running programs. Confirm KCAA Blue and Court Orange don't clash with jerseys, banners, or equipment already in use for either before rolling the color system out.
- DECIDEJunior Tigers programJunior Tigers already has its own color and logo. Confirm whether it stays a distinct sub-brand outside this system, or gets folded into the KCAA program-color system above — and send the existing assets so this guide can account for them either way.
10 · Using this as the house style
Going forward, internal documents — financial reports, meeting notes, the project roadmap, this guide — should be built as self-contained HTML files like this one, not Google Docs or Slides. That's what keeps the brand pixel-accurate and consistent instead of drifting doc to doc. To start a new one: copy this file, keep the <style> block and its color/spacing tokens untouched, and replace the content sections.
Header pattern
Eyebrow (status/category) → H1 (title) → one-sentence lede. Every document opens this way.
Numbered sections
H2 in small caps with a bottom rule, numbered only when order matters (like this guide's build sequence) — not decoration.
Cards for parallel items
Any list of comparable things (rules, programs, phases) becomes a card grid, not a bullet list — see the swatches and do/don't demos above.
Callouts
Red-tinted for a flag/warning, blue-tinted for a supporting note — reuse the .callout / .callout.blue classes rather than inventing a third color.
Open items
Anything needing a decision from someone else uses the tagged list style in section 09 — a flag (CHECK / DECIDE / CONFIRM) plus a one-line ask.
Light & dark
Every color is a token (--ink, --surface, --red…), redefined once for dark mode. Never hardcode a hex outside the token block.
Back navigation
Every document except the recruitment intro material (it's external) gets a single .back-nav link to the Hub — not a row of peer links, which wraps badly on mobile.
11 · Copy-paste stylesheet
The base tokens and components used across every document in this set (hub, roadmap, volunteer plan, this guide). Start a new internal doc by pasting this whole block into a <style> tag, then add page-specific classes on top — never redefine a token that's already here.
:root {
--bg: #f3f5f7; --surface: #ffffff; --ink: #0a0a0a; --ink-soft: #565f68; --ink-faint: #889198;
--line: #dde2e6; --red: #d01048; --red-soft: #fbe6ec; --blue: #3090d8; --blue-soft: #e6f2fb;
--shadow: 0 1px 2px rgba(10,10,10,0.04), 0 8px 24px -14px rgba(10,10,10,0.16);
color-scheme: light;
}
:root[data-theme="dark"] {
--bg: #101214; --surface: #1a1c1f; --ink: #f1f2f3; --ink-soft: #b4bac0; --ink-faint: #7d848b;
--line: #2c2f33; --red: #ef4778; --red-soft: #331a22; --blue: #5cabe6; --blue-soft: #17283a;
--shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 30px -14px rgba(0,0,0,0.6);
color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
--bg: #101214; --surface: #1a1c1f; --ink: #f1f2f3; --ink-soft: #b4bac0; --ink-faint: #7d848b;
--line: #2c2f33; --red: #ef4778; --red-soft: #331a22; --blue: #5cabe6; --blue-soft: #17283a;
--shadow: 0 1px 2px rgba(0,0,0,0.4), 0 8px 30px -14px rgba(0,0,0,0.6);
color-scheme: dark;
}
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: -apple-system, "Segoe UI", ui-sans-serif, system-ui, sans-serif; line-height: 1.55; -webkit-font-smoothing: antialiased; }
.page { max-width: 900px; margin: 0 auto; padding: 32px 24px 100px; }
.back-nav { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink-soft); text-decoration: none; padding: 10px 4px; margin-bottom: 16px; }
.back-nav:hover, .back-nav:focus-visible { color: var(--blue); }
.back-nav .arrow { font-size: 15px; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 10px; }
.eyebrow.status { color: var(--red); }
h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -0.01em; margin: 0 0 12px; text-wrap: balance; }
.lede { font-size: 16px; color: var(--ink-soft); max-width: 64ch; margin: 0 0 40px; }
section.block { margin-bottom: 44px; }
h2 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); margin: 0 0 18px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
h3 { font-size: 15px; font-weight: 800; margin: 0 0 6px; }
p.note { font-size: 13.5px; color: var(--ink-soft); margin: 0; }
.rule-grid, .demo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.rule-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow); }
.callout { background: var(--red-soft); border: 1px solid color-mix(in srgb, var(--red) 30%, var(--line)); border-radius: 12px; padding: 14px 18px; font-size: 13.5px; }
.callout strong { color: var(--red); }
.callout.blue { background: var(--blue-soft); border-color: color-mix(in srgb, var(--blue) 30%, var(--line)); }
.callout.blue strong { color: var(--blue); }
.open-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.open-item { display: flex; gap: 12px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px; box-shadow: var(--shadow); }
.open-item .flag { font-size: 11px; font-weight: 800; color: white; background: var(--ink-faint); border-radius: 999px; padding: 2px 9px; flex-shrink: 0; margin-top: 2px; }
.open-item .body { font-size: 13.5px; }
.open-item .body .h { font-weight: 700; display: block; margin-bottom: 2px; }
.table-wrap { overflow-x: auto; }
footer { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-faint); }