Design System - Portfolio Documentation

This portfolio draws inspiration from editorial magazine design—clean typography, generous whitespace, and a focus on content hierarchy. Every case study uses a consistent design system that balances sophistication with readability.

Design Philosophy

Content First

The design serves the content, not the other way around. Typography and layout choices prioritize readability and comprehension over decoration.

Editorial Heritage

Drawing from print magazine traditions—drop caps, pull quotes, generous margins—to create a premium reading experience on screen.

Systematic Flexibility

A consistent core system (typography, spacing, components) with accent color variations that give each project its own identity.

Quiet Sophistication

Avoiding trendy effects and AI-aesthetic clichés. The design feels timeless, professional, and distinctly human-crafted.

Color System

Core Palette

Five semantic colors form the foundation. These remain constant across all case studies.

Ink

#1a1a1a

Primary text, headings, dark sections

Paper

#f8f5f0

Background, card surfaces

Accent

varies

Brand highlights, drop caps, labels

Muted

#6b6b6b

Secondary text, captions

Rule

#d4d0c8

Borders, dividers, grid lines

Project Accent Colors

Each case study has a unique accent color reflecting the project's brand or theme.

Ooha

#c41e3a

Xbox

#107c10

Typography

Primary Typefaces

Instrument Serif Headlines, Display, Drop Caps

The quick brown fox jumps over the lazy dog

DM Sans Body Text, UI, Navigation

The quick brown fox jumps over the lazy dog. This is the primary body text typeface, optimized for long-form reading on screens. It pairs well with Instrument Serif for a classic editorial feel.

The quick brown fox jumps over the lazy dog

Type Scale

H1 / Title Case Study Title

H2 / Section Section Heading

H3 / Label Subsection Label

H4 / Card Card Title

Lede Opening paragraph with drop cap

Body Standard paragraph text for content

Caption Image caption or meta text

Components

Stat Grid

Used in hero sections to highlight key metrics. 1px gap creates the grid effect.

Hero Stats 4 columns

97%

Novelty Rate

Users Tested

CHI

2024 Published

Design Iterations

Card Grid

Problem statements, findings, and features. Dark 1px borders create visual separation.

Problem Cards 3 columns, dark gap

First Problem

Description of the problem or finding. Keep it concise and scannable.

Second Problem

Description of the problem or finding. Keep it concise and scannable.

Third Problem

Description of the problem or finding. Keep it concise and scannable.

Inline Quote

Pull quotes and testimonials with accent-colored left border.

Quote Block accent border

"This is how quotes appear throughout the case studies. They add human voice and break up long text sections." — Research Participant, Role

Dark Results Section

High-contrast section for highlighting key outcomes and impact metrics.

Results Section inverted colors

Key Outcomes

This dark section creates visual contrast and signals important results or conclusions. It breaks the reading rhythm intentionally.

Layout Structure

Page Anatomy

Every case study follows this structural pattern:

200px

Navigation
(sticky)

Hero Section (stats grid, title, meta)

TL;DR Section (4-point summary + sidebar)

Article Container (max-width: 1200px)
Lede → Sections → Components → Skills → Footer

Spacing System

Consistent spacing creates rhythm and hierarchy:

Section gap: 4rem between major sections
Component gap: 3rem between components within sections
Paragraph gap: 1.25rem between paragraphs
Grid gap: 1px for card/stat grids (creates border effect)
Article padding: 4rem horizontal on desktop

Max Widths

Article container: 1200px
Body text: 680px (optimal line length)
Lede paragraph: 800px

Responsive Behavior

The design adapts at three breakpoints:

1100px: Hero becomes single column, grids stack
992px: Navigation moves to top, horizontal layout
768px: Reduced type scale, simplified spacing

Navigation transforms from a sticky sidebar to a horizontal top bar on tablet and mobile, preserving space for content.

Implementation Notes

CSS Custom Properties

All colors and font stacks are defined as CSS variables in :root, making theme changes trivial—just update the accent color per project.

Grid Technique

Card grids use a clever technique: the parent has the border color as background, with 1px gap, and children have the paper color. This creates borders without actual border properties.

/* Grid border technique */
.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--ink); /* border color */
}

.card {
    background: var(--paper); /* fills gap */
    padding: 2rem;
}
            

Drop Cap

The lede paragraph uses ::first-letter pseudo-element for the drop cap effect, floated left with careful line-height tuning.

/* Drop cap effect */
.lede::first-letter {
    font-size: 4.5rem;
    float: left;
    line-height: 0.8;
    margin-right: 0.5rem;
    margin-top: 0.1rem;
    color: var(--accent);
}
            