Mise à niveau complète de v0.8.0 → v1.0 dans le schéma exact du codebase actuel.
Mêmes clés, mêmes noms de composants, mêmes props — valeurs visuelles remplacées.
Tu peux swapper tokens.ts et design/*.tsx sans toucher aux imports.
Les blocs 1–4 qui suivent sont cohérents seulement si ces deux réglages sont pris. Je donne ma reco mais j'attends ton feu vert pour figer.
0.15 sur le gradient bottom, zéro influence sur le texte ou les boutons. (3) Le focused border d'inputs reste toujours cuivre — l'affordance ne bouge jamais.
Le reste du document suppose Q1=display-only et Q2=plan-B. Si tu veux changer, un seul token à bouger (typography.display.fontStyle) et un seul nouveau token à retirer (gradients.dominantOverlay).
Pour chaque clé existante : ancienne valeur, nouvelle valeur Nocturne, usage. Les clés marquées NEW sont les seuls ajouts.
| Token | v0.8.0 | v1.0 Nocturne | Usage |
|---|---|---|---|
| background | #f8f9fa | #f7f4ed | Papier éditorial, plus chaud et moins stérile que #f8f9fa. |
| backgroundSecondary | #ffffff | #ffffff | Inchangé — surfaces pures. |
| backgroundTertiary | #f1f3f4 | #efebe0 | Warm-neutral aligné au papier. |
| backgroundElevated | #ffffff | #ffffff | Inchangé. |
| backgroundOverlay | rgba(0,0,0,0.5) | rgba(20,16,10,0.55) | Overlay teinté ink, pas neutre pur. |
| text | #1a1a1a | #141210 | Encre typographique, légère chaleur. |
| textSecondary | #495057 | #4a453b | Warm 500. |
| textTertiary | #6c757d | #7a7264 | Warm 400 · captions + timestamps. |
| textInverse | #ffffff | #ffffff | Inchangé. |
| border | #e9ecef | #e5dfd2 | Ligne hairline papier. |
| separator | #f1f3f4 | #eee7d8 | Séparateur intra-liste. |
| card | #ffffff | #ffffff | Inchangé. |
| cardShadow | #000000 | #000000 | Inchangé. |
| headerBackground | #f8f9fa | #f7f4ed | = background, suppression du step inutile. |
| tabBarBackground | rgba(245,245,245,0.82) | rgba(247,244,237,0.78) | Papier translucide, blur renforcé. |
| tabBarActive | #1a1a1a | #141210 | = text. Cohérence. |
| tabBarInactive | rgba(0,0,0,0.35) | rgba(20,18,16,0.4) | Warm inactive. |
| inputBackground | #f1f2f6 | #efebe0 | = bgTertiary, réduction palette. |
| inputText | #1a1a1a | #141210 | = text. |
| inputPlaceholder | #adb5bd | #b0a890 | Warm 300. |
| inputBorder | #e9ecef | #e5dfd2 | = border. |
| icon | #6c757d | #7a7264 | = textTertiary. |
| iconActive | #333333 | #141210 | = text. |
| skeletonBase | #e9ecef | #ebe4d2 | Warm skeleton. |
| skeletonHighlight | #f8f9fa | #f7f1e2 | Shimmer warm. |
| statusBar | 'dark-content' | 'dark-content' | Inchangé. |
| primary | #00a8ff (blue) | #c96442 | Accent cuivre light. Même token, nouvelle sémantique. |
| danger | #e74c3c | #d94836 | Rouge légèrement plus sourd, harmonisé cuivre. |
| success | #10B981 | #3a8d6a | Vert forêt, plus sobre. |
| warning | #F59E0B | #d49028 | Ocre warm. |
| info | #3498db | #4a8aa8 | Bleu-pétrole sourd. |
| accent | #e84393 (hot pink) | #c96442 | Fusion : accent = primary. Une seule couleur d'affordance. |
| successBg | rgba(16,185,129,0.1) | rgba(58,141,106,0.1) | Dérivé. |
| dangerBg | rgba(231,76,60,0.1) | rgba(217,72,54,0.1) | Dérivé. |
| warningBg | rgba(245,158,11,0.12) | rgba(212,144,40,0.12) | Dérivé. |
| infoBg | rgba(52,152,219,0.1) | rgba(74,138,168,0.1) | Dérivé. |
| pressedOverlay | rgba(0,0,0,0.05) | rgba(20,18,16,0.06) | Warm press. |
| focusedBorder | #00a8ff | #c96442 | = primary. Affordance immuable. |
| disabledBg | #f1f3f4 | #efebe0 | = bgTertiary. |
| Token | v0.8.0 | v1.0 Nocturne | Usage |
|---|---|---|---|
| background | #000000 | #000000 | Inchangé. OLED first-class. |
| backgroundSecondary | #111111 | #0b0b0b | Step +1, plus proche du noir. |
| backgroundTertiary | #1a1a1a | #141414 | Step +2, resserré. |
| backgroundElevated | #111111 | #141414 | = bgTertiary. Réduit le nombre de steps. |
| backgroundOverlay | rgba(0,0,0,0.7) | rgba(0,0,0,0.75) | Overlay dark un cran plus opaque. |
| text | #f0f0f0 | #f2efe8 | Papier chaud, moins clinique. |
| textSecondary | #b0b0b0 | #a39d90 | Warm 600. |
| textTertiary | #808080 | #6b6458 | Warm 500. |
| textInverse | #000000 | #0a0806 | Ink warm. |
| border | #1a1a1a | #1e1e1e | +2, visible sans être franc. |
| separator | #151515 | #161616 | Quasi-inchangé. |
| card | #111111 | #0b0b0b | = bgSecondary. |
| headerBackground | #000000 | #000000 | Inchangé. |
| tabBarBackground | rgba(10,10,10,0.85) | rgba(10,10,10,0.75) | Plus translucide — blur plus fort. |
| tabBarActive | #ffffff | #f2efe8 | = text. |
| tabBarInactive | rgba(255,255,255,0.4) | rgba(242,239,232,0.4) | Dérivé text. |
| inputBackground | #1a1a1a | #0b0b0b | = card. Reconsolidation. |
| inputBorder | #222222 | #1e1e1e | = border. |
| inputPlaceholder | #555555 | #6b6458 | = textTertiary. |
| inputText | #f0f0f0 | #f2efe8 | = text. |
| icon | #808080 | #6b6458 | = textTertiary. |
| iconActive | #f0f0f0 | #f2efe8 | = text. |
| skeletonBase | #111111 | #141414 | Step +2. |
| skeletonHighlight | #1a1a1a | #1c1c1c | Shimmer. |
| statusBar | 'light-content' | 'light-content' | Inchangé. |
| primary | #00a8ff | #e8764a | Cuivre dark. Version boostée du #c96442 light pour tenir sur OLED. |
| danger | #e74c3c | #ff5a4a | Boostée pour dark. |
| success | #10B981 | #58c896 | Boosté dark. |
| warning | #F59E0B | #f7b842 | Boosté dark. |
| info | #3498db | #5ab0d8 | Boosté dark. |
| accent | #e84393 | #e8764a | = primary. Une seule couleur. |
| successBg | rgba(16,185,129,0.18) | rgba(88,200,150,0.18) | Dérivé. |
| dangerBg | rgba(231,76,60,0.18) | rgba(255,90,74,0.15) | Dérivé. |
| warningBg | rgba(245,158,11,0.2) | rgba(247,184,66,0.15) | Dérivé. |
| infoBg | rgba(52,152,219,0.18) | rgba(90,176,216,0.15) | Dérivé. |
| pressedOverlay | rgba(255,255,255,0.08) | rgba(242,239,232,0.06) | Dérivé text. |
| focusedBorder | #00a8ff | #e8764a | = primary. |
| disabledBg | #1a1a1a | #141414 | = bgTertiary. |
| Token | v0.8.0 | v1.0 | Usage |
|---|---|---|---|
| premium | #f7b42c | #e4b76a | Or cuivré, harmonisé accent (au lieu du jaune saturé). |
| pro | #1a1a1a | #141210 | = ink. Cohérence. |
| onLight | #1a1a1a | #141210 | = ink. |
| onDark | #ffffff | #f2efe8 | = paper. |
Règle Nocturne — les gradients Memory (white/black/blue/red/orange) restent user-facing créatifs, ils sont la matière que le créateur met dans sa mémoire. Ils ne contaminent jamais le chrome. On réduit les gradients système à 1 primary + 1 premium + 1 dominant (nouveau).
| Token | v0.8.0 | v1.0 | Usage |
|---|---|---|---|
| white | [#fff, #f8f9fa] | [#fff, #f7f4ed] | Memory. Retombe sur papier. |
| black | [#000, #1a1a1a] | [#000, #141210] | Memory. Retombe sur ink. |
| blue | [#667eea, #764ba2] | [#667eea, #764ba2] | Memory — inchangé (matière créative). |
| red | [#f093fb, #f5576c] | [#f093fb, #f5576c] | Memory — inchangé. |
| orange | [#ff9a56, #ff6a88] | [#ff9a56, #ff6a88] | Memory — inchangé. |
| primary | [#00a8ff, #0081c4] | [#e8764a, #c96442] | Système. Réservé CTA premium. |
| premium | [#f7b42c, #fc575e] | [#e4b76a, #c96442] | Or → cuivre. Un seul gold-to-copper. |
| success | [#10B981, #059669] | [#58c896, #3a8d6a] | Dérivé. |
| danger | [#e74c3c, #c0392b] | [#ff5a4a, #d94836] | Dérivé. |
| dominantOverlay NEW | — | dyn 15% | Ajout justifié par Q2 · la teinte dominante extraite d'une photo plein-écran colore uniquement le gradient bottom d'overlay. Format : [transparent, rgba(dom, 0.15)]. Passe en prop à GradientOverlay via dominant. |
Aucune valeur ne bouge. none 0, xxs 2, xs 4, sm 8, md 12, lg 16, xl 20, xxl 24, xxxl 32, huge 40, mega 48, giga 64 — la grille 8-pt reste le sol.
| Token | v0.8.0 | v1.0 | Usage |
|---|---|---|---|
| none | 0 | 0 | Inchangé. |
| sm | 4 | 4 | Inchangé · badges stencil. |
| md | 8 | 8 | Inchangé · inputs default. |
| lg | 12 | 12 | Inchangé · standard Collabz (cards, boutons). |
| xl | 16 | 14 | Très léger resserrement éditorial. |
| xxl | 20 | 18 | Modals petites. |
| modal | 25 | 22 | Bottom sheets + grandes modales. 25 était trop arrondi vs l'éditorial. |
| pill | 9999 | 9999 | Inchangé — chips, avatars, FAB. |
Nocturne enlève Playfair Display (remplacée par Fraunces, meilleure pour la variation opsz) et Oswald (non-utilisée 90% du temps, le besoin "impact UPPER" est absorbé par Fraunces 800). Dancing Script est conservée strictement pour Memory templates user-facing. Poppins devient Inter pour UI — Poppins est daté en 2026.
| Clé | v0.8.0 | v1.0 | Usage |
|---|---|---|---|
| poppins → inter | Poppins 300/400/500/600/800 | Inter 400/500/600/700/800 | Clé renommée · tout le body + label + caption UI. |
| playfair → fraunces | Playfair 400/600/700 | Fraunces 400/600/700/800 + italic 400/700 | Display + headings editorial. OpSize variable. |
| oswald | Oswald 400/600/700 | removed | Usage absorbé par Fraunces 800. |
| dancing | Dancing 400/700 | Dancing 400/700 | Inchangé. User-facing Memory uniquement. |
| mono NEW | — | JetBrains Mono 400/500/600 | Ajout justifié · meta éditoriale (timestamps, km, N°, uppercase captions). Signature visuelle forte, lisible à 10px. |
Migration mentale : fontFamilies.poppins.regular devient fontFamilies.inter.regular (le shim est trivial : rename + re-map expo-font).
L'échelle modulaire 10 → 48 reste. line-heights tight/normal/relaxed = 1.2/1.5/1.7. letter-spacing inchangé. Aucune rupture de layout côté RN.
Les clés gardent exactement les mêmes noms. Seule la fontFamily ré-aiguillée.
| Preset | v0.8.0 | v1.0 | Note |
|---|---|---|---|
| h1 | poppins.bold 36/1.2/-0.5 | fraunces.bold 36/1.2/-0.5 | Serif éditorial. |
| h2 | poppins.bold 30/1.2/-0.5 | fraunces.bold 30/1.2/-0.5 | Serif. |
| h3 | poppins.semibold 24/1.2/0 | fraunces.semibold 24/1.2/0 | Serif. |
| h4 | poppins.semibold 20/1.2/0 | fraunces.semibold 20/1.2/0 | Serif. |
| body | poppins.regular 16/1.5 | inter.regular 16/1.5 | Sans. Lisibilité prime. |
| bodyBold | poppins.semibold 16/1.5 | inter.semibold 16/1.5 | Sans. |
| bodySmall | poppins.regular 14/1.5 | inter.regular 14/1.5 | Sans. |
| caption | poppins.regular 12/1.5/0.5 | inter.regular 12/1.5/0.5 | Sans. |
| label | poppins.semibold 14/1.2/0.5 | inter.semibold 14/1.2/0.5 | Sans. |
| display | playfair.bold 48/1.2/-0.5 | fraunces.bold 48/1.2/-0.5 italic | Italic par défaut · signature Nocturne (Q1 plan recommandé). |
| meta NEW | — | mono.medium 11/1.4/1 | Ajout · remplace les usages de caption pour timestamps/km/badges uppercase. Évite d'abuser de caption pour deux sémantiques différentes. |
Shadows atténuées. Nocturne mise sur les steps de surface (bg → bgSecondary → bgTertiary) plutôt que sur des drops. En dark, shadows = 0 opacity (steps uniquement). En light, shadows réduites de 50%.
| Token | v0.8.0 | v1.0 light | v1.0 dark |
|---|---|---|---|
| none | 0 | 0 | 0 |
| subtle | 0,1,.05,2 · elev 1 | 0,1,.04,3 · elev 1 | 0,0,0,0 · step +1 |
| default | 0,2,.1,8 · elev 4 | 0,2,.06,12 · elev 3 | 0,0,0,0 · step +2 |
| prominent | 0,4,.15,16 · elev 8 | 0,8,.08,24 · elev 6 | 0,0,0,0 · step +2 + border hairline primary |
| Token | v0.8.0 | v1.0 | Note |
|---|---|---|---|
| duration.fast | 150 | 140 | Léger gain de perceived speed. |
| duration.base | 250 | 220 | Idem. |
| duration.slow | 400 | 360 | Éditorial = un peu moins lent. |
| duration.slower | 600 | 600 | Inchangé. |
| easing.* | standard/decelerate/accelerate/sharp | inchangé | Courbes conservées. |
| spring.* | gentle/default/bouncy/snappy | inchangé | Configs conservées. |
Aucune modification. Mêmes valeurs, même typage, même export. Ces tokens sont structurels, pas stylistiques.
Pour chacun : specimen dark (default) — variants & états, tokens consommés, confirmation API inchangée, ce qui change. Le light-mirror suit les mêmes règles d'équivalence de tokens (non répété à chaque atome pour tenir le format digeste).
colors.primary (bg primary), colors.textInverse (fg primary)colors.backgroundTertiary (bg secondary)colors.text, colors.textSecondary (ghost)radius.lg, spacing.sm/md/lg/xl/xxlfontFamilies.inter.regular/semibold, fontSize.sm/md/lgopacity.disabled (0.4 — pas 0.5 comme code actuel)gradients.primary si gradient propChange vs v0.8 : couleur primary (bleu → cuivre), fontFamily (poppins → inter), opacity.disabled 0.5 → 0.4 (aligné tokens), radius inchangé.
surface + hairline
step +1 (dark) / shadow (light)
1px border, bg transparent
primary uniquement
Tokens : colors.card, colors.border, radius.lg, shadows.default, spacing.md/xl/xxl. API : inchangée (variant, padding, radius, gradient). Change : en dark, elevated passe de shadow → step de surface + border hairline. Plus de "glow" parasite.
Tokens : motion.spring.default / snappy, opacity.pressed (0.7), hitSlop.*. API : inchangée. Change : aucun — comportement conservé 1:1, seul le token motion.duration.fast (150→140) influence secondairement la perception.
Tokens : colors.backgroundElevated, colors.success/danger/info/warning, radius.xl (14), shadows.prominent, spacing.md/lg. API : inchangée. Change : radius resserré (14 au lieu de 16), icônes semantic circulaires (au lieu d'emoji), border-left 3px de la couleur sémantique (langage Banner hérité).
Tokens : colors.backgroundElevated (rgba + blur), colors.border, radius.pill, typography.meta (NEW). API : inchangée. Change : mono UPPER au lieu de body — lecture éditoriale de l'acknowledgment système.
API : même props existantes conservées. Ajout opt-in de dominant — zéro breaking change.
Change : h1-h4 + display passent en Fraunces (v0.8 Playfair). Display italic par défaut (Q1). Ajout meta preset.
Change : focused border cuivre (= primary token). Variant search = pill radius. Label en Inter semibold (v0.8 Poppins). Helper/error en caption preset.
Cette action est irréversible. Ton post disparaîtra pour tous les followers.
Change : radius.modal 25 → 22. Handle de sheet plus discret (40×4 au lieu de 50×5). Close-button circulaire (pattern iOS native).
Change : premium or-cuivré (#e4b76a, + chaud qu'avant). Verified passe de bleu → outline cuivre (cohérent avec fusion primary=accent). Pro inchangé (ink). Uppercase en Inter semibold — plus Poppins.
Change : fallback gradient Memory-blue conservé (il vit déjà côté user). Ring gradient stories : bleu→red Memory gradient inchangé. Online-dot green passe à #58c896 (dark) / #3a8d6a (light).
Change : base/highlight warm-tinted (match papier / ink). skeletonBase dark passe de #111 → #141414, highlight → #1c1c1c. Plus doux, plus papier.
Change : color token default = separator (au lieu de border parfois confus dans legacy). Aucune prop changée.
Change : on-state = primary cuivre (v0.8 bleu). Knob-on passe de blanc → accentInk (contraste + chaud).
Change majeur : inversion noir/blanc au lieu de solid primary. Selected = bg=text, fg=bg. Unselected = transparent + hairline. Plus de couleur gratuite — zéro chip coloré (adieu le jaune/orange/bleu cohabitant de l'écran Lieux).
Change : chevron passe de bleu → textTertiary. Border radius plus. variant="danger" — texte cuivre danger, pas emoji. Icons Feather (via ThemedIcon) inchangés.
Commence une conversation avec un autre créateur — ils apparaîtront ici.
Change : title en Fraunces italic (signature Nocturne), ton conserve "tu" casual + CTA verbale ("Découvrir" ≠ "Voir les créateurs"). Icon size lg (48). Pas d'emoji.
Change : left-edge 3px reste (seul endroit du système avec accent-border). Fond muted semantic dérivé des nouvelles couleurs. Liens inline en cuivre (= primary).
Change : rien de fonctionnel. Color default reste text. Feather conservé côté RN, Lucide côté web mirror. Ici on retire le fallback "glyphe Collabz swirl" qui traîne dans 3 écrans — remplacé par Feather activity.
UserRow, NotificationRow, PostCard. Même API, même imports. L'éditorial redescend jusqu'aux petites rangées.
Tokens : spacing.lg padding, colors.separator border-bottom, typography.bodyBold name, typography.meta subtitle (NEW). API : inchangée. Change : subtitle passe de caption (Inter 12) → meta (Mono 11 UPPER) — signature Nocturne, lecture éditoriale.
Tokens : colors.primary pour unread dot (vs bleu v0.8), rgba(primary, 0.04) fond unread ligne. API : inchangée. Change : quotes utilisateur en Fraunces italic — invite éditoriale. Emoji conservés uniquement s'ils viennent du contenu système textuel (pas chrome).
Tokens : colors.card, radius.xl (14), spacing.lg padding, typography.h3 body bold title, typography.body description, typography.meta timestamps. API : inchangée (author, timestamp, body, tags, footer). Change : le body peut désormais avoir un "titre" de post qui prend Fraunces si c'est une string longue ≥ 40 car, sinon reste en body. Règle auto-dans-le-composant, pas dans la prop.
Ces cinq patterns sont ad hoc aujourd'hui. On les fige dans le DS — même grammaire Nocturne, mêmes tokens. Ils remplacent des dizaines de lignes dupliquées écran par écran.
<HeaderBar>spacing.lg par défautcolors.background par défaut, override possible pour écrans hero full-bleedGain : les 8 écrans scrollables actuels passent de ~40 LOC de boilerplate chacun à ~8. Dette de "SafeAreaView oublié" ou "keyboard qui couvre le CTA" disparait par construction.
API : icon, label (optionnel → pill si présent), variant (primary/surface), position (bottom-right default, bottom-center), onPress. Tokens : colors.primary, radius.pill, shadows.prominent (avec teinte accent à 50%), spacing.mega (48) depuis safeArea bottom (= au-dessus StickyBottom).
tokens.ts — 1 fichier, ~60 valeurs changées, 3 clés ajoutées (gradients.dominantOverlay, typography.meta, fontFamilies.mono), 1 clé retirée (fontFamilies.oswald).fontFamilies.poppins → inter : rename + re-map expo-font.design/*.tsx : réécritures internes, zéro changement de signature.design/{UserRow,NotificationRow,PostCard}.tsx : idem.design/BackButton.tsxdesign/HeaderBar.tsxdesign/StickyBottom.tsxdesign/ScreenLayout.tsxdesign/FAB.tsxdesign/index.ts — 5 exports à rajouterdesign/types.ts — 5 interfaces à ajouterspacing, iconSize, hitSlop, zIndex, opacity, hapticPatterns, breakpoints.@/design reste le barrel unique.ds.collabz.link) — régénération auto à partir de tokens.ts.