Dev AISite Design
The design here owes a fair amount to Anthropic. I like that look a lot: a kind of techno-humanist style with a touch of philosophy in it. So I wanted this blog to have enough breathing room too. It makes a page easier to sink into, and easier to think with.
Type
Headings and body text are set in a serif, the navigation switches to a sans, and code uses a monospace. The body column is tuned a little narrower. Each of the four series has its own accent colour. Once you are inside a post, links and quotes take on that colour, so everything in a series feels like it belongs together.
Notes in the margin
I lean on callouts a lot, but most tools support them in a limited and rather rigid way. So I redrew the icons to fit my own needs and taste, and gave them a bit more detail.
One more thing
One more thingA sticky note holds an aside. Skip it for now and nothing downstream breaks.
Worth a try
Worth a tryNext to the sprout you will usually find a practical suggestion, for anyone who wants to get their hands dirty.
Still thinking about this
Still thinking about thisThe cloud holds a question. Sometimes I am inviting you to think it through with me; sometimes I am reminding myself not to rush to a conclusion.
The rest of the callouts
Background · Signpost
Background · SignpostFills in the prerequisites and how we got here.
Summary · Cairn
Summary · CairnGathers the key points of a section or a whole post in one place.
Heads-up · Bell
Heads-up · BellWatch the assumptions behind a conclusion, or a pitfall that is easy to step into in practice.
Example · Frame
Example · FrameA concrete example to make an abstract point clear.
Quote · A figure speaking
Quote · A figure speakingBorrowing someone else's words to make a point; the source sits alongside.
Key point · Candle
Key point · CandleA line worth pausing on and reading twice.
Claim · A flag on the summit
Claim · A flag on the summitThe claim a post wants to argue for, or a vision I share.
Done
Records something verified or finished. Marked with a colour dot for now.
Risk
Flags a serious risk. Marked with a colour dot for now, kept in reserve.
Starting from a few strokes
The style of the icons came out of random iteration. I picked a few Anthropic images I liked and rolled the dice a few times, and out came the little figure next to "About" in the navigation : a few ink strokes, just the right amount of colour. The sticky note, signpost, sprout, bell and candle all grew from there, and they are what give the posts their breathing room.
: a few ink strokes, just the right amount of colour. The sticky note, signpost, sprout, bell and candle all grew from there, and they are what give the posts their breathing room.The icons were generated with a GPT model. The arrangement of nodes on the home page stands for what I hope orchestrating intelligence can become, and the river drifting slowly across the footer came from me telling the AI: let's drop the usual footer and keep it simple.