unOS Design Reference Kit - Phase 1 + 2

Mobile 390pt

1. Palette Couleurs

5 couleurs semantiques + 12 types ontologiques + indigo Miroir. Asset Catalog avec variantes light/dark.

Couleurs Semantiques

primaryLight: #1a1a2e / Dark: #b8c0e8
accentLight: #e94560 / Dark: #ff7b8f
surfacesystemBackground
surfaceElevatedsecondarySystemBg
text.label
textSecondary.secondaryLabel
mirrorIndigoADR-011 — Miroir only
connection.systemGray3

Couleurs Nodes — 3 types V1

Fond card = 15% saturation. Badge = couleur pleine + texte noir (WCAG AA >= 4.5:1 garanti light ET dark).

PENSEE Idee de projet pour l'ete
TACHE Appeler Marc vendredi matin
REUNION Point equipe a 14h

12 Types Ontologiques (Phase 2)

Progression Stade 1 (J1) → Stade 2 (J7) → Stade 3 (J30). DecisionGrape = grape distinct (#7B5EA7), pas systemIndigo (ADR-011).

PENSEEthoughtBlue · S1
TACHEtaskGreen · S1
LIENlinkOrange · S1
QUESTIONquestionYellow · S2
DECISIONdecisionGrape · S2
EVENEMENTeventPink · S2
PERSONNEpersonTeal · S2
LIEUlocationEmerald · S2
PROJETprojectViolet · S3
HABITUDEhabitCyan · S3
EMOTIONemotionRed · S3
RESSOURCEresourceSlate · S3

Palette Miroir

Couleurs reservees au Miroir ceremony (ADR-011). Indigo exclusif — aucune utilisation avant J7.

mirrorIndigo #5856D6 — systemIndigo
miroirVeil black.opacity(0.4)
miroirGradient indigo.opacity(0.8)

2. Typographie

SF Pro partout. SF Pro Rounded pour node labels uniquement (Regle 4).

Insight Title (SF Pro Semibold 16pt)
Font.system(size: 16, weight: .semibold)
Insight Body (SF Pro Regular 15pt)
Font.system(size: 15, weight: .regular)
TYPE LABEL (SF Pro Medium 12pt)
Font.system(size: 12, weight: .medium)
node label (SF Pro Rounded caption)
Font.system(.caption, design: .rounded)
Body text (SF Pro Regular .body)
Font.system(.body)
Monospaced
Font.system(.body, design: .monospaced)

3. Spacing Scale

xs = 4pt
sm = 8pt
md = 16pt
lg = 24pt
xl = 32pt

4. Radius

sm = 4pt
badge = 6pt
node = 8pt
banner = 12pt
card = 16pt

5. Shadow

Card Shadow
offset(0, 2) blur: 8 opacity: 0.08

6. Spring Animation (ADR-003)

Hover sur le cadre pour lancer l'animation. Universal spring: response 0.3, damping 0.7.

Standard — response: 0.3, dampingFraction: 0.7

Miroir Ceremony — response: 0.5, dampingFraction: 0.8

7. 4 Couches Visuelles

Z-index: 0 fond, 1 graphe, 2 interactions, 3 overlays.

Couche 0 — Fond (systemBackground)
Couche 1 — Graphe
Couche 2 — Interactions
Couche 3 — Overlays

8. 6 Etats d'Interaction

Default
Hover (macOS)
Survole-moi
Pressed
Clique-moi
Disabled
Loading
Error

9. Ecran: Today View / Flux

Tab bar 2 onglets (Flux + Connexions) + 3e onglet reserve grise (Stade 3). Barre capture iMessage persistante. Miroir accessible via swipe bord gauche uniquement (jamais un onglet — ADR-UX).

Etat vide (0 nodes)

9:41
Flux
○
Ton espace est vide
Capture ta premiere pensee ci-dessous
Appeler Marc vendredi matin
↑
☰
Flux
⚬
Connexions
◉
—

Avec nodes + classification

9:41
Flux
TACHE Appeler Marc vendredi matin il y a 2 min
PENSEE Idee de projet pour l'ete — apprendre le piano il y a 15 min
REUNION Point equipe a 14h il y a 1h
PENSEE La lumiere ce matin etait belle il y a 3h
Qu'as-tu en tete ?
↑
☰
Flux
⚬
Connexions
◉
—

10. Ecran: Capture (champ actif)

Tap sur barre → clavier monte, barre de navigation disparait. Placeholder concret.

Champ actif + clavier

9:41
Capture
TACHE Appeler Marc vendredi matin
Acheter des fleurs pour|
Clavier iOS

Post-capture: depose fwump

9:41
Flux
TACHE Acheter des fleurs pour maman a l'instant
TACHE Appeler Marc vendredi matin il y a 5 min
Qu'as-tu en tete ?
↑
☰
Flux
⚬
Connexions
◉
—
Animation Fwump (representation statique)
1. Node apparait depuis le champ de capture
2. Tombe avec poids (spring response:0.3, damping:0.7)
3. S'installe a sa position dans le flux avec leger rebond
4. Haptic .impact(.medium) au moment de l'impact
5. 3 secondes de silence-presence (pas d'UI supplementaire)

11. Ecran: Recherche (.searchable overlay sur Flux)

Pattern iOS natif .searchable sur le Flux — pas un ecran separe. Debounce 200ms. FTS5 full-text (pas semantique V1). Cmd+F sur iPad.

Recherche vide (placeholder)

9:41
Flux
🔍 Rechercher...
TACHE Appeler Marc vendredi matin il y a 2 min
PENSEE Idee de projet pour l'ete il y a 15 min
REUNION Point equipe a 14h il y a 1h
Qu'as-tu en tete ?
↑
☰
Flux
⬤
Miroir
◉
Graphe

Saisie active + resultats filtres

9:41
Flux
🔍 projet
2 resultats — debounce 200ms
PENSEE Idee de projet pour l'ete — apprendre le piano il y a 15 min
PENSEE Le projet d'appart avance bien hier
Qu'as-tu en tete ?
↑
☰
Flux
⬤
Miroir
◉
Graphe

Aucun resultat

9:41
Flux
🔍 zxywq
🔎
Aucun resultat — essaie d'autres mots.
Qu'as-tu en tete ?
↑
☰
Flux
⬤
Miroir
◉
Graphe

12. Ecran: Miroir J7 (plein ecran dedie)

ADR-008: ecran plein ecran dedie — pas une modal, pas une card overlay. Acces: swipe bord gauche (geste primaire) + bouton nav bar discret. Indigo exclusif (ADR-011).

Miroir — Insight revele (post-ceremony)

9:41
Miroir
✕
↑ Fascinant
B — Connexion
PENSEE Idee de projet pour l'ete — apprendre le piano il y a 5 jours
⋮⋮⋮
PENSEE La musique me manque depuis le confinement il y a 3 jours
Ces deux pensees partagent un desir de creativite retrouvee.
↓ Je savais
☰
Flux
⬤
Miroir
◉
Graphe

Miroir — En preparation (no-insight)

9:41
Miroir
✕
⬤
Ton Miroir se prepare.
Encore 3 jours de pensees
☰
Flux
⬤
Miroir
◉
Graphe

13. TabView 3 Onglets

Flux (central, default), Miroir (dot indigo si seuils atteints), Graphe (grise reserve Stade 3 en V1).

Flux actif (default)

☰
Flux
⬤
Miroir
◉
Graphe

Miroir actif + dot indigo

☰
Flux
⬤
Miroir
◉
Graphe

14. Animations Signature (Phase 2)

3 animations + ceremony Miroir. Cliquer "Rejouer" pour lancer les demos CSS.

14.1 — Depose Fwump

"Comme une pierre dans du sable." Haptic .impact(.medium).
Debounce depose = 300ms (ADR-017). 3s silence protege post-depose.

TACHE Acheter du pain a l'instant
spring(response:0.3, dampingFraction:0.7) + scale(0→1) + opacity(0→1)
Sequence:
1. Texte valide → node apparait scale(0.0) + opacity(0.0)
2. Spring standard → scale(1.0) + opacity(1.0)
3. Le node "tombe" avec un poids visuel (atterrissage, pas un pop)
4. Haptic .impact(.medium) simultane
5. 3 secondes de silence protege (aucun element UI ne bouge)

14.2 — Pulsation Bord Gauche J5

Bande indigo 3px, bord gauche. Pulsation ephemere 2s, une seule fois a J5.
Invite a swiper vers le Miroir sans le tutorialiser. Le mystere reste.

2s pulsation ephemere puis disparition
Reduce Motion: pas de pulsation — bande statique 2s puis disparition.

14.3 — Classification Reveal

TypeBadge invisible 2s apres depose → emerge scale(0.3→1.0) + fade-in 0.3s.
Fond NodeView se teinte a 3% de la couleur du type. Haptic .impact(.light).
Implementation: async Task.sleep(2s) cancellable (ADR-022).

TACHE Rappeler le dentiste a l'instant
2s delai → scale(0.3→1.0) spring + fond teinte 3%
Reduce Motion: apparition instantanee sans scale, fond teinte directement.

14.4 — Miroir Ceremony (9 phases CeremonyPhase)

Total ~1.5s pour la sequence complete. J7: non-skipable. J8+: bouton skip apres 2s minimum (ADR-018).
Reduce Motion: pas d'animation logo, fade simple, texte sequentiel + haptic heavy preserve.

0. hidden
1. veil
3. text
4. count
5. pause
6. reveal
7. emerge
8. insight
7 jours de pensees
23
INSIGHT
Connexion decouverte entre tes pensees...
~1.5s sequence: veil → logo → text → count → pause → reveal → emerge → insight
Durees par phase:
1. veil — fond s'assombrit (fade-in 0.3s)
2. logo — stroke-dashoffset "unOS" (1.2s → compresse pour demo)
3. text — "7 jours de pensees" (fade-in 0.4s)
4. count — count-up nodes (0.6s)
5. pause — silence (0.3s)
6. reveal — gradient indigo bottom-up (0.8s)
7. emerge — MiroirCard slide-up spring(0.5, 0.8)
8. insight — lecture + interactions
Haptic: .impact(.heavy) — celebration fortissimo (reserve Miroir uniquement)

Tokens Swift Reference

Fichier: ios/unOS/Resources/DesignTokens.swift

Asset Catalog: ios/unOS/Resources/Assets.xcassets/ — 18 color sets (5 semantiques + 12 types + NodeReunion legacy)

Preview: ios/unOS/Preview Content/DesignTokensPreview.swift

ADRs documentes: ADR-002 (DesignTokens.swift source de verite), ADR-003 (Spring universelle), ADR-004 (Color.node(type:) dynamique — 12 types), ADR-007 (Sequence Miroir 8 etapes), ADR-008 (Ecran Miroir plein ecran), ADR-009 (Asset Catalog couleurs), ADR-011 (Indigo reserve Miroir — DecisionGrape distinct), ADR-017 (Debounce depose 300ms), ADR-018 (Skip Miroir 2s J8+), ADR-022 (TypeBadge async Task.sleep)