Personal Website

Design System
& Language

A minimal, editorial system for a senior frontend engineer's personal website. Built on three typefaces, a two-color palette, and strict line-based iconography.

line-based editorial type-led serif × mono no photos dark mode

3

Typefaces

Serif · Sans · Mono

2

True Colors

Navy + Accent Blue

1.5px

Icon Stroke

Line-based only

Logo

default · 28px

edchkm.com

medium · 40px

edchkm.com

large · 56px

edchkm.com

mark only · 72px

on dark

edchkm.com

rules

— Always SVG, never raster

— Mark only in nav — no wordmark needed

— Wordmark uses DM Mono, not a custom font

— Minimum size: 20px mark / 24px with name

Color Palette

#0F1829

Navy

Primary · text · logo

#1B3BCC

Accent Blue

Links · hover · active

#FAFAF8

Off-white

Background

#888880

Muted

Secondary text · metadata

#F5F5F2

Surface

Cards · code bg

navy / 12%

Border

Dividers · strokes

Navy Opacity Scale

100%

80%

60%

40%

20%

12% · border

6% · surface tint

Typography

Instrument Serif · 80px · ls -0.03em · hero

Building the web.

Instrument Serif · 56px · ls -0.02em · page title

Things I've built
and written.

Instrument Serif · 40px · ls -0.01em · section heading

Recent Writing

Geist · 20px · wt 500 · component headings

Frontend Architecture

Geist · 16px · lh 1.75 · body copy

I'm a senior frontend engineer focused on performance, design systems, and the craft of building interfaces that feel inevitable. Currently working on things I can't talk about yet.

Geist · 14px · secondary / muted

Last updated March 2026 · 5 min read

DM Mono · 14px · metadata, dates, labels

2026 · senior frontend engineer · react / typescript

DM Mono · 12px · uppercase · ls 0.08em · eyebrows & section labels

Projects · Blog · Stories

Iconography

strokeWidth 1.5, fill none. 20×20 inside 44×44 touch targets.

Rules

— strokeWidth: 1.5 always

— fill: none always

— min render size: 16px

— touch target: 44×44px

— stroke inherits text color

— functional only, no decoration

Components

Navigation

Sticky top bar · logo · links · theme toggle

edchkm.com

Design System

<nav class="top-nav">
  <div class="top-nav-left">
    <a href="/">
      <img src="/logo.svg" alt="edchkm logo" width="28" height="28" />
    </a>
    <a href="/" class="nav-logo">edchkm.com</a>
  </div>
  <div class="top-nav-right">
    <a class="nav-tab active" href="/design-system">Design System</a>
    <button class="theme-btn" id="theme-btn">
      <svg viewBox="0 0 24 24" width="16" height="16"
           stroke="var(--muted)" stroke-width="1.5" fill="none">
        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
      </svg>
    </button>
  </div>
</nav>

Hero

Page opener · eyebrow · serif headline · body · actions

Senior Frontend Engineer

Greetings. Ed
is here.

You've arrived exactly where you were meant to be. This corner of the ether is being forged from raw stardust and code.

<div class="hero">
  <p class="hero-eyebrow">Senior Frontend Engineer</p>
  <h1>Greetings. <em>Ed</em><br /> is here.</h1>
  <p>You've arrived exactly where you were meant to be...</p>
  <div class="row">
    <a class="btn btn-primary" href="#">
      <svg viewBox="0 0 24 24" width="14" height="14"
           stroke="currentColor" stroke-width="2" fill="none">
        <path d="M7 17L17 7" /><path d="M7 7h10v10" />
      </svg>
      LinkedIn
    </a>
    <button class="btn btn-ghost" disabled>Content — coming soon</button>
  </div>
</div>

Writing List

Post row · meta · serif title · tags · date

Essay · 8 min

The case for CSS custom properties as your design token layer

cssdesign systems

Feb 2026

Deep dive · 12 min

Why I stopped using component libraries and what I do instead

reactdx

Jan 2026

Note · 3 min

On shipping things that aren't perfect

craft

Dec 2025

