This site is supposed to look almost empty when you arrive.
That's the first impression I designed for. A thin page, a small set of colors, a header with almost nothing in it, borders that draw themselves once and then hold still. If you glance at Edokko and leave, minimalism is the whole of what you got, and that's fine. It's what a glance is for.
Stay a moment longer and it starts handing things over. Almost nothing here moves on its own. The motion is nearly all sitting there waiting for you: move the cursor and a follower tracks it, hover an article card and it opens to show what was underneath, click the mark on an article header and it turns into a stamp and presses itself into the corner of the cover. 2 things do run on their own, a film grain and a scrolling band, and both are quiet enough that you have to go looking.
That's deliberate and it's most of the brand. Restraint on arrival, and something worth finding if you stay. Which makes writing an article about minimalism and this particular site slightly awkward, because a reader could open the 404 page, watch it throw physics around, and reasonably ask what I think I'm talking about.
So this isn't a piece arguing that minimalism is correct. It's a walk through one site, where I chose to be strict, where I chose not to be, and what the strict half actually bought. The previous article about SXO covered the search side of the same rebuild, and this is the design half of it.
What minimalism actually means for a site's design
Subtraction, not decoration
The most restrained thing on this site is also the most over‑engineered, which took me a while to make peace with.
There are no CSS borders here. Not one. Every visible line is a component called BorderWrap that
renders 4 absolutely positioned spans, one for each side, and it turns up in 21 different
files. border: 1px solid would have been shorter every single time.
I did it that way because a border made of 4 separate elements can be animated one side at a time, and the page load draws them on rather than blinking them into existence. That's a real feature and it's the reason the trade is worth it, but I want to be honest that it costs more code than the thing it replaces.
Which is the part of minimalism people skip. It isn't less code. It's fewer kinds of thing. One layout method, CSS Grid, with flexbox allowed only where nothing is actually being laid out. One border mechanism. One place that values come from, Noren, Edokko's Design System, so there's no stray hex code or arbitrary pixel measurement anywhere in the application. The number of decisions available shrinks, which means the number of decisions I have to make shrinks with it, and 2 pages can't quietly disagree about what a border is.
It also means that when I got the border mechanism wrong, I got it wrong in one place instead of 21.
Space is a token, not a leftover
Every measurement of space on this site comes out of a fixed set of steps, and I want to be accurate about how that happened, because "the spacing is systematic" makes it sound like it was systematic from the beginning. It wasn't.
I started with low‑fidelity wireframes and no tokens at all, working on feel. The system turned up at the high‑fidelity stage. I went to Noren, looked at the spacing steps that already existed there, and took whichever one sat closest to what I'd drawn. Sometimes that meant nudging the layout to meet the token rather than adding a token to meet the layout.
That's the real discipline and it's less romantic than deriving a scale from first principles. You draw freely, then you snap. A design system is a way of thinking, and I'd defend that, but the thinking happens in the abstract. A site is a use case for it. The snap is where you find out whether you're strict about the system you built.
What it buys is that space stops being a leftover. Nobody types 23px because 23px looked about
right on the screen they happened to be using. And because those steps scale with clamp() between
a phone and the 1440px width I designed at, the spacing grows and shrinks continuously instead of
jumping at a breakpoint to catch up.
Strict doesn't mean the system holds still. Building this site put new things into Noren more than
once, when I hit a case the abstraction hadn't anticipated. The cursor follower needed a color that
deliberately refuses to follow the theme, because it sits on top of a difference blend where the
value is an operand in a subtraction rather than something anyone looks at. A layer that flipped
along with the background would cancel out and render identically in both themes. Nothing in Noren
covered that, so Noren gained a token for it, and the rule that goes with it.
The traffic runs the other way too. Some of what this site pushed into the design system turned out to be Atelier's own vocabulary wearing a design system's clothes, named after components that only ever existed here, and I've since moved those back into the site where they belong. Most of the time I round to what already exists. Occasionally the site finds something the system hadn't thought of. Occasionally it finds something the system should never have been asked to hold.
Type and color, kept deliberately narrow
Colors here go through 2 layers. There's a set of raw values in Noren (I call these tokens the primitives) that never get used directly, and a set of named tokens that do, so nothing in the application ever refers to a color by what it looks like. It asks for the accent, or the page background, or the border, and the theme decides what that means today. Same for type: a scale, and no arbitrary sizes outside it.
The interesting part of a system like that is where it breaks, and it breaks in exactly 2 places on this site. Both are colors that refuse to follow the theme, and I had to be talked into both of them by the design not working.
The first is the cursor. There's a diamond shape that follows your pointer, and it's composited with a
difference blend, which means it shows whatever it's on top of, inverted. I had it themed at
first, like everything else. Testing in Figma is where I saw the problem: difference returns the
gap between the backdrop and the layer, so if the layer flips when the theme flips, the gap comes
out the same both times and one of the 2 themes ends up with an invisible cursor follower. That color has to stay
still while everything around it moves.
The second is a seal. There's a stamp hidden in the article headers, and it's made of paper, ink and red pigment. Those aren't interface colors that happen to look like paper, they're what the object is made of (inspired by Japanese signature on some Edo era prints), and paper doesn't turn dark because you switched to dark mode.
2 exceptions in a closed system, both written down where the system lives, with the reason attached. That's the part I'd argue matters. A narrow palette isn't narrow because you resisted adding to it, it's narrow because the additions are visible and have to be justified in front of whoever reads the file next, which is usually me in 4 months with no memory of any of this.
Where I didn't restrain anything, on purpose
What follows is the list of things I didn't restrain, and I want to get past it quickly, because a catalogue of everything I let myself have would be a victory lap.
Animation throughout. A 404 page running a physics engine. Icons that morph from one shape into another, text that scrambles when you switch language, something that follows your cursor, article cards that open when you hover them, a different gradient and its own named icon shape for every article, and an icon that presses itself into a stamp if you go looking for it. None of that is minimal, and it's most of the reason anybody stays past the first screen.
The cuts are the part that shows the line is real.
The article title used to sit on top of the cover image, composited with the same difference blend
the cursor still uses. I liked it a great deal. It was also unreadable, and I only know how
unreadable because I measured it instead of squinting at it. Over the cover of this article, the one
you're reading, the median contrast between the title and whatever happened to be behind it came out
at 1.98:1, against the 3:1 that text that size needs. Half the letters sat below 2:1 and the worst
were the same brightness as the photograph underneath. So the title moved into the plain column on
the left, where it measures 17:1 and where no cover image I upload in future can break it again.
I tried animating the homepage title, too. That one didn't need measuring. It felt like too much, so it isn't there.
And there's a diamond on the homepage I still want to move, which I haven't shipped because I haven't found a way to do it that doesn't get in the way. It might stay still forever. That's roughly where I'd want to leave this section: the line isn't a principle I apply, it's something I keep testing and sometimes lose.
What that restraint actually bought
A calmer interface, where it counts
The usual advice is to keep a header down to 4 or 5 links. There are none in mine. The header holds a logo, 3 switches for theme, grain and language, and a button that opens the menu. The 2 links I have, home and the Gazette, live inside that menu, and the legal page sits in the footer where nobody needs to trip over it.
That will change as the site grows and there are more places worth going. For now the honest reason the navigation is small is that there isn't much yet.
The calm comes from what happens on arrival rather than from the link count. A page here is quiet when it loads and stays quiet until you touch it. Every layout is built with the same method, so pages don't surprise each other. Nothing competes for your attention because almost nothing is moving.
What I didn't do is make the experience calm all the way down. Hover an article card and it opens up. Go looking on an article header and something stamps itself into the cover. The calm is a resting state, not a personality.
Speed, as a side effect of a thin structure
The speed argument for minimalism usually gets made about weight, and the previous article covered most of that: self‑hosted fonts, no third‑party scripts, pages built ahead of time. What I'd add here is the structural half, which is less about how much arrives and more about how many different shapes it comes in.
One layout method means the stylesheet isn't carrying 3 ways to arrange things. A closed set of values means it isn't carrying near‑duplicates of the same measurement. Neither of those is dramatic, and I'd be overselling it if I claimed a visitor can feel the difference.
And it isn't uniformly true, which I should admit rather than let you find. That border component renders 4 elements for every border it draws, in 21 places. It makes the document larger, not smaller.
I built it that way so each side could be animated on its own, because the borders draw themselves on when a page loads. Writing this paragraph is what made me go and check whether that was still working, and it was, in the worst available sense. Every one of the 41 border pieces on this page was being hidden and then drawn back in, behind a curtain that doesn't lift until after they've all finished. You could see the effect on the old version of this site. Then I added the curtain, and made 37 of those animations invisible without noticing I'd done it.
They only run on the thin outline that traces the edge of the window now, the one part that sits above the curtain and is genuinely visible while the page arrives. The page does measurably less work on load than it did before I wrote this section.
The one place this does touch search is smaller than you might expect from an article that keeps mentioning speed. A thin document is easier for a crawler to parse, and easier to keep semantically correct, because there is less in the way of the headings and landmarks doing their job. Nobody ranks you for tidy CSS. What a lean structure does is remove reasons to be slow and reasons to be ambiguous, and the content has to do the rest on its own.
So the honest version of the trade. The component costs more markup everywhere and buys motion in one place. Everywhere else it buys consistency, which is a smaller and duller benefit, and still the reason I'd keep it: 2 ways to draw a line is how you end up maintaining 2 ways to draw a line.
How this actually got applied here
Working out what was essential was mostly deleting things I'd built. The header lost everything that wasn't a destination. The article page kept a table of contents and a progress bar and nothing else, because those help you read and the rest would have been decoration wearing a badge.
Navigation got folded into a menu behind a single button, which is a decision I'd defend even when there are 20 pages instead of 2. A header that holds the logo, the controls and a way in is a header you stop noticing. Everything else is a link inside the content, which is where people click anyway.
The design got constrained in the 3 ways this article has already been through. One layout method, one border mechanism, one place values come from. That's the part where restraint stopped being an aesthetic and became a system I have to obey too.
Testing and iterating is the step I used to skip and now can't. There's a check running on every commit that fails the build if any page breaks an accessibility rule, so a mistake gets caught by a machine before it gets caught by a person. The last performance audit found the expensive thing was not the component I suspected but the one next to it. Both of those are described in the previous article about SXO, and both happened after I'd decided the site was finished.
Conclusion
Would I do it the same way again? Yes, and the reason is the thing I've been circling for a couple of thousand words.
One caveat first, because I hold to it: minimalism isn't a universal answer. Plenty of sites use it, so it might not distinguish you from anybody, and depending on what your brand is it can be actively wrong.
Here's the part I'd add. The minimalism that gets recommended is nearly always optimizing for one thing: move the visitor from A to B with as little friction as possible, so the purchase completes. That's a sound goal if you're running a shop. It isn't mine, at least not here. Whatever ends up on this site, I've no interest in shortening your visit.
What I want is for you to find what you came for without effort, and then lose a bit of time. Play the slot machine on the 404 page. Hover things and see which ones answer. Notice that the scrolling band reverses when you scroll back up, which almost nobody does and which took a surprising amount of work.
So a stricter minimalism would have been wrong here, and the split is what makes it fit. Thin structure so nothing gets in your way, and everything else left loose so there's something to find if you stay.
There's a Japanese idea sitting under all of this, and it's where the brand comes from: mono no aware. Everything is passing, this website included, and that's exactly what makes it worth looking at. So why not take a small detour and admire it on the way past.
