The Lab

The framework behind this experience

An intentionally minimal system where every element serves a clear purpose—keeping the focus on the work and user controls.

User Controls

Switch between light and dark themes, reveal the underlying grid structure, or reset gesture hints for carousels on project pages.

Your preferences are retained.

Theme
Hints
Grid
Opacity
20

Typography

Font Family

IBM Plex Sans serves as my primary typeface, chosen for its exceptional balance of technical precision and human warmth.

Developed by IBM with Mike Abbink and Bold Monday.

This font family embodies good design principles: clarity, functionality, and subtle personality. Its neutral yet distinctive character conveys professionalism while remaining approachable.

Ligatures: IBM Plex Sans includes standard typographic ligatures that improve readability by combining specific character pairs into single glyphs. Ligatures are enabled site-wide using font-variant-ligatures and are particularly noticeable in combinations like fi, fl, ff, ffi, and ffl.

fi fi
fl fl
ff ff
ffi ffi
ffl ffl

View on Google Fonts ↗

Type Label
TYPE LABEL EXAMPLE
Usage: Labels for typography samples and UI categories
Size: 14px
Weight: Medium (500)
Letter-spacing: 5%
Transform: Uppercase
Hero Title
Title Sample
Usage: Main page titles and hero headings
Size: 48–96px (responsive)
Weight: Light (300)
Letter-spacing: -2%
Line-height: 0.9
Subtitle
Subtitle Sample
Usage: Hero subtitles and supporting text
Size: 18–32px (responsive)
Weight: Regular (400)
Line-height: 1.5
Section Title
Section Title
Usage: Main section headings throughout pages
Size: 36–48px (responsive)
Weight: Light (300)
Letter-spacing: -2%
Line-height: 1.2
Section Subtitle
Supporting information for sections
Usage: Section descriptions below section titles
Size: 16px
Weight: Regular (400)
Line-height: 1.7
Heading 1
The quick brown fox
Usage: Primary section headings
Size: 32–48px (responsive)
Weight: Light (300)
Letter-spacing: -2%
Line-height: 1.2
Heading 2
The quick brown fox
Usage: Secondary section headings
Size: 24–32px (responsive)
Weight: Regular (400)
Letter-spacing: -1%
Line-height: 1.3
Heading 3
The quick brown fox
Usage: Subsection headings
Size: 20–24px (responsive)
Weight: Medium (500)
Line-height: 1.4
Heading 4
The quick brown fox
Usage: Card titles and minor headings
Size: 18–20px (responsive)
Weight: Medium (500)
Line-height: 1.4
Heading 5
The quick brown fox
Usage: Component headings
Size: 16–18px (responsive)
Weight: Semi-Bold (600)
Line-height: 1.5
Heading 6
The quick brown fox
Usage: Labels and small headings
Size: 14–16px (responsive)
Weight: Semi-Bold (600)
Line-height: 1.5
Body Text
Good design is invisible. It creates an intuitive experience that feels natural and effortless. Every element should serve a purpose, contributing to a cohesive and meaningful user journey.
Usage: Paragraphs and main content
Size: 16px (desktop), 12px (mobile)
Weight: Regular (400)
Line-height: 1.7
Small Text
Supporting information and captions
Usage: Captions and supporting information
Size: 14px
Weight: Regular (400)
Line-height: 1.6

Colors

Color Theory & Theming Strategy

The accent color system uses temperature-based theming to optimize visual comfort and hierarchy across light and dark modes, grounded in color psychology and perceptual contrast principles.

By inverting color temperature relative to each background, both themes maintain optimal legibility, emotional resonance, and visual balance—ensuring consistent perceptual impact while reducing eye fatigue across different lighting conditions, from bright workspaces to low-light settings.

Dark Mode(Warm Orange Accents): Warm orange delivers vibrant contrast against cool dark backgrounds without harsh glare. Longer wavelength colors feel more comfortable in low-light environments, with orange's energetic quality balancing dark mode's tone.

Light Mode(Cool Blue Accents): Cool blue provides strong chromatic contrast against warm white backgrounds. Blue's shorter wavelength creates visual recession, reducing eye strain on bright screens while conveying trust and professionalism.

Primary Colors

Primary
#0f0f0f
--color-primary
Secondary
#525252
--color-secondary
Tertiary
#737373
--color-tertiary

Accent Colors

Accent Dark
#ea580c
--color-accent-warm
Accent Light
#15B5FF
--color-accent-cool

Neutral Scale

White
#ffffff
--color-white
Neutral 50
#fafafa
--color-neutral-50
Neutral 100
#f5f5f5
--color-neutral-100
Neutral 200
#e5e5e5
--color-neutral-200
Neutral 300
#d4d4d4
--color-neutral-300
Neutral 400
#a3a3a3
--color-neutral-400
Neutral 500
#737373
--color-neutral-500
Neutral 600
#525252
--color-neutral-600
Neutral 700
#404040
--color-neutral-700
Neutral 800
#262626
--color-neutral-800
Neutral 900
#171717
--color-neutral-900

Components

Buttons
Arrow Buttons
Interactive Elements
Selectors

Grid System

Grid
Opacity
20
Col 1
Col 2
Col 3
Span 2
1
1

Spacing Scale

8px - xs
16px - sm
24px - md
48px - lg
80px - xl