# lfs.gd — Design System

## 1. Visual Theme & Atmosphere

lfs.gd is an exercise in maximum constraint. The site operates almost entirely within the browser's default typographic and colour vocabulary — no custom font stack beyond system sans-serif, no CSS custom properties, no design tokens. What emerges is something closer to brutalist web design: raw, unpretentious, and oddly confident. The orange and cyan accent blocks (`rgb(255,153,51)` and `rgb(153,238,255)`) appear as vivid interruptions against an otherwise monochrome field, recalling the energy of early-internet layout experimentation. Geist Regular surfaces in form inputs, hinting at a technical/developer identity beneath the raw exterior.

## 2. Color Palette & Roles

| Role | Value | Usage |
|---|---|---|
| Background | `#ffffff` | Page canvas |
| Foreground | `#000000` | All text |
| Links (default browser) | `rgb(0,0,238)` | Anchor colour — unoverridden browser default |
| Accent orange | `rgb(255,153,51)` | Feature / highlight block |
| Accent cyan | `rgb(153,238,255)` | Secondary feature block |
| Input field | `rgb(235,235,235)` transparent | Form background |
| Input text | `rgb(37,36,41)` | Near-black form text |

The colour strategy is deliberately raw. Link blue is the browser's own unmodified default — a choice that signals either extreme minimalism or an anti-design stance. The orange and cyan blocks act as the only branded moments.

## 3. Typography Rules

**Body:** System `sans-serif`, 12px, weight 400, line-height normal  
**Form inputs:** Geist Regular, 16px, weight 400  
**Paragraphs / body text:** Inherit system sans, 14px

- No custom headings typography defined
- No letter-spacing adjustments
- No text transforms
- Geist Regular appears only in functional UI (inputs), not editorial content

The 12px body size is notably small — a deliberate density choice or a carry-over from technical documentation culture. No heading sizes were extracted, suggesting headings may inherit body or be styled minimally through the DOM rather than CSS hierarchy.

## 4. Component Stylings

- **Links:** Browser default blue (`rgb(0,0,238)`), no decoration override
- **Accent blocks:** Solid orange or cyan background, full-bleed or section-level
- **Form inputs:** Transparent background with `rgb(235,235,235)` as base, Geist Regular, 16px
- **Borders:** Pure black `rgb(0,0,0)` — no softening
- **Border-radius:** Not extracted — likely 0 (no rounding)
- **Shadows:** Not extracted — flat

## 5. Layout Principles

No spacing tokens were extracted beyond body defaults. The layout philosophy appears to follow document flow — elements stack vertically without sophisticated grid systems. The accent colour blocks suggest a section-based layout where content zones are colour-coded rather than bordered. Whitespace is used sparingly; density is embraced.

## 6. Depth & Elevation

Depth is absent. No shadows, no elevation layers, no translucency. The only spatial signal comes from background-colour blocking — the orange and cyan sections visually separate content areas through colour contrast alone. This is a genuinely flat design with zero Z-axis pretense.

## 7. Do's and Don'ts

**Do:**
- Let system sans-serif do the typographic work
- Use the orange/cyan accent blocks as strong sectional markers
- Keep borders hard and black — no softening
- Allow browser defaults to show (link blue, focus outlines)
- Embrace 12px density for informational content

**Don't:**
- Add custom font stacks for editorial text
- Round corners or add shadows
- Override link colours with brand colours
- Use more than two accent colours
- Add gradient or textured backgrounds

## 8. Responsive Behavior

No breakpoints were extracted. The design likely relies on document reflow — single-column content that adapts naturally to viewport width. The accent blocks may stretch full-width across all breakpoints. Mobile experience is likely unchanged from desktop in terms of design intent.

## 9. Agent Prompt Guide

> Replicate lfs.gd's design: pure white (`#fff`) background, pure black (`#000`) text, system sans-serif at 12–14px. Leave links as browser-default blue (`rgb(0,0,238)`). Use orange (`rgb(255,153,51)`) and cyan (`rgb(153,238,255)`) for accent blocks. No border-radius, no shadows, no custom font. Geist Regular for form inputs at 16px. Hard black borders. Flat, document-flow layout.

---
*Generated by Sparkbites — extracted from live CSS analysis*