MARQUE

Guide de marque LOKRO.

L’identité visuelle, les couleurs et les principes graphiques de LOKRO.

Dark / Glass Chamfer Space Grotesk
PALETTE DE COULEURS

Palette de couleurs

Les jetons réellement utilisés dans assets/site.css.

Core Dark
Fond
#0a0a0b

Surface principale de la page.

Fond élevé
#111113

Cartes, en-tête, menus.

Fond élevé 2
#17171a

Champs, chips, petites surfaces.

Premier plan
#f2f2f0

Couleur de texte principale.

Texte atténué
#9a9a9e

Descriptions et texte secondaire.

Texte pâle
#626266

Labels, éléments inactifs, métadonnées.

Bordures & grille
Bordure
rgba(255,255,255,0.09)

Lignes fines autour des cartes.

Bordure forte
rgba(255,255,255,0.16)

Survol, boutons, accent.

Grille
rgba(255,255,255,0.055)

Grille de fond discrète.

Grille forte
rgba(255,255,255,0.09)

Nœuds et lignes plus marquées.

Accent LOKRO
Accent primaire
#7fe3b4

Highlights, points live, couleur de marque.

Accent atténué
rgba(127,227,180,0.14)

Lueurs et fonds au survol.

Accent curseur
rgba(15,158,100,0.5)

Lueur de l’easter egg curseur.

Couleurs d’appui
Avertissement
#e3b97f

Notes et alertes.

Avertissement atténué
rgba(227,185,127,0.12)

Fonds derrière les notes.

Or
#d9b876

Distinctions, Hall of Fame.

Or atténué
rgba(217,184,118,0.12)

Lueurs dorées discrètes.

Thème clair
Fond
#f7f7f5

Surface claire.

Élevé
#ffffff

Cartes en thème clair.

Élevé 2
#efefec

Champs en thème clair.

Premier plan
#0d0d0e

Texte sombre sur clair.

Atténué
#55555a

Texte secondaire en thème clair.

Pâle
#8a8a8e

Métadonnées en thème clair.

Accent
#0f9e64

Vert contrasté sur clair.

Avertissement
#9a6a1f

Couleur d’alerte en thème clair.

Or
#9c7a2f

Or en thème clair.

CSS

Couleurs de marque en CSS

:root {
  --bg: #0a0a0b;
  --bg-elev: #111113;
  --bg-elev-2: #17171a;
  --fg: #f2f2f0;
  --fg-muted: #9a9a9e;
  --fg-dim: #626266;

  --accent: #7fe3b4;
  --warn: #e3b97f;
  --gold: #d9b876;
}
TYPE

Typographie

Trois polices, des rôles clairs.

SPACE GROTESK
Internet appartient à tout le monde.

Grands titres, branding, éléments d’UI importants.

INTER
LOKRO construit des outils, des jeux et des communautés utilisables sans abonnement.

Texte courant, descriptions, UI standard.

JETBRAINS MONO
lokro.dev · 100% NON LUCRATIF · v1

Valeurs techniques, labels, code, petites métadonnées.

SHAPE

UI / langage de forme

Les mêmes classes que sur le reste du site.

Chamfer
Chamfer Small
Chamfer Large
Card
Button Ghost Chip tech-chip
Grid + Glow
REVEAL

Reveal — fade + rise, class .reveal.

LOKRO

Principes

LOKRO est non lucratif, porté par la communauté et développé en interne. Tout reste gratuit et accessible. Priorité : la technique sans péage.

Non lucratif Communauté Développé en interne Gratuit Accessible Technique d’abord