jckhlry.com — Design System

1. Visual Theme & Atmosphere

jckhlry.com is a Framer-built portfolio that commits to a radical typographic gesture: Geist Mono at 12px, uppercase, as the H1. There is no display scale, no hero font at 72px — the name and primary identity are rendered in a monospace label at exactly the same size as body text. The atmosphere is deliberately anti-decorative: pure white canvas, pure black ink, no accent color, no gradients, no shadows, no border radius. What remains is negative space, structure, and the conceptual weight of choosing a developer monospace font as a design statement. The Framer Motion layer likely provides the kinetic quality that static CSS cannot convey here.

2. Color Palette & Roles

Total palette:

• rgb(255, 255, 255) — canvas and only background color
• rgb(0, 0, 0) — all text; H1, body ink
• rgb(0, 0, 238) — browser-default link blue; present but likely unstyled by choice
• rgba(0, 0, 0, 0) — transparent link/button backgrounds

What is absent: no brand hue, no grey scale, no tinted surfaces, no dark mode. The two-color palette (#fff / #000) is the design.

3. Typography Rules

Geist Mono for headings and all identity-layer text; browser-default sans-serif for body and links. The deliberate use of a monospace fallback for body text (sans-serif generic) suggests body text is minimal or the Framer components provide their own typography.

The H1 line-height of 9.6px is actually smaller than the 12px font size — lines of text technically overlap. At uppercase, this may render as tightly-packed all-caps lettering that reads as a single visual block. The OpenType features enabled on Geist Mono ("blwf", "cv03", "cv04", "cv09", "cv11") indicate careful character-level refinement: stylistic alternates and below-baseline form variants for specific glyphs.

Navigation items (“WORK”, “PLAYGROUND”) — also uppercase, likely also Geist Mono — dim to ~52% opacity on hover rather than changing color, creating a ghosting effect.

4. Component Stylings

Navigation links — Default full opacity, hover → opacity: 0.52. No color change, no transform, no underline. The opacity-fade is the sole interactive language.

Surfaces — One surface detected: rgb(255, 255, 255) at full luminance. No card components, no elevated panels, no inset sections. The page is a single plane.

Border radii — None detected. Zero radius everywhere — all corners are sharp right angles.

Shadows — None. Not even a box-shadow: none reset appears in extracted data.

The absence is intentional: no hover fills, no button styles, no card borders. Interaction happens through opacity and Framer Motion transitions.

5. Layout Principles

Framer breakpoints at 809.98px (tablet) and 1199.98px (desktop) — three layout modes: mobile, tablet, desktop. Body padding is zero. Layout is entirely driven by Framer’s component system. The minimalism suggests large white space sections with sparse content, possibly portfolio project entries as a list or grid.

No custom spacing system detected — Framer handles all spacing internally.

6. Depth & Elevation

There is no elevation. One luminance level (1.0 — pure white). No shadows, no dark panels, no transparent overlays. The only “depth” present is the conceptual depth of the opacity-fade hover state, which creates a figure-ground relationship between active and inactive navigation items.

This is a zero-elevation design — it exists entirely in 2D.

7. Do’s and Don’ts

Do

• Use Geist Mono uppercase at 12px for identity/label text; that’s the brand signature
• Enable OpenType features "blwf", "cv03", "cv04", "cv09", "cv11" on Geist Mono
• Express interaction exclusively through opacity: 1.0 active → 0.52 inactive/hover
• Let white space do structural work — no borders, no dividers

Don’t

• Add a brand color — the two-color monochrome is the aesthetic statement
• Introduce rounded corners — sharp right angles are an intentional design choice
• Use shadows or elevation — the flat single-plane design is the concept
• Scale Geist Mono up for display; the deliberate small-scale identity is the point

8. Responsive Behavior

Three breakpoints: mobile (< 810px), tablet (810–1199px), desktop (> 1199px). Framer manages layout reflow. The 12px text remains legible at all sizes — it’s not a display problem but a philosophical choice. On mobile, the navigation likely collapses. The work grid adapts from multi-column to single-column. The white space breathing room is preserved across breakpoints.

9. Agent Prompt Guide

Build a minimal portfolio in the style of jckhlry.com. Pure white canvas (#fff), pure black text (#000). Geist Mono for all identity and label text at 12px/500/uppercase with OpenType features "cv03", "cv04", "cv09", "cv11". Body in bare sans-serif at 12px. Zero border radius — all sharp corners. No shadows. No accent color. Navigation links fade to opacity: 0.52 on hover — that is the only interaction state. No card surfaces, no elevated panels. Three Framer breakpoints: 810px and 1199px. All animation via Framer Motion.

Generated by Sparkbites — extracted from live CSS analysis