Huzi.ai Design
Standards
Neumorphism Design System — Component Library
This page showcases every component in the Huzi.ai design system. Each element is crafted with dual opposing rgba shadows on a cool grey #E0E5EC surface, creating a tactile, physically grounded aesthetic.
1. Typography
Heading Levels
H1 Display
H2 Heading
H3 Heading
H4 Heading
H5 Heading
H6 Heading
Body Text & Scale
Body Regular (400) — DM Sans at 16px. This is the default body text weight used throughout the interface for maximum readability.
Body Medium (500) — DM Sans at 16px. Used for slightly emphasized body text and UI labels.
Muted Text — #6B7280 with 4.6:1 contrast ratio (WCAG AA compliant). Used for secondary information.
text-sm (14px)
text-base (16px)
text-lg (18px)
text-xl (20px)
text-2xl (24px)
Font Families
Plus Jakarta Sans — Display Font
DM Sans — Body Font
2. Color Palette
Background
Foreground
Muted
Accent
Accent Light
Accent Secondary
Shadow Colors (RGBA)
Shadow Light
rgba(255, 255, 255, 0.5-0.6)
Top-left light source shadow
Shadow Dark
rgba(163, 177, 198, 0.6-0.7)
Bottom-right dark shadow
4. Cards
Standard Card
Extruded shadow with 32px radius. Hover to see the lifted state with enhanced shadows.
Feature Card
Nested depth: Card is Extruded → Icon well is Inset Deep → Icon is distinct. This showcases the physics of the system.
Pro Plan
- AI Content Engine
- Lead Scoring
- Analytics Dashboard
5. Form Elements
Text Inputs
Other Elements
6. Call-Out Cards
Info
This is an informational callout card with helpful context for the user.
Warning
This is a warning callout card alerting users to potential issues.
Success
This is a success callout card confirming a completed action.
Feature Highlight
This is a feature highlight card showcasing a key capability.
7. Quotations
The neumorphic design system transformed how our real estate platform feels. Every interaction has a satisfying, physical quality that our users love.
Sarah Chen
Product Designer
“UI that feels like cool matte plastic or soft ceramic. It is satisfying and tangible.”
— Huzi.ai Design Philosophy
8. Pricing Table
Basic
For individual agents
- AI Content Suggestions
- Basic Analytics
- Email Support
- 1 User Seat
Pro
For growing teams
- AI Content Engine
- Advanced Analytics
- Priority Support
- 5 User Seats
- Lead Scoring
Enterprise
For brokerages
- Full AI Suite
- Custom Integrations
- Dedicated Support
- Unlimited Seats
- White Label
- API Access
9. Shadows & Depth
Extruded (Standard)
9px 9px 16px rgba(163,177,198,0.6), -9px -9px 16px rgba(255,255,255,0.5)
Extruded Hover (Lifted)
12px 12px 20px rgba(163,177,198,0.7), -12px -12px 20px rgba(255,255,255,0.6)
Extruded Small
5px 5px 10px rgba(163,177,198,0.6), -5px -5px 10px rgba(255,255,255,0.5)
Inset (Pressed)
inset 6px 6px 10px rgba(163,177,198,0.6), inset -6px -6px 10px rgba(255,255,255,0.5)
Inset Deep
inset 10px 10px 20px rgba(163,177,198,0.7), inset -10px -10px 20px rgba(255,255,255,0.6)
Inset Small
inset 3px 3px 6px rgba(163,177,198,0.6), inset -3px -3px 6px rgba(255,255,255,0.5)
10. Icons & Visual Elements
Icon Wells
Nested Depth
Extruded → Inset → Extruded
Hover for scale + rotate
Floating Animation
3s ease-in-out infinite
11. Spacing & Layout
Container
max-w-7xl (1280px) — Wide, modern feel with responsive padding.
Grid Examples
2-Column Grid (gap-12)
3-Column Grid (gap-12)
4-Column Grid (gap-12)
Spacing Scale
12. Responsive Behavior
Fully Responsive Design
This design system is fully responsive. Resize your browser to see mobile, tablet, and desktop views. The neumorphic aesthetic is maintained across all screen sizes with touch-friendly targets (44px minimum).
Mobile
< 768px
Single column, hamburger menu, reduced padding
Tablet
768px (md:)
Two columns, expanded navigation
Desktop
1024px (lg:)
Full layout, max-w-7xl container