Editorial

H by Hatchable

A magazine-like design system starter — serif, restrained, considered.

Editorial

Most app starters look like app starters: the same gray cards, the same system font, the same slightly-generic feel. This one is built to look like it was made by a person. Serif headings, a restrained gray scale, one deep accent color, and a lot of breathing room — a magazine voice instead of a dashboard voice.

Everything visual reads from design tokens in a single theme.css. Change `--brand` and the accent updates everywhere; swap `--font-heading` and every title re-sets. The showcase home page exercises the whole kit on one screen — typography, buttons, form fields, status badges, cards, a dialog, tabs — so you can see exactly what you're getting before you write a line.

It's not just static styling. The page ends with a working guestbook: a public form that validates input, drops bots with a hidden honeypot, writes to Postgres, and reads the latest entries back on load — a complete read/write example you can study or strip out.

Reach for it when the thing you're building should feel considered: a personal site, a changelog, a content-first dashboard, a landing page, a writing project. Copy & Launch it, replace the showcase page with your own, and keep the design system.

Features

Design-token driven

Every color, font, and radius is a CSS variable in one theme.css. Change --brand once and the accent updates across the whole app; swap --font-heading and every title re-sets. No find-and-replace.

A magazine voice, not a dashboard voice

Serif headings, a restrained gray scale, generous spacing, and pull-quotes. Built to feel written-by-a-person — right for personal sites, changelogs, and content-first apps.

The whole kit on one screen

The showcase page renders every component — buttons, inputs, badges, cards, a dialog, tabs — and every type style, so you see exactly what the template gives you before you build.

A working read/write example

It ends with a real guestbook: a public form that validates, drops bots with a honeypot, writes to Postgres, and reads entries back on load. Study it, or strip it out.

Yours to reshape

Copy & Launch it, replace the showcase page with your own App component, and keep the design system. Free, source-available, no per-seat pricing.

What you get

  • Source code, deployed to your account on Hatchable
  • Your own subdomain (or BYO custom domain on the Pro plan)
  • A real Postgres database, scoped to this app
  • The ability to make a copy, edit it, and redeploy via your AI tool
  • CSV export of your data, any time