Design System v0.1

Style Guide

トークンとコンポーネントのライブカタログ

Colors

Accent

accent
accent-subtle

Neutral

bg
surface
muted
text

Semantic

success
warning
error

Typography

--font-size-4xl / h1

見出し Level 1

--font-size-3xl / h2

見出し Level 2

--font-size-2xl / h3

見出し Level 3

--font-size-base / body

本文テキスト。The quick brown fox jumps over the lazy dog. あいうえお。

.lead

リード文。ページの概要や導入に使う、やや大きめのテキスト。

.text-sm .text-muted

補助テキスト。キャプションや注釈向け。

code

インラインコード: --color-accent

Buttons

Card

Card Title

カードの本文。関連情報をグループ化する際に使う。

Badges

Accent Neutral

Callouts

Info — 一般的な情報やヒント。
Success — 成功メッセージ。
Warning — 注意喚起。
Error — エラーメッセージ。

Spacing

--space-2 (8px)
--space-4 (16px)
--space-8 (32px)