julian/power-design-web
1
0
Fork 0
mirror of https://github.com/juliandickie/power-design-web.git synced 2026-08-24 17:57:22 +00:00
Code Issues Projects Releases Packages Wiki Activity
Beyond HTML, into the system — a long-scroll explainer for the modern website design stack (tokens, shadcn, Tailwind v4, Radix, OKLCH, motion, theming). Sister doc to power-design.
1 commit 1 branch 0 tags 42 KiB
  • HTML 100%
Find a file
Exact
Jack Roberts 5fb71a96d8 Initial commit — Power Design · Web 
Long-scroll HTML explainer on website design beyond hand-written HTML.
Covers: design tokens (Salesforce 2016 → W3C 2025), shadcn/ui pattern,
Tailwind v4, Radix primitives, OKLCH 12-step color, 8pt grid + modular type,
six canonical systems (Geist/Primer/Carbon/Material/HIG/Atlassian), Motion
easing curves, theming, and the 2026 canonical stack.

Companion to ItsssssJack/power-design (slides skill).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-21 19:42:33 +04:00
brand-kit/logos Initial commit — Power Design · Web 2026-05-21 19:42:33 +04:00
index.html Initial commit — Power Design · Web 2026-05-21 19:42:33 +04:00
LICENSE Initial commit — Power Design · Web 2026-05-21 19:42:33 +04:00
README.md Initial commit — Power Design · Web 2026-05-21 19:42:33 +04:00

README.md

Power Design · Web

Beyond HTML, into the system.

A long-scroll explainer for the modern website design stack — tokens, shadcn, Tailwind, Radix, OKLCH, motion, theming. The sister doc to Power Design (for slides).

What it covers

A self-contained HTML explainer (index.html) that walks through the canonical layers of a modern website design system, in plain English, with citations to first sources.

§ Topic Key sources
01 Design tokens — the atoms Salesforce / Jina Anne · 2016 · W3C DTCG
02 shadcn/ui — your library, not theirs shadcn (Hunter Reaves) · March 2023 · ui.shadcn.com
03 Tailwind v4 — utility-first, token-fluent Adam Wathan · 2017 · v4 Jan 2025 · tailwindcss.com
04 Radix UI — the accessibility backbone WorkOS · radix-ui.com
05 OKLCH color — 12-step scale, perceptual uniform Björn Ottosson / Lea Verou
06 8-point grid + modular type Bryn Jackson · 2015
07 Canonical systems — Geist · Primer · Carbon · Material · HIG · Atlassian
08 Motion + theming Matt Perry · Material 3 motion · next-themes
09 The 2026 canonical stack Next · Tailwind · shadcn · Radix · Motion · lucide · next-themes

Open it

open index.html

Or serve locally:

python3 -m http.server 4174
# → http://localhost:4174

Deploy to Vercel

npx vercel deploy --prod

The page is fully static — no build step.

Companion repo

  • Power Design — Claude skill for slides that don't look like AI made them. Brand DNA × 20 codified design principles.

License

MIT