BRAND

Brand Guide LOKRO.

L’identità visiva, i colori e i principi grafici di LOKRO.

Dark / Glass Chamfer Space Grotesk
PALETTE COLORI

Palette colori

I token realmente usati in assets/site.css.

Core Dark
Sfondo
#0a0a0b

Superficie principale della pagina.

Sfondo elevato
#111113

Card, header, menu.

Sfondo elevato 2
#17171a

Input, chip, piccole superfici.

Primo piano
#f2f2f0

Colore del testo principale.

Testo attenuato
#9a9a9e

Descrizioni e testo secondario.

Testo spento
#626266

Label, elementi inattivi, metadati.

Bordi e griglia
Bordo
rgba(255,255,255,0.09)

Linee sottili intorno alle card.

Bordo forte
rgba(255,255,255,0.16)

Hover, pulsanti, enfasi.

Griglia
rgba(255,255,255,0.055)

Griglia di sfondo discreta.

Griglia forte
rgba(255,255,255,0.09)

Nodi e linee più marcate.

Accent LOKRO
Accent primario
#7fe3b4

Highlight, live-dot, colore del brand.

Accent attenuato
rgba(127,227,180,0.14)

Glow e fill all’hover.

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

Glow dell’easter egg del cursore.

Colori di supporto
Avviso
#e3b97f

Note e avvisi.

Avviso attenuato
rgba(227,185,127,0.12)

Fill dietro le note.

Oro
#d9b876

Riconoscimenti, Hall of Fame.

Oro attenuato
rgba(217,184,118,0.12)

Glow dorati discreti.

Tema chiaro
Sfondo
#f7f7f5

Superficie chiara.

Elevato
#ffffff

Card nel tema chiaro.

Elevato 2
#efefec

Input nel tema chiaro.

Primo piano
#0d0d0e

Testo scuro su chiaro.

Attenuato
#55555a

Testo secondario nel tema chiaro.

Spento
#8a8a8e

Metadati nel tema chiaro.

Accent
#0f9e64

Verde contrastato sul chiaro.

Avviso
#9a6a1f

Colore di avviso nel tema chiaro.

Oro
#9c7a2f

Oro nel tema chiaro.

CSS

Colori di brand in 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

Tipografia

Tre font, ruoli chiari.

SPACE GROTESK
Internet è di tutti.

Titoli grandi, branding, UI importante.

INTER
LOKRO costruisce tool, giochi e community usabili senza abbonamento.

Testo corrente, descrizioni, UI normale.

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

Valori tecnici, label, codice, metadati piccoli.

SHAPE

UI / linguaggio delle forme

Le stesse classi del resto del sito.

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

Reveal — fade + rise, class .reveal.

LOKRO

Principi

LOKRO è non profit, guidato dalla community e sviluppato internamente. Tutto resta gratuito e accessibile. Focus: tecnologia senza paywall.

Non profit Community Sviluppato internamente Gratuito Accessibile Tecnologia prima