BRAND · GUIDELINES · v2.0

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.

Logo Typographie Couleurs Composants Chat Contextes

Sections

40+

Composants

Couleurs clés

v2.0

Guidelines

01 / 06

Logo

Marque, icône et règles d'usage sur tous les supports.

Icône — fond sombre

Logo — fond sombre

Logo — fond clair

Avec titre — fond clair

Règles d'usage

Utiliser sur fond uni contrasté

Respecter les proportions d'origine

Espace de protection = hauteur logo ÷ 4

Ne pas déformer ni étirer

Ne pas modifier la couleur de la marque

Ne pas ajouter d'effets, ombres ou filtres

02 / 06

Typographie

Les familles qui portent la voix d'AlfyChat.

--font-kronaTitres & marqueKrona One

Krona One

ABCDEFGHIJKLMNOPQRSTUVWXYZ

0123456789

H1 · 3xl bold

Messagerie

H2 · 2xl bold

Sécurisée

H3 · xl bold

AlfyChat

Base · base

La communication privée

font-family-name: --font-krona

Google Fonts: Krona One

--font-geist-sansCorps du texteGeist Sans

Regular 400

Corps de texte standard — 16px / 1rem

Medium 500

Labels et libellés — 14px / 0.875rem

Semi-Bold 600

Noms d'utilisateur, titres UI

Muted · sm

Texte secondaire — métadonnées, timestamps

font-family-name: --font-geist-sans

Google Fonts: Geist

--font-geist-monoCode & tokensGeist Mono

const message = "AlfyChat 🔐";

token · timestamp · hash · version · id

v2.0.1a3f9b2cE2E-256SHA-512

font-family-name: --font-geist-mono

Google Fonts: Geist Mono

03 / 06

Couleurs

Cliquez sur une couleur pour copier sa variable CSS.

Palette principale

Couleurs graphiques

04 / 06

Composants

Boutons, formulaires, cartes, et tous les primitives shadcn/ui.

Boutons

Variantes

Tailles

Avec icône

États

Badges

DefaultSecondaryOutlineDestructiveAdminPremiumEn ligneUrgentE2E activéEn attente

Avatars & Présence

Ssm

Ddefault

Llg

Champs de saisie

Switch & Toggle

Notifications activées

Mode silencieux (sm)

Désactivé

Tabs

Liste de vos conversations directes et serveurs.

Cards

Serveur AlfyZone

Communauté tech francophone autour des nouvelles technologies.

Sécurité E2E

Chiffrement activé

Tous les messages sont chiffrés

AlfyChat Premium

Toutes les fonctionnalités

Qualité vidéo 4K

Stockage illimité

Émojis personnalisés

Alertes

Vérification en deux étapes activée

Votre compte est protégé par 2FA.

Connexion suspecte détectée

Tentative bloquée depuis un appareil inconnu.

Progress & Skeleton

Téléchargement — 72%

Upload — 38%

Tooltips

Icônes

Flaticon UIcons — bold-rounded (fi-br-*)

Message

Envoyer

Emoji

Shield

Verrou

User

Ajouter

Groupe

Chercher

Notif

Réglages

Canal

Micro

Audio

Ajouter

Suppr.

Éditer

Valider

Globe

Urgent

Étoile

Serveur

Accueil

Border Radius

2xl

3xl

full

05 / 06

Composants Chat

Briques spécifiques à la messagerie : messages, entrées, listes.

Items de message

message-item.tsx

AliceAujourd'hui à 10:24

Salut ! T'as vu la nouvelle fonctionnalité ? 🎉

10:25

Oui c'est vraiment bien fait ! 👌

Rex4210:26

Le chiffrement E2E est enfin stable 🔐

Alice répondait àRex42Le chiffrement E2E est enfin stable…

Alice10:27

Exactement ! Les clés éphémères c'est bluffant 🚀

📄

rapport-audit-2026.pdf

2.4 MB · PDF

Rex42 a rejoint le serveur

Rendu Markdown

markdown-renderer.tsx

Gras, italique, souligné, ~~barré~~

Code : const msg = "AlfyChat"

typescript

const encrypt = "E2EE-256";

La vie privée est un droit fondamental.

Spoiler :contenu masqué

Barre de saisie

Réponse à Rex42 — Le chiffrement E2E…

Popover de mention (@mention)

Bravo @Al

Invitation serveur embed (invite-embed.tsx)

Invitation à un serveur AlfyChat

AlfyZone

42 en ligne·452 membres

Barre d'appel (call-bar.tsx)

État : appel en cours

Appel en cours…

Alice

État : connecté

Vocal connecté02:47

Alice

Barre vocale (voice-control-bar.tsx)

Vocal actif3 membres

Appel entrant (incoming-call-dialog.tsx)

Alice

Appel vocal entrant…

Refuser

Accepter

Vidéo

Liste des canaux

channel-list.tsx

Liste des membres

member-list.tsx

Profil utilisateur

user-profile-popover.tsx

JohnDoe

@johndoe

🛡️ Dev full-stack passionné de sécurité et vie privée. AlfyCore contributor.

🛡️ Admin⭐ Premium🐛 Bug Hunter

Actif · Rejoint il y a 2 ans

Panneau amis

friends-panel.tsx

Alice

🎵 Musique

Rex42

AFK

Panneau de recherche

search-panel.tsx

2 résultats

Rex42Aujourd'hui à 10:26

Le chiffrement E2E est enfin stable 🔐

MoiHier à 18:12

Le niveau 3 de chiffrement est en clés éphémères.

Vue Forum

forum-view.tsx

Suggestions pour le chiffrement niveau 4 ?

Discussionpar Rex42·12 réponses

Bug : notification doublée parfois

Bugpar Alice·5 réponses

Ajout du thème clair sur mobile

Idéepar JohnDoe·8 réponses

Vue Galerie

gallery-view.tsx

Navigation mobile

mobile-bottom-nav.tsx

Squelette de chargement

server-page-skeleton.tsx

06 / 06

Contextes — Aperçus réels

Les composants assemblés dans leurs vraies conditions d'usage.

Barre de message (Chat interactif)

général

Bienvenue sur AlfyZone !

Alice10:24

Salut ! T'as vu la nouvelle fonctionnalité ? 🎉

10:25

Oui ! Le chiffrement de bout en bout est vraiment top.

Alice10:26

Et la qualité d'appel est incroyable 🔥

10:27

J'envoie le lien là 🔗

Interface complète (Layout)

général

Salut ! T'as vu la nouvelle fonctio…

Oui ! Le chiffrement de bout en bou…

Et la qualité d'appel est incroyabl…

Message #général…

Panneau utilisateur (User Panel)

JohnDoe

🎮 En train de jouer…

Le langage visueld'AlfyChat.

Logo

Typographie

Couleurs

Composants

Composants Chat

Contextes — Aperçus réels

Le langage visuel
d'AlfyChat.