Design System

ブランドガイドライン

株式会社UnderSoilのロゴ、色、文字、動きの規定です。ロゴの使用や資料作成の際はこのページを参照してください。

このページはサイト本体と同じ /css/tokens.css を読み込み、色の値とコントラスト比を実行時に読み出して表示しています。実装の値を変えればこのページの表示も変わるため、内容が実装とずれることがありません。

02

カラー

アクセントは「帯水層」——土の下を流れる地下水脈から取っています。ロゴ最下層の色です。ニュートラルもその色相へ僅かに寄せてあり、無彩色ではありません。

各段の数値は白背景に対するコントラスト比で、このページを開いた時点の実際の値から計算しています。4.5 以上が本文サイズの文字に使える段です。

Accent — 帯水層

Neutral — brand

Danger — 状態色

入力エラーと必須マークのための1段のみ。ブランドの色ではなく「止まれ」の合図なので、階調を増やして表現の幅を作る対象ではありません。

階調の役割

accent-500
ロゴ最下層・大きな面・装飾。白文字は載せない
accent-600
リンク・本文サイズの強調・ボタンの塗り（白文字可）
accent-700
ホバー・押下状態
accent-50
バッジ・アイコンの地など、淡い面
brand-900
見出し・フッターの地
brand-800
本文。text-brand の実体
brand-600
補助テキスト・キャプション
brand-200
罫線・カード枠。文字には使わない
control-border
入力欄の枠線（border-control）。実体は brand-600。枠線は外側でカードの白に、内側で入力欄の塗り surface に接するため、両方で 3:1 以上が要る。brand-500 は白 3.03 に対し surface 2.91 で不可
brand-50 / 100
面の色。bg-surface / bg-surface-alt の実体
danger-600
必須マーク・エラー文言・エラー時の入力欄の枠線。枠線にも使うため、白と surface の両方で 3:1 以上を確保している

段を追加・変更するときの注意

白背景で 4.5:1 を満たす段でも、surface のような淡い面に載せると比率が下がります。実際、当初の accent-600 は白の上で 4.89:1 でしたが surface-alt の上では 4.44:1 に落ちていました。

現在の accent-600 と brand-600 は、白・surface・surface-alt・accent-50 のすべてで 4.5:1 以上になるよう調整済みです。値を変える際は、この4つの地すべてで検証してください。

検証の対象は文字だけではありません。入力欄の枠線のような非テキストのUI境界には 3:1 が要ります（WCAG 2.1 SC 1.4.11）。枠線は両側の地に接するので、外側（カード）と内側（塗り）の両方で測ってください。片側だけ見て通したつもりになるのが典型的な見落としです。

不透明度修飾子（text-brand/40 のような書き方）は使いません。「brandの薄い版」は見た目の記述であって役割の記述ではなく、どこがコントラスト要件を満たすべきかを特定できなくなるためです。例外はヒーローの地層背景（.strata-surface）で、あれは同じトークンを重ねる濃度そのものが地層の深さを表しているため、透明度が役割を持ちます。

03

タイポグラフィ

3書体を役割で使い分けます。Archivo に和文グリフは無いため、和欧混在の文章に指定しても和文は自動的に Noto Sans JP が受け持ちます。

Archivo

font-brand
ロゴのワードマークと同じ書体。英大文字ラベル、社名、日付など欧文のみの箇所に使う。

見出し用

font-display — Zen Kaku Gothic New
見出しに使う。字面が大きく、大きなサイズで骨格が明確。

本文用

font-body — Noto Sans JP
本文の既定。font-feature-settings: "palt" で約物を詰めている。

サイズ

見本テキスト Sample text-2xs / 10px
見本テキスト Sample text-xs / 12px
見本テキスト Sample text-sm / 14px
見本テキスト Sample text-base / 16px
見本テキスト Sample text-2xl / 24px
見本テキスト text-4xl / 36px

行間

和文の見出しは
行間 1.4 で組む

--leading-heading — text-2xl 〜 text-6xl の各段が持つ行間。Tailwind の既定は欧文向けで text-4xl が 1.11、text-5xl / text-6xl に至っては 1.0 になり、字面の詰まった和文では行同士が接触する。行間は段そのものに持たせてあるので、HTML 側で leading-* を足す必要はない。むしろブレークポイント付きの text-* はメディアクエリ内に出力されて素の leading-* を上書きするため、当てても効かないことがある。

泣き別れの防止

見出し（h1〜h6）には text-wrap: balance を当ててあり、行長が自動で均等化される。最後の1〜2文字だけが次行に落ちる「泣き別れ」はこれでほぼ防げる。
均等化だけでは意味の切れ目で折れない場合（ヒーローの h1 など）は、文節ごとに <span class="inline-block"> で包んで折り返し位置を固定する。ブレークポイントごとの <br> は使わない。幅の条件が増えるたびに破綻するため。

