BRAND

LOKRO Brand Guide.

The visual identity, colors and design principles of LOKRO.

Dark / Glass Chamfer Space Grotesk
COLOR PALETTE

Color palette

The tokens actually used in assets/site.css.

Core Dark
Background
#0a0a0b

Main page surface.

Elevated background
#111113

Cards, header, menus.

Elevated background 2
#17171a

Inputs, chips, small surfaces.

Foreground
#f2f2f0

Primary text color.

Muted foreground
#9a9a9e

Descriptions and secondary text.

Dim foreground
#626266

Labels, inactive elements, metadata.

Borders & grid
Border
rgba(255,255,255,0.09)

Fine lines around cards.

Strong border
rgba(255,255,255,0.16)

Hover, buttons, emphasis.

Grid
rgba(255,255,255,0.055)

Subtle background grid.

Strong grid
rgba(255,255,255,0.09)

Nodes and stronger lines.

LOKRO Accent
Primary accent
#7fe3b4

Highlights, live dots, brand color.

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

Glows and hover fills.

Cursor accent
rgba(15,158,100,0.5)

Glow of the cursor easter egg.

Supporting colors
Warning
#e3b97f

Notices and warnings.

Warning dim
rgba(227,185,127,0.12)

Fills behind notices.

Gold
#d9b876

Awards, Hall of Fame.

Gold dim
rgba(217,184,118,0.12)

Soft gold glows.

Light theme
Background
#f7f7f5

Light page surface.

Elevated
#ffffff

Cards in the light theme.

Elevated 2
#efefec

Inputs in the light theme.

Foreground
#0d0d0e

Dark type on light.

Muted
#55555a

Secondary text in light theme.

Dim
#8a8a8e

Metadata in light theme.

Accent
#0f9e64

Green with contrast on light.

Warning
#9a6a1f

Warning color in light theme.

Gold
#9c7a2f

Gold in light theme.

CSS

Brand colors as 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

Typography

Three typefaces, clear roles.

SPACE GROTESK
The internet is for everyone.

Large headlines, branding, key UI.

INTER
LOKRO builds tools, games and communities that stay usable without a subscription.

Body copy, descriptions, regular UI text.

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

Technical values, labels, code, small metadata.

SHAPE

UI / shape language

The same classes used across the rest of the site.

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

Reveal — fade + rise, class .reveal.

LOKRO

Principles

LOKRO is non-profit, community-driven and self-developed. Everything stays free and accessible. Focus: technology that works without a paywall.

Non-profit Community-driven Self-developed Free Accessible Technology first