No. 24 · Developer & data · 1 vote

Linework

Hairline technical — a page ruled by 1px lines with crosshairs, ink as the only brand, mono labels and a developer console

A precise, monochrome language for developer platforms, APIs, infrastructure and docs. The page is a frame of 1px lines: sections are ruled across it and every intersection gets a crosshair mark, cells share hairline borders, and a millimetre ruler sits under the header. Ink is the only brand colour; green, amber and red appear only for ready, building and error. Inter Tight sets words at tight tracking, Azeret Mono sets labels, numbers and code. Includes a command snippet with copy, a request waterfall, a line diagram, code tabs with line numbers, a hairline pricing table and changelog, and a console with deployments, live logs, usage charts and quotas, environment variables, API keys, a danger zone and a command palette.

Site demo Dashboard demo Download .zip Read SKILL.md

Screens

Best for

Developer platforms, APIs and SDKs
Infrastructure, hosting and observability consoles
Technical documentation and changelogs
Status pages and engineering-led products

Not ideal for

Warm consumer and lifestyle brands
Children’s and playful products
Image-led fashion and food

Signature moves

A framed page ruled by 1px lines with crosshair marks
Ink as the only brand; colour only for state
Inter Tight words, Azeret Mono labels and numbers
Command snippet, request waterfall and line diagram
Hairline cells for stats, features, pricing and logos
Console: deployments, live logs, quotas, env vars, ⌘K

Try it with another brand color

Opens the demo with only --brand changed. The style should still read as Linework.

#2b6cffSite Dashboard
#e5383bSite Dashboard
#7c3aedSite Dashboard
#0f9d76Site Dashboard

Install this skill

/plugin marketplace add tastefolio/tastefolio.github.io
/plugin install linework@tastefolio

npx skills add tastefolio/tastefolio.github.io --skill linework

curl -L https://tastefolio.github.io/downloads/linework.zip -o linework.zip
unzip linework.zip -d .claude/skills/

Copy the folder anywhere your agent can read it, then reference it from AGENTS.md / rules:
"Follow skills/linework/SKILL.md for every UI change."

Files

Rate this style

Like it? Give it a 👍 below; you sign in with GitHub. The gallery’s Top rated order counts these votes and refreshes every hour. Comments and questions are welcome too.