Design System · v1.1

ILMOLAB Style Guide

A living reference for every token and component in the system. Change a value intokens.cssand this page updates with it.

Color

Toggle dark mode (top right) to see both palettes.

Background

--color-bg

Background Alt

--color-bg-alt

Surface

--color-surface

Text

--color-text

Text Secondary

--color-text-secondary

Text Muted

--color-text-muted

Border

--color-border

Border Strong

--color-border-strong

Accent

--color-accent

Accent Hover

--color-accent-hover

Accent Soft

--color-accent-soft

Typography

Fraunces (display) + Inter (body) + JetBrains Mono (code). Body text never drops below 18px.

4xl / 64

Learn deeply.

3xl / 48

Build openly.

2xl / 36

Share freely.

xl / 28

A laboratory for knowledge.

lg / 22

I believe understanding is earned, not memorized.

base / 18

The best way to learn is to build. To question. To break things. To fix them. To understand not only what works, but why it works.

sm / 14

Navigation, labels, metadata.

mono

const understanding = earned(experiments);

Spacing

8px base unit. Never use an off-scale value.

--space-1

8px

--space-2

16px

--space-3

24px

--space-4

32px

--space-6

48px

--space-8

64px

--space-12

96px

--space-16

128px

--space-20

160px

Buttons

Hover: tiny lift + 100ms fade. Never dramatic, per spec.

Cards

Minimal border, subtle shadow, generous padding, 16px radius.

Homelab

Setting up a Proxmox cluster

Three nodes, one bad cable, and a lesson in quorum.

Building a RAG pipeline from scratch

What Pinecone doesn't tell you about chunk overlap.

Systems

Understanding the Linux boot process

BIOS to shell, one stage at a time.