# pablo.design — Design System

## 1. Visual Theme & Atmosphere
pablo.design is a designer portfolio built with Astro and Tailwind that commits fully to the editorial serif-meets-neon-lime trend. The headline font — Instrument Serif — renders at an enormous 185px in uppercase, creating billboard-scale typographic impact. A warm off-white canvas (`#f7f7f5`) grounds the palette, while an electric yellow-green accent (`#e0f65d`) delivers the contemporary "acid" pop. The result is simultaneously classic (serif, warm neutrals) and streetwear-adjacent (oversized type, acid accent). Confident, art-directed, unmistakably 2024–25 designer portfolio energy.

## 2. Color Palette & Roles
| Token | Value | Role |
|-------|-------|------|
| Background | `#f7f7f5` | Warm off-white canvas |
| Foreground | `#222` | Primary text |
| Muted | `#666` | Secondary copy |
| Accent primary | `#e0f65d` | Neon lime — energy, CTAs, highlights |
| Border | `#dedfd7` | Subtle dividers |
| Card | `#fff` | Elevated card surface |
| Purple gradient | `#e2d9ea` | Soft gradient accent |

Secondary micro-accents (red `#ff5f57`, amber `#febc2e`, green `#28c840`) appear — likely traffic-light UI dots from a macOS-style window decoration component.

## 3. Typography Rules
- **Display**: Instrument Serif — 400 weight, 185px, UPPERCASE, -1.856px tracking, line-height 0.99. Used for a single massive hero statement.
- **Body/UI**: Geist — clean geometric sans for all functional text, headings below hero, navigation.
- The Instrument Serif headline is one single design decision that defines the entire identity. Everything else is subordinate.
- Instrument Serif falls back to Georgia → Times New Roman → serif.
- Do not use Instrument Serif at sizes below 64px — its elegance disappears.

## 4. Component Stylings
- **Radius**: Generously rounded — 20px standard, 28–40px for featured cards, 50% for avatars/icons.
- **Shadows**: Layered inset highlights with subtle outer — `inset 0px 4px 4px rgba(255,255,255,0.12)` + `0px 1px 0px rgb(60,60,60)`. Adds tactile depth to buttons.
- **Cards**: White surface on warm-off-white background, rounded corners, subtle border.
- **Acid accent**: `#e0f65d` on dark button fills, hover effects.

## 5. Layout Principles
- Hero: full-width with the massive Instrument Serif headline as the sole visual.
- Card grids below hero at 20–28px radius.
- Astro static generation — fast, clean HTML output.
- Purple gradient background used for select feature cards (`#e2d9ea`).

## 6. Depth & Elevation
Layered shadow system: inset highlight + outer bottom shadow creates a slight emboss on cards and buttons. 3-level elevation: canvas → card → button. Subtle but crafted.

## 7. Do's and Don'ts
**Do:**
- Use Instrument Serif only at 80px+ in UPPERCASE
- Apply `#e0f65d` as the dominant accent on primary CTAs and hover states
- Use the layered inset+outer shadow on interactive card components

**Don't:**
- Use Instrument Serif for body or UI text
- Replace the warm off-white canvas with pure white — the warmth is intentional
- Use the traffic-light micro-accents (red/amber/green) outside their specific component

## 8. Responsive Behavior
185px hero headline will scale — likely clamp()-based or viewport-relative. Instrument Serif degrades gracefully to Georgia on fallback. Geist maintains clarity at all sizes. Cards reflow to single column on mobile.

## 9. Agent Prompt Guide
> Reproduce pablo.design style: warm off-white `#f7f7f5` canvas, Instrument Serif 400/uppercase/185px for hero headline, Geist for all body and UI. Neon lime `#e0f65d` as primary accent. Rounded corners 20–40px. Layered inset+outer shadow on cards. Art-directed editorial portfolio aesthetic.

*Generated by Sparkbites — extracted from live CSS analysis*