HFUN Design System

A brand & product design system for HFUN / hypurr.fun — a memecoin launchpad and on-chain trading venue in the Hyperliquid ecosystem. The system captures HFUN's playful-but-degen trading aesthetic: a deep navy field, an electric mint/lime accent, a friendly cat mascot, and a signature sticker / trading-card treatment (hard offset shadows + inked hairlines) used across PNL share cards, social graphics, and product surfaces.

What this is for. Generating well-branded HFUN interfaces and assets — PNL share cards, Twitter/Telegram promo graphics, launchpad & trading screens, and decks — either as throwaway mocks (static HTML) or as a reference for production code.

Sources

This system was reconstructed from materials provided by the HFUN team:

• Figma: "HFUN Board.fig" — a single-page board of ~149 frames: the cat logo & wordmark, PNL share cards (dark/light/mid), Twitter & Telegram social templates, "Tiles and Textures" (Memphis confetti patterns), and assorted brand experiments.
• GitHub: Hypurr-Fun/hfun-design — the HFUN design repository. (Empty / inaccessible at build time — re-share if you want production tokens lifted directly from code.)
• Logo upload: uploads/Alert Logo.png — the mint cat mark on navy.

Explore the GitHub repo for deeper production fidelity if you have access.

Brand snapshot

| | | |---|---| | Name | HFUN · hypurr.fun | | Category | Memecoin launchpad + perps/spot trading (Hyperliquid) | | Mascot | A mint-green cat head with an antenna ("hypurr") | | Voice | Playful, fast, degen-native; numbers do the bragging | | Signature look | Navy field · mint accent · sticker cards with hard shadows |

CONTENT FUNDAMENTALS

How HFUN writes.

• Tone: Confident, punchy, crypto-native and a little cheeky — but the numbers carry the swagger, not the prose. Copy stays short so the data is the hero.
• Casing: Brand is written "Hfun" in the wordmark and "HFUN" as a ticker. Headings use Title Case or big single words ("Multiwallet", "Token", "Profit"). Eyebrows / table labels are short and Title Case ("Current Worth", "Total Profit", "Invest"). Reserve ALL-CAPS for tickers (HFUN, ETH) and tiny labels.
• Person: Product UI speaks plainly and imperatively to the trader — "Connect wallet", "Buy", "Launch token". Marketing brags in third person about results ("↑ 1300%"). Mostly you-oriented in product, results-oriented in social.
• Numbers are the message. Percentages, multiples and ETH/USD amounts are set large and bold. Gains are framed positively with an up-arrow and green pill (↑ 1300%, 1500%); losses in red. Always show the unit (ETH, %, $).
• Domain & handle: Always pair the mark with hypurr.fun (lowercase) and the Hfun | lockup. Tickers prefixed with $ in running text ($HFUN).
• Emoji: Used sparingly and tastefully in social copy (🐱, 🚀, 📈-style energy) — not in product UI. Prefer the cat mascot and the confetti texture to carry personality instead of emoji walls.
• Examples (verbatim from the board):
  • Hfun ↑ 1300%
  • Current Worth — $100 · Investment — $100 · Total Profit — $100
  • #1 HFUN 13 ETH 1 ETH 1500%
  • Hfun | hypurr.fun
  • Multiwallet

VISUAL FOUNDATIONS

The look and feel, answered concretely.

Color

