Brand Kit
Harmonity design system foundations. Use these tokens for consistent, accessible, and on-brand implementation across all surfaces.
Logo
The Harmonity wordmark with sparkle icon. Always maintain clear space equal to the icon width.
Color Palette
Primary accent derived from #2E7A9E, paired with a neutral palette optimized for WCAG AA contrast.
Brand Colors
Brand 50
#EDF5F9
Brand 100
#D4E8F1
Brand 200
#A9D1E3
Brand 300
#7EBAD5
Brand 400
#53A3C7
Brand 500
#2E7A9E
Brand 600
#25627E
Brand 700
#1C4A5F
Brand 800
#13313F
Brand 900
#0A1920
Neutral Colors
Neutral 50
#F8FAFB
Neutral 100
#F1F4F6
Neutral 200
#E2E8EC
Neutral 300
#CBD4DA
Neutral 400
#9BA8B2
Neutral 500
#6B7B87
Neutral 600
#4A5B66
Neutral 700
#364550
Neutral 800
#1E2D36
Neutral 900
#0F1A21
Typography
Inter for all text. 8pt-aligned scale with clear semantic roles.
Display
3.75rem / 60px / 800
Harmonity
H1
3rem / 48px / 700
AI-Driven Contracts
H2
2.25rem / 36px / 700
One contract record
H3
1.5rem / 24px / 600
Workflow in one place
H4
1.25rem / 20px / 600
Feature heading
Body Large
1.125rem / 18px / 400
Section lead paragraph text
Body
1rem / 16px / 400
Standard body text for paragraphs and descriptions
Body Small
0.875rem / 14px / 400
Secondary text, captions, and helper text
Caption
0.75rem / 12px / 500
SECTION LABELS, OVERLINES
Spacing Scale
8pt grid system. All spacing values are multiples of 4px.
Elevation / Shadow System
Multi-level shadow system for depth and hierarchy.
shadow-xs
Minimal depth for subtle separation
shadow-sm
Low elevation for cards in flat layouts
shadow-md
Standard card elevation
shadow-lg
Elevated cards, hover states
shadow-xl
Modals, mega menu dropdowns
shadow-2xl
Maximum elevation for hero cards
Border Radius
Consistent rounding from subtle to fully rounded.
sm
4px
DEFAULT
8px
lg
12px
xl
16px
2xl
24px
3xl
28px
Responsive Breakpoints
Mobile-first breakpoints with variants for every component.
| Token | Width | Target |
|---|---|---|
| xs | 475px | Large phones |
| sm | 640px | Small tablets |
| md | 768px | Tablets |
| lg | 1024px | Desktop |
| xl | 1280px | Large desktop |
| 2xl | 1536px | Wide screens |
Component States
Interactive states for buttons and form elements. All states include WCAG AA compliant focus outlines.
Animations
Purposeful, performance-friendly micro-interactions with short durations.
| Name | Duration | Use case |
|---|---|---|
| fade-in | 500ms | Section reveal on scroll |
| fade-in-up | 600ms | Content elements entering |
| slide-in-right | 400ms | Tab content transitions |
| cursor-blink | 1s loop | Typewriter cursor |
| pulse-soft | 2s loop | Scroll indicator |