softwaresoftware design system

Quiet software.

Version 2. One typeface, two colors, zero border radius. Everything softwaresoftware.dev ships should look like it was made by someone calm.

Get the tokens Browse components

01 — Principles

Restraint is the brand.

Monochrome first

Black ink, white paper, a neutral gray scale between them. Color has to earn its way in — and only green ever does.

One typeface

Archivo everywhere, mostly at light weights. Hierarchy comes from size, spacing, and case — not from switching fonts.

Sharp corners

Border radius is zero. Rectangles are honest. If a corner is rounded, it isn't ours.

Whole-section contrast

Pages alternate full white and full near-black bands. Never a dark card floating on a light page.

02 — Typography

Archivo, lightly.

Weights 200–500 only. Headlines are weight 300 with tight tracking (−0.035em). Uppercase eyebrows are letterspaced wide (+0.14em). Code is JetBrains Mono.

Display / headline — Archivo 300
Run it on your own terms.
Run it on your own terms.
Run it on your own terms.
Eyebrow / label — Archivo 400, uppercase, +0.14em

Deployed from local-yocal

Body — Archivo 300, 15px

Claude builds a static page and deploys it to a live HTTPS URL. No frameworks, no build step — clean HTML and CSS served by Nginx through a Cloudflare tunnel. The page reads quietly: light weights, generous space, nothing asking for attention it hasn't earned.

Code — JetBrains Mono 400
curl -s https://design-system.softwaresoftware.dev/css/tokens.css \
  -o css/tokens.css

Inline code like --accent sits on the surface tone with a hairline border.

03 — Color

Two colors and a pulse.

Ink and paper do all the work. The neutral scale handles borders, surfaces, and muted text. Green appears only as a status signal — a badge, a live dot — never as decoration.

Ink#0a0a0a
Paper#ffffff
Neutral 50#fafafa
Neutral 200#e5e5e5
Neutral 400#a3a3a3
Neutral 500#737373
Neutral 800#262626
Accent#22c55e

Accent usage in the wild: Live We're hiring — and that's about it.

04 — Components

Rectangles, mostly.

Buttons — every button carries an arrow
Get started Documentation Talk to us Inline arrow link
Command block — code scrolls, copy never moves
curl -fsSL https://get.softwaresoftware.dev/example-1a2b3c4d/install.sh | bash

The button sits outside the scroll container — full height, hairline divider, uppercase eyebrow type. On success it reads copied for 1.5s (the one legitimate accent use in this component). Never place the button inside the element that scrolls: long commands push it out of view or under the scrollbar.

Badges
Live New v2.0 Archived
Cards — hairline borders, ink on hover, no shadows

liteframe

Static pages built and deployed to a live HTTPS URL in one pass. No build step, no framework.

View project

taskpilot

Long-running autonomous Claude sessions, supervised by a daemon that survives reboots.

View project
Stats — light weight, tight tracking, hairline grid
148
sites deployed
36
repos in the ecosystem
99.98%
tunnel uptime
Form fields
Table
TokenValueRole
--ink#0a0a0aText, dark bands, primary buttons
--paper#ffffffLight bands
--accent#22c55eStatus only
--radius0Non-negotiable

05 — Rules

Do and don't.

  • + Alternate full white and full black sections
  • + End links and buttons with an arrow →
  • + Use warm photography or painterly imagery for contrast with the stark UI
  • + Let numbers speak: big stats at weight 300
  • + Keep motion to 150ms hover transitions
  • − No border radius, anywhere, ever
  • − No drop shadows or gradients
  • − No second accent color
  • − No bold weights above 500
  • − No scroll-triggered animation

06 — Tokens

Take it with you.

One file, no build step. Every custom property on this page comes from it.

<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@200;300;400;500&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://design-system.softwaresoftware.dev/css/tokens.css">
tokens.css Reference stylesheet