kaisermann.me – Design System Reference

1. Visual Theme & Atmosphere

Retro-digital nostalgia built on VCR OSD Mono. A deliberate rejection of modern polish in favour of raw terminal authenticity. The site feels like a personal artefact, intimate and deliberately lo-fi.

The overall mode is light, with a monospaced, code-aesthetic typographic identity. Shadows and elevation are used sparingly to separate key surfaces.

2. Color Palette & Roles

Design Tokens

• var(--text-primary): #a0a0a0
• var(--text-secondary): #fff
• var(--glitchy-blue): rgba(2, 183, 182, .4)
• var(--glitchy-red): rgba(183, 2, 2, .4)

Computed Roles

• text (body): rgb(160, 160, 160)
• border (a): rgb(255, 255, 255)
• surface (div.remote): rgb(241, 242, 246)
• surface (div.space): rgb(0, 0, 0)

Key observations: Token-driven colour system – use CSS custom properties as the single source of truth. Never hardcode hex values. Light-mode-first palette.

3. Typography Rules

body – VCR OSD Mono, 23.04px, weight 400, line-height 32.256px

Hierarchy principle: A single typeface (VCR OSD Mono) handles all levels. Size and weight alone establish rhythm.

What is absent: No proportional serif or display face. The monospaced system is intentional – do not introduce decorative type.

4. Component Styling

Border radii: No border radii detected – corners are sharp throughout.

Interactive states:

• button: tag: button.previous “◄”, default: [object Object], hover: null, focus: [object Object]
• button: tag: button.next “►”, default: [object Object], hover: null, focus: [object Object]
• a[href]: tag: a.skip-link “Skip to content”, default: [object Object], hover: null, focus: [object Object]

Buttons & controls: Match the typographic register – monospaced labels, minimal padding, high-contrast borders.

5. Layout Principles

Common padding values: 0px 0px 67.7647px.

The dominant padding rhythm (0px 0px 67.7647px) suggests a fixed-pixel grid.

Avoid introducing grid lines, dividers, or decorative rules unless absolutely necessary. Let whitespace do the structural work.

6. Depth & Elevation

• element: "rgb(34, 34, 34) 1px 3px 0px 0px, rgb(34, 34, 34) -1px 3px 0px 0px"

Use shadows conservatively – reserve elevation for interactive feedback (dropdowns, modals), not decorative layering.

7. Do’s and Don’ts

Do:

• Respect the monospaced, code-aesthetic typographic voice – every element should speak the same typeface language.
• Use whitespace as a primary design tool. When in doubt, add space rather than elements.
• Reference CSS custom properties exclusively – never bypass the token layer.
• Keep interactions subtle: micro-transitions at 150-200ms maximum.

Don’t:

• Do not introduce proportional or display typefaces. The monospaced grid is the identity.
• Do not add drop shadows, gradients, or decorative textures unless they are already present in the system.
• Do not use colour to communicate hierarchy – size and weight do that work here.
• Avoid centring body text. The layout has a strong left-anchored reading rhythm.

8. Responsive Behavior

Breakpoints detected: 480, 500.

Honour the breakpoints extracted above.

On small screens, collapse multi-column layouts to a single column without compromising the typographic scale. The type should remain readable – never below 14px rendered size.

9. Agent Prompt Guide

When generating UI components, extensions, or page sections for kaisermann.me, instruct the agent as follows:

“Build in the style of kaisermann.me: retro-digital nostalgia built on vcr osd mono. Use VCR OSD Mono as the primary typeface. Light background, dark text. Shadows only for modal-level elevation. Token-driven colours via CSS custom properties. No animations – immediate state changes only. Generous whitespace, strong typographic scale. Sharp corners throughout.”

Generated by Sparkbites – extracted from live CSS analysis