tomjohn.design — Design System

1. Visual Theme & Atmosphere

Tom John’s portfolio is a study in deliberate darkness — a near-black canvas (rgb(33, 33, 33)) that forces every element to earn its place with light. The atmosphere is hushed and editorial: no gradients, no decorative borders, no visual noise. Typography does all the heavy lifting, switching between bright white headlines and 60%-opacity secondaries to create depth without introducing additional colors. The result feels like a well-curated gallery at night — intimate, confident, and free of anything superfluous.

Built on Framer, the site relies on motion (Framer Motion) rather than decoration for engagement. Hover states use the mildest possible tint (rgba(255, 255, 255, 0.05)) — barely there, but enough to signal interactivity.

2. Color Palette & Roles

No accent color. No brand hue. The only color is luminance — things glow out of the dark or recede into it. This restraint is the design statement.

3. Typography Rules

Typeface: Inter (with Inter Placeholder fallback) — a single family across all roles.

No letter-spacing adjustments. No text transforms. No bold weights. The hierarchy is built entirely on size differential (24px vs 12px) and opacity modulation in color — a two-level scale that creates focus without visual complexity.

Notably absent: No display typeface, no italic, no uppercase styling, no weight variation beyond 400.

4. Component Stylings

No explicit component tokens are defined in CSS. Components emerge from minimal context:

• Links — rgba(255,255,255,0.05) background on hover; hairline refinement, not a full button treatment
• Cards/surfaces — implied by dark background with typography grouping; no borders, no shadows
• Tags/labels — H2 text at 12px with reduced opacity acts as a tagging system
• Motion layer — Framer Motion handles transitions; CSS is intentionally static

The emptiness of the component layer is intentional: Tom John’s portfolio speaks through layout and imagery, not UI chrome.

5. Layout Principles

• Two breakpoints: 809.98px (tablet) and 810px / 1399.98px (desktop cap)
• Likely a centered single-column or constrained two-column grid at desktop
• Generous whitespace inferred from typography scale — 24px headings with 28.8px line height breathe naturally
• Framer’s layout engine handles column reflow; no manual grid system exposed in CSS

6. Depth & Elevation

No shadows. No borders. No blur layers. Depth is achieved purely through:

1. Opacity gradation — white at 100%, 60%, and ~87% creates three perceived layers
2. Animation — Framer Motion lifts elements into focus temporally rather than spatially
3. Background contrast — the dark canvas ensures any foreground element reads as elevated simply by existing

7. Do’s and Don’ts

Do:

• Use Inter exclusively; don’t introduce a second typeface
• Maintain the 12px / 24px two-step size system
• Use white-on-dark; never dark-on-dark
• Keep hover states to near-invisible tints — no color fills, no borders on hover
• Let motion carry interactivity weight

Don’t:

• Add accent colors or brand hues — monochromaticism is the identity
• Use font-weight: 700; bold reads as jarring against this palette
• Add box shadows or card borders — they break the gallery aesthetic
• Use uppercase or letter-spacing for hierarchy — the current system achieves it through size and opacity alone

8. Responsive Behavior

Typography scale appears to hold constant — at 24px max, even the headline is already compact enough to work at mobile width without adjustment.

9. Agent Prompt Guide

“Design in the style of tomjohn.design: dark near-black canvas #212121, white text at full and 60% opacity for hierarchy, single Inter typeface at 12px and 24px only, weight 400 throughout, zero accent colors, hover states as barely-visible white tints, no shadows or decorative borders, motion-first interactivity via subtle entrance animations.”

Generated by Sparkbites — extracted from live CSS analysis