Collabz · Design System · v0.3.0

DS Collabz

Tokens, composants et patterns UX de l'app mobile Collabz. Source de vérité : app/src/design/tokens.ts.

Atomic Design8-point gridWCAG 2.2 AAFree librariesReact Native

Principes fondateurs

Tokens first

Aucune valeur hardcodée dans l'app. Couleurs, spacing, radius, typo, shadows, motion : tout passe par tokens.ts.

8-point grid

Tous les padding, margin, gap sont des multiples de 4. Interdit : 5, 7, 13, 15, 17. Si tu veux 15, prends 16.

Atomic Design

Atoms (Button, Typography) → Molecules → Organisms. Les atoms vivent dans app/src/design/, le reste dans les features.

Dark mode first-class

Light et dark au même niveau. Dark = noir pur OLED (#000000). Chaque composant testé dans les 2 modes.

WCAG 2.2 AA

Contraste minimum 4.5:1 pour le texte normal, 3:1 pour le gros texte. Touch targets 44×44 minimum.

Free libraries

Zéro UI kit externe. Pas de Tamagui, Gluestack, Unistyles, Storybook. Seul Reanimated + Expo LinearGradient autorisés.

Couleurs — Light

Palette de référence en mode clair

background

#f8f9fa

backgroundSecondary

#ffffff

backgroundTertiary

#f1f3f4

backgroundElevated

#ffffff

backgroundOverlay

rgba(0, 0, 0, 0.5)

text

#1a1a1a

textSecondary

#495057

textTertiary

#6c757d

textInverse

#ffffff

border

#e9ecef

separator

#f1f3f4

card

#ffffff

cardShadow

#000000

headerBackground

#f8f9fa

tabBarBackground

rgba(245, 245, 245, 0.82)

tabBarActive

#1a1a1a

tabBarInactive

rgba(0, 0, 0, 0.35)

inputBackground

#f1f2f6

inputText

#1a1a1a

inputPlaceholder

#adb5bd

inputBorder

#e9ecef

icon

#6c757d

iconActive

#333333

skeletonBase

#e9ecef

skeletonHighlight

#f8f9fa

primary

#00a8ff

danger

#e74c3c

success

#10B981

warning

#F59E0B

info

#3498db

accent

#e84393

Couleurs — Dark

Palette noir pur OLED

background

#000000

backgroundSecondary

#111111

backgroundTertiary

#1a1a1a

backgroundElevated

#111111

backgroundOverlay

rgba(0, 0, 0, 0.7)

text

#f0f0f0

textSecondary

#b0b0b0

textTertiary

#808080

textInverse

#000000

border

#1a1a1a

separator

#151515

card

#111111

cardShadow

#000000

headerBackground

#000000

tabBarBackground

rgba(10, 10, 10, 0.85)

tabBarActive

#ffffff

tabBarInactive

rgba(255, 255, 255, 0.4)

inputBackground

#1a1a1a

inputText

#f0f0f0

inputPlaceholder

#555555

inputBorder

#222222

icon

#808080

iconActive

#f0f0f0

skeletonBase

#111111

skeletonHighlight

#1a1a1a

primary

#00a8ff

danger

#e74c3c

success

#10B981

warning

#F59E0B

info

#3498db

accent

#e84393

Gradients

10 gradients nommés

white

black

blue

red

orange

primary

premium

success

danger

Spacing

8-point grid, valeurs autorisées

none0px
xxs2px
xs4px
sm8px
md12px
lg16px
xl20px
xxl24px
xxxl32px
huge40px
mega48px
giga64px

Radius

Échelle stricte

none0px
sm4px
md8px
lg12px
xl16px
xxl20px
modal25px
pill∞

Typography

10 presets, 4 familles de polices

h136px · Poppins

The quick brown fox jumps over the lazy dog

h230px · Poppins

The quick brown fox jumps over the lazy dog

h324px · Poppins

The quick brown fox jumps over the lazy dog

h420px · Poppins

The quick brown fox jumps over the lazy dog

body16px · Poppins

The quick brown fox jumps over the lazy dog

bodyBold16px · Poppins

The quick brown fox jumps over the lazy dog

bodySmall14px · Poppins

The quick brown fox jumps over the lazy dog

caption12px · Poppins

The quick brown fox jumps over the lazy dog

label14px · Poppins

The quick brown fox jumps over the lazy dog

display48px · PlayfairDisplay

The quick brown fox jumps over the lazy dog

Shadows

3 niveaux uniquement

shadows.subtle

offset (0, 1) · radius 2 · opacity 0.05

shadows.default

offset (0, 2) · radius 8 · opacity 0.1

shadows.prominent

offset (0, 4) · radius 16 · opacity 0.15

Motion

Durées et easings

Durées

instant0ms
fast150ms
base250ms
slow400ms
slower600ms

Spring presets (Reanimated)

gentledamping 20 · stiffness 100
defaultdamping 15 · stiffness 150
bouncydamping 10 · stiffness 180
snappydamping 25 · stiffness 300

Opacity

États standards

disabled

0.4

pressed

0.7

hover

0.85

overlay

0.5

Haptics patterns

Conventions iOS (implémentées via expo-haptics)

lightmediumheavysuccesswarningerrorselection

Composants

13 atoms stables v0.3.0 — screenshots iOS à venir

Typography

stable

Tous les textes de l'app. 10 presets.

h1 · h2 · h3 · h4 · body · bodyBold · bodySmall · caption · label · display

Button

stable

Bouton principal avec support gradient.

primary · secondary · outline · ghost × small/medium/large

Card

stable

Conteneur standard.

default · elevated · outline · gradient

TextInput

stable

Champ de saisie avec label/helper/error.

default · search × sm/md/lg

Modal

stable

Modal centered ou bottom sheet avec drag handle.

centered · sheet

Badge

stable

Pastille d'état.

default · premium · verified · pro · success · warning · danger

Avatar

stable

Avatar rond, fallback initiales gradient.

sm · md · lg · custom + ring + badge

Skeleton

stable

Placeholder loading.

shimmer · pulse

Divider

stable

Séparateur horizontal ou vertical.

horizontal · vertical

AnimatedTouchable

stable

Touchable avec scale 0.92 au press.

scale custom

Toast

stable

Feedback transient.

success · error · info

DiscreteToast

stable

Toast discret bas d'écran.

message simple

GradientOverlay

stable

Overlay gradient pour images.

top · bottom · diagonal

Règles d'or

Non négociables

  1. Zéro couleur hardcodée hors de tokens.ts.
  2. Zéro spacing hors scale 8-point.
  3. Zéro borderRadius hors scale.
  4. Typographie via <Typography variant="..."> uniquement.
  5. Elevation : 3 niveaux max (subtle, default, prominent).
  6. Animation : durées et easings depuis tokens.motion.
  7. Touch target minimum 44×44.
  8. Tout composant DS a son type dans types.ts.
  9. tokens.ts est pur TypeScript (aucun import RN).
  10. Chaque modif de token → entrée dans docs/design-system.md#changelog.