Nocturne Éditorial · v1.0

Spec complète · 20 atoms · 3 molecules · 5 patterns

Livrée par Claude Design. Source de vérité pour la migration tokens + composants.

Collabz · Design System · v1.0.0 · Nocturne Éditorial

DS Collabz Nocturne

Tokens, composants et patterns UX de l'app mobile Collabz. Langage éditorial nuit : noir OLED, accent cuivre, Fraunces serif en headings. Source de vérité : app/src/design/tokens.ts.

Nocturne ÉditorialAtomic Design8-point gridWCAG 2.2 AADark-first OLEDReact 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

#f7f4ed

backgroundSecondary

#ffffff

backgroundTertiary

#efebe0

backgroundElevated

#ffffff

backgroundOverlay

rgba(20, 16, 10, 0.55)

text

#141210

textSecondary

#4a453b

textTertiary

#7a7264

textInverse

#ffffff

border

#e5dfd2

separator

#eee7d8

card

#ffffff

cardShadow

#000000

headerBackground

#f7f4ed

tabBarBackground

rgba(247, 244, 237, 0.78)

tabBarActive

#141210

tabBarInactive

rgba(20, 18, 16, 0.4)

inputBackground

#efebe0

inputText

#141210

inputPlaceholder

#b0a890

inputBorder

#e5dfd2

icon

#7a7264

iconActive

#141210

skeletonBase

#ebe4d2

skeletonHighlight

#f7f1e2

primary

#c96442

danger

#d94836

success

#3a8d6a

warning

#d49028

info

#4a8aa8

accent

#c96442

successBg

rgba(58, 141, 106, 0.1)

dangerBg

rgba(217, 72, 54, 0.1)

warningBg

rgba(212, 144, 40, 0.12)

infoBg

rgba(74, 138, 168, 0.1)

pressedOverlay

rgba(20, 18, 16, 0.06)

focusedBorder

#c96442

disabledBg

#efebe0

Couleurs — Dark

Palette noir pur OLED

background

#000000

backgroundSecondary

#0b0b0b

backgroundTertiary

#141414

backgroundElevated

#141414

backgroundOverlay

rgba(0, 0, 0, 0.75)

text

#f2efe8

textSecondary

#a39d90

textTertiary

#6b6458

textInverse

#0a0806

border

#1e1e1e

separator

#161616

card

#0b0b0b

cardShadow

#000000

headerBackground

#000000

tabBarBackground

rgba(10, 10, 10, 0.75)

tabBarActive

#f2efe8

tabBarInactive

rgba(242, 239, 232, 0.4)

inputBackground

#0b0b0b

inputText

#f2efe8

inputPlaceholder

#6b6458

inputBorder

#1e1e1e

icon

#6b6458

iconActive

#f2efe8

skeletonBase

#141414

skeletonHighlight

#1c1c1c

primary

#e8764a

danger

#ff5a4a

success

#58c896

warning

#f7b842

info

#5ab0d8

accent

#e8764a

successBg

rgba(88, 200, 150, 0.18)

dangerBg

rgba(255, 90, 74, 0.15)

warningBg

rgba(247, 184, 66, 0.15)

infoBg

rgba(90, 176, 216, 0.15)

pressedOverlay

rgba(242, 239, 232, 0.06)

focusedBorder

#e8764a

disabledBg

#141414

Gradients

10 gradients nommés

white

black

blue

red

orange

primary

premium

success

danger

warmFallback

warmDark

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

xl14px

xxl18px

modal22px

pill∞

Typography

11 presets · Inter (UI) + Fraunces (éditorial) + Mono (méta) + Dancing (Memory)

h136px · Fraunces

Le réseau des créateurs.

h230px · Fraunces

Le réseau des créateurs.

h324px · Fraunces

Le réseau des créateurs.

h420px · Fraunces

Le réseau des créateurs.

body16px · Inter

Le réseau des créateurs.

bodyBold16px · Inter

