# 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
| Role | Value | Notes |
|------|-------|-------|
| Background | `rgb(245, 245, 245)` | Light grey canvas |
| Surface overlay | `rgba(245, 245, 245, 0.8)` | Translucent panels |
| Border/subtle | `rgb(229, 231, 235)` | Hairline dividers |
| Text | `rgb(17, 24, 39)` | Near-black, slate-toned |

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*