Honk Blue
#008fffFull-viewport page canvas, hero background, all top-level sections — the electric blue IS the brand surface, not a secondary accent
Honk
honk.meWebsite preview
The design language
Honk operates on a saturated blue-canvas design system built for a messaging product that wants energy, not restraint. The entire viewport is a single electric blue field (#008fff) with white and signal-yellow typography floating on it — no warm grays, no soft cards, no light-mode chrome. Headlines are a custom heavy display face at 52px, tight-tracked, with one or two words flipped to vivid yellow (#ffe400) so key terms punch out of the headline. Surfaces are minimal: everything either sits directly on the blue or uses a hard 16px-radius white panel as a notification/UI element. The phone mockup carries the only secondary color (game-green) and floats with subtle decoration — speech bubbles, emoji-shaped UI nubs. The system reads as playful, confident, and loud on purpose: it is anti-corporate, anti-minimal, and uses color saturation as the primary brand carrier instead of typography or layout sophistication.
Color palette
brand
Honk Sky
#00a0ffSecondary blue for gradient bands, large decorative shapes, and depth layers behind the primary canvas
accent
Signal Yellow
#ffe400Accent words inside headlines, heading border underlines, and highlight punctuation — the only chromatic accent on the blue field, used sparingly for emphasis rather than decoration
Game Green
#3fcc6bPhone screen content (in-game UI inside device mockups) — a single-hue secondary color reserved for product-internal screens so the blue/yellow/white trio stays clean on the marketing surface
neutral
Honk White
#ffffffHairline borders, dividers, input outlines, and card edges on light surfaces. Do not promote it to the primary CTA color
Carbon
#111111Primary text on light surfaces, dark borders, near-black detail work — used where text leaves the blue field
True Black
#000000SVG fills, graphic detail, maximum-contrast text where the design needs to drop to absolute black
Slate
#363636Secondary graphic fills, dark illustration detail, softer-than-black accents in SVG work
Typography
Type scale
Major Second (1.125) · 16px basedisplay
52px · 700 · 1.23 · -0.012px trackingThe quick brown fox jumps
body-lg
19px · 500 · 1.55 · -0.006px trackingThe quick brown fox jumps
text-17
17px · 400 · 1.38The quick brown fox jumps
text-16
16px · 400 · 1.2The quick brown fox jumps
text-14
14px · 400 · 1.2The quick brown fox jumps
caption
13px · 500 · 1.55 · -0.026px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Honk Header
- Weights
- 700
- Sizes
- 52px
- Line height
- 1.23
- Letter spacing
- -0.012em
- Fallback
- Archivo Black, Space Grotesk Bold, or Manrope ExtraBold
Hero and section display headlines — custom heavy display face at a single 52px size, tightly tracked at -0.012em. This is the signature wordmark voice: chunky, loud, slightly condensed, designed to read at billboard scale on the blue field
Additional typeface
Honk Sans
- Weights
- 400, 500, 600
- Sizes
- 13px, 14px, 16px, 17px, 19px
- Line height
- 1.20, 1.38, 1.47, 1.55
- Letter spacing
- -0.026em at 13px, -0.024em at 14px, -0.018em at 16px, -0.006em at 17-19px
- Fallback
- Inter, Manrope, or Plus Jakarta Sans
Body copy, sub-headings, button labels, link text, footer, icons — a neutral grotesk covering the full UI scale from 13px micro-labels to 19px lead paragraphs. Negative tracking across the board (-0.026em at 13px, -0.006em at 19px) tightens the grotesque to feel modern rather than airy
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 8px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 20-24px
- Element gap
- 16px
Border radius
cards
16pxbuttons
6pxsmall-pills
6pxnotification-panels
16pxSpacing scale
14px16px24pxGuidelines
Do
- Use #008fff as the full-viewport canvas for every top-level section — never place the headline on a white card with a blue background behind it; the blue IS the surface.
- Flip one or two words inside a 52px Honk Header headline to #ffe400 to create emphasis. Never underline, italicize, or bold the highlighted word — color is the only differentiator.
- Set all body copy in Honk Sans at 16-19px with the negative tracking values from the type scale (-0.018em at 16px, -0.006em at 19px) — the tightened grotesque is part of the voice.
- Use the 16px-radius token for any white panel embedded in the blue field (notification banners, content cards, image containers) and the 6px-radius token for small pills or chips.
- Place the phone mockup on the right side of the hero at 45-55% column width, surrounded by 2-3 floating white speech-bubble decorations — never center it, never add a drop shadow.
- Use #3fcc6b green exclusively inside the phone screen for product-internal UI; keep the marketing surface to the blue/yellow/white trio only.
- Keep icon strokes at 2px in Honk Sans weight, white on blue — icons are line-style, never filled, never chromatic.
Don’t
- Don't use white or light-gray page backgrounds for marketing screens — the design system assumes the blue field is always present, so a white page reads as broken.
- Don't use #ffe400 for body text, button backgrounds, or large fill areas — Signal Yellow is a word-level highlight only, not a surface color.
- Don't introduce a third saturated color to the marketing surface (purple, red, orange) — only the blue field, yellow accents, white text, and the green inside device mockups are permitted.
- Don't use heavy drop shadows on cards, buttons, or the phone mockup — elevation comes from color contrast against the blue, not from shadow stacks.
- Don't split the headline across more than 3 lines or highlight more than 2 words with yellow — the system relies on a single punctuation moment, not scattered emphasis.
- Don't use a different font family for sub-headings, buttons, or links — Honk Sans at varied weights covers the entire UI; Honk Header is display-only.
- Don't use the 6px-radius token on cards or large panels, and don't use the 16px-radius token on buttons — keep small-radius on small elements, large-radius on large surfaces.
Components
Blue Hero Canvas
Full-bleed hero section100% viewport-width section filled with #008fff. Contains a two-column layout: left = stacked headline + sub + notification strip; right = floating phone mockup with decorative speech-bubble shapes. No top/bottom padding asymmetry — the blue extends edge-to-edge as the brand canvas.
Highlighted Headline
Hero/section H1Honk Header 700 at 52px, white, -0.012em tracking, line-height 1.23. Typically split across 2-3 lines with 1-2 inner words wrapped in a <span> set to #ffe400 (Signal Yellow). The yellow word is never underlined or bolded differently — only color shifts.
Hero Sub-headline
Body intro under headlineHonk Sans 400 at 19px, white, line-height ~1.55, no emphasis styling. Sits 24-32px below the headline with no divider.
Notification Banner
Embedded chat notification UIWhite (#ffffff) panel, 16px radius, 16-20px vertical padding, full-width within the hero column. Contains a tiny yellow location-pin icon at right, a 'Read Announcement →' label in small Honk Sans, and a bold message line. Functions as a live-product proof card, not a CTA — it shows the app in use.
Phone Mockup Frame
Device illustration for product showcaseRendered iPhone-style frame (dark bezel) containing a green game screen. Sits at a slight tilt or float on the right side of the hero. Scaled to roughly 45-55% of the hero width. Never has a drop shadow — sits on the blue with color contrast alone.
Speech Bubble Decoration
Floating emoji-shaped UI nubsSoft, rounded shapes (16-20px radius) in white with a single icon (heart, settings gear) centered. Float off the phone mockup as scattered confetti — these are brand decoration, not interactive elements. Two to three per hero at most.
In-Phone Game Screen
Product-internal UI (device screen content)Green (#3fcc6b) fill inside the phone frame with white tic-tac-toe grid, avatar bubbles, and small white circular action buttons (volume, mute, mic) along the bottom. This is the ONLY context where green appears.
Ghost Link Button
Lightweight text link / actionHonk Sans 500 at 14-16px, white, no background, no border. Often paired with a chevron or arrow glyph. Used for 'X Chatter', footer links, and secondary actions. The 6px-radius token applies if a pill-shaped variant is needed.
Footer Section
Closing dark or blue bandContinues the blue field or shifts to a deeper tone. White text, Honk Sans 400 at 14-16px, link rows with minimal padding. No card-based footer columns — the footer reads as a flat list of links, not a card grid.
Surfaces & elevation
Level 0
Honk Blue Canvas
#008fffFull-viewport page background, hero, section bands
Level 1
Honk Sky
#00a0ffGradient depth layer, large decorative shapes
Level 2
Honk White Panel
#ffffffNotification banners, embedded UI cards, device screen bezel, icon fills
Layout & imagery
Layout
Two-column hero with blue full-bleed background, left column ~45% width holding stacked headline → sub → notification banner → ghost link, right column ~50% width holding the phone mockup with surrounding speech-bubble decorations. Below the hero, sections continue the blue canvas with alternating single-column and two-column patterns. No centered stacks, no card grids, no pricing tables — the system avoids dense information layouts in favor of sparse, billboard-style sections separated by 80px vertical gaps. Navigation is a minimal top bar (logo left, small links right) over the blue, with no sticky variant and no mega-menu.
Imagery
Product-internal screenshots are the primary visual: a single tilted iPhone mockup carrying a green tic-tac-toe game screen, positioned right-of-center in the hero. No photography, no lifestyle imagery, no human subjects. Decoration is limited to 2-3 floating white speech-bubble shapes (heart icon, settings gear, generic chat nub) that orbit the phone at varied sizes. All visual elements live on the saturated blue field; the green phone screen is the only secondary color in the system. The visual language reads as 'product IS the hero' — there is no attempt to humanize or contextualize the app with photos.
Design notes
Agent Guide
**Quick Color Reference** - background: #008fff (full-viewport canvas) - text: #ffffff (on blue), #111111 (on light panels) - border: #ffffff (on blue), #111111 (on light) - accent: #ffe400 (headline word highlights, small accent borders) - primary action: no distinct CTA color - device screen green: #3fcc6b (inside phone mockup only) **3-5 Example Component Prompts** 1. **Hero Headline Block**: Blue #008fff full-viewport background. Headline 'Really, real-time messaging.' in Honk Header 700 at 52px, white, letter-spacing -0.012em, line-height 1.23, split across 2 lines with 'Really,' flipped to #ffe400. Sub-headline in Honk Sans 400 at 19px white. 80px gap to sub-headline. 2. **Notification Banner**: White #ffffff panel, 16px border-radius, 20px vertical padding, full-width within the hero column. Top row: small Honk Sans 500 at 13px white-on-blue label 'Read Announcement →' sitting above a bold Honk Sans 600 at 16px #111111 message line. Yellow #ffe400 location-pin icon at the far right, 20px size. 3. **Phone Mockup with Game Screen**: Dark iPhone bezel, 45% of hero column width, right-aligned. Screen fill #3fcc6b green. Inside: white tic-tac-toe 3×3 grid with 80px cell squares, 2 circular avatar bubbles at the top in #ffffff, and a bottom row of 3 small white circular buttons (volume, mute grid icon, mic). No drop shadow. 4. **Speech Bubble Decoration**: White #ffffff rounded shape, 16-20px border-radius, 60-80px diameter, centered icon (heart, settings gear) in #111111 at 24px. Float 20-40px away from the phone mockup at varied sizes. Two to three per hero, never overlapping the headline. 5. **Footer Link Row**: Blue #008fff background, 24px vertical padding, Honk Sans 400 at 14px white. Links separated by 16px horizontal gap, no dividers, no bullet characters. Pure flat list, not a column grid.
Color Discipline
Honk is a three-color system on the marketing surface: blue field (#008fff), white text (#ffffff), yellow emphasis (#ffe400). Green (#3fcc6b) is quarantined inside the phone screen because the product is real-time messaging that includes in-chat games — the green is product content, not brand chrome. Any new page must keep this discipline: do not introduce purple, red, orange, or pink to the marketing surface. If a state color is needed (error/success), use Honk White at varying opacity (0.6 for muted, 1.0 for active) rather than a new hue.
Similar brands
Marco Polo
Same full-bleed saturated brand color as the page canvas with a single phone-mockup-as-hero pattern, and similar chat-product visual restraint
IRL
Same anti-minimal approach: loud single-hue background (purple for IRL, blue for Honk) with one bright accent color for keyword highlights inside white headlines
Dispo (David's Disposable)
Same youth-coded saturated canvas and yellow accent strategy, with display headlines that flip individual words to a second bright color for emphasis
Giphy
Same electric-blue marketing surface with floating emoji/GIF-shaped decorations and a single custom display face — visual energy over corporate restraint
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
