Getting Started

このデザインシステムは、Astro + Starlight + Vanilla Extractを使用して構築された、日本語対応のデザインシステムです。

特徴

• 日本語最適化: Noto Sans JPをベースとしたフォントスタック
• テーマ対応: ライトテーマとダークテーマの両方に対応
• 型安全: Vanilla Extractによる型安全なCSS-in-JS
• アクセシビリティ: WCAG準拠のコントラスト比とフォントサイズ

デザイントークン

カラーパレット

• Text Colors: Primary, Secondary, Disabled, Link, Error, Success
• Background Colors: Base, Section, Content, Accent
• Theme Support: Light/Dark テーマの自動切り替え

タイポグラフィー

• Font Family: Noto Sans JP ベースの日本語対応フォントスタック
• Font Sizes: H1(48px) から Caption(14px) までの階層的サイズ
• Font Weights: Regular(400), Medium(500), Bold(700)
• Line Heights: 読みやすさを重視した適切な行間設定

使用方法

Vanilla Extractでのスタイリング

import { style } from '@vanilla-extract/css';
import { tokens } from './tokens.css';

export const myComponent = style({
  color: tokens.colors.text.primary.light,
  fontSize: tokens.typography.sizes.body,
  fontFamily: tokens.typography.families.sansJP,
});

Astroコンポーネントでの使用

---
import { myComponent } from './styles.css';
---

<div class={myComponent}>
  コンテンツ
</div>

次のステップ

• Colors - カラーパレットの詳細
• Typography - タイポグラフィーシステムの詳細
• Components - コンポーネントライブラリ