Goldwing, A modern, inclusive brand system

A simple, scalable visual language that invites every stakeholder to participate. Built for clarity, reach, and impact.

Core components

50+

UI patterns

Contrast baseline

Team collaborating in a modern workspace

Color system

Accessible neutrals with a confident accent. Use brand-600+ for interactive states, keep AA contrast minimums, and prefer alert-600 for semantic UI styling.

brand-500

accent-gold-wing

accent-horizon

oxford sky

Text

surface

Brand

--brand-50 → --brand-900

Neutral

--neutral-50 → --neutral-900

Info

--info-50 → --info-900

Success

--success-50 → --success-900

Warning

--warning-50 → --warning-900

Danger

--danger-50 → --danger-900

Typography

Use Exo for headlines and primary uses. Inter on body and secondary uses for its clarity and legibility across sizes. Keep headings bold, body relaxed, and line-length 60–72ch.

Display

Clarity invites participation

Bold, modern headings

Body

Readable body text with generous line-height and consistent rhythm.

Logo

Logos are provided as SVG. Use the appropriate variant for contrast and context, maintain clear space, and avoid distortion or effects.

Clear space Keep at least the height of the “H” in Hilo as padding on all sides.
Minimum size Wordmark ≥ 120px width. Mark ≥ 24px height. Scale proportionally.
Backgrounds Use dark wordmark on light, white on brand/dark, and avoid busy photos without a scrim.
Don’t Don’t stretch, recolor arbitrarily, add shadows/glows, or alter spacing.

Text logotype

Primary wordmark for most use. Prefer dark on light; use white on brand/dark backgrounds. Maintain clear space and minimum width for legibility.

Text on light

Text on dark

Text on brand

Mark (icon)

Use for small spaces, avatars, and favicons. Prefer white on brand/dark or dark on light. Avoid placing on noisy imagery.

Mark on light

Mark on dark

Mark on brand

Full lockup

Combines mark and wordmark. Use when space allows and brand recognition benefits from both forms. Keep color usage consistent with background guidance.

Full on light

Full on dark

Full on brand

Imagery

Use real, golden hour photos that reflect warmth and optimism. Favor diverse teams, candid settings, and Golden Hour lighting.

Components

Buttons, cards, and callouts defined by tokens so the system remains consistent and extensible. This area will be primarily shared through Figma resources and Dev team systems

Card title

Use cards to group related content. Keep body copy 14–18px with 1.5–1.7 line-height.

Learn more

Callout

Use callouts for important notices or impact statements.

Ready to roll out?

Download the brand kit and start building with confidence.

Download brand kit