Brand Guide
The visual language of OpenHack
One mark, one emerald, two themes, and a grid. This page documents how OpenHack looks and why — so anything new that ships under the name still feels like it belongs.
Logo
A mark built from horizontal bars
The OpenHack mark stacks three horizontal bars — narrow, wide, narrow — anchored by a vertical stem. It reads as structure, as a hash, as a terminal prompt. It is monochrome by design and inherits the surrounding text color.
OpenHackOpenHackDo
- — Keep the wordmark in Geist Sans, weight 600, tight tracking.
- — Pair the mark with the wordmark at a 1:~3 height ratio.
- — Use solid foreground color: white on dark, near-black on light.
- — Maintain clear space of at least one bar-height on every side.
Don't
- — Don't recolor the mark in the accent emerald. The logo is never green.
- — Don't add effects: no drop shadows, no gradients, no outline.
- — Don't rotate, skew, or recompose the bars.
- — Don't place on busy photography without a flat backplate.
Color — Dark Theme
Calm dark, one signal color
OpenHack defaults to dark. The palette is built in OKLCH so lightness and chroma move independently — that's how the same emerald hue (160°) can read vivid in dark mode and grounded in light mode without shifting the brand. The background carries a hint of green (160°) to unify the system; the accent is the only saturated color on screen.
Page surface. Calm, near-black with a faint green cast so the accent reads warm rather than clinical.
Primary text. Not pure white — softens the contrast for long-form reading.
Cards, code blocks, secondary panels. Sits one step above background.
Hairlines and dividers. Visible but never demanding.
Secondary copy, captions, metadata. The voice of the supporting cast.
The signature emerald. CTAs, links, scan lines, focus states. Use sparingly to keep its weight.
Hover state for accent surfaces. One step brighter, one step softer in chroma.
Warm coral. Reserved for severity, accents on advisories, and rare cross-references that aren't the primary action.
Color — Light Theme
Same hue, different lightness
Light mode is not a separate palette — it's the same hue rail flipped on the lightness axis. The accent drops from L=0.68 to L=0.42 to maintain WCAG contrast on a near-white surface. Hovers go darker (not brighter) in light mode, which is the inverse of dark mode.
Page surface. Nearly white with the same green undertone as dark, so the system reads as one brand.
Primary text. Anchored dark; mirrors the dark theme's surface token by design.
Cards and elevated panels in light mode.
Light dividers. Same purpose as the dark border, inverted.
Secondary copy in light mode. Steps darker than the dark-mode muted to preserve contrast.
Darkened emerald. Same hue and chroma as dark mode, but pulled down in lightness so it survives a white background.
Hover state. Goes deeper, not brighter — opposite of dark mode's pattern.
Darker coral for the same advisory / severity role on light surfaces.
Why OKLCH
OpenHack uses OKLCH because it's perceptually uniform: a lightness change feels the same whether the hue is emerald or coral. That lets us define one accent (hue 160°, chroma 0.18) and move only the lightness between themes, instead of hand-picking two visually-distinct hex codes that drift apart over time.
Typography
Two typefaces. Geist and Geist Mono.
Geist Sans carries everything human — headlines, prose, navigation. Geist Mono carries everything machine — section labels, code, metadata, and the small uppercase tracking that signals an engineering surface.
Geist Sans
Aa
Find real vulnerabilities.
Headline — 600 weight, tight tracking
Body copy reads quietly. It doesn't shout for the reader's attention; it earns it by being legible at every size, on every surface, in either theme.
Geist Mono
Aa
Section label
$ openhack scan ./src --validate
[ok] 0 false positives
[ok] 4 confirmed findings
[crit] IDOR in /api/users/:id
Display
3xl–5xl, 700, tight
Body
base–lg, 400, relaxed
Labels
Mono, 11–12px
Visual System
Grid, lines, and one diamond
Every page sits inside a 1200px shell with two vertical hairlines on the outer edges. Sections are separated by horizontal rules. That's the chassis. Inside it, three patterns repeat:
Dot grid
Backdrop for emphasis sections.
Section diamond
Rule with a centered accent.
Sweep line
Animated scan, live signals only.
Primary CTA
Solid accent background, uppercase tracking, glow on hover.
Live signal
Pulsing accent dot for any live or in-progress state.
Voice & Aesthetic
Engineering, not theatrics
OpenHack is a serious security tool. The design reflects that. The voice is plain, technical, and confident. We don't use the aesthetic shorthand of hacker movies; we use the aesthetic of the terminals real engineers stare at all day.
We are
- — Quiet. The work speaks louder than the surface.
- — Precise. Specific findings, specific words, specific colors.
- — Calm dark. A reading surface, not a stage.
- — One green. Saturation is reserved for what matters.
- — Grid-aligned. Vertical rules, horizontal rules, no drift.
We are not
- — Neon-on-black hacker theatrics.
- — Multi-gradient hero rainbow backgrounds.
- — Drop-shadowed glassmorphism cards.
- — Marketing exclamation points and emoji.
- — A hackathon platform. (We are not a hackathon platform.)
Assets
Download the source files
Logo files are served directly from this site. The SVG is the source of truth — it inherits text color and scales infinitely.
Questions
For press, partnership logo placement, or anything that doesn't fit the rules above, write to team@openhack.com.