PitchArena
Design system · v0.1

PitchArena design system.

La fondation partagée du produit arène — principes, palette, typo, composants, langage.

/ 01

Principes de marque

Principle 01

Entraînement par arènes

On n'enseigne pas la communication. On la fait pratiquer à travers des challenges.

Principle 02

Performance sous pression

Les contraintes — temps, objectifs, réactions IA — transforment la parole en pratique.

Principle 03

Objectifs et scoring

Chaque round a des objectifs visibles et un verdict. Pas de feedback flou.

/ 02

Couleurs

Palette de surfaces sombres et chaudes, avec trois accents pour les états d'arène.

#070707
Ink 0
page
#111111
Ink 1
background
#181818
Ink 2
surface
#2A2622
Walnut
warm surface
#706B64
Stone 600
muted
#A8A29A
Stone 400
secondary text
#F5F2EA
Bone
primary text
#F59E0B
Amber
interview arena
#F97316
Orange
explain arena
#EF4444
Crimson
persuasion arena
/ 03

Typographie

Geist pour l'UI et le display, JetBrains Mono pour les labels et la méta.

Hero
Build confidence.
Section title
Every round has objectives.
Card title
Handle a difficult recruiter question
Body
Each round has a clear context, three visible objectives, and a strict time limit.
Muted
Choose your arena. Start a challenge.
Mono / meta
challenge · 1 / 3
/ 04

Composants

Les briques de base de la surface produit.

Challenge card
Interview Arena Premium

Defend a past decision

2mHard
Objective checklist
  • Open with the headline answerachieved
  • Back it with one concrete exampleachieved
  • ~Address the underlying objectionpartial
  • ✕Close with a clear next stepmissed
Score card
Clarity
82 / 100
Concise phrasing
Badges
InterviewExplainPersuasionSupportPremiumComing soonLocked
Buttons
/ 05

Espacement

Échelle Tailwind utilisée partout. Multiples de 4px.

1 · 4px
2 · 8px
3 · 12px
4 · 16px
6 · 24px
8 · 32px
12 · 48px
16 · 64px
/ 06

Terminologie

Le même vocabulaire dans l'UI, le marketing et la doc.

Arena
A category of communication scenarios (Interview, Explain, Persuasion, Support).
Challenge
A single training scenario with context, objectives, and a time limit.
Round
A live attempt at a challenge — speak under constraints, get scored.
Objectives
The three or four visible goals that define what a strong round looks like.
Score
Numeric performance verdict across Clarity, Structure, Relevance, Presence.
Unlock
Granting access to harder rounds or premium challenges.