# Rog.ie (Rogie King) — Design Language

## 1. Visual Theme & Atmosphere
Rogie King's personal site is a warm, artisanal web experience that pays homage to print culture and hand-craft. The serif font stack leads with a rare custom face (205TF-Louize) paired with the more accessible Instrument Serif, creating editorial warmth. Earthy amber-brown tones reference aged paper and ink. The accent colour — a vibrant lime green (`#b9fd8e`) — adds an unexpected pop of personality that feels simultaneously retro and contemporary. Light grey background (`#ededed`) grounds everything without sterility.

## 2. Color Palette & Roles
- **Background** — `#ededed` (warm light grey): slightly textured-feeling surface
- **Primary text** — `#101010` (near-black): crisp, ink-like
- **Secondary text** — `#666666` (mid grey): body text, subheadings
- **Tertiary text** — `#999999`: metadata, timestamps
- **Earthy amber** — `rgb(137, 93, 54)`: labels, warm secondary UI
- **Amber glow** — `rgba(172, 83, 2, 0.3)`: input focus rings, soft interactive highlights
- **Peach/sand** — `rgb(254, 209, 150)`: music/content module backgrounds
- **Accent lime** — `#b9fd8e`: the personality colour — interactive focus, highlights
- **Surface white** — `#fff` (module backgrounds): cards and panels lift off the grey base

## 3. Typography Rules
- **205TF-Louize / Instrument Serif** (weight 400): headings and accent text — editorial, humanist
- **Inter / Satoshi** (weight 400–500): body and UI
- Scale: 11–24px — restrained, editorial, no display extremes
- Negative letter-spacing (`−0.5px`, `−0.6px`) on headings for refinement
- The serif–sans pairing mirrors the warm/functional split of print publications

## 4. Component Stylings
- **40px radius** for rounded containers — generous pill-adjacent
- **8px radius** for cards and functional elements
- **50%** for circular avatars and icon containers
- Thin inset shadow: `0 0 0 1px rgba(0,0,0,0.05), 0 2.5px 2px -1px rgba(0,0,0,0.075)` — card lift
- Embossed button shadow: `inset 0 0 0 1px rgba(0,0,0,0.05), 0 1px 0.5px rgba(255,255,255,1)`

## 5. Layout Principles
- Personal, slightly dense layout with multiple content modules
- Music lists, social links, and project cards coexist in a dashboard-like personal hub
- Max-width constrained content column; grey background extends full-bleed
- White card modules lift content off the grey field

## 6. Depth & Elevation
- Thin shadow system creates a paper-stack effect — subtle but clear
- Inset shadow on interactive elements simulates pressed/embossed states
- Two-level surface: grey background to white card modules

## 7. Do's and Don'ts
**Do:** Lead with 205TF-Louize for all headings — it defines the editorial character.
**Do:** Keep amber/earthy tones as warm secondary UI; reserve lime green for interactive focus moments.
**Do:** Use the thin inset shadow on interactive elements for tactile feedback.
**Don't:** Use bright saturated colours beyond the single lime accent.
**Don't:** Go above 24px font size — restraint is the aesthetic.
**Don't:** Remove the warm grey background in favour of white — the grey is the texture.

## 8. Responsive Behavior
- Cards and modules reflow from multi-column to single-column
- Font sizes remain compact and stable across viewports
- Personal content hub condenses to a prioritised feed on mobile
- Navigation minimal — likely a small fixed header or sidebar

## 9. Agent Prompt Guide
> Design like Rogie King's site: warm grey background (`#ededed`), 205TF-Louize/Instrument Serif for headings, Inter/Satoshi for body. Near-black text with grey hierarchy (secondary `#666`, tertiary `#999`). Earthy amber accents. Lime green (`#b9fd8e`) for interactive focus only. White card modules, thin inset shadow system. Editorial, artisanal, warm personal web aesthetic.

*Generated by Sparkbites — extracted from live CSS analysis*