Hippogriff orange#FF4512
Primary brand color. The mark, key accents, focus indicators, and expressive artwork.
Hippogriff / Identity guide
Built with character.
The elements that make us recognisable. One mark, a confident orange, and a clear voice across every experience.
01 / The mark
Meet Hippogriff.
Use the supplied orange mark in its original proportions. Pair it with the name when the audience is meeting us for the first time.
Hippogriff.Give it room. Keep surrounding text and graphics clear of the mark; use at least one mark-width as a starting point for standalone placements.
Keep it intact. Never stretch, crop, rotate, or add effects to the logo. Keep the original orange on a clean light or charcoal surface.
02 / Color
Orange leads.
Neutrals support.
#FF4512 is the primary. Off-white and charcoal give it space. Lighter orange tones can support artwork, but never replace the primary in the logo.
Charcoal#161616
Main text, dark sections, and high-contrast controls.
Off-white#F5F5F5
The page background. A clean, neutral foundation for the orange.
Paper#FFFFFF
Light surfaces, panels, and text on dark backgrounds.
Neutral gray#606060
Supporting copy on light backgrounds.
Soft border#DADADA
Dividers and subtle boundaries between sections.
For small text, prefer charcoal on orange or white on charcoal. White text on the primary orange does not provide sufficient contrast for normal-sized text.
03 / Typography
Clear by design.
Geist carries the message. Geist Mono handles small labels, technical values, and supporting details.
Aa Bb Cc
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 &?!
Regular 400 · Medium 500 · Semibold 600
Aa 012
DESIGN / ENGINEERING
#FF4512
01 — 02 — 03
Use sparingly for labels and metadata.
Display / 44–96px
Your next chapter.
Section / 38–68px
Ideas taking shape.
Body / 14–16px
Give each idea enough space to be understood. Keep paragraphs focused, line lengths comfortable, and the next step clear.
Label / 10–12px
Independent minds. Shared ambition.
04 / Interface elements
Simple. Deliberate.
Strong type, fine dividers, restrained corners, and directional arrows. Use space and hierarchy before adding decoration.
Spacing. Build with a consistent 8px rhythm. Use 24–32px within groups and generous separation between chapters.
Shape. Use subtle 4–8px corners on controls and panels. Reserve circles for the directional contact link and expressive artwork.
05 / Voice
Sound like the people
doing the work.
Direct, curious, and specific. Explain what we make, how we work, and what the next step looks like.
“Bring the ambition.
Let’s make something that matters.”
Let’s make something that matters.”
Be concrete. Say “A working demo every Friday” instead of “World-class delivery.”
Invite a conversation. Speak like a collaborator. Avoid inflated claims, jargon, and promises we cannot substantiate.
06 / Motion
Follow the idea.
Motion explains change. Artwork can evolve while the text stays steady and readable.
Arrive, then settle.
Use a gentle upward entrance with a soft ease-out. Avoid repeated movement on reading surfaces.
One continuous story.
Transform the same visual across chapters. Keep wheel easing light and touch scrolling native.
Respond with purpose.
Use subtle hover feedback. Keep controls anchored, preserve keyboard focus, and honour the site’s pause control.