スタイルガイド
デザイントークンとコンポーネントの実物確認ページです。トークンの定義元はsrc/styles/global.cssの@themeブロックです。
カラー
Tailwind v4 は--color-*からbg-* / text-* / border-*を自動生成します。
ニュートラル(stone 系)
背景
--color-background
#fafaf9
カード面
--color-surface
#ffffff
弱い面
--color-surface-2
#f5f5f4
境界線
--color-border
#e7e5e4
強調境界線
--color-border-strong
#d6d3d1
本文
--color-foreground
#1c1917
補足
--color-foreground-2
#57534e
弱いテキスト
--color-foreground-3
#78716c
アクセント(インディゴ)
アクセント
--color-accent
#4f46e5
ホバー
--color-accent-hover
#4338ca
淡い面
--color-accent-tint
#eef2ff
アクセント上の文字
--color-on-accent
#ffffff
アクセント上の白文字コントラスト比は 6.3:1(WCAG AA 合格)。白文字の見え方
タイポグラフィ
日本語は Zen Kaku Gothic New、欧文・数字は Inter、コードは JetBrains Mono。
text-xs
12px
トークンで整えた UI 見本
text-sm
14px
トークンで整えた UI 見本
text-base(本文)
15px / 1.8
トークンで整えた UI 見本
text-lg
18px
トークンで整えた UI 見本
text-xl
20px
トークンで整えた UI 見本
text-2xl
24px
トークンで整えた UI 見本
text-3xl
30px
トークンで整えた UI 見本
font-mono
const tokens = { accent: "#4f46e5" }
ウェイト: 400 / 500 / 700 / 900
トークン
トークン
トークン
トークン
本文見本(15px・行間 1.8)
このサイトはポートフォリオと、日々の開発で得た知見を書き留めるブログで構成されています。 UI の色とデザイントークンにこだわって設計しており、本文の行間は日本語の読みやすさを優先して 1.8 にしています。Numbers 1234 & URLs も Inter で整います。
余白
Tailwind 標準の 4px 基準スケール。セクション間は 3rem〜4rem を使います。
4px
8px
12px
16px
24px
32px
48px
64px
角丸・影
角丸(--radius-*)
sm 4px
md 8px
lg 12px
full 9999px
影(--shadow-*)
shadow-sm
0 1px 2px(ほんのり)
shadow-md
0 4px 16px(ふんわり)
コンポーネント
ボタン
インラインコード
npm create astro
ブログ一覧(BlogListItem)
その他の状態
テキストを選択するとアクセント色の選択になります。キーボード操作時はアクセント色のフォーカスリングが出ます(このページでTabで確認できます)。