Principes fondamentaux

Les 5 règles qui gouvernent chaque décision de design dans Veza.

墨

Encre, pas néon

Les couleurs sont des pigments, pas des lumières. Chaque touche de couleur est délibérée comme un coup de pinceau. Quand tout brille, rien ne se distingue.

間

Espace sacré (Ma)

Le vide n'est pas vide — il respire. Spacing généreux, densité d'information maîtrisée. Ce qui n'est pas là est aussi important que ce qui y est.

和

Universalité

Lisible pour tous — 8 ans comme 80 ans, auditeur casual comme label pro. Pas de dark pattern, pas de complexité gratuite. Discord-tier accessibilité.

侘

Wabi-sabi numérique

Authenticité > perfection stérile. Les textures sont subtiles, les formes légèrement organiques, la personnalité est dans les détails — pas dans les effets.

層

Révélation progressive

Simple pour l'auditeur, profond pour le label. Les fonctions avancées (stats, gestion multi-artistes, analytics) se révèlent au fur et à mesure. Jamais tout d'un coup.

🎮

Touches thématiques

Le gaming (XP, achievements), le cyber (monospace, terminal), le graffiti (chips, tags) sont des épices — pas le plat principal. 5% de l'UI, 100% de la personnalité.

Palette

Palette réduite et intentionnelle. 4 couleurs d'accent maximum. Les neutres font 90% du travail — les accents sont des coups de pinceau.

Fonds — Couches d'encre

Void

--sumi-bg-void

Base

--sumi-bg-base

Raised

--sumi-bg-raised

Overlay

--sumi-bg-overlay

Hover

--sumi-bg-hover

Texte — Densités d'encre

Aa

Primary

--sumi-text-primary

Aa

Secondary

--sumi-text-secondary

Aa

Tertiary

--sumi-text-tertiary

Aa

Disabled

--sumi-text-disabled

Accents — Les 4 pigments

Indigo pour les actions, Vermillon pour l'urgence, Sauge pour le succès, Or pour les récompenses. C'est tout.

Indigo Ink 藍墨

--sumi-accent

Vermillion Seal 朱印

--sumi-vermillion

Sage 草墨

--sumi-sage

Gold Leaf 金墨

--sumi-gold

Accent Subtle

--sumi-accent-subtle

Vermillion Subtle

--sumi-vermillion-subtle

Sage Subtle

--sumi-sage-subtle

Gold Subtle

--sumi-gold-subtle

Sémantique

✓ Success / Online

⚠ Warning

✕ Error / Danger

ℹ Info

Typographie

3 polices, chacune avec un rôle clair. Inter pour le corps (universel), Space Grotesk pour les titres (personnalité sans agressivité), JetBrains Mono pour les stats et le terminal (touche cyber).

Hiérarchie

Display Veza Music

H1 Dashboard

H2 Playlists récentes

H3 Artistes suivis

H4 Nouveautés

Body Lg Découvre les dernières sorties des artistes que tu suis et explore de nouveaux horizons musicaux.

Body Un morceau publié hier · 3 min 42 · Hip-Hop Indépendant

Caption Ajouté le 15 mars 2025 · 1 240 écoutes

Label Genre • Sortie

Mono 12,847 streams · 03:42 · 320kbps

Composants

Chaque composant est une primitive réutilisable. Composez, ne customisez pas.

Buttons

Inputs

Nom de l'artiste

Description

Badges

Draft Published Online Pending Rejected ● LIVE

Chips — Genre tags (touche graffiti)

Hip-Hop Lo-Fi Jazz Electro Ambient Punk

Avatars

M

MK

VZ

DJ

Cards

♪

Nuits Urbaines

Kōji · 2024

12 titres · 42 min

🎤

Stream Session #12

En direct

Live

AT

Atelier Records

Label · 8 artistes

24.8K Streams

1.2K Followers

Tabs

Morceaux

Albums

Playlists

À propos

Toggle

Mode public

Menu / Dropdown

Tooltip

Spécialités thématiques

Les composants qui portent la personnalité de Veza. Gaming, terminal, live — mais toujours fonctionnels d'abord.

🎮 XP / Progression

Niveau 7 — Explorateur 2,840 / 4,000 XP

🏆 Achievement Toast

🎵

Premier Stream!

Tu as lancé ta première session de streaming en direct.

💻 Terminal Block

$ veza stats --artist kōji --period 30d

