michael.fm — Design System

1. Visual Theme & Atmosphere

michael.fm is a personal site that achieves personality through restraint and precision. Built with Geist Sans — Vercel’s typeface — the entire typographic system collapses to a single font at a single size (16px), with variation coming only from weight and the unusual choice to lowercase h2 elements via text-transform: lowercase. The color system is similarly compressed: a warm gray gradient background with zinc neutrals and only a small set of code syntax colors for technical content. What makes the design memorable is its use of physical depth: a deep multi-layered box-shadow on primary elements creates a 3D card or floating panel effect that is theatrical compared to the otherwise minimal chrome. The --radius: 24 and --gradient values suggest a pill-heavy, glassmorphism-adjacent aesthetic for UI cards.

2. Color Palette & Roles

Background

Zinc scale (UI neutrals)

Alpha variants (for layering): --zinc-900-8 through --zinc-900-20 — zinc-900 at 8%, 10%, 16%, 20% opacity for subtle overlays and borders.

Syntax highlighting (code blocks): --sh-class (#2d5e9d), --sh-string (#007f7a), --sh-keyword (#e02518), --sh-jsxliterals (#6266d1), --sh-property/--sh-entity (#e25a1c), --sh-comment (#a19595), --sh-sign (#8996a3).

Accent: --red-500 (#ef4444) — sparse, likely for error states only.

3. Typography Rules

Philosophy: The entire site uses one font, one size. The only typographic differentiation is weight (400 vs 600) and the radical choice to lowercase headings. This creates a flatness and informality that signals personal/portfolio context — “this is me, not a brand.” No display fonts, no type scale, no hierarchy through size.

Absent: Serif typefaces, large display headings, tracked uppercase, decorative styles.

4. Component Stylings

Cards / floating panels

• --radius: 24 — large rounded corners
• --gradient: linear-gradient(0deg, hsla(0,0%,100%,.2), hsla(0,0%,100%,0) 50%, hsla(0,0%,100%,.3)) — a subtle glass highlight effect
• Border: --border: 1 with zinc-based border colors

Deep shadow (primary feature): rgba(0,0,0,0.39) 0 4px 9px, rgba(0,0,0,0.34) 0 17px 17px, rgba(0,0,0,0.2) 0 39px 23px, rgba(0,0,0,0.06) 0 69px 28px, rgba(0,0,0,0.01) 0 108px 30px — a five-layer shadow that extends to 108px, creating a dramatic 3D card lift effect.

Interactive links

• Default: pure black text, transparent bg
• Hover: not captured — likely subtle
• Focus: rgb(0, 95, 204) auto 1px

Navigation: Links appear as plain text with no visible decoration.

5. Layout Principles

Sections use padding: 8px 112px 64px with gap: 32px — very large horizontal gutters (112px) suggesting a narrow centered column on a wide viewport. Body and main are zero-padded. The 32px gap between section children creates a card-list or grid layout.

Breakpoints: 600px, 700px, 768px, 900px, 1000px, 1280px, 1300px — a dense responsive progression spanning from compact mobile to wide desktop.

Scale transform variables (--scale-1 through --scale-6) with values like 0.35, 0.65, 1, 1.5, 2 suggest animated or stacked card layouts where items are scaled by position (e.g., a deck of cards or carousel).

6. Depth & Elevation

Two distinct elevation modes:

Dramatic elevation (feature): The five-layer shadow reaching 108px creates a floating card that would cast a shadow as if the element is physically lifted ~10–20px off the surface. This is the visual signature of the site.

Subtle elevation (UI chrome):

• rgba(9,9,11,0.03) 0 0 0 1px, ... multi-step micro-shadow — a stacked, nearly invisible border-shadow combination at 3–6% opacity for UI components.
• rgba(0,0,0,0.05) 0 2px 4px inset — inset for pressed states.

The contrast between these two modes is intentional: feature surfaces float dramatically; UI chrome nearly disappears.

7. Do’s and Don’ts

Do:

• Apply text-transform: lowercase to all heading elements — it’s the site’s typographic signature
• Use the five-layer deep shadow on featured cards — it’s the visual hook
• Use zinc alphas (--zinc-900-8 through --zinc-900-20) for subtle borders and overlays
• Keep all body, heading, and link text at 16px — the design refuses typographic hierarchy through size
• Apply --gradient as a glass highlight on --radius: 24 (large-radius) cards

Don’t:

• Increase font sizes beyond 16px for headings — it breaks the aesthetic flatness
• Add color accents beyond zinc + #ef4444 (red errors) + code syntax colors
• Use the dramatic shadow on small UI elements — reserve it for feature/hero cards
• Use uppercase text transforms — only lowercase is employed
• Add decorative borders with width >1px

8. Responsive Behavior

Seven breakpoints from 600px to 1300px suggest the 112px section gutters collapse significantly:

• Below 768px: gutters likely drop to 16–24px
• Below 600px: single-column layout
• The --scale-* variables suggest a card deck or stacked layout that adapts transform values at each breakpoint
• 700px and 900px are non-standard — likely tied to the scale-card layout’s comfortable viewing widths

The gradient background (214, 219, 220 → 255, 255, 255) likely remains consistent across all sizes.

9. Agent Prompt Guide

Quick reference:

• Background: #f2f2f2 flat / gradient from rgb(214,219,220) to white
• Text: rgb(0,0,0) primary / #71717a secondary / zinc scale
• Font: Geist Sans, 16px throughout, weight 400/600 only
• Headings: text-transform: lowercase
• Signature: five-layer deep box-shadow (to 108px)
• Radius: 24px cards + 9999px pills

Prompt starters:

• “Design a portfolio project card in michael.fm style: #f2f2f2 background, Geist Sans 16px, lowercase bold title, five-layer deep shadow, 24px corners, glass gradient overlay.”
• “Build a minimalist nav in this style: single font at 16px/400, pure black text, zinc-200 dividers, no decoration.”
• “Create a music track listing: Geist Sans throughout, lowercased labels at 600 weight, zinc alpha borders at 0.1 opacity, subtle inset shadow on active state.”

Generated by Sparkbites — extracted from live CSS analysis