ai.erikg.org / guidelines

ux/ui guidelines

Design language and component reference for sites that live inside ai.erikg.org. Every page should feel like it belongs to the same organism.

colors

Four tokens. No more, no less. Every visual decision maps to one of these.

bg #0e0e0e

fg #e8e0d0

dim #52504a

acc #c8922a

bg — page background, card backgrounds
fg — body text, primary labels, headings
dim — secondary text, muted labels, borders, placeholders
acc — emphasis, active states, section labels, key links, the left border motif
Introduce no new named colors. Derive variants via opacity only if truly necessary.
Never use white (#fff) or black (#000) directly.

typography

One font: DM Mono, weight 300 always. The monospace grid is the aesthetic backbone of every page.

display page title 1.6–2rem · wt 300

heading section heading 1rem · wt 400

body the quick brown fox jumps 14px · wt 300

small auxiliary information 12–13px · wt 300

label UPPERCASE LABEL 10–11px · 0.14em ls

Line height: 1.75 for body, 1.35 for headings
Letter-spacing: -0.01em on large display, 0.14em on uppercase labels
No bold (700) text in UI — use 400 for emphasis only
No serif, no system fonts, no fallback slop

spacing

Derived from a loose 4px base. Prefer generous whitespace — emptiness is intentional.

0.25rem · 4px

0.5rem · 8px

1rem · 16px

2.5rem · 40px

5rem · 80px

Section top padding: 5rem. Never cram sections.
Max content width: 720px, centered
Page side padding: 2rem min on mobile
No tight card grids. If elements need breathing room, give it to them.

components

Minimal component set. Build only what's needed. Each component must earn its place.

nav bar

ai.erikg.org

index projects about

Bottom border only. Brand left, links right. Active state uses fg, inactive uses dim.

buttons

Three variants only. No gradients, no shadows, no rounded corners beyond 2px. Hover is opacity reduction.

form inputs

title

notes

Label is uppercase, 11px, dim. Border is #2a2a2a, focus turns acc. No rounded corners beyond 2px.

section label motif

section title

Supporting copy in dim.

Accent left-border is the primary visual anchor. Use it on headers, callouts, and featured items. Sparingly.

layout

Single column, centered, max-width 720px
Sticky right TOC (160px) for long pages, hidden below 680px
Use float: right for the TOC to maintain natural document flow
Horizontal rules (hr) are 1px solid #1e1e1e — structural, not decorative
No sidebars, no split-panel layouts, no masonry
Never center body text
No card grids with images. This is a text-first system.

voice & tone

Pages generated for this subdomain should write the way the owner thinks: spare, direct, slightly dry.

Lowercase page titles and labels everywhere possible
Short sentences. One idea per sentence.
No exclamation points. No marketing language.
Dates in ISO format: 2026-03-20
No "welcome to", "explore our", "discover the", etc.
No emoji in any body content
No Lorem Ipsum — write real placeholder text or leave blank

code conventions

Every page deployed to ai.erikg.org/:slug is a self-contained HTML file. Keep it that way.

/* always declare the four tokens at :root */
:root {
  --bg:  #0e0e0e;
  --fg:  #e8e0d0;
  --dim: #52504a;
  --acc: #c8922a;
}

/* font import — always weight 300 */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400&display=swap');

body {
  font-family: 'DM Mono', monospace;
  font-weight: 300;
  background: var(--bg);
  color: var(--fg);
}

CSS variables must always use the 4-token names — never raw hex in component styles
Inline all styles and scripts in the HTML file
No external JS frameworks. Vanilla JS only.
Data persistence: GET/POST /api/data/:collection back to ai.erikg.org
Animations via CSS @keyframes, entry via animation-delay stagger
No Tailwind, no Bootstrap, no CSS resets beyond box-sizing: border-box
No !important