Brand Guidelines

the humbl
identity.

Colors, type, and logo usage for the HUMBL name and wordmark — the current identity, as it actually ships on this site. For licensing or partner use, see the Legal page.

Version 1.0 · Last updated 06 August 2026

Colors

Ink
#0A0C12 · Primary text · light-mode surfaces
White
#FFFFFF · Primary background
Electric Blue
#3D5AFF · Brand accent · CTAs · links
Panel
#06070B · Always-dark slab sections
Mut
#565E6E · Muted body text
CTA gradient
#3D5AFF → #6E8BFF · Solid buttons
Auto
Think
Rant
Challenge
Guide

Light & dark

The site fully supports both themes. The accent shifts lighter in dark mode to keep contrast on near-black — it's not the same blue in both.

Background
#FFFFFF
#000000
Text
#0A0C12
#F2F5FA
Accent
#3D5AFF
#6E8BFF

Mode colors

HUMBL's four registers, plus Auto — each with its own color, used consistently across the app and this site. Light/dark pairs shown side by side.

Auto
#0A0C12 · #0A0C12
Reads the room. Picks for you.
Think
#2E86FF · #3D9BFF
Better questions than you’d ask yourself.
Rant
#3D5AFF · #6E8BFF
When you just need to be heard.
Challenge
#11C2C2 · #28D6D6
Make your case. It’ll fight it.
Guide
#8A6BFF · #9B8CFF
Stuck? It helps you find the next step.

Typography

DM Serif Display
think out loud.

Headlines and display copy. Regular for statements, italic for the emphasis word or phrase.

Archivo
Every AI was built for something. HUMBL was built for thinking.

Section headings (the .dsp2 style) — extra-bold, tight letter-spacing. A step down from display type, a step up from body.

Hanken Grotesk
Body copy, UI labels, and navigation.

Everything else — body text, buttons, nav, tags, and meta. One typeface across every weight, no separate mono face.

Buttons

Three variants, used consistently across the site. These are the real components, not renders.

Line Solid
Inverse (on dark)

The orb

HUMBL's one distinctive visual object. Four states, always in one of them — never decorative, always tied to what's actually happening.

Idle
Resting. Slow, steady breathing motion — nothing is happening yet.
Listening
Actively hearing you. The orb brightens and reacts to your voice.
Thinking
Processing what you said. A faster, tighter spin.
Responding
Speaking back. Motion syncs to the shape of its own voice.

Where it appears

~400px
Home hero
The live demo — the largest, most central orb on the site.
40px
Timeline marker
Small inline reference, e.g. marking "now" on a timeline.

Voice

Short sentences. Direct address — "you," not "users." No corporate padding, no exclamation points doing the work a real idea should. HUMBL talks like it's already thought about what it's saying, not like it's trying to sound impressive.

"Talk something through and it asks back — the question underneath the one you walked in with."
"Get it all out — no judgment, no advice unless you ask."
"Bring the idea you think is bulletproof. It argues the other side and finds the holes."

How we show up

01
One accent, used sparingly.
Electric Blue does the interactive work — CTAs, links, the accent state. It is not a decoration color.
02
White (or black) is the container.
No cream, no warm gray backgrounds. The surface is pure — the orb and the accent are what carry color.
03
The orb is never decorative.
It is always tied to a real state — idle, listening, thinking, responding. If it's on screen, something is actually happening.
04
Copy is short and direct.
No exclamation points doing the work an idea should. Say the thing, then stop.
05
One typeface per job.
Serif for headlines, Archivo for section heads, Hanken Grotesk for everything else. No mixing roles.
06
Dark mode is a real theme, not an inversion.
The accent itself shifts lighter in dark mode to stay legible — colors are chosen per theme, not just flipped.

Using these assets

This page is a reference, not a license. For permitted use of the HUMBL name, wordmark, or other assets — including partner and licensed-media use — see the Legal page.