# Champion AI — Visual Direction Reference > Use this document whenever producing, briefing, or reviewing any visual output: AI-generated images, design assets, social content, presentations, or campaign materials. --- ## 1. Brand Colors | Name | Hex | Usage | |-------|-----------|-------| | Navy | `#00004C` | Primary background, headlines, dominant tone | | Blue | `#0033A0` | Secondary, connectors, UI elements | | Green | `#00DC00` | Accent only — active states, emphasis, energy | | White | `#FFFFFF` | Type and UI on dark backgrounds; primary surface on light layouts | | Gray | `#636363` | Body copy, supporting text | **Color rules:** - Green is always a *punch* — never the dominant color in a composition - Navy and Blue work together as a gradient or side-by-side; never mix with warm tones on the brand palette - White is used liberally as type and breathing space on dark backgrounds --- ## 2. Photography ### Technical approach - **Lighting:** Natural or soft directional. Bright but not harsh. No heavy filters. - **Tone:** Cool, clean, professional — slight blue/neutral bias - **Contrast:** Medium-high. Rich blacks, bright highlights - **Depth of field:** Shallow — draw focus, reduce distraction - **Composition:** Rule of thirds, leading lines, intentional negative space - **Mood:** Optimistic, confident, forward-looking, trustworthy ### Style categories 1. **Authentic & Human** — Real people, natural expressions and interactions. Candid moments, not posed. 2. **Modern & Forward-Looking** — Clean contemporary composition. Sense of innovation and possibility. 3. **Clarity & Simplicity** — Minimal visual noise. Intentional focus. Lots of space. 4. **Collaboration & Partnership** — Teamwork, shared ideas, strong relationships in action. 5. **Real-World Context** — Authentic environments reflecting the industries we serve. 6. **Leadership & Confidence** — Confident leaders and teams driving change with purpose. ### People direction - Always vary representation across any image set: gender, age, ethnicity - Specify exact descriptions per image — do not leave it to chance - No stock-photo-feel. Real moments, not performed ones. - Avoid: suits and boardrooms unless specifically called for ### AI image generation — photography - Environments need architectural texture: exposed brick, warm wood, pendant lighting, city views through floor-to-ceiling windows - Color grading: warm ambient environment + cool blue digital elements = cinematic contrast - NEVER bake logos or text into generated images — composite in post-production - Human-only scenes (no tech context): zero overlays, purely authentic --- ## 3. Holographic UI A translucent panel system for surfacing data and insight. Can be layered over photography, color blocks, or used standalone on dark. ### Visual properties - **Fill:** Translucent gradient — `rgba(0,0,76,0.65)` → `rgba(0,51,160,0.65)` at 135° - **Border:** Subtle blue ghost outline — top `rgba(74,144,217,0.35)`, sides/bottom lighter - **Corner shape:** 3 rounded (10px) + 1 sharp — bottom-right corner is always the sharp point (`border-radius: 10px 10px 0 10px`) - **Bracket accents:** Corner brackets always green (`#00DC00`) — top-left always present, others optional and can be faded; same mark as the standalone Corner Bracket (Section 7) - **Type inside panels:** White, Roboto, small and structured ### Content hierarchy inside panels 1. Eyebrow label (9px, uppercase, green, letter-spaced) 2. Heading (15px, medium weight, white) 3. Optional green rule (2px, 28px wide) 4. Body / data / stats (12px, white at 72% opacity) ### When generating holographic UI - Overlays must be BOLD and visible — not faint decorative wisps - Large floating transparent panels emanating FROM devices or environmental surfaces - Content inside panels must be relevant to the scene/message — never placeholder lorem - Green bracket corner elements should be visible and crisp - Green is used for active/positive states, data highlights, trend indicators --- ## 4. Grid Overlay A fine technical grid used across the live site on dark hero and section backgrounds. This replaces the luminous-streams / particle-trail wave system and the diagonal texture background previously documented here — neither is in use. ### Spec - Two 1px line grids (horizontal + vertical) forming an 80px × 80px grid - Color: `rgba(0,51,160,0.08)` — texture, not pattern; should read as barely-there - Full-bleed: `position: absolute; inset: 0`, layered above the solid navy base, below content - `pointer-events: none` — decorative only ```css background-image: linear-gradient(rgba(0,51,160,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(0,51,160,0.08) 1px, transparent 1px); background-size: 80px 80px; ``` - Often paired with a soft radial blue glow behind it (`radial-gradient(ellipse, rgba(0,51,160,.35) 0%, transparent 65%)`, large and positioned off-canvas) — the grid supplies texture, the glow supplies a light source. --- ## 5. Backgrounds ### Dark — Solid - Base: `#00004C` (navy) - Clean, focused, technical - Works as full canvas for holographic UI and bold white type - Often layered with the Grid Overlay (Section 4) rather than left flat ### Gradient - Linear gradient: `#00004C` (bottom) → `#003AE0` (top) - Used for hero moments: campaign headers, social covers, key statements - Green used sparingly as an accent word or rule only — never dominant --- ## 6. Shape Language Two shape families. Pick by what the element **is**, not by habit — this distinction gets missed often enough that it's the first thing to check on any new UI element. ### A. Structural containers → 3 rounded corners, 1 sharp bottom-right - CSS: `border-radius: 10px 10px 0 10px` (standard), `border-radius: 16px 16px 0 16px` (large) - Applies to: cards, panels, banners, media/image containers, form containers — anything that **holds** other content - Sharp corner is always **bottom-right** — it gives the shape direction and energy, pointing forward ### B. Pills, chips, tags, buttons → fully rounded - CSS: `border-radius: 9999px` - Applies to: filter pills, topic/format chips, tags, badges, CTA buttons, "load more" buttons, toggles — any small, single-line, tappable/selectable control - These elements **are** the content (a label, an action) rather than a container for other content — they never take the sharp corner **Quick test:** does it hold content, or is it the whole thing? A card holding a title and paragraph → sharp corner. A "Strategy" tag or a "Load More" button → full pill. ### Teardrop / accent shape - Asymmetric form: tall vertical, rounded top, pointed bottom-right - Used as a background compositional element or color block --- ## 7. Accent Marks ### Corner bracket - Single L-shaped bracket, top-left position only - Always green (`#00DC00`) - Rounded ends and corner (stroke-linecap and linejoin: round) - Used at scale — large and compositional, not decorative micro-detail - Keep arms proportionate to the stroke weight — roughly 6–7× the stroke width (e.g. ~35px arms at a 5px stroke). Longer arms read as a frame, not a bracket. ### Quotation marks - Font: Noto Sans HK, weight 900 - Color: `#00DC00` - Always opening mark only — no closing quote - Always oversized relative to the copy that follows — err large rather than small ### Hand-drawn underline - A filled scribble shape, not a drawn/stroked line - Color: `#00DC00` - Only ever sits under a word that is itself set in green — never under a white or navy word. The underline reinforces the single green accent word; it doesn't create a second emphasis point. - One word only — the pivot word that carries the message - Use the pre-drawn asset library at `6-Website/Website Revamp/_assets/Underlines/` (25 variants) rather than hand-coding a stroke path — pick the variant closest to the word's width and stretch to fit --- ## 8. Typography (reference) - **Typeface:** Roboto — used in ~99% of brand materials. `Caveat` (cursive) is a sanctioned secondary face for rare handwritten-annotation moments — a human aside, never a headline or body face. - **Display / headlines:** Weight 700, navy or white depending on background - **Body:** Weight 400, gray (`#636363`) on light / white at 72–88% opacity on dark - **Eyebrows / labels:** Weight 700, uppercase, 0.18–0.22em letter-spacing — blue or muted gray on light backgrounds, white or green (green preferred) on dark - **Green type:** Used for accent words only — one per composition maximum --- ## 9. Composition Principles - **Hierarchy is always clear** — one dominant element, supporting elements recede - **Space is intentional** — don't fill every corner; breathing room is part of the brand - **Green draws the eye** — place it on the most important word or data point - **Dark panels + light type + green accent** = the core visual formula on dark - **Light backgrounds** use navy type with green underline or bracket for emphasis - Photography + holographic overlay = always ensure the overlay is legible and sized to matter --- ## 10. What to Avoid - Generic stock photo environments (plain white offices, fake smiles, posed handshakes) - Faint, decorative-only holographic elements — if it's there, it should have content and presence - Warm color tones on the brand palette (orange, red, yellow — not ours) - Logos or wordmarks baked into generated images - More than one em-dash per written piece - Green as a background or dominant color - Closing quotation marks - The sharp corner on any position other than bottom-right - The sharp-corner container shape on pills, chips, tags, badges, or buttons — those are always fully rounded (`border-radius: 9999px`), never `10px 10px 0 10px` - Stacking emphasis beyond green + its hand-drawn underline on the same word (e.g. also adding bold, all-caps, or extra letter-spacing) — green plus the underline is the one sanctioned combination, nothing further - Italics in any form — not in type, not in CSS (`font-style: italic`), not in copy. Use bold, color, or letter-spacing for emphasis instead. --- ## 11. Icon Library Line icons used across the site, grouped by use case. Canonical source: `6-Website/Misfits/visual-guidelines/icons.html`. ### Style - 24×24 viewBox, stroke-based, stroke-width ~1.5–2, `stroke-linecap` / `stroke-linejoin: round` - `stroke="currentColor"` — inherits the surrounding text color rather than a hardcoded fill, so the same icon works navy-on-light or white-on-dark without a separate asset - A handful of brand-specific marks (Backup, See, Do) are solid filled shapes on their own custom viewBox rather than the 24×24 stroke grid — treat these as brand marks, not generic UI icons, and don't restyle them as line icons ### Groups - Navigation & Toggles - Trust, Security & Fit - Process & Delivery - Growth & Outcomes - People & Program - Perception & Action (Hear→See→Do™) - AI & Automation Pull from this library first — reuse the existing icon for a concept rather than drawing a new one. If an icon needs a fix, fix it everywhere it appears, not just where the issue was spotted.