Design System - Jacob Olenick

Foundations

Color

Semantic tokens in :root and [data-theme="dark"]. Swatches reflect the active theme.

Primary text

--primary-text

Secondary text

--secondary-text

Border

--border-color

Background

--background

Hover surface

--hover-bg

Accent

--accent-color

Header

--header-bg

Skeleton base

--skeleton-base

Skeleton shine

--skeleton-shine

Dot grid

--grid-dot-color

Raw values

Token	Light	Dark
--primary-text	#1a1a1a	#ffffff
--secondary-text	#666666	#a0a0a0
--border-color	#e5e5e5	#333333
--background	#F7F7F4	#000000
--hover-bg	#eeeeeb	#1a1a1a
--accent-color	#0066ff	#4d9fff
--header-bg	rgba(247, 247, 244, 0.8)	rgba(0, 0, 0, 0.8)
--skeleton-base	#e6e6e3	#2a2a2a
--skeleton-shine	#f0f0ec	#383838
--grid-dot-color	rgba(0,0,0,0.07)	rgba(255,255,255,0.08)

Foundations

Typography

Headings use Apple Garamond; UI and body copy use the system sans stack.

Font families

Apple Garamond

--heading-font'Apple Garamond', Georgia, serif

System UI Sans

--body-font-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto…

Monospace (spec overlay only): ui-monospace, 'SF Mono', Menlo, Consolas

Apple Garamond weights

Light — Design systems that ship 300 · Light

Regular — Design systems that ship 400 · Regular

Light Italic — Agentic workflows 300 · Light Italic

Italic — Agentic workflows 400 · Italic

Type scale

Sample	Size	Usage
Aa	48px	Hero subtitle, page titles
Aa	32px	Section titles (DS page), post display
Aa	24px	Note list titles, experience titles
Aa	20px	Resume titles, section headers
Aa	18px	Hero & page descriptions, post titles
Aa	17px	Resume body
Aa	16px	Base body, nav links
Aa	15px	Section labels, tags, read more
Aa	14px	Dates, footer, social labels
Aa	12px	Post pills, spec panel

Body default: 16px / line-height 1.6. Section labels: uppercase, letter-spacing 0.05em, weight 600.

Foundations

Icons

Google Material Icons loaded via stylesheet. Default UI size is 20px; footer coffee uses 18px; video controls use 20px on 40px circular buttons.

straightenstraighten

dark_modedark_mode

light_modelight_mode

arrow_forwardarrow_forward

arrow_backarrow_back

expand_moreexpand_more

play_arrowplay_arrow

pausepause

volume_offvolume_off

volume_upvolume_up

coffeecoffee

Foundations

Spacing

Consistent rhythm across sections and components. No formal spacing token file — values below are used throughout the site.

8px

Tight gaps, pills

16px

List rows, logos

24px

Nav gap, notes grid

32px

Section padding, cards

48px

Post grid gap

80px

Section margin-bottom

Foundations

Border radius

Rounded corners reinforce a soft, editorial feel. Pills use full rounding (999px).

4px

Skeleton chips

8px

Note images

10px

Logos, Ko-fi btn

12px

Cards, resume, posts

16px

Tags, bring grid

50%

Avatars, icon buttons

999px

Pills

UI

Components

Live examples using production classes from the portfolio stylesheet.

Navigation

Work Notes About

Text links (underline grow)

See all work Keep reading → View Figma Slides Deck arrow_forward

Tags & pills

Figma Design Systems React Product Design Design System

Plugin tabs

Project list item

Example plugin

Short description in secondary text.

Resume card

Experience

Role title

Month Year – Present

Body copy at 17px in secondary color with optional inline link.

Icon buttons

Layout

Single-column editorial layout with a dotted grid background on the body.

Content max-width: 680px (.container) — 800px on About & this page

Horizontal padding: 20px

Main vertical padding: 60px top · 120px bottom

Header: sticky, blur backdrop, 1px bottom border

Background grid: 24×24px radial dots via --grid-dot-color

Breakpoints: 768px (nav panel, type tweaks) · 900px (bring grid) · multiple mobile steps in styles.css

Interaction

Motion

Subtle transitions; respect prefers-reduced-motion (home skeleton skipped when set).

Theme / background0.3s ease
Link underline grow0.3s ease
Nav, tags, hovers0.2s ease
Card lift (posts, notes)0.2s ease · translateY(-2px)
Read more chevron0.3s ease · rotate 180°
Home skeleton shimmer1.1s · 750ms total load
Mega name footer reveal0.45s ease

Brand

Assets

Custom cursors and brand marks used across the site.

Site pointer

Figma-style arrow · --site-cursor · hotspot 1,1

Hero cursors

Decorative multiplayer cursors on the home hero (you + jacob)

SVG logos

Tool marks (Figma, Claude, Cursor, Adobe) and club badges in /images

Ag

Apple Garamond files

fonts/AppleGaramond*.ttf — Regular, Light, Italic, Light Italic