Making it look "Premium"
Design tricks for a high-end developer brand. How I use glassmorphism, borders, and gradients.
I wanted IntentLabs to look like a high-end piece of hardware. I didn't want it to look like just another "developer personal site."
Creating a "Premium" look on the web is actually about what you leave out, not what you put in. It’s about being disciplined with your choices.
Here are the three design tricks I use to create that "high-end" feel.
1. Subtle Glassmorphism
I use the backdrop-blur property in CSS. This creates a "frosted glass" effect. When you scroll my Field Notes, you can see the background colors subtly bleeding through the layers of the UI.
It adds a sense of depth and luxury without being distracting.
2. High-Contrast Borders
In a dark UI, borders are everything. Instead of using a single solid color, I often use a very thin linear gradient for my borders (0.5px or 1px).
One side of the card border might be a bit brighter than the other. This mimics how light hits a real physical object. It makes the cards feel like they have "weight."
3. Intentional Gradients
I don't use big, rainbow gradients. I use very subtle, dark gradients to create a sense of "ambient light."
- Background Gradients: I use radial gradients that start with a very deep indigo in the center and fade to black at the edges. It’s like a soft spotlight on your screen.
- Text Gradients: I sometimes use a subtle gradient on headers to make them look like they are made of metal or glass.
Quality is in the Details
As a humble builder, I’ve learned that "Premium" isn't about being fancy. It’s about being careful. It’s about checking every pixel and ensuring every color has a reason for being there.
When you look at this site, I want you to feel the effort I put into it. Not because I want to "flex," but because quality is a form of respect for the reader.