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