# orinfitzgerald.com — Design System

## 1. Visual Theme & Atmosphere
Orin Fitzgerald's personal site is a maximalist designer portfolio built on Framer. The lead typeface — Pixelcastle — is a custom pixel-style display font that makes an unmistakable statement at 60px. A black background with pure white text is punctuated by a single electric cyan accent (`rgb(0, 221, 255)`). The design is nocturnal, digital, and unapologetically post-web1 in its typographic approach. Monospace is used for secondary content, reinforcing the code/digital aesthetic. This is a personal brand site that prioritises presence over convention.

## 2. Color Palette & Roles
| Role | Value | Notes |
|------|-------|-------|
| Background | `rgb(20, 20, 20)` | Near-black, not pure |
| Foreground | `rgb(255, 255, 255)` | Primary text |
| Accent | `rgb(0, 221, 255)` | Electric cyan — the single chromatic moment |

Three-color system. Cyan is used for interactive states, highlights, or focal decorative elements. The contrast between pixel-era type and modern layout is the design's core tension.

## 3. Typography Rules
- **Display**: Pixelcastle — custom pixel font, 400 weight, 60px, 72px line-height. No letter-spacing adjustments.
- **Secondary**: Unnamed monospace (likely a system or custom mono), 30px, 500 weight. Used for subheadings/labels.
- The pixel font is the entire personality of the site — it must render correctly to preserve the design intent.
- No body-copy serif or humanist sans. The mono register carries all supporting text.
- Pixelcastle is used large and sparingly — likely only hero and section titles.

## 4. Component Stylings
- **Border-radius**: 100px pill on interactive elements.
- **Backgrounds**: Dark near-black throughout.
- **Shadows**: None — flat depth model.
- **Cyan accent**: Applied to links, hover states, or decorative underlines.
- Framer-based, so components are likely frame-contained with defined hover states.

## 5. Layout Principles
- Full-width dark canvas.
- Centered or left-aligned large type acting as the dominant visual.
- Framer's auto-layout for grid sections.
- Generous vertical spacing between sections — content is not dense.

## 6. Depth & Elevation
Flat. No shadow values detected. Depth relies on colour contrast: white type on near-black. The cyan accent creates a single point of visual "pop" against the dark field.

## 7. Do's and Don'ts
**Do:**
- Use Pixelcastle only at display sizes (60px+)
- Reserve cyan exclusively for interactive/highlight moments
- Maintain the dark-base-white-text polarity throughout

**Don't:**
- Introduce warm tones or neutral greys — they would undermine the digital-night aesthetic
- Use Pixelcastle at small sizes (it degrades at sub-32px)
- Add shadows or gradients to this flat system

## 8. Responsive Behavior
Framer handles responsive scaling. Pixelcastle at 60px will need to scale to roughly 32–40px on mobile without losing legibility. Pill radius holds across all sizes.

## 9. Agent Prompt Guide
> Reproduce orinfitzgerald.com style: near-black `rgb(20,20,20)` background, white text, Pixelcastle display font at 60px+ for headings, monospace for secondary labels. Single cyan accent `rgb(0,221,255)`. Pill radius (100px). Flat, no shadows. Portfolio-scale editorial layout.

*Generated by Sparkbites — extracted from live CSS analysis*