What it means
The arcs are the years. The star is the person. The arcs move, the star holds.
Brand Guidelines
The rules that keep it consistent.
Extracted from the app, not invented for the website. Follow these and anything you make will belong to the same family.
Colour
Eight values, and no others.
Champagne gold is the only accent. If a design needs a second accent colour, the design is wrong.
Deep Midnight
#030B16
Base background across the product and site.
Void
#01060F
Footers and the deepest wells.
Champagne Gold
#E3C08A
The single accent. Used sparingly and never for large fills.
Gold Bright
#FFE3A7
Highlights on the mark and glow edges only.
Soft Ivory
#F1EAE3
Primary text and the star in the mark.
Ivory 60
rgba(241,234,227,.6)
Body copy and secondary text.
Hairline
rgba(241,234,227,.085)
Every border on the site.
Gold Deep
#A8814D
Gradient tails only, never a flat fill.
Typography
Two families, used for different jobs.
Newsreader
Headlines, chapter titles and the single emphasised phrase. Weights 200 to 300 only. Italic reserved for the gold emphasis.
Never used for body copy, buttons, labels or navigation.
Inter
Body copy, interface labels, buttons, navigation and every eyebrow. Weight 300 for prose, 500 for labels.
Line height stays generous. 1.72 for body, never below 1.6.
The mark
A star held inside orbiting arcs.
Where it lives
Navigation, footer, app icon, and once at hero scale as the Aperture. Never twice on one screen at size.
What not to do
Do not recolour, rotate, stretch, outline, add a drop shadow, or place it on a busy photograph.
Motion
Everything moves like breathing.
Nothing under 700ms
Interface transitions run 460ms to 1350ms. Anything quicker feels anxious.
One easing curve
cubic-bezier(.16, 1, .3, 1) for entrances, cubic-bezier(.2, .8, .2, 1) for hovers.
Orbits never repeat
The four arcs run at 62, 86, 128 and 168 seconds, so the arrangement is never quite the same.
Reveals stagger, never cascade
Maximum 95ms between siblings, capped at six items.
Reduced motion is honoured
Every animation collapses to a static state. Nothing is lost, only stillness gained.
No bounce, no spring, no pop
If it draws attention to the animation rather than the content, it does not ship.
Voice
How Hippora writes.
Short sentences
One idea each. If a sentence needs a semicolon, it probably wanted to be two sentences.
Concrete over clever
Name the thing. Never reach for a metaphor when a plain noun would do.
Never hype
No revolutionary, no game changing, no powered by AI. Confidence comes from specificity.
No pressure
No countdowns, no scarcity, no fear of missing out. If it needs urgency to sell, it is not good enough.
Need an asset that is not here?
Write to us and we will send it, in whatever format you need.