HOAi P3AK
Home Pitch Deck Design System Renaissance PM The Highlands
HOAi Design System v1.0

Built for the communities that last.

Neo-Brutalist. Canopy Green. Honey Gold. Every pixel of HOAi's design system is built to be trustworthy, direct, and unmistakably ours.

View Components Explore Colors →
🎨 Neo-Brutalist ♿ WCAG AA 🌙 Dark Mode ⚡ CSS Tokens
Total Delinquencies
$24,180
⚠ Overdue
Ring Energy HOA $8,900
Kolibri Commons $7,215
Gulf Ventures Est. $5,640
Bayou Grande $2,425
94.2%
Collection Rate
312
Active Units
18
Open Violations
7
Resolved Today
Design Tokens

Color System

Canopy Green meets Honey Gold. Earth tones engineered for WCAG AA contrast, hex precision, and neo-brutalist clarity.

Canopy Green — Primary
950 #1A2618
800 #2E4229
700 #3A5335
600 ★ Primary #4B6843
500 #5E7F57
300 #9CB595
200 #C2D4BE
100 #E0EBDE
50 #F1F6F0
Honey Gold — Secondary
900 #6B440E
700 #A87020
500 ★ Primary #D4952A
400 #DFAD4C
300 #E8C476
200 #F0D8A0
100 #F7EDD0
50 #FBF6E8
Neutral — Warm Grays
Charcoal#1A1C19
Ink#2C2F2A
Stone#4A4E47
Ash#6E7269
Silver#9A9E96
Mist#C4C8C0
Vapor#ECEEED
Snow#F6F7F5
White#FDFEFE
Accent Colors
Slate Blue #3D6B8E
Terracotta #B85C38
Lavender #7B6E8E
WCAG Contrast Ratios
Foreground Background Ratio Rating Preview
#1A1C19 Charcoal #FDFEFE White 18.1:1 ✓ AAA HOAi Platform
#FDFEFE White #4B6843 Canopy 7.2:1 ✓ AAA HOAi Platform
#1A1C19 Charcoal #D4952A Gold 6.8:1 ✓ AAA HOAi Platform
#FDFEFE White #3D6B8E Slate 5.4:1 ✓ AA HOAi Platform
#FDFEFE White #C4372A Error 4.6:1 ✓ AA HOAi Platform
Brand Voice

Typography System

Space Grotesk commands attention. Inter earns trust in body copy. JetBrains Mono keeps data honest.

Aa
Space Grotesk
Headings · Labels · UI Chrome
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 &?!@#
Light Regular Medium SemiBold Bold
Aa
Inter
Body · Descriptions · Data
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 &?!@#
Regular Medium SemiBold
01
JetBrains Mono
IDs · Values · Code · Data
ABCDEFGHIJKLMNOPQR...
abcdefghijklmnopqr...
0123456789 $#!@%^&
Regular SemiBold
Type Scale — Space Grotesk + Inter · 16px base · 1.25 ratio
text-7xl
80px / Bold
Community
text-5xl
48px / Bold
Your HOA, intelligently managed.
text-4xl
36px / Bold
Violations Dashboard
text-3xl
30px / SemiBold
Q1 2026 Financial Summary
text-2xl
24px / SemiBold
Outstanding Dues — March 2026
text-xl
20px / Medium
Resident Communication Hub
text-base
16px / Regular
The HOAi platform automates routine correspondence, tracks every violation lifecycle, and surfaces the insights your board actually needs — without the spreadsheet chaos.
text-sm
14px / Regular
Unit #204 has an outstanding balance of $1,245.00. A collection notice was sent on March 1, 2026. Follow-up scheduled for March 15.
Overline
12px / CAPS
Property Overview · Highlands HOA · Q1 2026
Component Library

UI Components

Buttons — .btn · Neo-Brutalist press interaction
Variants
Sizes
With Icons
Stat Cards — Dashboard KPIs
Total Units
312
↑ 4 since Jan
MRR Dues
$18.2k
↑ 2.1% YoY
Open Violations
18
↑ 3 this week
Avg Response
1.4d
↓ 0.3d faster
Cards — Standard · Interactive · Feature
Standard Card
Recent Violations

Three new violations were logged this week across Highlands HOA properties. Two are landscaping-related.

🖱 Interactive Card (hover me)
Upcoming Board Meeting

March 18, 2026 · 7:00 PM CST
Agenda: Budget review, rule amendments, landscaping contract.

📅 Scheduled 12 Attending
✦ AI-Powered
Smart Collection Notices

HOAi drafts personalized, legally-compliant collection notices for every delinquent account — personalized by history, escalation tier, and payment pattern.

