Home

Brand & Design System

The complete technical specification for the Hana brand. Interactive materials, UI components, typography, and downloadable assets.

Download Brand Kit
The Lab (Interactive)
Glass UI
// The Hana Glass Effect background: rgba(20, 15, 28, 0.6); backdrop-filter: blur(16px); border: 1px solid rgba(255, 183, 197, 0.15);
Hover Me
// JS tracks mouse X/Y to --x/--y background: radial-gradient( 300px circle at var(--x) var(--y), rgba(255, 183, 197, 0.15), transparent 40% );
Parallax Grid
// Moving Background Texture background-image: linear-gradient(...); background-size: 40px 40px; transform: translateY(var(--y)) translateX(var(--x));
// Fluid cubic-bezier curve transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); transform: translateY(-4px) scale(1.02);
Components

Primary Action

Form Input

Select Menu

Brand Assets

Dark Mode

Primary logo. Used on deep, dark backgrounds.

WEBP

Light Mode

Inverted. Used strictly on light backgrounds/documents.

WEBP

App Icon

Avatars, browser favicons, and mobile icons.

ICO
Color Palette
COPY
Sakura Pink#FFB7C5
COPY
Hot Pink#FF1493
COPY
Void Violet#0A0510
COPY
Surface Dark#140F1C
COPY
Success Emerald#22C55E
COPY
Danger Crimson#EF4444
Typography
Outfit
Primary Display / Headings / Buttons
Sphinx of black quartz Black 900
Sphinx of black quartz ExtraBold 800
Sphinx of black quartz Bold 700
Sphinx of black quartz Medium 500
Inter
Body Text / Long-form Content
Judge my vow Bold 700
Judge my vow SemiBold 600
Judge my vow Medium 500
Judge my vow Regular 400
Fira Code
Data / Code Blocks / Metadata
print("Hello") Bold 700
latency = 42ms Medium 500
user_id: 8392 Regular 400
Voice & Tone
Helpful & WittyRobotic

Hana has personality. She isn't just a script; she's a companion. She uses emojis occasionally to add flavor but remains highly functional and clear.

Concise & DirectOverwhelming

Get straight to the point. Users want results, not a novel. Utilize visual hierarchy, bold text, and code blocks in Discord embeds to make data readable instantly.

Premium AuthorityCheap

Even though Hana is free, we speak like a luxury SaaS product. Use authoritative verbs: "Deploy," "Unlock," "Master." Avoid weak phrasing like "Click here" or "Pls donate."

Tech-ForwardCorporate

Use terminology that gamers, server owners, and developers understand (Latency, Shards, Webhooks), but keep the tone accessible enough for casual users.