CHARTE GRAPHIQUE
L'identité visuelle de Waifly
Tout ce qu'il faut pour concevoir une page Waifly : logo, couleurs, typographie, grille, ombres, mouvement, icônes, composants et thèmes. Waifly a deux interfaces qui partagent une base commune mais ont chacune leurs règles. Choisissez celle que vous concevez.
/brand?vue=site ou /brand?vue=dash
LOGO
Le symbole
Un écran d'ordinateur contenant une puce reliée à trois pistes de circuit, dans un cercle. Il est monochrome : blanc sur un carré noir aux coins arrondis. C'est le même sur les deux interfaces.
Waifly
Sur fond clair : toujours avec son carré noir
Zone de protection et tailles
| Usage | Taille | Arrondi |
|---|---|---|
| Navigation du site | 50 px de haut | 12 px |
| Navbar du dashboard | 40 × 40 px | 12 px |
| Cartes partenaires | 44 × 44 px | 10 px |
| Favicon | 96, 180 px, SVG, ICO | aucun |
| Partage (Open Graph) | 256 × 256 px | aucun |
| Taille minimale | 24 px | 6 px |
Règles
- Laisser autour du symbole un espace libre au moins égal à un quart de sa largeur (tirets ci-dessus).
- Le nom s'écrit Waifly, avec une seule majuscule. « Waifly Host » est réservé aux applications mobiles.
- Ne pas recolorer le symbole, ni en bleu, ni en dégradé, ni avec la couleur d'un thème saisonnier.
- Ne pas le déformer, l'incliner, le détourer ni lui ajouter une ombre ou un halo.
- Ne pas poser le symbole blanc sans son carré noir sur un fond clair.
COULEURS
Bleu nuit et bleu ciel
Une interface sombre ponctuée d'une seule couleur vive. Cliquez sur une couleur pour copier son code. Les noms en bleu sont les variables CSS à utiliser plutôt que les valeurs en dur.
Accent Commun
Fonds et surfaces Site vitrine
Fonds et surfaces Dashboard
Empilement des surfaces
Texte Commun
États Commun
Transparences
| Valeur | Usage |
|---|---|
rgba(255,255,255,.05) | Survol des liens de navigation, des lignes de tableau, puces au repos |
rgba(255,255,255,.1) | Bordures, état actif d'un lien |
rgba(56,177,237,.12) | Fond des badges bleus |
rgba(56,177,237,.25 à .4) | Bordure des badges, bordure de carte au survol |
rgba(0,0,0,.2) | En-tête de tableau |
rgba(0,0,0,.4) | Topbar du site |
Dégradés autorisés
Texte de titre
90°, #38b1ed vers #3498db. Un seul mot-clé par titre.
Élément actif
135°, #38b1ed vers #2d95cc. Puces actives, compteurs.
Règles
- Le bleu
#38b1edest le seul accent. Vert, orange et rouge ne servent qu'à exprimer un état. - Une carte posée sur une surface prend la surface suivante, jamais le fond de page.
- Toujours passer par les variables (
var(--primary-color)), jamais par une valeur en dur. - Pas d'autre dégradé que les trois ci-dessus. Pas de dégradé violet, rose ou arc-en-ciel.
- Pas de fond clair : les deux interfaces sont exclusivement sombres.
TYPOGRAPHIE
Poppins, partout
Une seule famille pour tous les textes, avec Arial en repli. JetBrains Mono est réservée au code, aux adresses de serveur et au mode terminal.
Poppins
JetBrains Mono
Échelle Site vitrine
Free Code Hosting
About Waifly
Why choose us over other hosts?
3.4K+
€4 / month
Starting at €0.00
Waifly Guard, DDoS protection
Our features
Free forever, with no credit card: 300 MB of RAM, 1 GB of storage.
Two nodes in Paris, each an Intel Xeon Gold 6138 with 48 GiB of DDR4 ECC RAM.
Active users
Échelle Dashboard
Waifly
Summary
Delete this server?
my-discord-bot
Tell us what you think
Welcome to your dashboard. Here you can find a quick overview of your account.
Upgrade
Memory
51.75.118.14:25565
Règles
- Interligne 1.6 pour le texte, 1.2 pour les titres.
- Chaque section suit le même motif, centré : eyebrow en capitales bleues, titre H2, paragraphe secondaire.
- Chaque module commence par un titre bleu de 24 px, sans eyebrow.
- Les capitales sont réservées aux eyebrows, aux badges, aux libellés de donnée et au mot « FREE ».
- Toujours l'unité réelle avec un espace insécable :
300 MB,4 vCPU. - Pas d'autre famille de police (Inter, Roboto, Montserrat, Host Grotesk…), même sur une page isolée.
GRILLE ET ESPACEMENTS
Un conteneur de 1200 px
Conteneur centré de 1200 px maximum avec 15 px de gouttière. Les sections empilent fond et surface en alternance, avec 40 à 100 px de marge verticale.
Conteneur centré de 1200 px maximum avec 20 px de marge. Les modules se rangent par deux (50 %), 300 px minimum, séparés de 20 px, et passent sur une colonne en mobile.
Anatomie d'une section Site vitrine
OUR FEATURES
h2 · 32 pxWhy choose us over other hosts?
p · texte secondaireNine runtimes supported across two Paris nodes, from €0 to €16 per month.
Grille de modules Dashboard
Summary
Total servers: 1/1
Notifications
No new notification.
Information
Your panel account is linked by email only.
Contact support
Open a ticket from the chat bubble.
Points de rupture
| Largeur | Comportement |
|---|---|
| ≤ 576 px | Mobile : marges et titres réduits |
| ≤ 640 px | Cartes partenaires réduites à 240 px, écarts resserrés |
| ≤ 768 px | Grilles sur une colonne, titres de section réduits à 24 px |
| ≤ 991 px | La navigation laisse place au menu burger |
| 1200 px | Largeur maximale du contenu |
ARRONDIS ET OMBRES
Des coins doux, des ombres sombres
Plus un élément est grand, plus il est arrondi. Les ombres sont toujours noires et diffuses ; les seules lueurs colorées sont celles des modales et des icônes de popup du dashboard.
Ombres
MOUVEMENT
Des mouvements courts et verticaux
Tout bouge vers le haut au survol, jamais sur le côté. Les durées vont de 0.15 à 0.3 s. Survolez les cartes ci-dessous.
Icônes de carte
| Animation | Valeur |
|---|---|
| Couleurs, fonds | 0.3 s (0.25 s ease sur les composants récents) |
| Bouton fermer | Rotation de 90° en 0.15 s |
| Entrée de modale | scale(.94) translateY(8px) vers scale(1) en 0.28 s, cubic-bezier(.2, 1.1, .4, 1) |
| Toast | Monte de 16 px en fondu, 0.28 s ease |
| Pastille de statut | × 1.3 et halo de 8 px au survol |
| Chargement | Anneau de 40 px, bordure haute bleue, 1 tour par seconde |
- Respecter
prefers-reduced-motion: sans animation, l'interface doit rester complète. - Pas d'animation en boucle hors chargement (pas de rebond, de clignotement ni de parallaxe).
ICÔNES
Uniquement des SVG
Règle : zéro émoji
Aucun émoji ni caractère pictographique dans l'interface, les textes, les boutons, les notifications ou les e-mails : pas de coche, de croix, de flèche, d'étoile ni de burger tapés au clavier. Chaque icône est un SVG du jeu Waifly. Un émoji change d'apparence selon le système, ne prend pas la couleur du texte et ne peut pas être stylé.
À remplacer
| Au lieu de | Utiliser | Code |
|---|---|---|
| Coche, case cochée | WI('check') | |
| Croix, fermer | WI('x') | |
| Burger (trois traits) | WI('menu') | |
| Panneau attention | WI('alert-triangle') | |
| Étoile | WI('star') | |
| Fusée, lancement | WI('rocket') | |
| Cadeau | WI('gift') | |
| Fête, confettis | WI('party') | |
| Cadenas | WI('lock') | |
| Ampoule, astuce | WI('bulb') |
Style
- Grille de 24 × 24, trait de 2 px, extrémités et angles arrondis, sans remplissage (style Feather / Lucide).
- Taille en
emet couleurcurrentColor: l'icône prend la taille et la couleur du texte qui l'entoure. - Une icône seule (sans texte) porte un
aria-label; une icône à côté d'un texte estaria-hidden. - Les logos de marques tierces (Discord, Instagram, TikTok, Google Play, App Store) restent à leurs couleurs officielles.
- Pas d'icône remplie et d'icône au trait mélangées dans une même rangée.
Utilisation
| Où | Code |
|---|---|
| Dans le HTML | <i class="wi" data-icon="gift"></i> |
| En JavaScript | `<span>${WI('gift')} Giveaways</span>` |
| Script à charger | https://dash.waifly.com/scripts/icons.js |
Le jeu d'icônes Waifly Commun
Chargement du jeu d'icônes depuis dash.waifly.com…
Cliquez sur une icône pour copier son code WI('…').
COMPOSANTS
Les briques du site vitrine
Les briques du dashboard
Ces exemples utilisent directement les classes de website/css/waifly.css.
Valeurs reprises de dashboard-theme.css, servers.css, popup.css et survey-toast.css.
Boutons Site vitrine
- btn-main : l'action principale, une seule par zone. Padding 10 × 20 px, arrondi 5 px.
- btn-line : l'action secondaire, se remplit de bleu au survol.
- btn-small : actions utilitaires dans un panneau (bannière cookies).
Puces de filtre et badges Site vitrine
Cartes Site vitrine
Waifly Guard
Network-level filtering plus software protection, included on every plan.
Étapes numérotées Site vitrine
Sign up
No credit card
Create a server
Pick a runtime
Upload your code
SFTP or file manager
Réservé aux vrais parcours ordonnés : jamais de numéros sur une liste d'avantages.
Question de FAQ Site vitrine
Bannière cookies et pied de page Site vitrine
Barre de navigation Dashboard
Boutons Dashboard
- Vert et rouge uniquement pour démarrer ou supprimer. Une suppression passe toujours par une modale de confirmation.
- Icône à gauche du libellé, à la taille du texte, séparée de 8 px.
Carte serveur et statuts Dashboard
Formulaires Dashboard
Tableau Dashboard
| Invoice | Date | Plan | Amount |
|---|---|---|---|
| #2026-1042 | 01/10/2026 | Nano | €4.00 |
| #2026-0981 | 01/09/2026 | Nano | €4.00 |
| #2026-0917 | 01/08/2026 | Extra slot | €1.00 |
Messages Dashboard
Modale et popup Dashboard
Toast et chargement Dashboard
Tell us what you think
Two minutes, five questions, and your answers shape the next features.
Les toasts s'affichent en bas à gauche : le bas droit est réservé à la bulle de support et aux sondages.
THÈMES
Mode terminal et thèmes saisonniers
Le dashboard change de peau selon la période ou le choix de l'utilisateur. Un thème ne fait que redéfinir les variables de couleur : la structure, la typographie et les composants restent ceux de Waifly.
Mode terminal Option utilisateur
- Tout en JetBrains Mono, arrondis réduits à 3-4 px, bordures vertes à 12 %.
- Le thème est posé avant le premier affichage pour éviter un flash bleu.
Thèmes saisonniers Automatiques
Halloween
Du 7 octobre au 2 novembreNoël
Du 1er au 28 décembreNouvel An
Du 29 décembre au 2 janvierPâques
De 7 jours avant au lundi de PâquesCoupe du monde
Du 11 juin au 19 juillet3 ans de Waifly
16 décembre 2026- Un thème saisonnier remplace l'accent et les fonds, et ajoute des décors discrets sur 28 cartes au plus.
- Aperçu de n'importe quel thème avec
?preview=noel,halloween,paques… et?preview=offpour en sortir. - Jamais de décor dans les modales, la navbar, les formulaires ou la bulle de support.
- Le logo ne change jamais de couleur avec le thème.
ACCESSIBILITÉ
Lisible par tout le monde
Objectif WCAG AA : 4,5:1 pour le texte courant, 3:1 pour les grands titres, les icônes et les bordures de champ.
- Les nouveaux boutons pleins bleus portent un libellé bleu nuit (
#15182d), pas blanc. - Un état ne se signale jamais par la couleur seule : pastille + mot (« Online »), icône + message.
- Focus clavier visible sur tout élément interactif : bordure ou contour bleu de 2 px.
- Toute image porte un
alt; les icônes décoratives sont masquées aux lecteurs d'écran. - Zones cliquables d'au moins 40 × 40 px sur mobile.
LANGUES
Pensé pour 13 langues
Le site existe en anglais (par défaut), français, russe, espagnol, allemand, portugais, italien, polonais, néerlandais, turc, arabe, kurde sorani et chinois. L'arabe et le kurde s'écrivent de droite à gauche.
- Utiliser les propriétés logiques (
margin-inline-start,padding-inline-end,text-align: start) plutôt que left / right. - Prévoir des libellés 30 % plus longs qu'en anglais : un bouton s'élargit, il ne coupe pas son texte.
- Dates au format du visiteur ; prix toujours en euros avec le symbole
€. - Pas de texte dans les images : il ne pourrait pas être traduit.
TON ÉDITORIAL
Des chiffres, pas des adjectifs
On s'adresse à des développeurs, souvent débutants, qui cherchent un hébergement gratuit. On donne les vraies valeurs avec leurs unités, et on dit clairement ce qui n'est pas inclus.
À écrire
« 300 MB of RAM, 1 GB of storage, €0 per month, no credit card. »
À éviter
« Ample resources and blazing-fast performance for everyone! »
À écrire
« 99.9% uptime over the last 30 days, measured live on status.waifly.com. »
À éviter
« Guaranteed 100% uptime, always. »
À écrire
« Enter a full email address, like name@example.com. »
À éviter
« Oops! Something went wrong. »
- Le site parle comme une vitrine : il présente, compare, rassure. Le dashboard parle comme un outil : il informe et dit quoi faire.
- Un message d'erreur dit ce qui s'est passé et comment le corriger, sans s'excuser.
- On assume les limites : pas de root, pas de SSH, uptime mesuré et non garanti.
- Pas d'émoji, pas de points d'exclamation en série, pas de majuscules pour crier.