字送り

Section Label

.eyebrow — 書体・ウェイト・字間 0.25em・大文字化をまとめて持つクラス。英数字だけのラベルに限って使う。0.25em は和文には広すぎて語のまとまりが崩れる。

和文の小見出し

.subhead — .eyebrow と同じ位置に置く和文版。字間は 0.05em にとどめ、和文には効かず英字だけが変形する大文字化も持たない。このページの節内見出しはすべてこれ。

ナビゲーション・ボタン

tracking-ui — 字間 0.05em。和欧混在のUIラベル用。Tailwind 組み込みの tracking-wide（0.025em）とは別物なので混同しないこと。

本文

body に font-feature-settings: "palt" と字間 0.04em（--tracking-body）を当てている。palt は約物（句読点・括弧）の前後のアキを詰める担当、字間は字面同士のアキを作る担当、と役割を分けてある。個別の要素に tracking-* を足して地の字送りを上書きしないこと。

04

モーション

イージングは1種類だけです。速度は「変化の重さ」で3段から選びます。バーをクリックすると実際の動きを確認できます。

duration-fast 0.3s — 色・不透明度など軽い変化
duration-base 0.4s — カード・パネルの移動
duration-slow 0.7s — スクロール連動の出現

イージング

--ease-out-expo = cubic-bezier(0.22, 1, 0.36, 1)

立ち上がりが速く終わりが緩やかな曲線。transition はすべてこの1種類です。Tailwind の transition-* ユーティリティも既定でこれを使うよう設定してあるので、個別に指定する必要はありません。

例外

.scroll-hint の上下運動だけ ease-in-out を使います。これは往復するループアニメーションで、片道用の曲線を当てると折り返しが不自然になるためです。transition には使いません。

05

コンポーネント

以下はすべて /css/site.css の実物です。サイト本体で動いているものと同じスタイルが当たっています。

ボタン

お問い合わせ テキストリンク

.btn-primary — ホバーで浮き上がり、影が付く。塗りは bg-accent（= accent-600）

バッジ

お知らせ プレスリリース

地は accent-50、文字は accent-700。淡い面の上なので600ではなく700を使う

カード

「ニュースリリース」ページを公開いたしました

.news-card — ホバーで浮き上がる

フォーム

.form-input — 枠線は border-control。フォーカスで枠が accent-600 になり、外側に薄いリングが出る。カード枠に使う brand-200 は入力欄には使わない（輪郭が知覚できず 1.4.11 を満たさない）

06

実装

このサイトはビルドステップを持たない静的HTMLです。そのため Tailwind の設定は各HTMLに読み込ませる必要がありますが、定義そのものは1箇所にまとめてあります。

ファイル構成

tailwind.config.js  ← Tailwind 設定（トークンをユーティリティ名に割り当てる）
src/tailwind.css    ← ビルドの入力（配信されない）
public/css/
├── tokens.css      ← 全トークンの定義（色・書体・字送り・速度・影）
├── tailwind.css    ← ビルド生成物。手で編集しない
├── site.css        ← 全ページ共通のコンポーネント
└── brand.css       ← このページ専用

public/css/tailwind.css は npm run build:css の生成物です。HTMLのクラスを足し引きしたら再生成してコミットしてください。生成しないと、そのクラスはCSSに存在しないため何も当たりません。読み込み順は tokens.css → tailwind.css → site.css で、手書きの site.css が後に来るのでユーティリティを上書きできます。

色を16進で持たない理由

/* tokens.css */
--c-accent-600: 0 121 141;

/* tailwind.config.js */
accent: 'rgb(var(--c-accent-600) / <alpha-value>)'

色をスペース区切りのRGBチャンネルで保持しているのは、Tailwind の <alpha-value> と合成するためです。16進のままだと不透明度修飾子が使えず、CSS変数を単一の情報源にできません。

値を変更するとき

  • —色・速度・字送りは tokens.css の1箇所を変えれば全ページに反映されます。HTMLを触る必要はありません。
  • —文字に使う段を変えたときは、白・surface・surface-alt・accent-50 の4つの地すべてでコントラストを検証してください。白だけで判断すると淡い面の上で基準を割ります。
  • —Tailwind の組み込み名（tracking-wide など）を別の値で上書きしないでください。読み手が値を誤解します。名前を分けるか、値を一致させるかのどちらかです。
  • —ロゴの色を変えた場合は SVG 9点・PNG 14点・favicon一式・apple-touch-icon の再生成が必要です。