003Schematic

Website style · also good for report, web-app marketing, proposal

A calm technical drawing: hairline frames with corner ticks, a whisper-thin serif, and mono labels.

Use it: tell your agent

make my website in 003
Style 003, Schematic: desktop, 1440 wide preview
Desktop, 1440 wide
Style 003, Schematic: phone preview
Phone, 390 wide

The signature

The page is drafted like an engineering sheet. Content sits in 1px hairline frames whose corners carry small square tick marks, so the rules are the structure. Headlines are an ultra-thin serif with tight tracking. Body text is a light grey grotesk, and labels and buttons are spaced mono capitals, like annotations. One dot-matrix drawing made of small marks gives the page its image without a photograph.

Credit

After Speakeasy (speakeasy.com), Typewolf Site of the Day, 8 Dec 2025. Visit speakeasy.com

The preview is our own re-making in free fonts, with our own sample content. Nothing from the source is shown here.

Palette

  • page#FAFAFA
  • white#FFFFFF
  • ink#0F0A07
  • body#575251
  • rulergba(15,10,7,0.12)
  • tickrgba(15,10,7,0.24)
  • button#242428
  • accent#B22C23

Fonts

  • DisplaySource Serif 4200
  • TextGeist300, 400, 500
  • MonoGeist Mono300

Sign in to see the full guide

The guide is the whole recipe for Schematic: type sizes, colour roles, spacing, layout, components, and the rules your agent must never break. It is free with a DevThrottle account.

Sign inCreate a free account