i-Willink

Open Source · MIT License

i-Willink Design System

token-driven, brand-axis-aware UI for all our products

Visit GitHubnpm Install

What is this

i-Willink が全プロダクトで使う共通 DS

全プロダクト共通のデザインルールを 4 パッケージで提供します。 配色・タイポ・モーション・スペーシングをトークン駆動で統一し、 各プロダクトは <html data-brand="..."> でブランド軸を切替できます。

  • 21 React components (Phase 0-3 core 7 + Phase 7+ 14)
  • 4 Flutter components (Material 3 brand-aware・近日 Button 拡張)
  • 3 brand axis (willink / clublink / fitai)
  • auto-safelist (Tailwind v4・consumer 側 1 行で setup 完了)

Packages

4 つのパッケージ構成

@willink-labs/react

shadcn 風 React components (21・Radix selective)

View on npm

@willink-labs/tailwind-preset

Tailwind v4 preset + auto-safelist

View on npm

@willink-labs/tokens

DTCG W3C tokens + 3 brand JSON

View on npm

willink_theme

Flutter Material 3 + brand axis

View on pub.dev

Install (Web)

bash
pnpm add @willink-labs/react @willink-labs/tailwind-preset @willink-labs/tokens

Install (Flutter)

bash
flutter pub add willink_theme

Live component showcase

Hero の Brand toggle に同期して見た目が変わります

Button — 4 variants × 3 sizes

Badge — 5 variants

DefaultOutlineSuccessWarningDanger

Card — default / elevated

Default Card

border-only · 静的

シンプルな border のみの card。テーブルや list のグループ化に向きます。

Elevated Card

shadow-soft · hover で持ち上がる

Marketing 用途やリスト中の主役 card に。hover で shadow が強まります。

Dialog — modal trigger

Tabs — 3 tabs

Tabs は keyboard 操作 ✅ / aria 属性 ✅ / brand-aware ✅ です。

Brand axis

同一コンポーネントが data-brand で 3 つの軸に切替

[willink]#7C3AED

i-Willink default — Marketing / Insights / PM

NEWv0.6stable
[clublink]#2563EB

ClubLink / clubhouse — Community

NEWv0.6stable
[fitai]#3B82F6 · #5CDCA8

fit-ai — Fitness coaching

NEWv0.6stable

※ 上記 3 panel は data-brand を強制適用しているため、Hero の brand toggle に関係なく常に 3 軸比較表示されます。

Adoption

DS が動いているプロダクト

i-willink.com preview (280×180)

i-willink.com

このサイト自身 (Marketing + Insights)

Visit
clublink.jp preview (280×180)

clublink.jp

地域クラブ × 応援者マーケット (Stripe Payment Links)

Visit
fit-ai mobile preview (280×180)

fit-ai mobile

AI fitness coach (iOS / Android)

App StoreGoogle Play(Store URLs TBD)
Esperanza preview (280×180)

Esperanza

NPO サッカー & ライフ オフィシャル

Coming soon(cutover 前)

Also powering

  • fit-ai admin — internal operator dashboard (Phase 7+ 21 components 採用済)
  • willink-pm — internal project management tool
  • clubhouse — community mobile app (Phase 0 release 待ち)

Get started

3 step で導入完了

1. Install (npmjs.org public・auth 不要)

bash
pnpm add @willink-labs/react @willink-labs/tailwind-preset @willink-labs/tokens

2. Tailwind preset を import

css
/* globals.css */
@import "@willink-labs/tailwind-preset/preset.css";

3. 使う

tsx
import { Button, Badge } from "@willink-labs/react";

<html data-brand="willink">
  <Badge>NEW</Badge>
  <Button>Click</Button>
</html>;
Read full documentation on GitHub

Open source

MIT License で誰でも自由に利用可能

MIT LicenseSection 7 / SocialAxis 明示

i-Willink Design System is fully open source under the MIT License. 商用利用・改変・再配布すべて可能です。 詳細は GitHub repository を参照してください。

Star on GitHubRead CHANGELOGReport an issueRead CONTRIBUTING
github.com/willink-labs/willink-design-system

What's next

  • Flutter components 拡張 (進行中・WillinkButton 等)
  • React 追加 components (Skeleton + Sheet 等)
  • Visual demo Playground 拡張
  • v1.0.0 milestone
Read full roadmap on GitHub