Main page surface.
The visual identity, colors and design principles of LOKRO.
The tokens actually used in assets/site.css.
Main page surface.
Cards, header, menus.
Inputs, chips, small surfaces.
Primary text color.
Descriptions and secondary text.
Labels, inactive elements, metadata.
Fine lines around cards.
Hover, buttons, emphasis.
Subtle background grid.
Nodes and stronger lines.
Highlights, live dots, brand color.
Glows and hover fills.
Glow of the cursor easter egg.
Notices and warnings.
Fills behind notices.
Awards, Hall of Fame.
Soft gold glows.
Light page surface.
Cards in the light theme.
Inputs in the light theme.
Dark type on light.
Secondary text in light theme.
Metadata in light theme.
Green with contrast on light.
Warning color in light theme.
Gold in light theme.
:root {
--bg: #0a0a0b;
--bg-elev: #111113;
--bg-elev-2: #17171a;
--fg: #f2f2f0;
--fg-muted: #9a9a9e;
--fg-dim: #626266;
--accent: #7fe3b4;
--warn: #e3b97f;
--gold: #d9b876;
}
Two variants: light on dark, dark on light. Keep clearance, never distort.
Three typefaces, clear roles.
Large headlines, branding, key UI.
Body copy, descriptions, regular UI text.
Technical values, labels, code, small metadata.
LOKRO is non-profit, community-driven and self-developed. Everything stays free and accessible. Focus: technology that works without a paywall.