Design system

Ludea, dans les règles.

Ce qui fait la marque Ludea — pour la page d'accueil, la documentation et tout ce qui parle au nom du moteur. Les jeux gardent leurs propres univers ; ceci est l'allure du moteur qui les fabrique. Art : tools/art/brand.cjs · variables : landing.css.

Couleurs

Papier chaud, encre profonde et un dégradé de marque mandarine → corail. Les couleurs d'accent sont utilisées avec parcimonie, une par élément. Des bandeaux sombres donnent le rythme (code, skills). Le texte est encre ou atténué sur fond clair, blanc ou #c9c8e6 sur fond encre.

--paper#fffaf3 · Fond de page

--sand#f6efe5 · Sections alternées

--surface#ffffff · Cartes

--ink#1d1b3a · Texte, bandeaux sombres, contours

--muted#5d5b7a · Texte secondaire

--coral#ff5b4f · Marque, actions principales

--tangerine#ff8a3d · Début du dégradé de marque

--sun#ffbe2e · Étincelle, mises en avant

--mint#19c39a · Réussite, nature

--sky#3c8dff · Info, technique

--lilac#8a6cff · Magie, aide

--rose#ff7aa8 · Soin, chaleur

--brandmandarine → corail · logo, boutons principaux, mise en valeur

Typographie

Bricolage Grotesque (600–800) pour les grands titres et les intertitres, avec un approche serré ; DM Sans (400–700) pour le texte ; la police à chasse fixe du système pour le code et les noms de skills. Les deux polices sont hébergées par le site (licence SIL Open Font License).

Vous le décrivez.
Quatre jeux, un moteur
Partez du modèle

Chapeau — DM Sans 19/1,6, atténué. Texte — DM Sans 17/1,6.

new-game · feedback-session — chasse fixe, corail.

Composants

Arrondi, tactile, accueillant : boutons en pilule avec un rebord « enfoncé », cartes blanches à ombre douce, arrondi de 22 px (12 petit, 30 grand). Les boutons font 44 à 50 px de haut, avec des icônes qui les remplissent.

6–7 ansFrançaisArcadeENFR
Ajoute une boutique pour acheter des décorations
C'est en ligne !Détail complémentaire, atténué.

Carte d'étape

Numérotée avec une pastille de marque.

/new-game

Icônes

Illustrées, jamais d'emoji : contour épais couleur encre, dégradé bicolore, reflet brillant — la même famille que l'interface des jeux, dans la palette Ludea. Dessinées dans un carré de 128, exportées en 256 px (WebP).

star
heart
help
avatar
goals
play
check
gift
hand
sparkle
moon
refresh
arrow
home
lock
palette
sound
smile
trophy
pad
shop
speed
ride
guide
flag
seed
crate
polish
creature
timer
portal
siren
flagFr
flagGb

Lu, le guide

Lu, c'est le logo avec un visage : la bulle qui écoute votre idée. Lu explique les choses sur le site — une fois par écran au plus, jamais dans les jeux. Dessiné par la même famille de fonctions que le symbole (guide() dans brand.cjs), pour que les deux ne divergent jamais.

hello — accueille (haut de page)
point — montre quelque chose (installation)
idea — invite à créer (pied de page)

Ton

  • Des mots simples, sans jargon : « décrire », « jouer », « dire ce qu'on en pense ».
  • Phrases courtes, voix active, chaleureux sans être enfantin.
  • Anglais par défaut, le français en traduction complète — jamais de mélange.
  • Montrer plutôt qu'affirmer : de vraies captures, des limites dites honnêtement.

À éviter

  • Aucun emoji, nulle part — utilisez le jeu d'icônes.
  • Ne pas utiliser l'art d'un jeu (Nebula, Dr Smile…) comme image de Ludea.
  • Ne pas mettre Lu dans un jeu, ni plus d'une fois par écran.
  • Ne pas recolorer le symbole ni le dégradé.