Design System
Hanzo Brand
Guidelines.
How to build interfaces that look like the rest of Hanzo across our platform and products.
Design Principles
Reduce visual noise and focus on essential elements. Each design decision should have purpose and enhance the user experience.
Color Palette
Our colors are carefully selected to create a bold, modern aesthetic.
Brand Colors
Hanzo Black
#0A0A0B
Hanzo White
#FFFFFF
Gray Scale
Gray 900
#171717
Gray 800
#262626
Gray 700
#404040
Gray 600
#525252
Gray 500
#737373
Gray 400
#A3A3A3
Gradients
Brand Glow
Radial
White Fade
Linear
Gray Fade
Linear
Typography
Clean, readable typography is essential to our design language.
Heading 1
Large page titles, hero sections
Heading 2
Section titles, major divisions
Heading 3
Subsection headings, feature headings
Heading 4
Card titles, minor section headings
Body Large
Featured paragraphs, pull quotes
Body
Primary body text
Caption
Supporting text, metadata, labels
Components
Reusable UI components that maintain consistency across our products.
Buttons
Primary ButtonSecondary ButtonGhost ButtonLink Button
Cards
Card Title
This is a standard card component with hover states and consistent styling.
Learn MoreBadges
Brand BadgeDefault BadgeSuccess Badge
Download Assets
Get our brand assets for your projects and presentations.
Need brand assistance?
Our team can help with custom assets, co-branding requests, and other brand-related inquiries.