カラーパレット

Coral/Peach

coral-50

#FFF6EE

coral-100

#FFEADB

coral-200

#FFEEDE

coral-300

#FFDCC1

coral-500

#FFB894

coral-700

#E6A680

Accent Mint

accent-blue-50

#E7F7F6

accent-blue-100

#C9EFED

accent-blue-500

#52B7B5

accent-blue-700

#2F716F

accent-blue-800

#225452

タイポグラフィ

H1 - text-5xl font-bold

見出しレベル1

H2 - text-4xl font-bold

見出しレベル2

H3 - text-3xl font-semibold

見出しレベル3

H4 - text-2xl font-semibold

見出しレベル4

Body Large - text-lg

これは大きめの本文テキストです。リード文などに使用します。

Body - text-base

これは標準の本文テキストです。通常の段落に使用します。

Body Small - text-sm

これは小さめの本文テキストです。キャプションや補足情報に使用します。

ボタン

プライマリボタン

セカンダリボタン

アウトラインボタン

小さいボタン

カード

基本カード

カードの説明文がここに入ります。ホバーでシャドウが大きくなります。

詳細を見る →

フィーチャーカード

アイコン付きのカードです。

画像付きカード

画像エリアとコンテンツエリアがあります。

フォーム要素

お名前

メールアドレス

カテゴリ

お問い合わせ内容

アコーディオン

質問1: デザインシステムとは何ですか？

デザインシステムは、デザインパターン、コンポーネント、スタイルガイドを体系化したものです。一貫性のあるUIを効率的に構築できます。

質問2: このデザインシステムの特徴は？

複数のWebサイトから抽出したデザイン要素を統合し、Astro + TailwindCSSで実装しています。

質問3: どのように使用しますか？

Markdownドキュメントを参照しながら、TailwindクラスまたはAstroコンポーネントを使用してサイトを構築します。

バッジ

新着おすすめ限定在庫あり売り切れ

アラート・通知

成功: 送信が完了しました。

エラー: エラーが発生しました。もう一度お試しください。

情報: こちらは重要なお知らせです。

警告: 入力内容をご確認ください。

グリッドレイアウト

2カラムグリッド

グリッドアイテム1

グリッドアイテム2

3カラムグリッド