Design works like software. You sketch something, mock it up, keep what lands, and throw out what doesn't. Then you go again, and again, until it stops feeling wrong.
When I started on my portfolio, I looked around at what other developers had built. Plenty of good templates out there. None of them felt like me. I wanted something personal, closer to a craft workshop than a landing page. Somewhere that looks like a person makes things there, on purpose: sophisticated, jewel-toned, terminal energy used as punctuation instead of the whole sentence.
Here's how I got there.
The Palette Journey.
I tried four directions before one of them stuck. The first was the default you land on when you don't make any choices at all. The next two were fine designs that just weren't mine, and weren't right for this.
Plain Default.
No fuss, no decisions. Black text on white, system-ish sans, default everything.
Dustin VanKrimpen
Software engineer building things in Michigan. View my projects or get in touch.
The first instinct was to just not make decisions. White background, black text, gray secondary text, default sans-serif. The "I'm not a designer, I'm a developer who happens to need a website" approach. The thinking: don't pretend, don't perform, let the content speak for itself.
It's the safest possible direction. Nobody could call it tacky or overdesigned. It would fit any context, any device, any decade.
Plain. Fine. Said nothing. On a portfolio it reads as "I couldn't be bothered," which isn't what I want a hiring manager walking away with.
Modern Refined.
The "thoughtful SaaS" direction. Safe, modern, approachable.
Dustin VanKrimpen, software engineer.
Me as a SaaS platform. Your software, delivered with care. Join now, free for the first 30 days.
I wanted color, so I built around a muted pairing of clay red and sage green. Terracotta (#c2624a) on the primary CTA carries the same energy as red but reads as craft and earth instead of civic or political. Sage (#5d7a6b) is the earthy grounding accent, used for labels and italics. Together they drop the page straight into "modern software" territory. I warmed the background to a buttery #faf6ee and softened the navy to #1a2536, a notch less stark than full navy.
The typography shifts. Headings switched to Fraunces, a variable serif, with italics for emphasis. Fraunces reads as thoughtful modern software. Sentence case on buttons and labels read as conversational rather than commanding. Pill-shaped buttons instead of hard rectangles are softer, more contemporary.
Good, but not me. I'd built something you couldn't tell apart from a startup's marketing site. The craft was there. The personality wasn't. It felt like cosplaying another company's brand.
Neon Cyberpunk.
The opposite swing. Electric purple, neon green, heavy glow, all monospace.
_DUSTIN_VANKRIMPEN
> init l33t haXX0r skillz...
If the refined direction was too safe, this was the overcorrection. Pure cyberpunk. Electric purple (#b300ff) and neon green (#00ff80) on void-black, heavy glow on every element, monospace all the way down.
Borrowed energy from cyberpunk movie posters, Defcon talks, hacker forum aesthetics. Buttons had glow on top of glow. Headlines had double text-shadows. The whole thing felt like a launch sequence.
All volume, no quiet. Nowhere to rest your eyes. Fun as a vibe. Still not me.
The Flannel Epiphany.
Unexpected inspiration from real life.
Dustin VanKrimpen.
Just a chill software dev in Michigan. Build logs, projects, and the occasional thought.
I ran through several more rounds trying to split the difference between safe-and-mature and fun-and-techy. Nothing clicked. I wanted something grounded and humble that still carried color and a character of its own.
Then I looked down at the shirt I was wearing. A flannel I wear constantly: deep navy-purple base, charcoal, a jewel-tone teal, thin red stripes through it. I thought, this is the palette.
Not the plaid itself, but what the colors were doing together. The dark base wasn't pure black; it had warmth and depth. The teal sat muted and low, nothing like neon. The red was one thin stripe, used sparingly. And purple wasn't a background at all. It was a destination.
The charcoal (#1a1a22) carries a faint purple-warm undertone. That little bit of warmth keeps the whole thing from going cold and sterile. It reads as low-light workshop, not data center. The teal (#3a9b9d) is muted and shifted slightly green, away from bright cyan. It looks more like an old phosphor display than a neon sign. The spark red (#C2392E) shows up only for emphasis: a thin line above the hero, the primary button, and that's it.
It worked because textile designers had already proven these colors can live together, for decades. Real-world objects come with color harmonies built in. It worked because every color had a job too: teal is the workhorse accent, purple the destination, spark red the action signal, charcoal the foundation.
Style Elements I Cut.
Beyond color, there were a dozen smaller choices I tried and cut. Some were generic anti-patterns I knew to dodge from the start. Others almost made the final cut before I caught them doing more harm than good.
My first attempts looked exactly like the thing I was trying to avoid. None of them said anything about me. They were templates I'd dropped my information into.
> and // markers convey terminal energy without being a costume.These four got closer. Each one ended up clarifying what the site is actually for.
[01]01 in mono is cleaner.The pattern I noticed: every time I cut something, it was because the element was performing rather than communicating. Decorative motion that didn't tell you anything. Costume-coded type that screamed "look how terminal I am" rather than just being terminal-flavored. The good moves are the ones that get out of the way once you've absorbed them.
Typefaces Considered.
With the palette settled, I had to pick type. Four faces, each with one job, no overlap. Before I locked the display face, I tried three that didn't work. Each showed me a way the site shouldn't go.
The rule that emerged: JetBrains Mono only for terminal-energy moments. Comment-style eyebrow text. Metadata. The numbers in numbered lists. Never body copy. The moment you put mono on long-form text, it goes from "this is from the terminal" to "this is uncomfortable to read."
Signature Moves.
A palette and a type system get you 80% of the way there. The last 20% is the small recurring elements that make a site feel like it belongs to a specific person, not a Figma template.
I built three of them. Each one earns its place.
The wordmark sets a teal forward-slash between my first and last name, last name in purple. The slash glows, just barely. It's the only place that slash-and-purple combo shows up anywhere on the site, which is what makes it work. It's my signature, not a motif I reuse until it turns into wallpaper.
A small pulsing teal dot in the nav, with a "STATUS" label in mono. It says "alive and present" without spelling anything out. The pulse is slow, a full 2.5 seconds, so it reads as ambient instead of anxious.
For the eyebrows above section headlines, I use a teal // marker followed by the label in mono. It frames the section like a code comment: "this is metadata about the thing below." Once you notice it, the whole site starts reading a little more like a code editor.
Purple Only Shows Up Once Per Page.
Purple is the destination color. One section per page gets it: the headline feature, the spot I most want a visitor to land. When purple finally shows up, it should feel like stepping into a velvet room in a slate-floored studio. Spread it everywhere and the hierarchy collapses, nothing feels special. The restraint is what makes the rare thing read as rare.
What I Learned.
Three things I came out of this with that I'll take into the next design:
- Restraint is a feature. Every accent color, every glow, every animation has to earn its place. If everything is loud, nothing is loud.
- Borrow from physical objects, not other websites. That flannel taught me more about a palette than an hour of scrolling Dribbble ever did. Things that already exist in the real world have survived the test of looking good together.
- Rules beat decisions. "Purple only once per page" is easier to follow than "use purple thoughtfully." Codified constraints free you from having to make every choice from scratch.
The site you're reading this on isn't finished. It'll keep changing as I learn more. But the foundation feels right: it looks like somewhere a person actually makes things, not a template with my name dropped in. That was the entire goal.
I keep a reference doc for the whole design system and update it as I go. Drop me a line if you'd like a copy.
//Comments