Designer Brief

The hifi at Website / HiFi Mockup is the source. The brand book is the constitution. This page is the contract between you and the brand.

Mission

A single, premium, faithful-to-brand-book landing page that becomes the one URL Mike hands out at every event. The page is the umbrella roof — it routes to four subspaces inside a Clikkin Plus space, surfaces the adjacent ventures, and converts curious attendees into Portal members.

Faithfulness contract

You are refining a hifi built directly from the existing ORP brand book. Do not redesign the brand. Specifically:

• Logo — the canonical primary/inverted/mini-logo set from the brand book (Logo system) is canonical. The hifi already uses the real assets.
• Colors — Tiger Flame #F05B22 is the brand. Coral Glow #FF8C5A is the second voice. Use Burnt Tangerine #E6380D for hover states and deep-orange shadows. Graphite #2A2A2A and Onyx #121212 are the only acceptable dark surfaces. (Colors)
• Type — the production build uses Bangel Regular for display and Helvetica Neue for body. The hifi uses Nunito + Inter (the OSS fallbacks the brand book itself names). Re-link Bangel + Helvetica Neue when you produce the Figma file. (Typography)
• Voice — warm, curious, welcoming. Friendly but not childish, playful but not gimmicky, premium but not exclusive. Every copy edit must pass that filter. (Voice & Tone)

What’s open for you to refine

• Hero rabbit illustration. The hifi uses the wallpaper PNG bled to the right edge. Final: use the canonical illustrated rabbit from the brand book, partial-cropped on the right edge of the viewport like p.1 and p.5 of the PDF.
• Founder portrait. Use a real photo of Mike (Tech Alley / Sierra Gold candid preferred over LinkedIn headshot). The hifi block reserves a square slot.
• Adjacent venture logos. The five cards (Inform Empower, InNOutCrypto, SporeBaby, Vegas Nexus, GoTripArt) currently use 2-letter monogram placeholders in a Tiger Flame tile. If a venture has a real logo, drop it in. If not, the monogram pattern is intentional — it visually subordinates them under the parent.
• Sponsor wall. Currently text-only sponsor tiles. Replace with real wordmarks/logos when Mike provides them. Maintain the equal-tile grid; never let one logo dominate.
• Event imagery. The three event cards are pure type. Add an optional 16:9 image slot at the top of each card if you want a photo-led variant — but only with real photos from past events. No stock.
• Hero ticker. The bottom-of-hero ticker currently has three hardcoded items. In production, this becomes a live data feed from the Clikkin Events API.
• Hero copy variant. If “Where Vegas connects.” doesn’t land for you, propose one alternate H1 — keeping “Follow the Orange Rabbit” as the eyebrow (that’s non-negotiable; it’s the directly-mapped tagline Mike already runs at events).

What’s load-bearing — please don’t change

• Section order. Hero → Stats → The Network → Adjacent → Inside the Portal → Sponsor wall → Founder → Events → CTA → Footer. This order optimizes for three primary visitors simultaneously: IRL attendee, sponsor doing diligence, press writing about Mike.
• The Network big-card asymmetry. Vegas Crypto Group is intentionally a 7-column primary card and Sporeyverse is a 5-column dark inverse. That tension is the umbrella — flagship + signature ARG — and dropping it flattens the brand into a generic grid.
• The Tiger Flame hero. The brand book’s most distinctive frame is the Tiger Flame full-bleed hero with the rabbit on the right. Keep it. Do not “modernize” with a gradient or a video.
• “Powered by Clikkin” in the footer. Plus-tier requirement. Small, dignified, never apologized for.
• The eyebrow “Follow the Orange Rabbit.” The cross-property loyalty mechanic Mike already operates at events. Replacing it severs the website from the IRL behavior.

Responsive notes

• < 960px: hero collapses to single column, rabbit illustration hides (the brand is already established by the Tiger Flame ground).
• < 880px: nav links 3, 4, and 5 collapse into a hamburger.
• < 720px: all section padding drops from 96px → 64px.
• Touch targets: every CTA pill is already 44px+ tall.
• Test specifically: iPhone 14 (390px), iPad Mini (768px), MacBook Air (1280px).

Engineering target (after design freeze)

The page ships into the existing clikkin-network-website-template (Astro 5 + Tailwind v4 + React islands; deployed via Cloudflare Pages). Manifest-driven — the hifi maps cleanly to the existing BaseLayout / Section / Slot primitives. Estimated engineering: ~1.5 days for the static port + ~0.5 day for the Events feed wiring.

Deliverables we’d love back

1. A Figma file that mirrors the section order in the hifi (one frame per section, plus a desktop / tablet / mobile artboard set).
2. The hero rabbit illustration as a clean SVG asset (so engineering can drop it in without rasterizing).
3. Mike’s portrait, color-corrected to live next to the Tiger Flame block without fighting it.
4. Final sponsor-wall + adjacent-venture-logo collection.
5. One alternate hero copy variant if “Where Vegas connects.” doesn’t land for you.

Communication

• For brand questions: cross-reference the Brand Guidelines section of this portal first.
• For copy questions: cross-reference the Voice & Tone page.
• For IA questions: cross-reference the Website Overview.
• For anything else: ping Ragav directly.

That’s it. Riff freely on the “open for you to refine” list. Hold the line on the “load-bearing” list. The brand book is the constitution.