jamesbaduor.com — Design System

1. Visual Theme & Atmosphere

James Baduor’s portfolio reads as a study in calibrated restraint. The palette is warm near-white — not clinical white — with a four-step background gradient from pure white through cream to a cool sage-tinted grey. Every surface has a reason to exist: navigation floats on transparent, content settles onto #fbfaf9, and interactive zones recede further into #f5f7f4. The effect is spatial without relying on shadows.

Typography is the workhorse of expression here. Inter is set at unusually small sizes with consistent negative letter-spacing, creating a compressed, editorial feel. There are no decorative flourishes, no gradients, no illustrations. The design communicates personality through proportion and negative space alone.

Tokens are fully systematised — every colour, spacing value, and type size is defined as a CSS custom property. This is a bespoke component system, not a utility framework, and it shows.

2. Color Palette & Roles

The palette is warm-neutral throughout — note the slight green-grey bias in #f5f7f4 and #e8eae7. No accent colour exists; hierarchy is achieved through opacity and tonal step alone. The absence of a branded accent colour is a deliberate choice that keeps focus on the work.

3. Typography Rules

Single typeface: Inter (variable, loaded via Next.js font optimisation). Every size is set with negative tracking to tighten the optical feel at small sizes.

Noteworthy: h1 is only 24px — this is not a loud portfolio. The title size would be body text on most sites. This compression forces the layout and content to carry weight instead of size. The 1.6 line-height on body creates generous reading rhythm for a small base size.

No display type, no serif, no type mixing. Hierarchy is weight and colour only.

4. Component Stylings

Buttons

• Padding: 10px 14px
• Border radius: 88px (fully pill-shaped)
• Font: 13px / 600 / −0.26px tracking
• Background: foreground-primary (#171717) — inverted from page
• Text: foreground-white

Navigation

• Transparent background (rgba(0,0,0,0)) — floats over content
• Uses foreground-primary text

Cards / Inset blocks

• Background: --background-tertiary (#f5f7f4)
• Border: --border-primary (#e8eae7)
• No border-radius specified — likely sharp or very low radius

Status / badge elements

• Use secondary and tertiary foreground for deemphasised states
• The div.bg-foreground-primary surface confirms dark-on-light inversion patterns exist for featured elements

5. Layout Principles

The layout uses a flex-based main column. Content width is constrained, not full-bleed. Spacing uses the 4-step background system as implicit zoning — the background colour communicates layer depth more than padding alone.

• Base body padding: 0px — section-level components own their own spacing
• Tight typographic scale means more visual content per viewport
• Navigation is positioned outside the main flow
• No grid framework tokens are declared — spacing is component-owned

The overall philosophy: whitespace through tonal shift, not padding. Sections are separated by surface colour changes rather than explicit gaps.

6. Depth & Elevation

Shadows are absent. Depth is communicated entirely through the four-tier background system:

This is a flat design with tonal depth. Elements never appear to float; they nest. No box-shadow, no filter: drop-shadow, no backdrop blur.

7. Do’s and Don’ts

Do:

• Use the 4-step background system for zoning — never skip levels
• Apply negative letter-spacing consistently at every size
• Keep the title no larger than 24px medium; scale through colour not size
• Use pill buttons (border-radius: 88px) for all primary actions
• Let negative space speak — resist adding more elements when a tonal shift will do

Don’t:

• Introduce accent colours or any chromatic hue
• Use font weights above 600 or below 400
• Add box-shadows or drop-shadows — they break the flat tonal system
• Mix font sizes aggressively; the scale is intentionally compressed
• Use uppercase text transforms — the design is entirely lowercase/sentence case

8. Responsive Behavior

Built with Next.js App Router. The token system includes no explicit breakpoint variables, suggesting responsive behaviour is handled at the component level via Tailwind or CSS media queries.

• Navigation is transparent and likely collapses to a mobile menu pattern
• The flex layout of main adapts naturally to single-column on narrow viewports
• Button padding (10px 14px) is touch-friendly at its current size
• Typography sizes do not appear to scale with viewport — the compressed scale reads well at mobile sizes

No detected breakpoint tokens. Layout is expected to be single-column mobile-first, expanding to a constrained max-width container on desktop.

9. Agent Prompt Guide

Quick reference:

• Background sequence: #ffffff → #fbfaf9 → #f5f7f4 → #e8eae7
• Text sequence: #171717 → #7c7d7b → #a5a6a3
• Font: Inter, sizes 13–24px, always with negative tracking
• Buttons: pill shape (border-radius: 88px), dark fill, 13px/600

Prompt to replicate this aesthetic:

“Design a minimal portfolio section using only Inter. Background is warm off-white #fbfaf9. Primary text is near-black #171717. Use tonal surface shifts (#f5f7f4, #e8eae7) instead of shadows for depth. All buttons are fully pill-shaped. Font sizes stay between 13–24px with negative letter-spacing. No accent colours. No decorative elements.”

Prompt to extend a component:

“Add a card component to jamesbaduor.com’s design system. Background #f5f7f4, bordered by #e8eae7, body text #171717 at 15px/400/−0.32px, label #7c7d7b at 13px/400. No shadow. Pill button #171717 if an action is needed.”

Generated by Sparkbites — extracted from live CSS analysis