事業承継マッチングプラットフォーム「relay」を運営するライトライトのデザインシステム。Tailwind CSS v4ベースでフレームワークに依存せず、デザイントークンとコンポーネントをHTMLスニペット集として配布している。npmで@light-right/design-systemを入れてCSSを1行importすれば、.btnや.cardなどのクラスとトークンユーティリティがそのまま使える。正本はコード、Figmaはデザイン探求の場という割り切りもはっきりしている。
読みどころは2つある。ひとつはアクセシビリティで、WCAG 2.2の全86基準をデザインシステム側でどこまで担保するか対応表として公開している。ここまでやる例はなかなか見ない。もうひとつがAIコーディングツール向けのMCPサーバーで、Claude CodeやCursorにURLを登録するだけで、コンポーネント仕様・トークン・禁止パターンをAIに直接参照させられる。npmもNodeも認証も不要でCloudflare上で動く。ツールはget_componentやget_design_principlesなど8種類、DESIGN.mdやsnippetsから自動生成される。
