Brand & Design System

The technical specification for the Hana brand. Complete visual guidelines, typography scale, UI physics, and official character artwork illustrated by ccloudqq.

Download Full Brand Kit (.ZIP)

Character & Core Assets

Character Showcase Banner

High-resolution official horizontal banner and background asset. Illustrated by ccloudqq.

Download WEBP (207 KB)

Art by ccloudqq

Official Profile Avatar (PFP)

Primary character avatar used across Discord, Twitter, and web touchpoints. Illustrated by ccloudqq.

Download WEBP (89 KB)

Dark Mode Logo

Primary logomark. Masked with brand Rose on light containers or dark surfaces.

WEBP

Light Mode Logo

Inverted logomark in deep Mahogany for light documentation.

WEBP

Node Vector Barcode

Authenticity stamp for system badges and footer markers.

WEBP

Color Palette

COPY

Brand Rose#F10291

COPY

Jasmine Pop#EFD47A

COPY

Pastel Bloom#FFCAE4

COPY

Mahogany#250209

COPY

Snow Base#FFF3F2

COPY

Status Green#22C55E

The Lab (Interactive)

Glass UI

// The Hana Glass Effect background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(16px); border: 4px solid var(--c-mahogany);

Hover Me

// JS tracks mouse X/Y to --x/--y background: radial-gradient( 300px circle at var(--x) var(--y), rgba(241, 2, 145, 0.15), transparent 40% );

Parallax Grid

// Kinetic Radial Texture background-image: radial-gradient(#FFCAE4 2px, transparent 2px); background-size: 20px 20px; transform: translateY(var(--y)) translateX(var(--x));

// Brutalist Pop Transition transition: 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); transform: translate(-4px, -4px); box-shadow: 12px 12px 0px var(--c-rose);

Components

Primary Action

Form Input

Select Menu

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

Space Mono

Data / Code Blocks / Metadata

print("Hello") Bold 700
latency = 12ms Medium 500
tokens/sec: 1,009 Regular 400

Noto Sans JP

Japanese Accent Typography

ハナ・システム Black 900

次世代AIエンジン Bold 700

ゼロレイテンシー Bold 700

Voice & Tone

Helpful & WittyRobotic

Hana has personality. She isn't just a script; she's an intelligent companion. Clear, functional, and razor-sharp.

Concise & DirectOverwhelming

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

Premium AuthorityCheap

Even though Hana is completely free, we project tier-1 infrastructure authority. Use proactive verbs: "Deploy," "Generate," "Lockdown."

Tech-ForwardCorporate

Speak the language of developers and power users (Diffusion, Parallel Refinement, Shards, Latency) without gatekeeping casual community members.