I used this project as an excuse to explore all of the modern CSS I hadn’t really had to chance to dive into in my day to day work. The list is pretty extensive but here are a couple.

• Vanilla CSS

• View-transitions

• Relative colours

• Variable typography

• light-dark()

• @containers

• pop-over & dialog

• compound-grid (not new but requires forethought)

I’ll touch on all of those technologies as we continue below. I also had another goal for this project though, which was to create something with a distinct point of view, that didn’t feel like AI slop. In other words the aesthetic sensibilities needed to be intentional, and underpinned be a underlying design philosophy. If that’s not interesting to you feel free to jump ahead to the technology insights at the end of the blog.

How to build an Aesthetic?

Starting from nothing, it’s not easy. It’s uncomfortable, wouldn’t you rather ask the LLM genie to give you somewhere to start? I mean I guess you could, but then it’s going to be harder the next time, and the next time, but your taste is what matters right? Not your ability to conceptualize and create. Eh, maybe I’m being a bit mean but please understand if you are reading this to gleam some insight into process, the uncomfortable part is the most important part.

Ok, Jon enough blabbering how did you start? Well for this project I started from the typography, seeing all the AI slop-folios typography was the most derivative piece. Inter and some sort of script font, for everything (and eyebrow headings but that’s another story). So I set out looking for inspiration. I was browsing v-fonts.com and found this really interesting, kind of organic font called Phase by Elise Hanzer. Who was gracious enough to provide me with it for the site. From there things started building on each other.
-- more context –
I also had a personal goal to create something that looked like it belonged on the web, going back to fundamentals of design were the medium helps define the form. With that in mind I intentionally reached for basic native CSS first before looking elsewhere. Which is how I landed on the double borders on the site, which turns out looks pretty cool when they have a border-radius and are opposite a solid line.

I also wanted to pay homage to traditional stationary, where user experience lived pre-screens.

So ya with all that said, this site should create a aesthetic and experience that meets all those criteria. I think I’ve been fairly successful but I’d love to know what you think so feel free to reach out of you’d like to talk more.

When I introduced AI

View-transitions

Ya these are confusing, the syntax is byzantine, and they are so new and under utilized AI can’t save you here. Thankfully Bram.us recently had a talk for Google.dev day which was the first time I started to be able to wrap my head around it. I highly recommend you check it out here. There is also a npm package to help with some of the common use-cases you may have.

But with that said, man these are powerful. I’ve never been able to create such native feeling interactions on the web before. For my Carousel and context sections I leaded on them to transition into a focused view, and it just runs so well. Let me jump into whats happening a bit.

No more .SCSS

That’s right completely dropped any pre-css-compilers. And it’s was way easier then I anticipated and I don’t miss the package mangement overhead. The only down side is breakpoints are still kind of annoying, you kind of just need to remember them. @container style queries help a bit but they don’t really cascade in a way that makes sense like your tradition queries did.

• If you are thinking of biting the bullet and going full vanilla though I highly recommend it, there is some really cool stuff available to us now.

• Nesting

• Container queries

• style queries

• relative colour (this is deep)

• rounding, exponents, powers

• text stuff - just go to mdn they added like 10 exclusively text properties

• max and min

• oklch

• svh - dvh - cvh - cvw

• :not(),:has(),:is() - you have a million and 1 ways to select your element with css now it’s remarkable. And you can do things like :has([checked]) to do some basic interactive form stuff just with css.

If any of that sounds new go check it out on MDN, you may not have a use for it now but file it away because it’s such a game cahnger.

Containers

I mention it above but it needs it’s own section. Containers give us an insane amount of control. In particular - component specific responsiveness. Things no longer need to rely on the view-port as a whole. And designing layout with the y-axis is actually pretty trivial now with container queries and some CSS-grid knowledge.

Compound grid

With all the axis of control I needed to ground the design in a grid. But not a rigid grid just something to add structure to the site. I oped for a 5x3 compound which is just another way to say I overlapped 5 equal columns on top of 3 equal column. [example needed]

The column are then defined at the app root so I can apply some semantic meaning to them and they aren’t completely arbitrary, although sometime they are I’m being honest.

Dialog & pop-over

These are more of a HTLM thing but I wanted to use as many native browser pieces as a could so, you’ll see throughout this site there usage. Not I honestly don’t know how I feel, maybe I’m just unfamiliar but a lot of the times these feel worse to use then javascript and a front-end framework so maybe I’m not the target audience. I do love the intelligent anchor-positioning though.

Variable fonts

Now I used variable type in my old-site too, I’ve always kind of been obsessed with it but there are some new tools to help out since I created in 6 years ago. I tried to create a completely responsive 1 liner on my old-site but realistically it’s just not possible. For this site I settled on a modular type scale of 1.333 from 1280 -> infinity and a 1.12 type scale for mobile with a base font of 16 -> 14px . It feels to most natural to me and does look good on most interfaces. I also decided not to worry about ultra-wide displays this time and instead capped a core width on the site. Honestly I think it’s best ultra-wide sites never look right and capping the width gives a user with a large monitor all the same experience as everyone else and it feels more intentional. Do I think it’s impossible to design for ultra-wide? Of course not but for my purposed a tight 1280px max was more then adaquite.

Typography

I wanted a font that felt a bit different, organic and most of all not futura adjacent. On the variable-fonts.com catalogue I found Phase by Elise Hanzer which he generously gave me permission to use for this project. The font itself helped me articulate the design vision for the project, as a grounding visual element.

Stationary

You may have noticed this site is heavily influences by the aesthetics of old stationary. I’ve always been interested in graphic design, system design, user experience from before digital experiences were ubiquitous. While it’s not all great there is a lot of thoughtful work that’s worth consulting. I think of the Franklin Planner, Hotel dry cleaning forms etc. Of course designing for a static form-factor is a lot simpler but with all the new layout tools we have in CSS now we can start to take some inspiration from the static design of yesteryear.

With that in mind I’m also using as much as possible simple tools available to us in <HTML5>, it makes me feel clever to use border-style:double; or details…