Components — Hunter Design System

Quick install

00 / setup

Trois lignes dans le <head> de n'importe quelle page. La police Geist est servie par Google Fonts — pas besoin de l'auto-héberger.

HTML

<link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://hunter-lp.pages.dev/hunter-design.css">

Color tokens

01 / foundation

Tous les tokens sont des CSS custom properties. Override n'importe lequel pour customiser sans toucher au CSS source.

--bg

#ffffff

--surface-2

#f5f5f5

--surface-3

#101010

--text

#101010

--text-2

#6F6F6F

--text-3

#8F8F8F

--border

#e5e5e5

--border-strong

#1F1F1F

--link

#3B49DF

--danger

#D63E3E

CSS

:root {
  --bg:           #ffffff;
  --surface-2:    #f5f5f5;
  --surface-3:    #101010;
  --text:         #101010;
  --text-2:       #6F6F6F;
  --text-3:       #8F8F8F;
  --border:       #e5e5e5;
  --border-strong:#1F1F1F;
  --primary:      #101010;
  --link:         #3B49DF;
  --danger:       #D63E3E;
}

Typography

02 / foundation

Geist (sans) pour tout, Geist Mono pour les nombres et le code. Pas de serif, pas d'italic. Le poids et le tracking font le rythme.

h1

The quick brown fox

h2

The quick brown fox

h3

The quick brown fox

lead

The quick brown fox jumps over the lazy dog 8 854 times.

body

The quick brown fox jumps over the lazy dog 8 854 times.

eyebrow

Section label

mono

8 854 / 12 sources

Buttons

03 / interaction

Primary = warm-black solid. Secondary = white avec hairline border. Pas de blue button — le bleu est réservé aux liens inline.

Primary large Primary Secondary Secondary small

HTML

<a href="#" class="btn btn--primary btn--lg">Primary large</a>
<a href="#" class="btn btn--primary">Primary</a>
<a href="#" class="btn btn--secondary">Secondary</a>
<a href="#" class="btn btn--secondary btn--sm">Secondary small</a>

Card

04 / layout

White surface + 1px border. Hover : la border passe à warm-black + lift de 1px. Pas de shadow.

01

Registry ATS-as-a-Service

50+ ATS d'enseignes FR reverse-engineerés via une méthodologie HAR pipeline reproductible. Personne d'autre n'a cette amplitude.

DigitalRecruiters · SmartRecruiters · custom AWS

HTML

<article class="card">
  <div class="card__index">01</div>
  <h3>Card title</h3>
  <p>Card body. Use <strong>strong</strong> for emphasis.</p>
  <div class="card__foot">Meta · in mono</div>
</article>

KPI strip

05 / data

Mono numerals huge en warm-black. Label uppercase tracking 0.10em. Le composant signature — il porte le pitch des sections "what we have".

8 854

offres en DB

snapshot 2026-04-29

12

sources unifiées

WTTJ · FT · Decathlon

251

tests passing

100% green · 1m45s

0%

hallucinations

validator déterministe

HTML

<div class="kpis">
  <div class="kpi">
    <div class="kpi__value">8 854</div>
    <div class="kpi__label">offres en DB</div>
    <div class="kpi__meta">snapshot 2026-04-29</div>
  </div>
  ...
</div>

Pills

06 / data

Hairline pill, hover passe la border en warm-black. Le dot peut signifier statut (live, on, etc.). Variante .meta-pill pour les attributs courts.

WTTJ 5 585 Carrefour 800 Decathlon 207 font · Geist primary · #101010

HTML

<span class="pill">
  <span class="pill__dot"></span>
  WTTJ <span class="pill__count">5 585</span>
</span>

<span class="meta-pill">font · <strong>Geist</strong></span>

Callout / pull-quote

07 / typography

Border-left 2px noir, pas de fill, pas d'italic. Met en avant une assertion forte sans crier.

