An early design system for my blog

Most personal sites don’t need a design system
(and mine probably doesn’t either).

But, there is alot of recent hype around Google Stitch and how it builds you beautiful sites out of the box. These tools are accessible enough that the it might actually raise the baseline expectation of web page aesthetics.

Does this mean that anybody can precisely build the blog exactly the way he / she imagined it to be?

To validate the precision of these tools, I tried using Stitch to create a design system for my blog, and there are some interesting learnings.

The visual language: Grounded × Technical

Initially, I thought AI could take some vague desription and spit out a design system. Turns out it was not that simple.

The blog was going to be The Grounded Digital Architect’s Journal. Lots of paper tones, surfaces, earthy colours, but with striking lines that give it some structure.

This prompt itself produced an aesthetic looking architecture style journal, with lots of browns, rustic blues, and reds. It also used copious amounts of Serif fonts to keep that aesthetic.

But this was a little too rustic, and not what I had in mind.

Studying the DESIGN.md file from Stitch allows you to peek behind the curtain of its design magic. And this is what helped me grasp how to nudge Stitch in the right direction.

A glimpse into the Design Language

There are alot of words in used in DESIGN.md that feels out of place in conversations, but somehow crystalizes the essence of the proposed design. Some examples of these words include tectonics, Intentional Asymmetry, premium Swiss architectural monograph, and terracotta. Colors are given verbose name that invoke specific imagery like Forest Green and Drafting Slate.

It looks to me like the model has learnt how to translate from these rare, but descriptive words into visual colors, page structure and other design elements.

My Design System as described by Stitch

With the new learnings, I set out iterating on the design system, incantating prompts that feel awkwardly specific. At the end of it, Stitch describes my design system as:

A dual-accent design language for The Multi-Threaded Mind: blueprint precision as the structural register, elastic warmth as the counterpoint.

Frankly, a mouthful of words that I very rarely use in conversation, but probably providing highly specific triggers for the LLM to generate the right design.

The colors proposed were:

• Signature Teal — the primary accent. Cool, structural, directional.
• Oxidized Amber — the warm counterpoint. Used for interaction cues and secondary emphasis.
• Sandstone — a midpoint between the two. Functioning as the neutral backbone for most text and UI chrome.
• Architect Paper — grey with a smidge of blue. For the canvas.

There were lots to learn from studying what Stitch created. The final design system can be found here.

For this blog, I will cover briefly on 2 of its components: Colors, and Design Tokens.

Palette Generation using OKLCH

One of the most useful thing that Stitch provided was the Palettes, Shades and Typography visualization.

The uniformity of the palette scale is a sign that there is some standardized way to generate it. My investigations uncovered many such mathematical approaches, and the most modern one is OKLCH.

This color space is designed to mathematically ensure perceptually uniformity through Lightness, Chroma (the amount of color), and Hue. The math ensures that when a color’s lightness changes from 0.3 to 0.5, it is adjusted so that the eyes perceive it as the same color.

Mathematically, this means that you can easily define a function which takes in lightness as a variable, and uniformly generate a color scale from say 50 to 950 (like your tailwind color palettes).

You can read this write-up on the OKLCH technicalities by its creator Björn Ottosson if you’re interested in how to implement this.

Design Token hierarchy and practical benefits

Another useful design concept is Design Tokens, which feels like a concept lifted out of programming.

The code idea here is Separation of Concerns between the actual primitive building blocks of design (colors, spacing, typography, etc.), and the semantic names of how you would represent it in your app implementation.

Let’s use colors to illustrate this hierarchy:

Primitive tokens define the base colors in the pallete. It communicates what the color is perceptually.

--signature-teal-600: oklch(40% 0.074 184.6);
--oxidized-amber-300: oklch(70% 0.133 49.0);

Semantic tokens defines the use of a shade of color for a specific purpose. It allows you to easily swap out the real color of ink used in writing without having to disassemble your pen.

--accent:     var(--signature-teal-600);
--ink-body:   var(--sandstone-700);
--bg-canvas:  var(--architect-paper-100);

Contextual tokens are re-definition of tokens in different context. A common example is the change in what all the semantic tokens mean when dark mode is enabled.

[data-theme='dark'] {
  --accent:    var(--signature-teal-400);  /* lighter for dark bg */
  --ink-body:  var(--architect-paper-200);
  --bg-canvas: color-mix(in oklab, var(--architect-paper-900) 72%, var(--sandstone-900) 28%);
}

I appreciate how this concept brings structure to the way I can think about design. Definitely made it easier to define re-usable components using the semantic tokens.

Closing thoughts on AI-generated Design Systems

For the layman with an average eye for design, the output from Stitch looked amazing. I would recommend new bloggers to try incorporating a minimal design system generated by AI if they are just starting out. Making my blog visually appealing to me has no doubt made me more motivated to keep improving it.

There might still be some work needed to translate it into code, but Figma has shown that this is possible. Now, with all the Big Tech money flowing into this space, I think we’re less than a year away from anyone being able to one-shot a beautiful web page that is specific to their own needs.