Palette Bécik¶

Nuancier « capture-ready » avec tokens, classes Tailwind et codes de couleurs. (Page statique générée automatiquement.)

Marque

Couleurs de marque (Bécik)

Tokens hex stables, à utiliser comme références de marque.

Bécik Blue 900

--becik-blue-900

Fond sombre (login/TOTP), sections maîtresses, contraste.

#005081

Bécik Blue 700

--becik-blue-700

Primaire (CTA, actions principales).

#147BB6

Bécik Blue 500

--becik-blue-500

Accent secondaire (badges, pills, liens, highlights).

#3CABE0

Bécik White

--becik-white

Contraste sur fonds bleus.

#FFFFFF

Bécik Black

--becik-black

Texte fort / contraste maximum (rare).

#0D0D0D

Dérivés

Tokens dérivés (Bécik)

Tokens calculés (ex: color-mix) pour états, surfaces et bordures.

Bécik Primary

--becik-primary

Alias de la couleur primaire (marque).

#147BB6

Bécik Accent

--becik-accent

Alias de l’accent secondaire.

#3CABE0

Bécik Ink

--becik-ink

Encre / bleu profond pour fonds ou éléments très marqués.

#005081

Bécik Primary Soft

--becik-primary-soft

Surface soft pour hover/selected, background léger.

#E8F2F8

Bécik Primary Border

--becik-primary-border

Bordure liée au primaire (états/inputs).

#D5E7F2

Services

Couleurs de services

Palette par service (hors bleu/gris). Utiliser 600/700 pour actions (texte blanc), et 50/100 pour surfaces.

Maintenance

Maintenance 700

--becik-maintenance-700

Maintenance — actions fortes / hover appuyé.

#C2410C

Maintenance 600

--becik-maintenance-600

Maintenance — actions / icônes.

#EA580C

Maintenance 100

--becik-maintenance-100

Maintenance — surfaces (cards, highlights).

#FFEDD5

Maintenance 50

--becik-maintenance-50

Maintenance — fond très léger.

#FFF7ED

Maintenance Page BG

--becik-maintenance-page-bg

Maintenance — fond de page (pale, mélangé avec gris).

#F5F6F6

Positionnement

Positionnement 700

--becik-positionnement-700

Positionnement — actions fortes / hover appuyé.

#0F766E

Positionnement 600

--becik-positionnement-600

Positionnement — actions / icônes.

#0D9488

Positionnement 100

--becik-positionnement-100

Positionnement — surfaces (cards, highlights).

#CCFBF1

Positionnement 50

--becik-positionnement-50

Positionnement — fond très léger.

#F0FDFA

Positionnement Page BG

--becik-positionnement-page-bg

Positionnement — fond de page (pale, mélangé avec gris).

#F1F7F9

Pression

Pression 700

--becik-pression-700

Pression — actions fortes / hover appuyé.

#15803D

Pression 600

--becik-pression-600

Pression — actions / icônes.

#16A34A

Pression 100

--becik-pression-100

Pression — surfaces (cards, highlights).

#DCFCE7

Pression 50

--becik-pression-50

Pression — fond très léger.

#F0FDF4

Pression Page BG

--becik-pression-page-bg

Pression — fond de page (pale, mélangé avec gris).

#F1F7F8

Tokens UI (Tailwind / shadcn)

Ces tokens sont utilisés via classes comme bg-background, text-foreground, border-border, etc.

Background

--background

Fond global.

#FFFFFF

Foreground

--foreground

Texte principal sur background.

#020817

Card

--card

Fond des cartes/containers.

#FFFFFF

Card Foreground

--card-foreground

Texte sur card.

#020817

Muted

--muted

Surface neutre (sections secondaires).

#F1F5F9

Muted Foreground

--muted-foreground

Texte secondaire / descriptions.

#64748B

Secondary

--secondary

Surface secondaire (boutons secondary).

#F1F5F9

Border

--border

Bordures neutres.

#E2E8F0

Input

--input

Bordure/trait des inputs.

#E2E8F0

Neutres

Neutres (Slate)

Teintes neutres utiles pour les fonds de page.

Slate 50

--slate-50

Fond très clair (ex: pages).

#F8FAFC

Slate 100

--slate-100

Fond clair (un peu plus foncé que slate-50).

#F1F5F9

Toasts

Toasts (Sonner)

Couleurs dédiées aux notifications (succès/erreur/etc.).

Toast Success BG

--toast-success-bg

Fond du toast succès.

#D1FADF

Toast Success Text

--toast-success-text

Texte du toast succès.

#065F46

Toast Error BG

--toast-error-bg

Fond du toast erreur.

#FEE2E2

Toast Error Text

--toast-error-text

Texte du toast erreur.

#991B1B

Toast Warning BG

--toast-warning-bg

Fond du toast warning.

#FEF9C3

Toast Warning Text

--toast-warning-text

Texte du toast warning.

#92400E

Toast Info BG

--toast-info-bg

Fond du toast info.

#DBEAFE

Toast Info Text

--toast-info-text

Texte du toast info.

#1E40AF

Assets

Brand assets

Logos et icônes actuellement présents dans /public.

Attribution Strava (guidelines): logo officiel "Powered by Strava", sans modification.

logo.png

logo-carre-v5.png

icon-192.png

pwrdBy_strava_orange (horiz)

Powered by Strava

Exemples d'utilisation dans l'interface Bécik (attribution discrète).

Connexion Strava

Bouton d'association avec attribution.

Import de matériel

Liste des vélos importés depuis votre compte.

Activités récentes

Lien vers les sessions Strava associées.

Dernière synchro: il y a 2h

Exemples

Exemples d'utilisation

Prototype rapide montrant comment appliquer les tokens pour respecter le concept visuel.

Bécik — Exemple de carte

Résumé / description courte

Nouveau

Badge marque

Utilisé pour les éléments d'accent

Source

Source des valeurs: src/app/globals.css et tailwind.config.ts.