Design System

Tokens, typography, spacing, and components for heyjaycodes.com.

// colors
--bg
page background
--bg2
input fields
--bg3
cards, newsletter box
--border
all borders, dividers
--border-subtle
post tag border
--amber
primary accent, nav logo, labels, buttons, links
--amber-light
button hover state
--amber-dim
post tags, nav // on hover
--amber-glow
post row hover bg
--text
primary text, post titles
--text-mid
hero subtext, about body, nav links, social links
--text-dim
post dates, excerpts, newsletter desc, footer, placeholders
// typography
hey, i'm Jay.
--text-hero clamp(2.2rem, 5vw, 4rem)
weight 700 · leading 1.15
tracking -0.02em
used: hero h1, page titles
Tokens, typography, spacing, and components for heyjaycodes.com.
--text-page-sub references --text-md (14px)
weight 400 · leading 1.9
used: page subtitles
Shipping Notes
--text-lg 1.1rem
weight 700 · tracking -0.01em
used: newsletter heading
Why I rewrote my networking layer
--text-md 14px
weight 700 · leading 1.3
used: post titles, nav logo, hero subtext, profile name
I build apps, caring about the details. Every product I put out is something I actually use myself.
--text-base 13px
weight 400 · leading 1.9
used: about body text, input fields
Not a benchmark. Just the tradeoffs I actually hit shipping a real app.
--text-sm 12px
weight 400 · leading 1.6
used: post excerpts, newsletter description
// recent posts
--text-xs 11px
weight 400 · tracking 0.15em · uppercase
used: section labels, nav links, buttons, footer, post tags
// spacing
--space-1
0.25rem — not currently used
--space-2
0.5rem — button icon gap, small gaps
--space-3
0.75rem — social link padding, link pill gap
--space-4
1rem — section label margin, post padding, nav
--space-5
1.25rem — post meta gap
--space-6
1.5rem — cta gap, paragraph margin
--space-8
2rem — footer padding, hero eyebrow
--space-10
2.5rem — hero subtext margin, newsletter padding, page horizontal padding
--space-12
3rem — footer bottom padding
--space-14
3.5rem — about layout column gap
--space-16
4rem — section vertical padding
--space-20
5rem — hero bottom padding
--space-28
7rem — hero top padding
// components
nav
footer
page-header
// all posts

the stuff that matters when you ship.

the process, the tradeoffs, and the things I learn along the way.

profile-card
JW
Jay Wilson
@heyjaywilson
btn--primary
btn--ghost
post-item
Apr 12, 2025 Swift
Why I rewrote my networking layer from scratch
Async/await looked clean until it wasn't. Here's what I actually shipped.
social-link
newsletter-box
callout
// note

This is a callout used inside post body content to highlight important information.

code-label
// ContentView.swift
filter-bar
year-divider
2025
hero

hey, i'm Jay.

I build apps, caring about the details. Every product I put out is something I actually use myself.

section
// recent posts
// post · prose

Section heading h2

Sub-heading h3

Body paragraph. This is bold text and this is a link with underline. Inline code looks like someFunction() and sits within a sentence.

A second paragraph to show vertical rhythm between prose blocks.

  1. Ordered list item one
  2. Ordered list item two
  3. Ordered list item three

This is a blockquote. Used for pull quotes or callout text from the post.

// note

This is a callout component embedded in post body content.

// NetworkManager.swift 
func fetchPosts() async throws -> [Post] {
  let url = URL(string: "https://api.example.com/posts")!
  let (data, _) = try await URLSession.shared.data(from: url)
  return try JSONDecoder().decode([Post].self, from: data)
}

Content after a horizontal rule divider.

App Subscribers MRR
iHog 28 $28
Camp Notes 1 $2
Coffee_ 0 0
Universe Converter 0 0
// breakpoints
--max-width 900px maximum content width used across all pages and the nav
--bp-mobile 600px stacks about layout (profile card above body text) and newsletter form (input + button go full width vertical)