Les concurrents traitent toutes les offres pareil. Nous, on classe par probabilité réelle d'embauche — donc l'utilisateur ne crame pas son énergie sur des candidatures impossibles.

HTML

<div class="callout">
  Les concurrents traitent toutes les offres pareil. Nous, on classe par
  probabilité réelle d'embauche.
</div>

Persona card

08 / data

Une variante de card qui structure : nom, rôle (mono), quote (smart-quotes auto), 2-col stats. Pour personas, témoignages, profils.

Walid

Bac+1 · Eugenia · Stage IA juin

Profil agentic/RAG accompli, mais le filtre académique Bac+5 partout me bloque. La cooptation est la clé.

5 585

offres scrapées

394

AI-related

HTML

<article class="persona">
  <div class="persona__name">Walid</div>
  <div class="persona__role">Bac+1 · Eugenia · Stage IA juin</div>
  <div class="persona__quote">Profil agentic accompli...</div>
  <div class="persona__stats">
    <div>
      <div class="persona__stat__value">5 585</div>
      <div class="persona__stat__label">offres scrapées</div>
    </div>
    ...
  </div>
</article>

Pipeline / step strip

09 / process

Pour visualiser un pipeline ou un workflow en N étapes. Variante .stage--accent pour highlight la ou les étapes critiques.

01

parse_jd

Haiku · structural

02

select_content

Haiku · IDs only

03

tier_router

L1 / L2 / L3

04

mirror

contraint · t=0

05

validator

déterministe

HTML

<div class="pipeline">
  <div class="stage">
    <div class="stage__num">01</div>
    <div class="stage__name">parse_jd</div>
    <div class="stage__sub">Haiku · structural</div>
  </div>
  <div class="stage stage--accent">...</div>
</div>

Bad / Good split

10 / educational

Pour comparer une mauvaise pratique à la bonne. Code biffé en danger pour la mauvaise, highlight noir pour la bonne.

✕ Avant

Built RAG with 50 000 users and 99% accuracy.

→ chiffres inventés

✓ Après

Designed agentic RAG for 8 000 lawyers.

→ chiffres préservés du profil

HTML

<div class="demo">
  <div class="demo__col demo__col--bad">
    <div class="demo__title demo__title--bad">✕ Avant</div>
    <div class="demo__bullet">
      Built RAG with <code>50 000 users</code> ...
    </div>
  </div>
  <div class="demo__col demo__col--good">...</div>
</div>

Pricing plan

11 / commerce

.plan pour les plans standards, .plan--featured avec border 2px noir + badge pour celui qui doit attirer l'œil.

Free

0€/mois

Pour tester avant de t'engager.

Profil basique
1 source
5 candidatures/mois

Commencer

Le plus signé

Pro

9.99€/mois

Étudiants, alternants.

12+ sources
50 candidatures/mois
Tournée physique

Choisir Pro

Waitlist box

12 / cta

Le CTA de bas-de-page. Eyebrow + h2 + lead + form (input + button) en flex row qui passe en column sur mobile.

Beta · juillet 2026

Sois dans les 50 premiers.

On onboarde 10-20 personnes par cohorte pour itérer.

Terminal mockup

13 / hero asset

Le seul élément dark sur la page. Il sert de citation visuelle de code/CLI. Classes utilitaires pour color : .pmt .cmd .out .ok .num .dim.

~/job-search · hkt

$ hkt generate cv --top 30

parse_jd ✓ 30 JDs

tier_router ✓ 5×L3 · 22×L2

✓ done · 0.93€ · 8m23s

HTML

<div class="terminal">
  <div class="terminal__bar">
    <span class="terminal__dot"></span>...
    <span class="terminal__title">~/path · cmd</span>
  </div>
  <div class="terminal__body">
    <div><span class="pmt">$</span> <span class="cmd">hkt run</span></div>
    <div class="out dim">step ✓ <span class="num">42</span> items</div>
    <div class="out"><span class="ok">✓ done</span></div>
  </div>
</div>