Form Inputs — States & Variants
Enter the full legal HOA name
Focused — green border + shadow
⚠ Please enter a valid email address
✓ Email verified
Toggle Switches
Email Notifications (Off)
AI Auto-Draft Notices (On)
SMS Alerts (On)
Payment Processing (Disabled)
Notification Preferences
Violation Alerts
Instant notifications
Weekly Digest
Every Monday 8:00 AM
Marketing Emails
Product updates & tips
Badges — Status · Category · Label
All Variants
Default Primary Gold ✓ Resolved ⚡ Pending ⚠ Overdue ℹ Info Escalated Urgent ✦ Pro
HOA Context
✓ Current Due Soon Delinquent Payment Plan Waived In Review Notice Sent Legal Hold ✓ Cured Open Violation
Alerts & Notifications
ℹ️
System Maintenance Scheduled
HOAi will undergo scheduled maintenance on March 20 from 2:00–4:00 AM CST. No data loss expected. All drafts will be preserved.
✅
Collection Notice Sent Successfully
Your AI-drafted notice to Unit #204 (Gulf Ventures HOA) has been queued. Crawfish window: 10 minutes remaining.
⚠️
3 Units Approaching 90-Day Delinquency
Units #102, #218, and #305 will reach the legal escalation threshold in 7 days. Review and approve collection actions before deadline.
🚨
Payment Processing Failed
ACH transfer for Unit #412 was rejected. Routing number may be invalid. Contact resident and collect alternative payment method.
📢
New Feature: AI Violation Photo Detection
HOAi can now analyze uploaded photos and automatically classify potential CC&R violations. Enable in Settings → AI Features.
Data Table — Violations Ledger
Violation ID Unit Resident Type Filed Status Fine
VIO-2026-0041 #204 Sarah Thibodeaux Landscaping Mar 3, 2026 Overdue $250.00
VIO-2026-0040 #118 Marcus Fontenot Parking Mar 1, 2026 Pending $100.00
VIO-2026-0039 #305 Jennifer Broussard Noise Feb 28, 2026 Notice Sent $150.00
VIO-2026-0038 #412 Claude Tureaud Structural Feb 25, 2026 ✓ Resolved $0.00
VIO-2026-0037 #009 Danielle Arceneaux Trash Feb 22, 2026 Escalated $500.00
Progress Bars
Collection Rate — Q1 2026 94.2%
Violations Resolved 67%
Delinquency Rate 12%
AI Auto-Resolutions 38%
Neo-Brutalist DNA

Shadow & Border System

Hard offset shadows create physical presence. Every element knows where it lives in space.

xs
shadow-xs
2px 2px
sm
shadow-sm
3px 3px
md
shadow-md
4px 4px ★
lg
shadow-lg
6px 6px
xl
shadow-xl
8px 8px
2xl
shadow-2xl
12px 12px
Colored Shadows — Brand Moments
Green Shadow
6px 6px 0 #4B6843
Gold Shadow
6px 6px 0 #D4952A
Red Shadow
6px 6px 0 #C4372A
4px Spacing Scale
space-1 (4px)
0.25rem
space-2 (8px)
0.5rem
space-4 (16px)
1rem
space-6 (24px)
1.5rem
space-8 (32px)
2rem
space-12 (48px)
3rem
space-16 (64px)
4rem
space-20 (80px)
5rem
space-24 (96px)
6rem
Layout System

Dashboard Layout

Sidebar navigation + top bar. 240px sidebar on desktop. Charcoal dark nav with active state glow.

H
HOAi
Properties
🏘 Dashboard
🏠 Units
👥 Residents
Operations
⚠ Violations
💰 Dues & AR
🔧 Maintenance
📅 Calendar
Intelligence
✦ AI Reports
📊 Analytics
📄 Documents
⚙ Settings
Dashboard
✦
AI Active
R
Active Units
312
Open Violations
18
Delinquencies
$24.1k
Collection Rate
94.2%
Theme System

Dark Mode

Not just inverted — a fully designed alternate expression. Forest-deep backgrounds, lighter brand colors, zero-blue tones.

Units
312
↑ 4 this quarter
MRR Dues
$18.2k
↑ 2.1% YoY
Recent Activity
Unit #204 — Notice Sent Pending
Unit #118 — Violation Filed New
Unit #305 — Dues Received ✓ Paid
Log Violation
Dark Mode Palette Reference
Page#111410
Surface#1A1C19
Elevated#242622
Border#2C2F2A
Border+#3A3E38
Green↑#6B8F62
Gold↑#DFAD4C
Text#EDF1EC
Visual Language

Icon Vocabulary

Lucide Icons — 2px stroke, 24px grid. HOAi-specific vocabulary mapped to every module.

🏘
Properties
Building2
🏠
Unit
Home
👥
Residents
Users
⚠️
Violation
AlertTriangle
💰
Dues
DollarSign
💳
Payment
CreditCard
🔧
Maintenance
Wrench
📅
Calendar
Calendar
✦
AI Feature
Sparkles
⚡
AI Action
Zap
📊
Analytics
BarChart2
📄
Document
FileText
📖
CC&Rs
BookOpen
💬
Comms
MessageSquare
📍
Location
MapPin
✅
Task Done
CheckSquare
HOAi AI Chips & Indicators
✦
AI Active
⚡
Analyzing
✓
Report Ready
🌿 Canopy Design System 🍯 Honey Gold ⬛ Charcoal