BRIEF #18 — UCCO Foundation: Visual Independence Rebrand¶

SURFACE: ucco.foundation (ucco-foundation repo) DO NOT TOUCH: ucca.online, ops.ucca.online, ops.ucco.foundation, rtopacks.com.au, ir.ucca.online, keys.ucca.online, mcp.ucca.online, mcp.ucco.foundation, pioneer.ucco.foundation CF ACCOUNT: UCCO Foundation — confirm correct account before any operation.

Date: 16 March 2026 Status: PRIORITY — THIS BRIEF JUMPS THE QUEUE Depends on: Nothing. This is a standalone visual rebrand. Blocks: Everything else on ucco.foundation. The Treasury page, Participate rewrite, video embed, Antony's first impression — all depend on this landing first.

→ TIM (Plain English)¶

Right now ucco.foundation looks like ucca.online's little brother wearing the same clothes. Same dark theme, same IBM Plex typeface, same blueprint energy, same monospace metadata bar. If a graphic designer — say, Antony — sees both sites, the immediate read is: "same template, same organisation, the foundation is a front for the company."

That's fatal. UCCO's entire credibility depends on visual independence from UCCA. The standard must look like it belongs to everybody, not to one company.

This brief transforms ucco.foundation into a completely distinct visual identity:

Light theme across the entire site. No dark mode. No toggle. Light IS the brand. Open, transparent, nothing hidden.
New typefaces — not IBM Plex. UCCA owns IBM Plex. UCCO gets its own typographic voice: institutional, warm, authoritative. Three options below for you and Antony to pick from.
New colour palette — teal can stay as an accent but the overall feel shifts from "security operations centre" to "open institution." Think the difference between a bank vault and a library.
Distinct layout patterns — no monospace metadata bars, no terminal-style UI, no blueprint overlays. Those are UCCA's visual language. UCCO gets editorial layout, generous whitespace, considered typography.

The test: put ucca.online and ucco.foundation side by side. A stranger should think they come from different organisations. A graphic designer should think they come from different design teams. That's the bar.

After this brief lands, every future UCCO surface (Treasury, Pioneer, pr.ucco.foundation) inherits this identity automatically.

→ ALEX (Build Instructions)¶

1. Theme: Light Foundation¶

The entire site shifts to a light colour scheme. This is not a dark-to-light toggle — the dark theme is removed entirely.

Background hierarchy:

--ucco-bg-primary:     #FAFAF8;     /* Warm white — main background */
--ucco-bg-secondary:   #F2F0EC;     /* Warm grey — card backgrounds, sections */
--ucco-bg-tertiary:    #E8E5DF;     /* Slightly darker — hover states, borders */
--ucco-bg-hero:        #F5F4F0;     /* Hero section — can be slightly different */

Text hierarchy:

--ucco-text-primary:   #1A1A1A;     /* Near-black — headings, primary text */
--ucco-text-secondary: #4A4A46;     /* Dark grey — body text */
--ucco-text-tertiary:  #7A7A72;     /* Mid grey — captions, metadata, timestamps */
--ucco-text-muted:     #A0A098;     /* Light grey — placeholder text, disabled states */

Accent colours:

--ucco-accent:         #2A7D6E;     /* Deep teal — primary accent, links, CTAs */
--ucco-accent-hover:   #1E5F53;     /* Darker teal — hover states */
--ucco-accent-light:   #E6F2EF;     /* Very light teal — accent backgrounds, badges */
--ucco-accent-warm:    #C4956A;     /* Warm gold — secondary accent, highlights, milestone markers */

Functional colours:

--ucco-success:        #2A7D6E;     /* Same as accent — live indicators, positive states */
--ucco-warning:        #D4A843;     /* Warm amber — shame meter, caution states */
--ucco-error:          #C4514A;     /* Muted red — error states only */
--ucco-border:         #DDD9D2;     /* Warm grey — card borders, dividers */
--ucco-shadow:         rgba(26, 26, 26, 0.06); /* Subtle warm shadow */

