Design System · v1.0

The Moodboard

Visual language reference for HI · Human Intelligence and HIRA · Human Intelligence Recruiting Agent. Calm authority, signal over noise — a system engineered to stay lean, clean, and powerful at every scale.

Lean Clean Powerful

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.

01 — Color Palette

Navy #0D1B2A
Navy Mid #1A2F4A
Signal Blue #2563EB
Blue Mid #3B82F6
Blue Light #DBEAFE
Surface #F8FAFC
White #FFFFFF
Success #059669
Warning #D97706

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

04 — Button System

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."