Design system
Type
h1Page titles
Product design for startups1.5remSection headings
How I help1remEverything else
Get feedback on your portfolio, resume, and LinkedIn.Weight
400Everything: one weight site-wide, hierarchy comes from size and color
See my work on LinkedInNeutrals
hsl(0 0% 6%)page background
hsl(0 0% 11%)card fill
hsl(0 0% 15%)card fill on hover
hsl(0 0% 18%)borders and dividers
hsl(0 0% 65%)muted text
#ffffffprimary text
Accents
#ff6b42 · accent-solidTHE accent, from the --accent-h/s/l dials: link hovers, underlines, Cal embed, the whole button
Responsive
All widths
Side padding is clamp(16px, 5vw, 64px): constant 64px gutters from 1280px, scaling with the viewport below≤768px
Gutter sections stack: the heading moves above its content≤700px
Booking embed switches to the tall stacked layout≤640px
Rows and card grids go single column; event dates wrap above the rowRules
- No em dashes anywhere; rework with a comma, colon, or period
- Non-breaking space between a preposition and the next word
- Align items by text baseline wherever sizes differ
- Optical centering on buttons / tags: one px moves from top padding to bottom
- Underlines sit 4px below the text
- Neutrals carry zero saturation; color is reserved for accents
- Cards: 24px corners, 11% fill, 18% border, hover lifts fill to 15%
- Event previews everywhere use the one shared EventRow component