ドキュメント

i-Willink Design System は、自社プロダクト全体（Next.js / Flutter / WordPress）で一貫した UI を提供する、token 駆動・OSS（MIT）のデザインシステムです。 ここでは導入からテーマ、Foundations、コンポーネント、レジストリまでを扱います。

コンポーネントの対話的カタログは Storybook を、ランディングは /design-system を参照してください。

はじめに

• インストール — npmjs.org public の npm group（4 パッケージ）を auth 不要で導入。Flutter は pub.dev で別管理。
• ブランドとテーマ — --color-brand 1 行でブランド全体（scale・state・gradient・dark）を切替。

仕組み（3 層で拡張）

既存資産を捨てず、3 層で拡張する設計です。配布は dual-channel — npm primitives + 自社ホストの registry / template（ADR-0020）。その上に Tailwind-like な拡張契約（ADR-0021）を重ねます。

• npm primitives（@willink-labs/*）— 中央バージョン管理の import-and-run 契約層（配布チャネル①・ADR-0020）。
• Tailwind-like 拡張 — 公開 @theme override 契約 + dark @custom-variant + @layer components（拡張契約・ADR-0021）。
• レジストリ / テンプレート — 自社ホストの shadcn 互換 registry で blocks を copy-to-own、GitHub template repos で whole-app starter（配布チャネル②③・ADR-0020）。