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

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