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

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