Case Study · Design Systems
This Site Is a Case Study Too
I designed and hand-coded this portfolio from scratch. No templates, no site builders, no frameworks. Every color, type choice, and interaction was a deliberate decision, and inclusive design was a constraint I worked within from the first sketch rather than a checklist at the end.
Palette
I moved away from the safe neutrals most portfolios reach for. Deep plum carries the structure, warm sand softens the canvas, and a single saffron accent does all the signaling. Every pairing was checked for contrast before it earned a place in the system.
Typography
A pairing with real tension: an expressive serif for display, a quiet sans for everything that has to be read at length. Type scales fluidly with the viewport using clamp, so nothing breaks between breakpoints.
Cormorant Garamond
Display. Editorial and expressive, used with restraint for headlines and wordmarks.
Inter
Body and UI. Clean and highly legible, the workhorse that lets the display face shine.
One motif, everywhere
A saffron left border runs through the entire site. It appears on pull quotes, skill items, design values, case study cards, hover states, and the hero rule. It is a quiet, consistent thread that ties every page together, the same way a good design system ties a product together. Once you notice it, you see the site as one object rather than a set of pages.
Designing for everyone
Inclusive design sits at the center of my practice, so it shaped this site the same way it shapes the products I design. I built on the assumption that people would arrive with different abilities, devices, and contexts, and that all of them deserved a first-class experience. These were the decisions that followed.
Semantic structure
Proper HTML landmarks, a real heading hierarchy, and ARIA labels, so screen readers can navigate every page the way sighted visitors scan it.
Keyboard navigation
Every interactive element is reachable and operable by keyboard, with clearly visible saffron focus indicators throughout.
Respect for motion preferences
All animations, from the hero entrance to card transitions, disable automatically for visitors who prefer reduced motion.
Color and contrast
The palette was chosen with WCAG contrast in mind, and color is never the only way information is communicated.
Meaningful alt text
Every informative image carries descriptive alternative text, and purely decorative elements are hidden from assistive technology.
Content that works without JavaScript
Core content and navigation never depend on scripts to be visible or usable. Enhancements layer on top; they are never the foundation.
Built with
Fully responsive, accessible by design, and fast. There is no build step and no dependency beyond two font families, which means the whole site loads quickly and stays maintainable by one person.
What I would do differently
Building the accessibility layer last, even by a little, was the wrong order. A few content sections initially relied on JavaScript to become visible, which meant they disappeared entirely if a script failed. Catching that taught me a rule I now apply by default: enhancements can depend on JavaScript, but content never should.
Accessibility work is also never actually finished. If you run into a barrier anywhere on this site, I want to know about it.