One wave, used well.
Our logo is a greeting. Everything on this page exists to keep it reading like one — whether it's 40 pixels tall in a sponsor grid or filling a court-side banner. Rules first, downloads at the bottom.
Three parts, one greeting
Colour-coded for this diagram only. The logo is always a single ink.
- The wave
- The hand and sleeve. The only part that ever moves, and the reason the club is called what it is.
- The crescents
- Two arcs tracing the sweep of the hand. They are part of the logo at rest — not decoration, and never optional.
- The wordmark
- Custom lettering: Hi! set over CLUB. Never re-typed, never re-spaced.
Two lockups, three inks
Use the full lockup wherever it fits legibly. The icon is for places the wordmark can't survive — avatars, favicons, tight sponsor rows. There is no horizontal variant and no stacked variant; if you need one, ask rather than build it.
Keep 1x clear on every side
One unit — x — is the cap height of the CLUB lettering: 68 of the 370-unit artboard, so roughly 18% of the logo's height. Nothing enters that zone: no text, no rules, no other logo, no edge of the page. Drag the slider.
✓ 1.40x — clear. The zone is respected.
40px on screen, 15mm in print
Measured as height, because the lockup's 1.5:1 ratio does the rest. Below the floor the CLUB row drops under 7px and closes up into a smudge — that's the point at which you switch to the icon (20px / 6mm).
The palette, and the logo's share of it
The full palette is for layouts. The logo gets three of them: red #BF1A1A, white, or ink black #0D1322. Not coral, not gold, not mint — those are interface accents and never touch the mark. Click any chip to copy.
Where each ink belongs
On photography: white lockup over a dark scrim, placed in a genuinely quiet area of the frame. If you can't find one, the image is wrong for a logo.
The wave
The hand turns about the wrist — the midpoint of its cuff edge — so the sleeve pivots in place instead of swinging off the arm. Four swings that decay, then stillness for the rest of the cycle. The crescents step aside while the hand is genuinely moving and return for the pause, which is why the resting frame is the real logo rather than a fallback.
Ceiling is 13deg. Shipped value is 12deg.
Shipped cycle: 5s — 1.7s of wave, 3.3s of stillness.
@keyframes logo-wave {
0% { transform: translate(184.2px, 200.9px) rotate(0) translate(-184.2px, -200.9px); }
3.19% { transform: translate(184.2px, 200.9px) rotate(calc(var(--wave-amp) * -1)) translate(-184.2px, -200.9px); }
8.5% { transform: translate(184.2px, 200.9px) rotate(calc(var(--wave-amp) * 1)) translate(-184.2px, -200.9px); }
13.81% { transform: translate(184.2px, 200.9px) rotate(calc(var(--wave-amp) * -1)) translate(-184.2px, -200.9px); }
19.13% { transform: translate(184.2px, 200.9px) rotate(calc(var(--wave-amp) * 1)) translate(-184.2px, -200.9px); }
24.44% { transform: translate(184.2px, 200.9px) rotate(calc(var(--wave-amp) * -.85)) translate(-184.2px, -200.9px); }
29.75% { transform: translate(184.2px, 200.9px) rotate(calc(var(--wave-amp) * .55)) translate(-184.2px, -200.9px); }
34%, 100% { transform: translate(184.2px, 200.9px) rotate(0) translate(-184.2px, -200.9px); }
}auto
Loops with a still beat between passes. Site header and footer — one instance per view, never two waving at once.
hover
One pass on hover or keyboard focus. Reserved for future use; don't introduce it without a reason.
none
Static. Required in print, email, OG images, and anywhere the logo appears more than once on a screen.
The wave never plays for visitors who ask for reduced motion — enforced in CSS, not left to the caller. Nobody has to remember it.
Never do these
Each tile is the live logo with the mistake actually applied, so nothing here can go stale.
Join this Saturday
Hi! CLUB
It's written Hi! Club
Correct
- Hi! Club — capital H, capital C, space between.
- The exclamation mark is part of the name. It never drops.
- In running text, set it in the body font like any proper noun — no logo, no colour, no small caps.
- Handles may lowercase where a platform forces it:
@hi!club.
Wrong
- HiClub · Hi Club · hi club · HI CLUB
- Hi!Club (no space) · Hi! club (lowercase c)
- “Hi! Club” swapped for the logo mid-sentence
- Possessives on the mark — write “the Hi! Club community”
Poppins leads, Inter carries
Aa
Poppins
Where every match starts with “Hi!”
Aa
Inter
A padel and badminton community in Indonesia, built for people who want a game and a greeting in the same breath.
13px Poppins 600, uppercase, 0.14em tracking, red with a 26×2px rule. It labels a section; it is not a heading and never carries the message on its own.
Sound like the wave
The logo is a hand saying hello. If the copy wouldn't suit that gesture, it isn't ours.
Warm, not soft
We welcome beginners and we still keep score. Friendly doesn't mean vague — give people the time, the court and the category.
Plain, not flat
Short sentences, concrete nouns. “Doubles, Saturday 7am, two courts” beats “an unparalleled sporting experience”.
Open, never macho
No trash talk, no gatekeeping, no “only serious players”. The point of a greeting is that anyone can return it.
Say Where every match starts with “Hi!”
Not Indonesia's #1 elite padel destination.
Take the files, not a screenshot
SVG for anything digital or large-format; PNG only where SVG isn't accepted. All of these are generated from the same geometry the site renders, so they can never drift out of sync.
| Asset | SVG | PNG |
|---|---|---|
| Lockup — red | hi-club-logo-red.svg | 2000×1333 |
| Lockup — white | hi-club-logo-white.svg | 2000×1333 |
| Lockup — ink black | hi-club-logo-black.svg | 2000×1333 |
| Icon — red | hi-club-icon-red.svg | — |
| Icon — white | hi-club-icon-white.svg | — |
| Icon — ink black | hi-club-icon-black.svg | — |
Building in this codebase? Import components/ui/BrandLogo or BrandIcon instead of pasting paths — they read the same source as these files.