<div class="post">
  <div>
    <p class="post-meta">Essay · 8 min</p>
    <p class="post-title">The case for CSS custom properties...</p>
    <div class="post-tags">
      <span class="tag">css</span>
      <span class="tag">design systems</span>
    </div>
  </div>
  <p class="post-date">Feb 2026</p>
</div>

Project Cards

Icon · title · description · tags · link

codeblock

Syntax highlighter built for performance at scale.

typescriptreact

token-sync

CLI that keeps design tokens in sync between Figma and code.

nodefigma api

focuskit

Accessible focus management primitives for React.

a11yreact

<div class="cards">
  <div class="card">
    <div class="card-icon">
      <!-- 18×18 SVG icon, stroke 1.5, fill none -->
    </div>
    <p class="card-title">codeblock</p>
    <p class="card-desc">Syntax highlighter built for performance at scale.</p>
    <div class="card-footer">
      <div class="row">
        <span class="tag">typescript</span>
        <span class="tag">react</span>
      </div>
      <svg viewBox="0 0 24 24" width="14" height="14"
           stroke="var(--muted)" stroke-width="1.5" fill="none">
        <path d="M7 17L17 7" /><path d="M7 7h10v10" />
      </svg>
    </div>
  </div>
</div>

Buttons

Primary · ghost · icon · disabled states

<!-- Primary -->
<button class="btn btn-primary">
  <svg viewBox="0 0 24 24" width="14" height="14"
       stroke="currentColor" stroke-width="2" fill="none">
    <path d="M7 17L17 7" /><path d="M7 7h10v10" />
  </svg>
  Primary
</button>

<!-- Ghost -->
<button class="btn btn-ghost">Ghost</button>

<!-- Icon only -->
<button class="btn btn-ghost btn-icon">
  <svg viewBox="0 0 24 24" width="16" height="16"
       stroke="currentColor" stroke-width="1.5" fill="none">
    <path d="M7 17L17 7" /><path d="M7 7h10v10" />
  </svg>
</button>

<!-- Disabled -->
<button class="btn btn-ghost" disabled>Disabled</button>

Tags

Mono pill · border · muted · used for labels

css react typescript design systems a11y performance

<span class="tag">css</span>
<span class="tag">react</span>
<span class="tag">typescript</span>

Dark Mode

CSS custom properties invert · body.dark class toggle

edchkm.com

Design System

Essay · 8 min

The case for CSS custom properties

css design systems

Feb 2026

<!-- Toggle dark mode -->
<button onclick="document.body.classList.toggle('dark')">
  Toggle theme
</button>

<!-- CSS custom properties auto-adapt -->
body.dark {
  --white:    #0f1829;
  --navy:     #fafaf8;
  --muted:    rgba(250, 250, 248, 0.4);
  --border:   rgba(250, 250, 248, 0.1);
  --border-h: rgba(250, 250, 248, 0.22);
  --surface:  rgba(250, 250, 248, 0.04);
}

Design Principles

01

Line over fill

Icons, borders, dividers: always 1–1.5px lines. Never filled shapes for decoration.

02

Serif headings

All display text is Instrument Serif. Editorial gravity with italic for warmth and emphasis.

03

Mono for data

Dates, tags, labels, code — always DM Mono. Tabular, precise, and scannable.

04

Motion is rare

Border, color, translateY only. cubic-bezier(0.16,1,0.3,1) at 240ms. Nothing else moves.

05

No decorative images

No hero images, no stock photography. Every image earns its place as information.

06

Space is content

Generous vertical rhythm. Let type breathe. Density only when data demands it.

CSS Tokens

 --navy:      
          #0F1829
 --accent:     #1B3BCC
 --white:     
          #FAFAF8
 --muted:     
          #888880
 --border:    
          rgba(15,24,41,0.12)
 --serif:     
          'Instrument Serif'
 --sans:      
          'Geist'
 --mono:      
          'DM Mono'
 --ease:      
          cubic-bezier(0.16,1,0.3,1)
 --dur:        240ms

Design System& Language

Greetings. Ed is here.

Design System
& Language

Greetings. Ed
is here.