PepsGoal
Logo
La flamme dégradée suivie de « Peps » en ink et « Goal » dans le dégradé. Toujours en texte vivant, jamais déformé.
Design system
Du verre givré sur des halos vifs.
Des panneaux translucides, une typo display ronde et grasse, et une couleur par format d’objectif. Voici les fondations, les règles et les composants qui donnent son visage à PepsGoal, sur le web comme sur mobile.
Le ton et le contenu
PepsGoal parle comme un ami qui t’encourage : direct, chaleureux, jamais moralisateur. Ces règles valent pour chaque libellé, chaque état vide et chaque notification.
Tutoiement partout
Phrases courtes et actives : « Valide une action avant minuit pour prolonger ta série de 27 jours. »
L’utilisateur s’appelle « Toi »
Dans les listes, classements et commentaires ; jamais « Vous » ni son propre nom.
Encourager, jamais culpabiliser
Un état vide est un constat positif suivi d’une piste. Une rechute est nommée sobrement, sans reproche.
Vocabulaire maison
flamme, série, gel, Encourager, Progrès, Paliers, Duel.
Casse et nombres
Majuscule en début de libellé seulement. Chiffres avec espace fine (1 284), unités courtes : « 8/12 livres », « encore 9 h ».
Confidentialité dite sobrement
« Message chiffré : sa clé n’est pas sur cet appareil. » Expliquer sans alarmer.
À faire, à éviter
À faire
« Rien de prévu aujourd’hui — Profite de ta journée, ou ajoute une routine. »
« Encourager »
À éviter
« Vous n’avez rien fait aujourd’hui. »
« J’aime », « Liker »
Emoji : du contenu, pas de la décoration
Un emoji n’apparaît que comme icône d’objectif ou de groupe choisie par l’utilisateur, avatar, ou dans ce que les gens écrivent ; jamais en décoration d’interface ou de titre. À l’affichage, chaque emoji est remplacé par son image Fluent (Microsoft, licence MIT) pour un rendu identique sur iOS, Android et le web.
La couleur
Un fond pâle (ou nuit) sous quatre halos flous, des surfaces de verre, une encre à trois niveaux et le dégradé de marque. Chaque nuance existe en clair et en sombre : clique sur une pastille pour copier son nom.
Dégradé de marque
flame-2 → flame → pink
flame-2 → flame → pink
120° sur les boutons, 100° sur le logotype. Il porte le bouton principal, le FAB, mes bulles de message, les jalons et la flamme. Une seule action en dégradé par écran. L’utilisateur peut le remplacer par l’une des 12 couleurs d’accent : les composants lisent toujours ces trois variables, jamais des valeurs en dur.
Fond, encre et verre clair · sombre
Halos et marque
États
Contrastes vérifiés texte sur bg
| Paire | Clair | Sombre | Usage |
|---|---|---|---|
| ink sur bg | 16,4:1 AA | 18,3:1 AA | Texte principal |
| ink-2 sur bg | 9,8:1 AA | 12,7:1 AA | Texte secondaire, labels |
| ink-3 sur bg | 5,7:1 AA | 7,8:1 AA | Méta, placeholders |
| focus sur bg | 5,4:1 AA | 13,3:1 AA | Anneau de focus |
| ok sur bg | 3,7:1 ≥19px gras | 12,1:1 AA | Succès, avec icône |
| danger sur bg | 5,1:1 AA | 7,2:1 AA | Erreur, avec mot ou icône |
Paires connues sous 4,5:1, conservées telles que dans l’app : ok en clair ; elles sont réservées au texte gras de 19 px et plus, aux icônes et aux bordures, et toujours doublées d’un mot ou d’une icône.
Une couleur par format
Chaque type a un aplat t-<type> (bordure gauche de ligne, filet haut de carte, coche, barre, cellule de calendrier) et une encre t-<type>-ink (gros chiffre, puce, icône). Un composant typé reçoit la classe t-routine… qui définit --c et --c-ink ; il ne lit jamais t-* directement.
| Format | Classe | Aplat | Encre clair · sombre | Aperçu |
|---|---|---|---|---|
| Objectif | t-objective | #22D3FF | #00627E · #5FE0FF | Objectif |
| Deadline | t-deadline | #FF4FA3 | #B0005A · #FF7DBB | Deadline |
| Routine | t-routine | #B6FF2E | #3A7300 · #C6FF5C | Routine |
| Abstinence | t-abstinence | #A98BFF | #5530CF · #BFA8FF | Abstinence |
| Mensuel | t-monthly | #FFD23F | #7A4E00 · #FFE07A | Mensuel |
| Limite | t-limit | #FF8A3D | #A33D00 · #FFB07A | Limite |
| Durée | t-duration | #2EF2B0 | #00704F · #5FF5C4 | Durée |
| Mesure | t-measure | #FF7AD9 | #A3007A · #FF9FE4 | Mesure |
| Horaire | t-timed | #E3B98A | #7A4B12 · #F0CFA6 | Horaire |
| Projet | t-project | #4D9BFF | #0B4FC2 · #8CBDFF | Projet |
| Challenge | t-challenge | #FFB000 | #8A5300 · #FFC94D | Challenge |
| Paliers | t-program | #7C8CFF | #2F3FBF · #A9B3FF | Paliers |
| Défi de groupe | t-group | #7CFF6B | #1F7A10 · #9DFF90 | Défi de groupe |
| Duel | t-duel | #FF5A5A | #B3121F · #FF8A8A | Duel |
Huit thèmes
Clair et Sombre suivent le système par défaut, puis trois réglages d’accessibilité déclinés en clair et sombre : Contraste élevé (noir et blanc purs, ombres et halos éteints, bordures de 2px), Daltonien (palette Okabe-Ito, succès en bleu, alerte en vermillon) et Opaque (transparence désactivée). Essaie-les en direct.
- Courir 30 minRoutinelun, mer, ven
- Lire 12 livresObjectif8/12
ImpôtsDeadlineencore 9 h
Aperçu
AjouterAnnulerBloquer
AbstinenceMensuelDuréeDuelGroupe
Enregistré
Limite dépassée
Le thème par défaut : verre translucide sur halos.
Deux voix
Unbounded pour tout ce qui se lit comme un chiffre ou un titre ; Manrope pour le reste. Les titres sont serrés (−0,01 à −0,04 em) et équilibrés ; tous les chiffres qui bougent sont tabulaires. La marque parle fort : libellés, boutons, puces et noms sont en 800.
displayAaUnbounded
500700800
Logotype, salutation, compteurs, titres de carte, de page et de fenêtre.
bodyAaManrope
400500600700800
Texte courant, libellés, boutons, méta. Licence SIL Open Font, polices intégrées.
Échelle display
Garde la flamme allumée.
Journée parfaite !
27
Salut Quentin 👋
8/12
142
Paramètres
Nouvel objectif
Aujourd'hui
PepsGoal
Échelle texte
Fixe tes objectifs, coche-les chaque jour et avance avec tes amis.
3e séance de la semaine, ça commence à rentrer !
Coche tes objectifs du jour pour garder ta série.
Lire 20 pages
Ajouter un objectif
Routine · lun, mer, ven
Nom de l'objectif
Routine
CETTE SEMAINE
Objectifs
Généreux et arrondi
Des pas fins de 4 à 24 px, des rayons généreux et une seule ombre sous le verre, plus deux lueurs de marque.
Espacement
space-44pxÉcart entre points de progression, pastilles serrées.space-66pxÉcart icône ↔ texte dans une puce, gap de jours de semaine.space-88pxÉcart entre boutons d'action, entre filtres.space-1010pxGap des listes d'objectifs, entre tuiles de type.space-1212pxGap interne d'une carte objectif, d'une publication, d'une ligne.space-1414pxGap des grilles de cartes, marge sous un en-tête de carte.space-1616pxGap des formulaires, gouttière mobile.space-1818pxGap de la colonne principale ; padding des cartes objectif et publications.space-2020pxPadding des cartes standard, gouttière desktop.space-2424pxGap entre barre latérale et contenu.Rayons survole pour arrondir
r-xs · 10pxCellules de calendrier, anneau de focus.
r-sm · 12pxPastilles d'emoji, lignes de tâche, jours de semaine, icônes de notif.
r-icon · 14pxPastille d'icône d'objectif (gi), champs, liens de navigation, sélecteurs.
r-md · 16pxLignes d'objectif, tuiles de type, stats, encadrés.
r-lg · 24pxPanneaux et cartes vitrés, barre d'onglets.
r-xl · 28pxFenêtres modales (sheet) ; en haut seulement sur mobile.
r-pill · 999pxBoutons, puces, filtres, segmenté, barres de progression, champs de commentaire.
Profondeur
shadow
sous le verre et les fenêtresshadow-primary
0 8px 24px -10px flameshadow-fab
0 12px 30px -8px flameMise en page
| Token | Valeur | Usage |
|---|---|---|
| sidebar-w | 248px | Largeur de la barre latérale desktop. |
| content-max | 1180px | Largeur maximale de l’application (et de ce site). |
| sheet-w | 580px | Largeur maximale d’une fenêtre modale. |
| bp-mobile | 860px | En dessous : barre latérale masquée, barre d’onglets flottante et FAB. |
Court, vivant, coupable
Les interactions durent 150 ms. Les célébrations sont généreuses. Et tout mouvement se coupe avec prefers-reduced-motion ou le réglage « Animations désactivées ». Clique sur les démonstrations.
Survole-moi
Survol et appui
Translation de −1px sur les boutons, échelle .98 à l’appui.
150 ms · easeValidation
Échelle 1.06 au survol, gerbe d’étincelles et « +N » à la validation.
coche · étincellesFenêtres
Elles montent de 24px avec un léger rebond.
Flamme du héros
Elle oscille doucement autour de sa base.
2,4 s · ease-in-out · infini0:07 / 2:00
Enregistrement vocal
Le point d’enregistrement pulse chaque seconde.
1 s · infiniProgrès
Les barres et anneaux se remplissent à l’apparition (ajout de ce site).
1,4 s · ease-outUn trait, une flamme
Jeu d’icônes maison au trait : grille 24px, trait 2px, bouts et jonctions arrondis, sans remplissage, en currentColor. La flamme est la seule icône pleine et dégradée : logo, série, encouragements, badges, classement. Elle n’est jamais recolorée à la main.
13 · puces
18 · boutons
22 · navigation
26 · tuiles
flamme
Les composants
Du HTML et du CSS, sans framework : chaque composant lit les tokens et reçoit, pour les formats, une classe t-<type>. Ils sont tous vivants ci-dessous.
AjouterAnnulerPlus tardBloquer
Button btn · btn-primary · btn-ghost · btn-danger
Pilule. Un seul btn-primary par écran ; btn-danger toujours derrière une confirmation.
3
IconButton · Fab
Bouton rond de 42px sur glass-strong, pastille pink pour les compteurs. Le FAB mobile porte le dégradé et la lueur shadow-fab.
RoutineObjectifDeadlineAbstinenceMesure+10 flammes
Chip chip t-<type>
Puce 12px/800 : fond --c à 22 %, texte --c-ink, icône 13px.
- Courir 30 minRoutinelun, mer, ven
- Écrans : 2 h maxLimite1 h 20 aujourd’hui
- Lire 12 livresObjectif8/12
GoalItem · CheckButton item t-<type> · check
Ligne d’objectif sur glass-strong, bordure gauche de 5px en aplat. La coche de 50px se remplit à la validation et barre le nom ; les objectifs chiffrés ont un bouton « + Progrès ». Essaie de valider.
Lire 12 livres8/12livres
ObjectifCourir 30 min3/3cette semaine
Routine
Sans cigarette41jours
Abstinence
GoalCard gcard t-<type>
Carte de la grille Objectifs (250px en auto-fill) : filet haut de 5px, gros chiffre metric en encre du type, barre ou points de progression.
Lundi 12 octobre
Salut Quentin
Valide une action avant minuit pour prolonger ta série de 27 jours.
L
M
M
J
V
S
D
27
jours de série
StreakHero
Le haut de l’écran Aujourd’hui : salutation hello, semaine en flammes (gel en t-goal-ink), grande flamme animée et compteur streak.
ProgressRing · ProgressBar
Anneau de 108px pour la journée, barres de 10px en pilule : dégradé de marque par défaut, aplat du type sinon.
Segmented · FilterChip · Switch
Choix exclusifs en pilule, filtres pressés en ink plein, interrupteur flame qui rebondit.
TextField · TypeTile
Champ sur glass-strong, anneau focus à l’activation. Les tuiles de type prennent la couleur du format une fois choisies.
142validations
27jours de série
9gels
Semaine en feu7 jours de série
DuellisteGagner un duel
StatTile · BadgeTile
Chiffre stat en Unbounded tabulaire ; badges obtenus bordés de flame, les autres grisés.
LMLéoil y a 2 h · Amis
30 jours de sérieUn mois sans sauter une séance !
Post · Avatar
Publication du feed avec jalon en dégradé et bouton Encourager. Avatars en dégradé d’accent à 135°, ronds pour une personne, carrés pour un groupe.
Aujourd’hui
On se fait le défi 10 000 pas ?09:12
Je relève, prépare-toi !09:13
Chiffrée de bout en bout
ChatBubble
Les miennes à droite dans le dégradé, celles des autres sur ink à 8 %. Rayon 18px, coin côté auteur à 5px.
Inès t’a encouragé pour « Courir 30 min ».
il y a 5 minRien de prévu aujourd’huiProfite de ta journée, ou ajoute une routine.
Notification · EmptyState
Non lue sur flame à 10 %. Un état vide est un constat positif suivi d’une piste.
Nouvel objectif
Choisis ce que tu veux suivre.
CréerSheet
Fenêtre de 580px max, rayon r-xl, voile scrim flouté ; sur mobile, elle monte du bas.
TabBar · SideNav
Sous 860px, une barre d’onglets flottante en bas ; au-dessus, une barre latérale vitrée de 248px. L’onglet actif passe en ink plein.
Le voir en vrai.
Tous ces composants vivent dans l’application, en clair, en sombre et dans les trois modes d’accessibilité.