@ktakimoto-figma/insurance-ds

保険LPを組むためのサンプルデザインシステム。Figma Make kit の検証用に作られたもので、 実運用を意図していません。題材の保険商品・保険料・給付額はすべて架空であり、 実在の保険商品とは一切関係ありません。

何のためのものか

Figma Make kit に「npm packages」ソースからデザインシステムを取り込んだとき、 生成物がどこまで規範に従うかを測るための検証用パッケージです。

設計の要点は、規範を文章ではなく実装で担保していることです。

• スペーシングは6段階しか存在しない。中間値を定義していない
• 同梱の Tailwind プリセットは spacing / colors / fontSize を extend ではなく置換する。p-4 や text-gray-500 はCSSを1行も生成しない
• チャートは色・軸・凡例を内部で固定し、系列数の上限を強制する。 上限を超えた指定は描画されず、理由が表示される

使い方

npm install @ktakimoto-figma/insurance-ds react react-dom

import '@ktakimoto-figma/insurance-ds/styles.css'
import { Hero, Section, SectionHeader, FeatureCard, FeatureGrid } from '@ktakimoto-figma/insurance-ds'

styles.css にはトークン（CSSカスタムプロパティ）と、このパッケージが使う ユーティリティが同梱されています。consumer 側に Tailwind の設定が無くても動きます。

consumer 側でも同じトークンでスタイルを書きたい場合は、プリセットを読み込みます。

// tailwind.config.js
module.exports = {
  presets: [require('@ktakimoto-figma/insurance-ds/tailwind-preset')],
  content: ['./src/**/*.{ts,tsx}'],
}

含まれるもの

レイアウト Section SectionHeader Stack LP部品 Hero FeatureCard FeatureGrid PriceTable CTA FAQ Footer チャート BarChart LineChart DonutChart StackedAreaChart

チャートの系列数上限

カラーパレットの色識別性を検証した結果にもとづきます。

| チャート | 上限 | 根拠 | |---|---|---| | 棒・折れ線・積み上げ | 4系列 | 隣接ペアで全チェックPASS | | ドーナツ | 3カテゴリ + その他 | リング上で全ペアが隣接しうるため。4系列は全ペア比較で不合格（黄↔橙が識別しづらい） |

ドーナツは4件目以降を自動的に「その他」へ畳みます。 棒・折れ線・積み上げは上限超過時に描画を拒否します。

スコープ外

ダークモード、多言語対応、アクセシビリティ監査。LP用途のサンプルとして意図的に持ちません。

MIT