// 0. header
← ✦ Sample Tool
// 1. colors
Surface / Text
Semantic
Utility Palette
// 2. surfaces · shadows
out-sm
--shadow-out-sm
out
--shadow-out
out-lg
--shadow-out-lg
in-sm
--shadow-in-sm
in
--shadow-in
// 3. buttons
// 4. form inputs
// 5. cards
Sample A
2026-04-12
Sample B
2026-04-12
Sample C
2026-04-12
// 6. empty state
✦
アイテムがありません
「＋ 新規作成」から最初のアイテムを追加
// 7. modal
// 8. toast
// 9. drive sync ui
signed-out
synced
syncing
error
offline
// 10. radio
// 11. checkbox
// 12. select
// 13. switch
通知を受け取る (ON)
ダークモード (OFF)
disabled
// 14. slider
音量50
明るさ75
// 15. tab bar
// 16. segmented control
// 17. badge
Semantic
Default Primary Success Danger Warning Info
Utility Palette
Purple Pink Orange Teal Indigo
// 18. progress
30%
70% success
45% danger
indeterminate
// 19. spinner
sm
default
lg
// 20. dropdown
// 21. picker
// 22. knob
25
sm
50
default
88
lg
// 23. range control
25 70
// 24. divider

水平区切り線

ラベル付き

or
左 右 (divider-vertical)
// 25. alert
✓
保存完了
プロジェクトが正常に保存されました。
✕
同期エラー
Google Drive との接続に失敗しました。
⚠
未保存の変更
編集内容がまだ保存されていません。
ℹ
ヒント
Ctrl+S でいつでも保存できます。
// 26. tooltip
// 27. scrollbar
縦スクロール
このボックスの中を
スクロールしてカスタム
スクロールバーを確認。
neumorphism bg に
馴染む細いバーが
表示される。
hover でバーが
少し濃くなる。
end.
// 28. skeleton
// 29. avatar
Y
sm
Y
default
Y
lg
Y
xl
A
B
C
D
E
// 30. chip
React TypeScript Figma Active Blocked
// 31. table
名前タイプステータス更新日
usersTableActive2026/04/09
ordersTableActive2026/04/08
productsViewDraft2026/04/07
sessionsTableError2026/04/06
// 32. accordion
プロジェクト名、言語、タイムゾーンなどの基本設定。.open で初期展開。
キャッシュ、パフォーマンス、デバッグなど上級者向け。
プロジェクトの削除、データのリセットなど取り消し不可の操作。
// 33. typography
h1Heading One
h2Heading Two
h3Heading Three
bodyThe quick brown fox jumps over the lazy dog.
small補助テキスト・キャプション
mono--font-mono 0123
// 34. radii
radius-sm
radius
radius-lg
full
// 35. list chip