Style Guide
The design system this site runs on is public. Every component, the tokens, and a live palette editor are at ui.half-built-robots.com, and the packages are on npm under @half-built. That page is the reference for anything that comes from the packages. This page covers only what this blog adds on top of them.
Badges
An AI-generated image wears a corner badge, the same chip as the read time on the archive cards. It goes on generated pixels only, not on photos that went through ordinary editing. A post whose hero is generated sets heroGenAI in its frontmatter and the badge rides the hero and the card. A post with an interactive demo sets demo and gets a matching Demo badge in the same places.
AI Art Henry
Henry is this blog’s robot, not the design system’s. He is the favicon, the confused robot on the 404 page, the placeholder banner on posts without a photo, the little face in the header that links to my portfolio, and the occupant of the stasis unit. His artwork is vendored from his own repository in this site’s amber colorway and never redrawn here. The Brand Guide has the rules and the palette.
Writing conventions
- Post titles use a tilde between the title and its subtitle, as in Robot Ships Blog ~ Astro to Cloudflare Pages. A colon is reserved for series prefixes like Paper Notes:.
- A later addition to a post is an inline parenthetical right after the sentence it amends, starting with Update:. A factual correction is its own paragraph below the sentence it corrects, starting with Correction:.
- Captions go through the image components’ caption props, never as a loose italic line under the picture.
- File names, identifiers, and commands are in backticks. Code that was copied from a repository is quoted verbatim, warts included.
- Categories are a fixed list of ten. Tags are a controlled vocabulary that feeds the site search, so a new tag is added on purpose, not coined per post.