Brand & UI Guidelines · v1.0

A leadership brand, built to fly in formation.

This system documents the visual language already live across geeseproject.com and the Born to Soar rebuild — verified for accessibility, and set down as one consistent source of truth.

9brand colors
2typefaces
17contrast pairs audited
WCAG 2.1 AAtarget standard
Foundations

Where this comes from

Three sources were checked directly — not assumed — before a single token was set. Each plays a different role in what follows.

SourceWhat it actually isColors found (measured)Role in this system
geeseproject.com
live site
The operating legacy marketing site — checked via computed DOM styles, not screenshots. #4187C7 blue · #EE3552 coral
#090909 ink · #6B6B6B gray
Manrope / Inter
PRIMARY source for the energetic layer — headline accents, links, body text.
geeseproject-web.web.app
asset host
Not a styled marketing surface — it's the image/CDN bucket both builds pull team photos and workshop galleries from. Its own shell uses default system-ui type and ad-hoc color (#1a1a2e, #f5a623). #1a1a2e navy-ish
#f5a623 amber
system-ui (unstyled)
REFERENCE ONLY — not treated as brand authority; noted so it isn't mistaken for a second design language.
Redesign Wireframe
Born to Soar launch
The approved low-fi wireframe for the book-launch rebuild — a deliberately restrained 2-color system. #1B2D5B navy · #B8963E gold
(gold reserved for CTAs only)
PRIMARY source for the structural layer — dark surfaces, and the one CTA color.
Synthesis. This system merges both eras rather than picking one: the legacy site's blue and coral still carry headline energy and links; the wireframe's navy replaces coral as the dominant dark surface, and gold stays rationed to primary calls-to-action exactly as the wireframe specifies. The asset-host's colors are not used anywhere below.
The mark. A circle in Geese Blue holding a coral flight-path — the same "V formation" motif used across the site's geese-in-flight imagery. Treat it as a placeholder reference here, not a redrawn logo file.
Color

Palette

Navy is the structural color — headers, footers, dark bands. Geese Blue and Coral carry energy in headlines and links. Gold is rationed to calls-to-action only, so it keeps its weight.

#1B2D5B
Navy
Structural / dark surfaces
Headers, footers, manifesto bands, dark section backgrounds.
#122048
Navy Deep
#122048
Footer base, darkest ground, hero gradients.
#4187C7
Geese Blue
#4187C7
Headline accents, links, large UI — not small solid-fill text.
#306595
Geese Blue — Solid
#306595
AA-safe blue for solid buttons/badges carrying white text.
#EE3552
Coral
#EE3552
Secondary headline accent, urgency, "new" badges.
#B8963E
Gold
#B8963E
Reserved for primary CTAs only. Pair with navy text, not white.
#E4D2A0
Gold Light
#E4D2A0
Eyebrows and labels set on navy.
#0B0B0C
Ink
#0B0B0C
Body headings and primary reading text.
#F5F3EE
Paper
#F5F3EE
Warm off-white ground — alternates with pure white section-to-section.
Contrast & Accessibility

Every pairing, measured

Ratios computed with the WCAG relative-luminance formula against the actual token values above. Two real issues turned up in the current build — both have a documented fix.

PairingSampleRatioNormal textLarge text / UI
Ink on White Aa 19.9:1 PASS PASS
Body Gray (#6B6B6B) on White Aa 5.3:1 PASS PASS
White on Navy Aa 13.4:1 PASS PASS
White on Geese Blue (#4187C7) Aa 3.8:1 FAIL PASS
White on Coral (#EE3552) Aa 4.0:1 FAIL PASS
White on Gold — used on the site's "Order the Book" button Aa 2.8:1 FAIL FAIL
Navy on Gold — the fix, applied above Aa 4.75:1 PASS PASS
White on Geese Blue — Solid (#306595) Aa 6.1:1 PASS PASS
Gold-Light on Navy (eyebrow labels) Aa 8.9:1 PASS PASS
Fix required in production: the live "Order the Book" gold button (.btn-primary) currently sets white label text at 13px — a 2.8:1 ratio, failing AA at every size. Swap the label color to Navy (#1B2D5B) and keep the gold fill; this single change resolves the site's only real contrast defect.

Accessibility checklist

  • Body copy never drops below a 4.5:1 ratio against its background.
  • Gold is reserved for buttons and large display type — never small white-on-gold labels.
  • Every interactive element shows a visible :focus-visible ring in Geese Blue Solid.
  • Motion (the flock animation above, marquees, carousels) respects prefers-reduced-motion.
  • All photography carries descriptive alt text — never the filename.
Typography

Manrope + Inter

Manrope carries the brand's voice — confident, geometric, a little architectural, used for every headline. Inter does the reading work underneath it: neutral, dense-friendly, built for long paragraphs of program detail.

Display / H1
Manrope 800 · clamp(38–72px)
Born to Soar
H2
Manrope 800 · clamp(28–42px)
What is the Geese Project?
H3
Manrope 800 · 19–20px
Leadership Accelerator Course
Eyebrow / Label
Manrope 700 · 11px · upper · .14em
New Book by Richard Caballero
Body
Inter 400 · 16–17px · 1.65
Every Filipino is born with the potential to soar — the Geese Project translates that belief into a culture-based leadership system built for the AI era.
Caption
Inter 500 · 12.5px
Ships from Manila · Paperback ₱800 / Hardcover ₱1,200
Button label
Manrope 800 · 12.5px · upper
Order Your Copy Today
Spacing & Elevation

An 8px rhythm

Section padding runs 88px top and bottom on desktop; everything inside steps down from there in multiples of 4.

4px
8px
12px
16px
24px
32px
48px
88px

Radius & shadow

radius-sm · 8px
radius-md · 14px
radius-lg · 22px
Components

Built from the live site

Specimens below render with the corrected, AA-safe tokens.

Buttons

Card

Leadership Accelerator Course

8 weeks · via George Brown · Fall/Winter/Spring cohorts, with a corporate track for teams.

Category pills (FAQ-style filter)

Book Orders LAC / GPLI Workshops Shop & Shipping

Form field

Icon tile

Imagery & Iconography

Sky, formation, faces

Three recurring image types carry the brand: wide sky-and-geese photography for hero moments, candid workshop documentary photos for proof, and warm portrait crops for every named person on the team.

  • Hero and CTA bands: cloud/sky photography with a navy gradient overlay for text legibility.
  • Workshop proof: unposed, natural-light photography — never stock imagery.
  • Team portraits: consistent crop and warm color grade; initials-on-gradient as the fallback avatar.
  • Icons: single-weight line icons at 1.8px stroke, sat inside a soft Geese-Blue-tinted circle.
Voice & Tone

Confident, culturally grounded, forward-looking

The copy across Born to Soar and the site never hedges. It states a belief, then backs it with a framework.

Do

"Every Filipino is born with the potential to soar."

Don't

"We hope this program might help some leaders improve."

Do

"We are not simply developing leaders for today. We are developing AI-Ready Filipino Leaders for tomorrow."

Don't

"Our innovative solutions leverage synergies for tomorrow's workforce."

Geese Project Design System · compiled from geeseproject.com, geeseproject-web.web.app, and the Born to Soar rebuild · v1.0