A deep navy field (--hf-navy-600 #1B263E, deepening to #111827 via a diagonal gradient) is the canvas. The hero accent is an electric mint (--hf-mint-500 #A8FFC6, the exact logo green) supported by a lime (#C3FC97) and occasional teal (#0081A8). Content lives on a cool light card (--hf-surface #E8ECF5) — almost a lavender-gray, never pure white. Profit/loss is the only place green and red appear semantically: green pills (#16A34A) for gains, red (#E10000) for losses. Confetti textures add gold (#F4B83D) as a fifth festive color.

Type

Inter does all the structural work — bold/black weights for headlines and the big braggy numbers, regular for body. Fira Code (used heavily on the board) handles tickers, addresses, amounts, and any "data" voice. Karantina (tall condensed) and Gruppo (thin geometric) are display accents for the occasional poster moment. Numbers tend to be huge with tight tracking (--ls-tight).

Backgrounds

Four modes: (1) solid/gradient navy (diagonal 220deg from #1B263E→#111827) for product and dark social; (2) light card surfaces for data tables and PNL breakdowns; (3) light mode — a warm white canvas (--bg-light #FFFDFB) carrying a faint dotted grid (--pattern-dots, #E6E4E2 dots on a 26px step); (4) Memphis confetti texture — scattered triangles, squiggles and dots in mint/lime/teal/navy/gold — used as a celebratory overlay (see assets/textures/). Large faint arrow/sigil shapes sometimes sit behind hero numbers at low opacity.

The signature card treatment

This is the most recognizable HFUN move: light cards get a 1px inset black hairline plus a hard, blur-free offset drop-shadow (--shadow-card → inset 0 0 0 1px #000, 6px 6px 0 0 rgba(0,0,0,.5)). It reads like a sticker or a physical trading card. Pills (profit chips, the Hfun | hypurr.fun lockup) use the same inset+offset shadow at full --radius-pill. The same sticker logic drives the pastel accent button — a single standout CTA (e.g. "Open Telegram") filled with the mint→lavender --grad-accent, outlined in ink (--hf-ink #0D0D0D) with a hard offset shadow.

Corners & borders

Generous radii: standard cards --radius-lg (20px), hero panels --radius-xl (28px), chips/pills fully round. The defining border is the inked hairline (#000), not a gray one — though product UI on dark navy uses subtle --hf-mist borders or none.

Shadows

Two systems. Marketing/PNL: hard offset shadows, no blur (the sticker look). Product UI: soft elevation (--shadow-soft, blurred) and a mint glow (--glow-mint) for focus/active accents on dark surfaces.

Motion

Snappy and lightweight. --ease-out for most transitions (120–200ms); --ease-snap (slight overshoot) for playful affordances like pills and the cat. Hovers lift slightly or shift the hard shadow; presses shrink + reduce the shadow offset (the sticker "presses down"). Avoid long or looping decorative animation.

Hover / press states

• Hover (dark): brighten toward mint, or raise the offset shadow a touch.
• Hover (light card): subtle surface lift; ink hairline stays.
• Press: translate the element by the shadow offset and collapse the shadow to --shadow-hard-sm — the card visibly "sticks down". Accent buttons darken slightly.

Transparency & blur

Used sparingly. Faint background sigils sit at ~25–50% opacity. Glass/blur is not a core motif — HFUN prefers solid fills and hard shadows over frosted glass.

Imagery vibe

Cool and high-contrast: navy + mint, crisp vector shapes, confetti energy. Photography is rare; when present it's screenshots of trades or the mascot. No warm/sepia grain — the palette stays cool and electric.

ICONOGRAPHY

• Mascot first. The cat mark is the primary brand glyph and frequently stands in for an "icon" (in the Hfun | lockup, app headers, favicons). Mint on navy, or navy on light. Files: assets/brand/hfun-mark.svg, hfun-mark-navy.svg.
• Wordmark. assets/brand/hfun-wordmark-light.svg / -dark.svg — "Hfun" with the small cat glyph as the dot/leading mark.
• UI icons. The board doesn't ship a bespoke icon font. For product UI use Lucide (linked from CDN) — clean 1.5–2px stroke icons that match HFUN's geometric, friendly tone. (Substitution flagged: if HFUN has an official icon set in the design repo, swap Lucide for it.)
• Directional / data glyphs. Up/down arrows for P&L (▲ gain, ▼ loss), ↑/↓ in headline numbers. The "Arrow Raw" hero arrow appears behind big percentages.
• Emoji & unicode: sparing in social only; never load-bearing in product UI.
• Texture as decoration: the confetti tiles (assets/textures/confetti-circle.png) function as celebratory "iconography" on win states.

THEMING & IDENTITY

The system is theme-driven, not duplicated. Components reference semantic role tokens (--surface, --text, --border, --card-shadow, --accent) — never raw brand colors. A data-theme attribute decides what those roles resolve to, so the same component is dark or light depending on its container:

<div data-theme="dark"> …app, iOS, PNL card… </div>
<div data-theme="light"> …marketing / landing… </div>   <!-- + dotted grid -->

• tokens/themes.css defines the role tokens and the [data-theme] scopes (dark is the :root default). Add a theme by adding one scope block.
• Components are theme-aware by default; the old variant="dark|light|navy" props still work as explicit overrides but you rarely need them now.
• .hf-app paints a themed shell (and the light dotted grid) in one class.

▶ Editing the brand — tokens/identity.css

All brand color lives in ~8 knobs in tokens/identity.css (--brand-accent, --brand-navy, --brand-ink, --brand-paper, …). The whole palette, both themes and every component derive from them — edit that one file to reskin the entire system. See the "Theme & identity" card in the Design System tab.

Index / manifest

Root

• styles.css — global entry point (import this).
• readme.md — this guide.
• SKILL.md — Agent-Skill manifest for Claude Code.

Tokens (tokens/)

• identity.css — ⭐ the ~8 brand knobs (edit to reskin everything).
• fonts.css · colors.css · typography.css · spacing.css
• themes.css — semantic role tokens + [data-theme] dark/light scopes.

Assets (assets/)

• brand/ — cat mark + wordmark SVGs (mint/navy/light/dark).
• textures/ — confetti pattern + metallic mascot PNG.

Foundations (foundations/) — specimen cards for the Design System tab (colors, type, spacing, radius, shadow, brand).

Components (components/) — reusable React primitives, grouped: buttons/Button · badges/Badge · badges/PnlPill · cards/Card · cards/StatCard · data/TokenChip · forms/Input · navigation/Tabs · brand/Logo · ios/IOSHeader (+ IOSIconButton). Each has a .d.ts (props), .prompt.md (usage), and a @dsCard HTML thumbnail in its directory.

UI kits (ui_kits/)

• pnl/ — the PNL share-card generator (the brand's signature artifact).
• app/ — the hypurr.fun launchpad/trading product surfaces (Trade / Launch / Portfolio).
• ios/ — a hypurr.fun iOS screen: DS components composed inside a device frame (the reference for building mobile while staying composable).
• web/ — the light-mode landing: dotted-grid canvas, pastel sticker cards and the accent CTA (the counterpart to the dark product surfaces).

Using the components

The compiler bundles every primitive onto a global namespace. In an HTML file, link styles.css, load _ds_bundle.js, then pull components off the namespace:

<script src="../_ds_bundle.js"></script>
<script type="text/babel">
  const { Button, PnlPill, Card } = window.HFUNDesignSystem_e98fda;
</script>

See each component's .prompt.md and each UI kit's README.md for usage. SKILL.md makes this folder usable as a downloadable Agent Skill.