Le langage visuel
d'AlfyChat.
Le système de design complet : logo, typographies, palette de couleurs, composants et aperçus d'interface. Une référence unique pour garder une marque cohérente, partout.
06
Sections
40+
Composants
12
Couleurs clés
v2.0
Guidelines
Logo
Marque, icône et règles d'usage sur tous les supports.
Règles d'usage
Typographie
Les familles qui portent la voix d'AlfyChat.
Krona One
ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789
Messagerie
Sécurisée
AlfyChat
La communication privée
font-family-name: --font-krona
Google Fonts: Krona One
Corps de texte standard — 16px / 1rem
Labels et libellés — 14px / 0.875rem
Noms d'utilisateur, titres UI
Texte secondaire — métadonnées, timestamps
font-family-name: --font-geist-sans
Google Fonts: Geist
const message = "AlfyChat 🔐";
token · timestamp · hash · version · id
font-family-name: --font-geist-mono
Google Fonts: Geist Mono
Couleurs
Cliquez sur une couleur pour copier sa variable CSS.
Palette principale
Couleurs graphiques
Composants
Boutons, formulaires, cartes, et tous les primitives shadcn/ui.
Boutons
Variantes
Tailles
Avec icône
États
Badges
Avatars & Présence
Champs de saisie
Switch & Toggle
Tabs
Cards
Alertes
Progress & Skeleton
Téléchargement — 72%
Upload — 38%
Tooltips
Icônes
Flaticon UIcons — bold-rounded (fi-br-*)Border Radius
Composants Chat
Briques spécifiques à la messagerie : messages, entrées, listes.
Items de message
message-item.tsxSalut ! T'as vu la nouvelle fonctionnalité ? 🎉
Oui c'est vraiment bien fait ! 👌
Le chiffrement E2E est enfin stable 🔐
Exactement ! Les clés éphémères c'est bluffant 🚀
rapport-audit-2026.pdf
2.4 MB · PDF
Rendu Markdown
markdown-renderer.tsxGras, italique, souligné, barré
Code : const msg = "AlfyChat"
typescript
const encrypt = "E2EE-256";
Barre de saisie
Popover de mention (@mention)
Alice
alice42
Alex
alexdev
Invitation serveur embed (invite-embed.tsx)
Invitation à un serveur AlfyChat
AlfyZone
Barre d'appel (call-bar.tsx)
État : appel en cours
État : connecté
Barre vocale (voice-control-bar.tsx)
Appel entrant (incoming-call-dialog.tsx)
Alice
Appel vocal entrant…
Liste des canaux
channel-list.tsxListe des membres
member-list.tsxProfil utilisateur
user-profile-popover.tsxJohnDoe
@johndoe
🛡️ Dev full-stack passionné de sécurité et vie privée. AlfyCore contributor.
Panneau amis
friends-panel.tsxAlice
🎵 Musique
Rex42
AFK
Panneau de recherche
search-panel.tsx2 résultats
Le chiffrement E2E est enfin stable 🔐
Le niveau 3 de chiffrement est en clés éphémères.
Vue Forum
forum-view.tsxSuggestions pour le chiffrement niveau 4 ?
Bug : notification doublée parfois
Ajout du thème clair sur mobile
Vue Galerie
gallery-view.tsxNavigation mobile
mobile-bottom-nav.tsxSquelette de chargement
server-page-skeleton.tsxContextes — Aperçus réels
Les composants assemblés dans leurs vraies conditions d'usage.
Barre de message (Chat interactif)
Interface complète (Layout)
Panneau utilisateur (User Panel)
JohnDoe
🎮 En train de jouer…