streams: 12,847 (+23.4%)
listeners: 3,201 (+18.7%)
saves: 847 (+31.2%)
top_track: "Nuits Urbaines" (4,231 plays)

🎵 Track List

▶

Nuits Urbaines

Kōji

3:42

2

Brume Matinale

Kōji

4:15

3

Fragments de Verre

Kōji ft. Yūrei

5:01

📊 Stats Dashboard

Streams 12,847 ↑ 23.4%

Auditeurs 3,201 ↑ 18.7%

Revenus €284 ↓ 5.2%

Followers 1,204 ↑ 42.1%

🎧 Player Controls

Nuits Urbaines

Kōji

♥

1:18 3:42

📡 Live Indicators

En direct ● LIVE

Ombres & Élévation

6 niveaux d'ombre. Chaque couche correspond à un usage spécifique.

XS

Inputs, badges

SM

Cards au repos

MD

Cards hover, tooltips

LG

Dropdowns, popovers

XL

Modales, drawers

2XL

Full-screen overlays

Spacing & Radius

Échelle de spacing (base 4px)

space-1

4px — Micro gaps

space-2

8px — Icon gaps, tight padding

space-3

12px — Input padding, small gaps

space-4

16px — Card padding, standard gap

space-6

24px — Section padding

space-8

32px — Section margins

space-12

48px — Page sections

space-16

64px — Major page gaps

Border Radius

xs (4px)

sm (6px)

md (8px)

lg (12px)

xl (16px)

full

Aperçu — App Mockup

Composition réelle avec les composants du système. C'est ce à quoi l'app doit ressembler.

Veza

Mes Playlists

MK

Marko

🔍 Rechercher artistes, morceaux, playlists...

MK

Bon retour, Marko

Mercredi 11 février 2026

Streams

12.8K

↑ 23%

Followers

1.2K

↑ 42%

XP

Lv.7

Récemment joués

▶

Nuits Urbaines

Kōji

3:42

2

Brume Matinale

Kōji

4:15

3

Encre & Silence

Yūrei

5:01

Nuits Urbaines

Kōji

⏮

▶

⏭

1:18

3:42

🔊

Règles & Anti-patterns

Ce qu'il faut absolument suivre — et ce qu'il faut absolument éviter.

✓ FAIRE

Utiliser les tokens --sumi-* pour TOUTE valeur visuelle

Laisser respirer — padding généreux, margins explicites

JetBrains Mono pour les chiffres, stats, durées

Un seul accent par section — jamais 2 couleurs en compétition

Borders subtiles border-faint comme séparation principale

Le thème gaming (XP, achievements) comme récompense, pas comme déco

Tester en light ET dark — chaque composant doit marcher dans les deux

Responsive : mobile-first, sidebar overlay sous lg

✕ NE PAS FAIRE

Utiliser des couleurs Tailwind par défaut (slate, zinc, gray)

Ajouter des glow/neon décoratifs — le glow est UNIQUEMENT pour le focus

Orbitron ou toute font "gaming" agressive en heading

Clip-path manga/hex — c'est gimmick, pas fonctionnel

Plus de 4 couleurs d'accent — indigo, vermillon, sauge, or. C'est TOUT

Gradient comme fond de composant — réservé aux hero/cover uniquement

Box-shadow décoratif — les ombres servent l'élévation, pas la déco

Animations au-delà de 300ms sauf pour les achievements

Plus de 2 fonts dans un même composant

Des valeurs CSS arbitraires (text-[14px], w-[237px])

Mapping Tailwind

Comment traduire ce design system en classes Tailwind dans ton projet React. Chaque token SUMI a son équivalent Tailwind via le fichier de config.

// Colors bg-sumi-void → var(--sumi-bg-void) bg-sumi-base → var(--sumi-bg-base) bg-sumi-raised → var(--sumi-bg-raised) text-sumi-primary → var(--sumi-text-primary) text-sumi-secondary→ var(--sumi-text-secondary) text-sumi-accent → var(--sumi-accent) border-sumi-faint → var(--sumi-border-faint) // Fonts font-body → var(--sumi-font-body) font-heading → var(--sumi-font-heading) font-mono → var(--sumi-font-mono) // Shadows shadow-sumi-sm → var(--sumi-shadow-sm) shadow-sumi-md → var(--sumi-shadow-md) shadow-sumi-glow → var(--sumi-shadow-glow)