h-uman
not quite human.
We built an AI runtime that's honest about what it is. Not trying to be human. Not pretending to be anything it's not. Just a fast, small, capable runtime that fits anywhere a CPU exists.
Name & Tagline
The hyphen splits the word, reminding you this is almost—but not quite—human. It's a deliberate pause. A breath. A moment of honesty before the rest of the word completes.
- Always lowercase.
- Always ends with a period.
- Use em dash when pairing with brand name: h-uman — not quite human.
Logo System
Symbol
Clear space: minimum 1× logo height on all sides
Lockups
Monochrome & Reversed
Full color Monochrome (white) Monochrome (black) Minimum Size
Minimum reproduction size: 24px (favicon/tab). Below 24px the mark loses legibility.
Misuse
Animation Rules
- Squash & stretch breathing (non-uniform scale3d, 4s cycle)
- Double-blink (randomized, 10–23s interval)
- Eye gaze tracking with 3D tilt on mouse hover
- Ambient eye drift (subtle, 15s cycle)
- Micro-saccades (50ms random eye jumps, 30% trigger a quick blink)
- Glow pulse + glow lag (follows gaze at 0.15x)
- Ring breathing with staggered parallax
- Dual ambient pulse rings (4s, staggered 2s apart, fade out)
- Idle drift (figure-8 translate + micro-rotate)
- Spring entry animation (scale 0.6 → 1)
- Hover scale (1.03x) with spring easing
- Scroll-linked subtle eye shift
-
Must respect
prefers-reduced-motion
- Continuous rotation or spinning
- Adding pupils, eyelids, or extra features
- Making eyes uneven or asymmetric
- Recoloring eyes (always white)
- Particle/dissolve effects on the orb
- Bounce, wobble, or playful motion
Static — nav, footer, favicons Color
Human Green (Primary)
#7AB648
— var(--hu-accent)
Dynamic Color Ramp
OKLCH palette auto-generated from brand hex. Tokens: --hu-dynamic-primary-{50..950}
Accent Hierarchy (60-30-10)
Primary dominates (60%), secondary highlights (30%), tertiary accents (10%). Error is reserved exclusively for destructive/failure states.
--hu-accent --hu-accent-secondary --hu-accent-tertiary --hu-error Semantic Roles
--hu-accent --hu-accent-secondary --hu-accent-tertiary --hu-error Accessible Contrast Pairings
| Foreground | Background | Ratio | WCAG |
|---|---|---|---|
| --hu-text (light) | --hu-bg (light) | 12.6:1 | AAA |
| --hu-text (dark) | --hu-bg (dark) | 11.8:1 | AAA |
| --hu-accent | --hu-bg (dark) | 5.2:1 | AA |
| --hu-on-accent | --hu-accent | 4.8:1 | AA |
Light & Dark
Toggle the site theme (top-right button) to see how every color adapts. Accents stay consistent; surfaces and text shift.
Light mode
Dark mode
Typography
Avenir at all weights. Use var(--hu-font).
The quick brown fox jumps over the lazy dog. 0123456789
The quick brown fox jumps over the lazy dog. 0123456789
The quick brown fox jumps over the lazy dog. 0123456789
The quick brown fox jumps over the lazy dog. 0123456789
The quick brown fox jumps over the lazy dog. 0123456789
Type Scale
Voice & Tone
Honest
We say what we are and aren't.
"h-uman is a C runtime. It doesn't run in the cloud by default."
"h-uman is the most powerful AI platform ever built."
Technical
We respect the intelligence of our users.
"~1.7 MB binary. Zero deps. <6 MB RSS."
"Super fast and lightweight!"
Concise
Every word earns its place.
"One binary. Zero deps."
"You get a single executable file with no external dependencies whatsoever."
Iconography
Phosphor Regular is
the canonical icon library. Icons use currentColor — color is inherited from the parent.
Sizing
Default sizes: 16px inline, 20px buttons, 24px navigation, 32px feature highlights.
Color Inheritance
Motion
h-uman motion is purposeful, restrained, and spring-first. Every animation communicates state change. Nothing moves for decoration alone.
Spring-First
Prefer spring physics over bezier curves. Springs feel natural because they have velocity and overshoot — real objects behave this way.
Purposeful
Every animation communicates: entrance, exit, state change, or spatial relationship. If you can't name the purpose, remove the animation.
Restrained
Maximum duration: 700ms. Typical: 200-400ms. Use compositor
properties only (transform, opacity, filter). Always respect prefers-reduced-motion.
Duration Scale
What "h-uman motion" feels like
- Elements arrive with slight overshoot, then settle — like a ball landing on a surface
- Exits are faster than entrances (200ms out vs 300ms in)
- Staggered reveals cascade top-to-bottom, 50ms apart, capped at 300ms total
- No bounce, no wobble, no playfulness — this is infrastructure software
- Focus rings appear instantly; content transitions smoothly
Resources
Logo Downloads
SVG mark for all digital use. Minimum 24px. Always maintain clear space.
Download SVGFont Licensing
Avenir is a commercial typeface by Adrian Frutiger (Linotype). Licensed for web embedding via self-hosted WOFF2. Ensure your license covers your use case.
Fallback stack: Avenir Next, -apple-system, BlinkMacSystemFont, system-ui, sans-serif
Color Tokens
All color values live in design-tokens/base.tokens.json. CSS custom properties are generated during build. Never
hard-code hex values.
Design System
For the full component library, layout archetypes, spacing system, and implementation guidelines.
View Design System