HumAi LLC, design system v1

One system, every HumAi product

Tokens, typography, the logo, and every component. Start a new Lovable project from this project and the brand is already in place.

01 Foundation

Logo, color, and type

Hum in brand red, Ai in bone with a short rule under it. Clear space equals the height of the A.

Logo variants

primary

stacked

icon

mono

Sub brand lockups

Core

brand red#C41E2A--brand-red, contrast 3.32 to 1

signal red#E8404A--signal-red, contrast 4.90 to 1

bone#F5F5F7--bone, contrast 17.94 to 1

charcoal#0C0C0F--charcoal, contrast 1.00 to 1

Ink scale, contrast measured on charcoal

ink 950#0C0C0F--ink-950, contrast 1.00 to 1

ink 900#131318--ink-900, contrast 1.05 to 1

ink 850#15151A--ink-850, contrast 1.07 to 1

ink 800#1C1C22--ink-800, contrast 1.15 to 1

ink 700#2A2A33--ink-700, contrast 1.37 to 1

ink 600#3B3B46--ink-600, contrast 1.77 to 1

ink 500#55555F--ink-500, contrast 2.65 to 1

ink 400#7A7A85--ink-400, contrast 4.60 to 1

ink 300#A0A0AA--ink-300, contrast 7.54 to 1

ink 200#C2C2CA--ink-200, contrast 11.03 to 1

ink 100#E2E2E8--ink-100, contrast 15.14 to 1

ink 50#F5F5F7--ink-50, contrast 17.94 to 1

Red scale

red 300#F5878E--red-300, contrast 8.13 to 1

red 400#EF6069--red-400, contrast 6.09 to 1

red 500 signal#E8404A--red-500, contrast 4.90 to 1

red 600 brand#C41E2A--red-600, contrast 3.32 to 1

red 700#9E1621--red-700, contrast 2.41 to 1

red 900#5C0C13--red-900, contrast 1.41 to 1

Semantic

success#3DBA7E--success, contrast 7.93 to 1

warning#E5A93B--warning, contrast 9.37 to 1

error#E8404A--error, contrast 4.90 to 1

info#4C8DF0--info, contrast 5.93 to 1

Sub brand accents

humaiOS cyan#22C1D6--os-cyan, contrast 8.99 to 1

humaiOS deep#0E8EA0--os-cyan-deep, contrast 5.02 to 1

LuxeVR gold#D4AF5A--luxe-gold, contrast 9.37 to 1

LuxeVR deep#A8832F--luxe-gold-deep, contrast 5.54 to 1

Nexus violet blue#7B6CFF--nexus-violet, contrast 5.05 to 1

Nexus deep#5646D6--nexus-violet-deep, contrast 3.02 to 1

Type scale

display 88Humans and AI, better together

h1 48Humans and AI, better together

h2 36Humans and AI, better together

h3 28Humans and AI, better together

h4 22Humans and AI, better together

body large 18Humans and AI, better together

body 16Humans and AI, better together

body small 14Humans and AI, better together

label 12Humans and AI, better together

02 Components

Every component, every state

Built on the tokens above. The accent variant follows whichever sub brand is active.

Button

Forms

Full namePlain and specific, always.Work emailWhat are you buildingProduct

Send me the build notesDisabled optionMonthlyYearlyMissed call text backDisabled switch

Card

Default

Card surface on ink 850 with a one pixel ink 700 border.

Raised

Ink 800 with a deep shadow. Use it for the thing in focus.

Accent rule

The 4px top rule carries brand red or the current sub brand accent.

Badge and tag

BrandAccentNeutralActiveTrialFailedQueuedAutomationRemovable

Tabs

One accent per screen. The rule carries it.

Modal, drawer, toast

Text sent

Every missed caller answered in under a minute.

Sync is slow

The CRM import is taking longer than usual.

Call failed

We could not reach the number on file.

New workshop

Seats open for the next build session.

Data table

Id	Account	Status	Created	Value
acc_8f31c204	Northgate Roofing	Active	2026 03 14 09:12	$4,200
acc_1a77bd60	Cedar Dental	Trial	2026 04 02 16:40	$0
acc_5c02ee19	Vela Fitness	Onboarding	2026 05 21 11:05	$1,150

Pricing table

Starter

One location, the core automations.

$100/ month, example

Missed call text back
Pipelines and reminders
Email and SMS campaigns
Calendar and booking

GrowthMost chosen

Growing teams that want the AI layer.

$300/ month, example

Everything in Starter
AI chat widget and voice agent
Review requests on autopilot
Reporting dashboard

Agency

Unlimited sub accounts, your brand on it.

$500/ month, example

Everything in Growth
Unlimited sub accounts
White label mobile app
Priority support

Prices are example values for layout only, not a live price list.

Chat widget

AiHumAi assistant

Hi, what are you trying to automate this week?

Empty state

AiNo conversations yet

When a lead texts back, the thread lands here with the full history.

Eyebrow and section headerSince 2015, systems, apps, worlds

Section header

Humans and AI, better together

Eyebrow, headline, lede. The same three part rhythm opens every section.

Navigation

Footer

03 Sub brands

One accent per screen

Switch the accent and the same components carry the sub brand. Never two accents on one surface.

Cyan for the rule, eyebrows, and one highlight. Red into cyan gradients stay on hero surfaces.

humaiOSAccent eyebrow

Accent rule

The top rule is the accent, the surface stays neutral.

Neutral card

Only one element on a surface carries the accent.

AihumaiOS assistant

Hi, what are you trying to automate this week?

04 Light mode

Secondary theme for print and documents

The neutral tokens swap, brand red stays. Add the light class or data theme light to any subtree.

Light mode

You did not start a business to answer voicemail

Body copy sits at 16px with a 1.5 line height, in ink 300 on the light background.

Card on white

Cards go to white, text goes to charcoal, the rule stays brand red.

Id	Account	Status	Created	Value
acc_8f31c204	Northgate Roofing	Active	2026 03 14 09:12	$4,200
acc_1a77bd60	Cedar Dental	Trial	2026 04 02 16:40	$0

05 Reference

Brand applications board

Six finished screens built from these tokens: the hub hero, humaiOS pricing, HumAi Fit, Nexus Planet, a video thumbnail, and the print brochure.