Critical rules: - NO dark backgrounds anywhere on the site. Not in the hero, not in cards, not in code blocks, nowhere. - NO gradients that darken toward black. - Code blocks and technical snippets use a light code theme (e.g., GitHub-light style) — never dark terminal style. - Cards use --ucco-bg-secondary with a subtle border (--ucco-border) and gentle shadow (--ucco-shadow). No dark card backgrounds. - The hero section can have a subtle warm tint or a light pattern/texture but must remain light.

2. Typography: New Identity¶

Remove IBM Plex entirely. Every instance — Plex Sans, Plex Mono, Plex Serif — is removed from the site. IBM Plex is UCCA's typeface. UCCO must not use it.

Three options below. Tim will confirm which to implement. Default to Option A if no response within 24 hours.

OPTION A — Elegant Institution (RECOMMENDED)¶

Headings:    Libre Baskerville (serif)
Body:        Source Sans 3 (sans-serif)
Monospace:   Source Code Pro (for any technical content)

Rationale: Libre Baskerville is a proper transitional serif — it carries the weight of a standards document without feeling stuffy. Think academic journal meets modern web. Source Sans 3 is Adobe's open source humanist sans — clean, highly legible, wide language support, excellent screen rendering. Both are open source (SIL Open Font License) which matters for a foundation. This pairing says "we publish serious documents and we respect your reading experience."

Font weights to load: - Libre Baskerville: 400 (regular), 400 italic, 700 (bold) - Source Sans 3: 300 (light), 400 (regular), 600 (semibold), 700 (bold) - Source Code Pro: 400 (regular), 600 (semibold) — only if technical content exists

OPTION B — Modern Authority¶

Headings:    Fraunces (serif, optical size axis)
Body:        Inter (sans-serif)
Monospace:   JetBrains Mono (for any technical content)

Rationale: Fraunces is a variable font with an optical size axis — it morphs from playful at small sizes to commanding at display sizes. It's distinctive, modern, and would give UCCO a unique character. Inter is the gold standard of screen-optimised sans-serifs — used by GitHub, Linear, Vercel. This pairing says "we're technically sophisticated and design-conscious."

Font weights to load: - Fraunces: Variable (wght 100-900, opsz 9-144) — or static 400, 700 if variable is too heavy - Inter: 300, 400, 500, 600, 700 - JetBrains Mono: 400, 600

OPTION C — Classical Standard¶

Headings:    Cormorant Garamond (serif)
Body:        Lato (sans-serif)
Monospace:   Fira Code (for any technical content)

Rationale: Cormorant Garamond is a refined, high-contrast serif that reads like a beautifully typeset book. It carries history and gravitas — appropriate for a standard that references centuries of credential frameworks. Lato is warm, stable, and universally legible. This pairing says "we are an institution with roots, building for the future."

Font weights to load: - Cormorant Garamond: 400, 500, 600, 700 (regular + italic for 400) - Lato: 300, 400, 700 - Fira Code: 400, 600

For all options:¶

Self-hosted only. Download from Google Fonts, convert to WOFF2, serve from the site's own domain. No external font CDN. No Google Fonts API calls. Same security posture as UCCA.
Font-display: swap on all @font-face declarations.
Preload the heading font in the HTML <head> for above-fold performance.
Remove all IBM Plex files from the repo and all @font-face declarations referencing them.

3. Typography Scale¶

/* Heading scale — serif font */
h1          { font-size: 3rem;    line-height: 1.15;  letter-spacing: -0.02em;  font-weight: 700; }
h2          { font-size: 2.25rem; line-height: 1.2;   letter-spacing: -0.01em;  font-weight: 700; }
h3          { font-size: 1.5rem;  line-height: 1.3;   letter-spacing: 0;        font-weight: 700; }
h4          { font-size: 1.25rem; line-height: 1.4;   letter-spacing: 0;        font-weight: 600; }

/* Body scale — sans-serif font */
.body-lg    { font-size: 1.125rem; line-height: 1.7;  }  /* Hero subtitles, lead paragraphs */
.body       { font-size: 1rem;     line-height: 1.7;  }  /* Standard body text */
.body-sm    { font-size: 0.875rem; line-height: 1.6;  }  /* Captions, metadata */
.label      { font-size: 0.75rem;  line-height: 1.5;  letter-spacing: 0.05em; text-transform: uppercase; } /* Section labels */

