pheralb.dev — Design System

1. Visual Theme & Atmosphere

pheralb.dev is a developer personal site built with Svelte and Tailwind. The design philosophy is radical simplicity: a light grey system with almost no colour, a single typeface (Geist), and minimal radius. The extracted colour palette is essentially monochromatic — light grey backgrounds, near-white surfaces, dark grey text. What’s notable is what’s absent: no accent colour, no display serif, no gradient, no shadow drama. This is a portfolio that lets code and content speak without visual noise.

2. Color Palette & Roles

No bright accent detected. The palette is deliberately achromatic. If an accent exists, it’s either inline content colour or applied very sparingly.

3. Typography Rules

• Sole typeface: Geist — variable sans-serif with extended fallback chain (ui-sans-serif → system-ui → sans-serif → emoji stacks).
• h2 at 20px / 500 / normal tracking — restrained headings.
• No display scale, no tight tracking. Everything is proportional and calm.
• Geist carries both headings and body. No secondary font.
• The lack of typographic drama signals a content-first, ego-free approach.

4. Component Stylings

• Radius: 6px (standard), 4.96px (micro) — sharp, almost square-cornered.
• Shadows: One hairline shadow: rgba(0,0,0,0.05) 0px 1px 2px. Nearly invisible.
• Background overlay: rgba(245,245,245,0.8) used for sticky headers or overlaid panels.
• Borders: rgb(229,231,235) — standard Tailwind grey-200 equivalent.
• Components are minimal — no complex interactive states detected.

5. Layout Principles

• Svelte SPA structure with clean vertical content flow.
• Content-width container, centered.
• Generous line-height for readable text blocks.
• No hero-scale typography — this is a reading-focused layout.

6. Depth & Elevation

Single shadow level, near-invisible. Elevation is achieved purely through background colour: rgb(245,245,245) page vs rgba(245,245,245,0.8) overlay. Flat and calm.

7. Do’s and Don’ts

Do:

• Use Geist with the full fallback chain
• Keep border-radius tight (4–6px)
• Honour the grey-scale-only palette — any accent should be a deliberate exception

Don’t:

• Introduce display-scale typography — this system is body-scale
• Add coloured accents without a clear purpose
• Apply heavy shadows or gradient backgrounds

8. Responsive Behavior

Tailwind breakpoints. Geist is legible at all sizes. The minimal shadow/radius system translates perfectly to mobile without modification.

9. Agent Prompt Guide

Reproduce pheralb.dev style: grey canvas rgb(245,245,245), near-black slate text rgb(17,24,39), Geist sans-serif for all text. Near-zero colour — monochromatic grey system. Border-radius 6px. One hairline shadow. Developer portfolio, content-first, minimal chrome.

Generated by Sparkbites — extracted from live CSS analysis