design system
the visual identity and design guidelines that shape everything on this site. a reference for consistency.
color palette
#f7f7f4
background
warm off-white
#F0EFE9
card surface
card bg
#3C4B59
text primary
dark blue-gray
#627281
text secondary
ink light
#9BA5B0
text faint
muted
#CDD8FC
border
light blue
#00A859
accent green
angle
#E9B150
accent gold
y0
#A8AAE5
accent lavender
general accent
typography
sora — headings & body
the quick brown fox
sora is a geometric sans-serif that feels modern but approachable. used for all headings and body text with weights 400, 500, and 600.
caveat — handwritten accents
hey, this feels personal.
caveat adds warmth. used sparingly — greetings and personal touches only.
ibm plex mono — labels & navigation
section headers · nav links · buttons · metadata
monospace grounds the design with structure. always lowercase, always tracked wide. 11px at 0.2em letter-spacing for section labels.
components
buttons
pill buttons with rounded-full, thin borders, and an arrow icon. text links for secondary actions. both use monospace at 12px.
cards
label
thin border, 7.5px radius, generous padding.
3px colored bar differentiates ventures.
section labels
this is a section label
11px ibm plex mono, letter-spacing 0.2em, faint color. always lowercase. used to introduce every section on every page.
accent lines
lavender
green / angle
gold / y0
3px height, rounded ends. placed below page titles to add color without weight.
principles
every piece of visible text is lowercase — headings, nav, labels, buttons, proper nouns. no exceptions.
no dark mode. warm off-white background with blue-gray text. simple and clean.
server components only. css animations for motion. deployed as static html via next.js.
every element stacks gracefully on mobile. tailwind responsive prefixes for all layout changes.
sections breathe. content never feels cramped. let the layout do the talking.
staggered fade-up animations on page load. smooth hover transitions. nothing flashy.
tech stack