Critical: line-height 1.7 on body text. This is a reading site, not a dashboard. Generous leading = comfortable reading = trust.

4. Layout Principles¶

Remove from UCCO (these are UCCA's visual language): - Monospace metadata bars - Terminal/command-line style UI - Blueprint overlay textures - Green-on-black colour combinations - Scan-line or CRT effects - Any visual that says "operations centre"

UCCO's visual language: - Editorial layout — generous margins, considered whitespace, content-first - Card pattern — light cards with subtle borders and shadows on a slightly different light background. Think Notion, Linear, or Stripe's documentation. - Generous whitespace — sections breathe. Minimum 4rem (64px) between major sections. The page should never feel cramped. - Subtle dividers — thin 1px lines in --ucco-border between sections. No heavy rules, no gradient dividers. - Photography/illustration — if hero imagery is used, it should be warm, human, or abstract. No blueprint schematics, no circuit boards, no code-on-screen stock photos.

5. Component Redesign¶

Background:  --ucco-bg-primary with subtle bottom border (--ucco-border)
Logo:        UCCO Foundation logo (when Tim provides) in dark on light
Links:       --ucco-text-secondary, hover → --ucco-accent
MCP badge:   Outlined style (border: 1px solid --ucco-accent, text --ucco-accent)
             NOT filled/solid — that's the UCCA style
Sticky:      Yes, on scroll add subtle shadow (--ucco-shadow)

No backdrop blur. No transparency. Clean light bar with a bottom border. Simple.

5B. Hero Section¶

Background:  --ucco-bg-hero (warm white/cream)
             OR a subtle geometric pattern in --ucco-bg-tertiary on --ucco-bg-hero
             NO dark background. NO video background. NO blueprint.
Heading:     Serif font, --ucco-text-primary, large (h1 scale)
Subtitle:    Sans-serif, --ucco-text-secondary, body-lg
CTAs:        Primary = filled --ucco-accent with white text
             Secondary = outlined --ucco-border with --ucco-text-primary

The hero should feel like the title page of a well-designed book. Confident, spacious, warm.

5C. "What is UCCO?" Section¶

Background:  --ucco-bg-secondary (slight contrast from hero)
Cards:       --ucco-bg-primary with --ucco-border and --ucco-shadow
Labels:      .label class in --ucco-accent (PROTOCOL, IDENTITY, ACCOUNTABILITY)
Headings:    h3, serif, --ucco-text-primary
Body:        .body, --ucco-text-secondary

The three pillars should feel like reading three well-laid-out cards, not deciphering text on a dark screen.

5D. The Standard Section¶

Background:  --ucco-bg-primary
Card:        --ucco-bg-secondary with --ucco-border, generous padding (2rem+)
Version tag: .label class in --ucco-accent-warm (gold)
Title:       h3, serif
Description: .body, --ucco-text-secondary
TOC items:   .body-sm, --ucco-text-tertiary, numbered
Buttons:     Same CTA pattern as hero

5E. Participate Section¶

Background:  --ucco-bg-primary OR --ucco-bg-secondary (alternate from previous section)

Content will be rewritten (new copy incoming from Tim). The layout should support: - A large heading (h2, serif) - 2-3 paragraphs of body text - A set of "What pioneers do / don't do" items (not bullet lists — use a card or two-column layout) - 4 CTA links (Read the Standard, View the Treasury, Contribute on GitHub, Contact the Board)

Background:  --ucco-bg-secondary or slightly darker --ucco-bg-tertiary
Text:        --ucco-text-tertiary
Links:       --ucco-text-secondary, hover → --ucco-accent
Social icons: --ucco-text-tertiary, hover → --ucco-accent (outline style, not filled)
Divider:     1px --ucco-border above footer

Clean, light, not heavy. The footer should feel like the endpaper of a book, not the bottom of a dark well.

5G. Treasury/Support Page¶

All Treasury page components (thermometer, stat cards, doughnut, donation selector) must be restyled to the light theme: - Stat cards: --ucco-bg-secondary on --ucco-bg-primary, with --ucco-border - Thermometer: --ucco-accent fill on --ucco-bg-tertiary track - Doughnut: keep existing category colours but ensure they read well on light backgrounds - Donation buttons: outlined in --ucco-border, selected state uses --ucco-accent - CTA button: filled --ucco-accent - Shame meter: --ucco-warning bar on --ucco-bg-tertiary track

6. Hero Visual — What Replaces the Blueprint?¶

The blueprint video/texture is UCCA's. UCCO needs its own hero visual. Options (Tim to decide):

Option A — Pure typography. No background image. Just the heading, subtitle, and CTAs on a warm light background with generous space. Confidence through emptiness. Think Apple's product pages circa 2013.

Option B — Subtle geometric pattern. A very light, almost invisible pattern in --ucco-bg-tertiary — could be a faint grid, interlocking circles, or abstract nodes. Not a blueprint. Something that suggests structure without screaming "engineering."

Option C — Abstract warm texture. A soft, warm gradient or paper texture. Think aged parchment meets modern design. Suggests history, authority, permanence.

Option D — Illustration. A custom illustration — abstract, warm, suggesting connection and certification. This is the most distinctive but requires the most production time.

Recommendation: Start with Option A (pure typography). It's the fastest to implement, it's confident, and it gives the serif heading room to command the page. Add a subtle pattern or illustration later if the page feels too bare.

7. What NOT to Change¶

The UCCO logo/wordmark — keep using whatever Tim provides. If no new logo yet, keep the current "UCCO" text mark but render it in --ucco-text-primary on light background.
The MCP badge — keep the functionality and overlay. Restyle to outlined/light theme.
The Standard page content — TOC, description, PDF download, GitHub link. Just restyle.
Social icons in footer — keep the set, restyle to light theme.
Site structure and routes — no URL changes, no navigation restructuring.

8. Performance¶

Total font payload should not exceed 250KB (WOFF2 compressed)
Preload heading font (above fold)
Remove all IBM Plex font files from the repo to reduce bundle size
No external font CDN — self-hosted only
Maintain current Lighthouse scores (target 100)

9. Accessibility¶

The light theme must pass WCAG AA contrast ratios: - --ucco-text-primary on --ucco-bg-primary: must exceed 7:1 (AAA) - --ucco-text-secondary on --ucco-bg-primary: must exceed 4.5:1 (AA) - --ucco-text-tertiary on --ucco-bg-primary: must exceed 4.5:1 (AA) - --ucco-accent on --ucco-bg-primary: must exceed 4.5:1 (AA) - White text on --ucco-accent (CTAs): must exceed 4.5:1 (AA)

Test with Chrome DevTools accessibility audit before deploying.

THE CLONE TEST¶

Before marking this brief as complete, open ucca.online and ucco.foundation side by side. Answer these questions:

Do they look like they come from different organisations? Must be YES.
Could a graphic designer tell they were built by the same team? Should be NO.
Does ucco.foundation feel like an open, transparent institution? Must be YES.
Does ucco.foundation feel like a security operations product? Must be NO.
Would Antony look at both and say "same template"? Must be NO.

If any answer is wrong, the brief is not complete.

CHECKLIST¶

FONT DECISION REQUIRED¶

Tim — pick one before Alex starts. Or show Antony all three and let a fellow designer weigh in.

Option	Heading	Body	Vibe
A (recommended)	Libre Baskerville	Source Sans 3	Elegant institution — academic journal meets modern web
B	Fraunces	Inter	Modern authority — technically sophisticated, design-conscious
C	Cormorant Garamond	Lato	Classical standard — beautifully typeset book, history + future

All are open source (SIL OFL). All self-hosted. All have excellent screen rendering.

Preview them at: - https://fonts.google.com/specimen/Libre+Baskerville - https://fonts.google.com/specimen/Fraunces - https://fonts.google.com/specimen/Cormorant+Garamond - https://fonts.google.com/specimen/Source+Sans+3 - https://fonts.google.com/specimen/Inter - https://fonts.google.com/specimen/Lato

Brief #18 — UCCO Foundation: Visual Independence Rebrand "Light is the brand. Open is the message. Independence is the proof." "If Antony says 'same template,' we failed."