Le réseau des créateurs.

bodySmall14px · Inter

Le réseau des créateurs.

caption12px · Inter

Le réseau des créateurs.

label14px · Inter

Le réseau des créateurs.

display48px · Fraunces

Le réseau des créateurs.

meta11px · JetBrainsMono

Le réseau des créateurs.

Shadows

3 niveaux uniquement

shadows.subtle

offset (0, 1) · radius 3 · opacity 0.04

shadows.default

offset (0, 2) · radius 12 · opacity 0.06

shadows.prominent

offset (0, 8) · radius 24 · opacity 0.08

Motion

Durées et easings

Durées

instant0ms

fast140ms

base220ms

slow360ms

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

20 atoms + 3 molecules + 5 patterns — Nocturne v1.0, API stable

Typography

stable

Tous les textes de l'app. 11 presets (display italic Nocturne).

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

Button

stable

Bouton principal cuivre + gradient premium.

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

Card

stable

Conteneur standard · elevated = step surface en dark.

default · elevated · outline · gradient

TextInput

stable

Champ de saisie · focus cuivre · label/helper/error.

default · search × sm/md/lg

Modal

stable

Modal centered ou bottom sheet avec drag handle.

centered · sheet

BottomSheet

stable

Sheet bas d'écran drag-to-dismiss.

small · medium · full

Badge

stable

Pastille d'état · premium or cuivré, pro ink.

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

Avatar

stable

Avatar rond · ring gradient stories · fallback initiales.

sm · md · lg · custom + ring + badge

Chip

stable

Filter/tag interactif · selected = bg text + fg bg.

sm · md · lg × selected/unselected

Switch

stable

Toggle cuivre on/off.

on · off · disabled

ListItem

stable

Row liste standard · title + subtitle + action.

default · with avatar · with icon

EmptyState

stable

Placeholder état vide · icône + CTA.

simple · with illustration

Banner

stable

Banner semantique · left-edge 3px couleur.

success · info · warning · danger

ThemedIcon

stable

Wrapper Feather icons · color token + sizes.

xs · sm · md · lg · xl · xxl

Skeleton

stable

Placeholder loading shimmer warm.

shimmer · pulse

Divider

stable

Séparateur horizontal ou vertical.

horizontal · vertical

AnimatedTouchable

stable

Touchable avec spring scale 0.96 + opacity 0.7.

scale custom

Toast

stable

Feedback transient · icônes semantic circulaires.

success · error · info · warning

DiscreteToast

stable

Pill translucide mono UPPER · acknowledgments éditoriaux.

message simple

GradientOverlay

stable

Overlay gradient sur photos · dominant Q2-NEW.

top · bottom · diagonal · dominant

UserRow

stable

Avatar + name + meta mono UPPER + action (Suivre/Liker).

default · compact · with badge

NotificationRow

stable

Ligne notification · dot cuivre unread + timestamp meta.

unread · read

PostCard

stable

Card post feed · Fraunces auto si body ≥ 40 car + radius xl.

default · with dominant overlay

BackButton

stable

Retour standalone · haptic selection · hit 44.

floating · inline · text

HeaderBar

stable

Safe-area auto · leading + actions slots · 3 titleVariants.

centered · large · floating

StickyBottom

stable

Barre action ancrée bas · safeArea + auto-hide keyboard.

fade · solid

ScreenLayout

stable

Template SafeArea + Header + ScrollContent + StickyBottom.

scroll · fixed

FAB

stable

Floating Action · rond 56 ou pill extended · shadow accent.

primary · surface × rond/pill

Sandbox — Captures iOS

Captures depuis DesignSystemSandbox (Light + Dark) — portage Detox en cours (ticket 2e2a6235)

Aucun screenshot disponible

Portage screenshots vers Detox en cours (ticket 2e2a6235).

# A venir : device.takeScreenshot depuis un test Detox
# make test-detox-flow FLOW=design-system-screenshots

Règles d'or

Non négociables

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