00 — Design Philosophy
Every surface of HI and HIRA is built to three compounding principles. Each principle removes something before it adds anything.
01
Lean
Every element earns its pixel. We default to removal, not addition. No decorative chrome, no speculative features, no ornamental color. The interface is judged by what it does without — not what it displays.
- One idea per screen
- Whitespace treated as structure, not emptiness
- Zero redundant CTAs or nav entries
- No motion unless it communicates state
02
Clean
Visual clarity is a first-class feature. Grid-aligned, type-driven, token-governed. Signal must survive heavy data density — evaluation dashboards, role-intent reviews, HIRA pipelines — without sliding into noise.
- Poppins + Inter · two voices, one clean system
- 4-px spacing grid, 8-px rhythm for components
- Elevation via light & hairline borders — not shadows
- Color carries meaning: blue = signal, gold = intent, navy = authority
03
Powerful
Restraint concentrates force. The surface is calm so the system underneath — the 50-check gate, the 5M question bank, the multi-signal matching — can read as decisive rather than loud. Tools earn trust by being accurate, not animated.
- Evidence over adjectives in every string
- Irreversible actions are always two-step
- Human checkpoints styled distinctly from AI steps
- Performance budget: < 150 KB CSS, < 100 ms TTI on nav
Voice — Do
- “Role intent, not a job description.”
- “Calm, earned access.”
- “Signal-preserving selection.”
- “50-check evaluation gate.”
Voice — Don't
- “World-class AI-powered disruption.”
- “Game-changing next-gen platform.”
- “Apply now to unlock your dream job!”
- Emoji-heavy marketing copy.
00b — HIRA · Design Notes
HIRA is the company-facing intelligence layer. Its UI is explicitly bi-coded: AI-automated steps and human-gated checkpoints must be visually distinguishable at a glance.
AI Step
Cyan · #0070F3
Resume parse, quiz curation, code eval, matching. Rendered with mono labels, thin borders, subtle cyan glow.
Human Checkpoint
Gold · #B48600
50-check gate, technical evaluation, behavioural review. Rendered with warm surface, soft gold border, and a visible reviewer identity.
Decision Gate
Navy · #0D1B2A
Final 5 → manager round. Rendered in navy authority surface — this is where the process commits to an outcome, and the UI reflects the weight.
02 — Typography
Display — Sora 800
Human Intelligence
letter-spacing: -0.04em · line-height: 1.1
Heading — Sora 700
Engineered selection, evaluation, alignment
letter-spacing: -0.02em · line-height: 1.2
Body — Plus Jakarta Sans 400
Engineering the global AI talent supply through skill-based systems designed to preserve signal, reduce noise, and support long-term alignment.
line-height: 1.6 · 16px
Micro-UI — Inter 500
SELECTION · EVALUATION · ALIGNMENT · 12px · 0.12em
Overlines, badges, labels, status indicators. Tracked uppercase Inter, not a monospace — reads cleaner at small sizes while still signalling structure.
03 — Spacing & Radius Scale
4px — Inputs
8px — Buttons
12px — Badges
16px — Cards
20px — Panels
Full — Pills
05 — Card System
Feature Card
Skill-Based Selection
Preserve signal through structured evaluation. Depth over credentials, process over claims.
Elevated Card
Evaluation Protocol
Applied intelligence measurement through hands-on tasks, not keyword matching.
Dark Card
Trust Architecture
Clarity through process. Every step designed to reduce noise and support alignment.
06 — Voice & Tone
Signal
"Engineering the global AI talent supply through skill-based systems."
Noise
"Revolutionizing the future of AI hiring with cutting-edge algorithms."
Signal
"Designed rigor, no hype."
Noise
"The world's most advanced AI talent marketplace."