DESIGN SYSTEM
& BRAND
Hook Website Design System - Brand Assets, Typography, Components, Colors, and Spacing Guidelines
HOOK Design System
A comprehensive guide to Hook's visual identity, components, and design principles.
Brand Values
The core principles that guide our design decisions
Sharp & Modern
No rounded corners. Every edge is intentional, reflecting precision in architecture.
Bold Simplicity
Clean layouts with purposeful use of color. Orange for action, dark for stability.
Professional Trust
Design that inspires confidence through consistency and attention to detail.
Design Principles
Key rules for maintaining brand consistency
1
No Rounded Corners
Use sharp corners (rounded-none) for all UI elements. This creates a distinctive, architectural feel.2
Border System
Use hook-dark/30 for light mode, white/30 for dark mode borders. Consistent 1px solid borders.3
Color Restraint
Primary palette is Hook Dark and Hook Orange. Use semantic colors sparingly for states only.4
Typography Hierarchy
Google Sans throughout. Use weight (300-700) and size to create hierarchy, not color variety.5
Spacing Consistency
Use Tailwind spacing scale. Prefer 4, 6, 8, 12, 16 for consistent rhythm.