Change log · 5 revisions
| Version | Date | By | Changes |
|---|---|---|---|
| v1.0 | 2026-11-07 | Claude | Marked as approved: the board signed off the brand guide at its September 2026 meeting. The “Mascot: Sori” section (v0.9) was added after that meeting. |
| v0.9 | 2026-11-07 | Claude | Added “Mascot: Sori” to section 09: Sori, the friendly loudspeaker that stands for our Social Media AI Agent, with files, colours and do/don’t rules. Caption rules are unchanged. |
| v0.8 | 2026-09-21 | Claude | Removed the "Open questions for the board" section; added a 1–2 posts/week cadence target under Posting mechanics; renumbered the sections after it and fixed the now-dangling section reference in the house-style example. |
| v0.7 | 2026-09-21 | Claude | Added a "Post anatomy" spec to section 09, with a measured diagram sourced from the two published photo templates (safe margins, logo/handle slot, text stack, scrim, CTA bar) and a pointer to copy from assets/social/src/; trimmed the now-redundant logo/crop rule under Posting mechanics. |
| v0.6 | 2026-09-21 | Claude | Added section 09 (social media) covering lifestyle photography, minor photo consent, okay/not-okay post types, and posting mechanics; renumbered the sections after it; added three open items for the board. |
| 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. |
v1.0 · approved by the board, September 2026
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 · Social media
Applies to Instagram, Facebook, and any other KCAA-run account. The same voice, colors, and logo rules from this guide carry over — social just adds photography and posting rules on top.
Lifestyle photography
What to shoot for feed posts, stories, and recruitment material.
Real people, not stock
Actual KCAA players, coaches, and volunteers — never stock or AI-generated photos. Community-first only works if the community is who's actually in the photo.
Action over posed
Mid-drill, mid-play, genuine reactions on the bench. Save posed lineup shots for team photo day, not everyday posts.
Real venues, natural light
Shoot at the actual rink, court, or field. Skip heavy filters or presets that shift the brand's black/white/red/blue away from their true values.
Rotate across programs
Don't let the feed become one team on repeat — cycle through hockey, basketball, baseball, golf, and pickleball as they're active.
Post anatomy
Real measurements from the two published photo templates below, not illustrative guesses — same as the logo measurements in section 02.
1080×1080 canvas · 56px side margins · 48px top · 40px bottom · 44px logo height — measured from assets/social/src/volunteer-post-1-hero.html and volunteer-post-3-mission.html.
Canvas & margins
1080×1080 square. Keep 56px clear on both sides, 48px on top, and 40px on the bottom — nothing sits in that margin, including the CTA bar.
Top-row
Reversed/white logo (44px tall) top-left on a photo background; the black logo (section 01) once the background is light instead. @handle or a short context badge top-right — never both at once.
Text stack
Eyebrow pill (red, uppercase) → Poppins ExtraBold headline → one IBM Plex Sans lede line. Always left-aligned, anchored just above the CTA bar.
Scrim
A dark gradient sits behind any text on a photo — strongest at the top and bottom, lightest through the middle third, so the photo still reads.
CTA bar
White rounded bar, bold black CTA line + gray subtext, red Poppins-bold email. The fixed closer on every photo template — don't redesign it per post.
Start from a template
Copy one of the three files in assets/social/src/ instead of building from scratch. Keep this anatomy untouched — swap only the photo, headline, and lede.
What's okay to post
- Program highlights, results, and season recaps
- Registration windows and deadline reminders
- Coach and volunteer shoutouts
- Facility, event, and behind-the-scenes photos
- Bilingual (English/Korean) announcements
- Photos of minors without consent on file
- Retyping or redrawing the wordmark instead of using the approved logo files
- Trash-talking an opposing team or calling out a loss
- Political or religious endorsements
- Reposting someone else's photo or video without credit or permission
Posting mechanics
Voice
Same four words as section 08 — welcoming, plain-spoken, community-first, competitive. One program per post; don't mix two programs' news in one caption.
Program color accent
Use that program's color (section 06) as the accent when a post is program-specific. Logo, margins, and crop rules are covered above under Post anatomy.
Caption shape
Hook line → the info → one simple call to action (Register, RSVP, Link in bio). See Instagram Recruitment Posts for ready-to-publish examples of this pattern.
Hashtags
A short, consistent set — org tag plus the program tag. Stacking a wall of tags reads as noise, not plain-spoken.
Cadence
Target 1–2 posts a week — enough to stay active without becoming a burden on the volunteers running the accounts.
Mascot: Sori, our Social Media AI Agent
Who Sori is
소리 (Sori) means “sound”: Sori is the “voice” of our community, our Social Media AI Agent running on Claude. Sori collects the photos people send to social@kcaa.ca, drafts Instagram posts, waits for a board member’s approval, then posts them.
Files & colours
Full figure assets/sori/sori.svg; round avatar assets/sori/sori-face.svg for badges and cards. Both are generated by assets/sori/make_sori.py, so change the script, not the SVGs. White body with an ink outline; KCAA Red and Blue only as small accents. Works on black and on white.
Do
Introduce it as “Sori, our Social Media AI Agent”. Use it inside the Hub, in board material and next to drafts Sori wrote. Leave clear space of about a quarter of its width around it.
Don’t
Present Sori as a person, sign Instagram captions as Sori, or put Sori on posts or volunteer material. Recolour, stretch, add shadows, or make AI-generated versions. Use it in place of the KCAA logo.
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 shown here — 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); }