デザインシステム

松葉の配色・トークン・タイポグラフィ・角丸・スクロールバーを、値と見本で示します。このサイトも同じ配色・書体・角丸で組んでいます。

配色

PRIMARY#0E7C75
TEAL 600#2BC8B4
CARD#FFFDF7
ACCENT#FF8D44
MUTED#6B6457
FG#0A2828

主色の Teal に差し色の Orange で暖かみを補い、背景は生成り色にしています。

トークン早見表

primary: #0E7C75
accent: #FF8D44
background: #F6F4EE
foreground: #0A2828
card: #FFFDF7
muted: #EDEFEA
border: #D8D2C2
sidebar: #0A2828

タイポグラフィ

display: 松葉 / Matsuba
h1: ページ見出し（h1）
h2: セクション見出し（h2）
h3: サブセクション見出し（h3）
body-lg: 本文の標準サイズです。Noto Sans JP で 16 px、line-height 1.7。
body: 密度を上げた本文。一覧や設定画面の説明に使います。
label: フォームラベル / ボタンラベル
caption: 補足やメタ情報（更新日時、サイズなど）
micro: BADGE / TAG MICRO LABEL

角丸

sm
default
lg
pill

スクロールバー

縦スクロール（overflow-y）

行 1 — 主色を淡くしたつまみが現れます。

行 2 — 主色を淡くしたつまみが現れます。

行 3 — 主色を淡くしたつまみが現れます。

行 4 — 主色を淡くしたつまみが現れます。

行 5 — 主色を淡くしたつまみが現れます。

行 6 — 主色を淡くしたつまみが現れます。

行 7 — 主色を淡くしたつまみが現れます。

行 8 — 主色を淡くしたつまみが現れます。

行 9 — 主色を淡くしたつまみが現れます。

行 10 — 主色を淡くしたつまみが現れます。

行 11 — 主色を淡くしたつまみが現れます。

行 12 — 主色を淡くしたつまみが現れます。

横スクロール（overflow-x）

列 1列 2列 3列 4列 5列 6列 7列 8

細身（scrollbar-width: thin。実測 10px）で、トラックは透明、つまみは主色 #0E7C75 の 38% です。太さは @layer base の * が、色と scrollbar-gutter: stable は html が持ちます（scrollbar-width は継承しないので、ページのバーと入れ子の容器で指定する場所が分かれます）。丸い形の ::-webkit-scrollbar は、標準のプロパティを持たないブラウザのための代替です。