01 / COLOR — 色は闇の階調と、朱ひとつ
影・グラデーション・ぼかしは使いません。高さの差は、明るさの差だけで作ります。本文は silver。白は見出しと要点だけ。朱(筑波山神社の鳥居の色)はロゴと、画面にひとつの強調まで。
02 / TYPE — 書体は2つ、役割も2つ
DISPLAY-L 56px / 300 / −0.02em
小さな店にこそ、いいウェブサイトを。
DISPLAY 42px / LATIN CONDENSED
TSUKUBA WEB — Barlow Condensed 300
MID 22px / 500
カードの見出しと、要点の一行。
BODY 14px / 1.9
本文はこの大きさ、この行間。日本語の本文は行間1.8以上を守ります。色は silver(#b4b4b4)。白い本文は存在しません。
LABEL 11px MONO / +0.14em
SECTION LABEL — 各セクションの入り口に必ず
03 / RADIUS — 角丸は3つだけ
2px — ボタン・入力欄
6px — カード・タイル
10px — 大きな容器
04 / SPACE — 余白は4pxの倍数
05 / COMPONENTS — 部品
ボタン(枠線のみ・塗りません)
テキストリンク
矢印リンク →
01 / SECTION LABEL
サンプル表示
つくば市 部品見本店 D さん
「お客様の声カード。実物が届くまで、この形で待ちます。」
06 / RULES — 七つの決まり
- 闇は #060606。真っ黒は使わない。高さは明るさだけで表す。影・グラデーション・ぼかしは禁止。
- 文字の色は4段だけ。#595959 → #989898 → #b4b4b4(本文)→ #ffffff(見出しと要点のみ)。プレースホルダは #595959。5つめの灰色を作らない。
- 書体は2つ、仕事も2つ。見出しはコンデンス系300、本文は静かなゴシック。ラベルは英字モノスペース。混ぜない。
- 色は作品の中だけ。朱はロゴ+画面にひとつまで。ボタンに色を塗らない。境界線は #202020 の髪の毛1本 — 例外はボタンの輪郭線(#595959)だけ。
- 左に揃える。中央揃えのブロックは作らない。各セクションは左のレールから始まる。
- 余白は4の倍数。角丸は 2 / 6 / 10 の3つだけ。
- 暗くても、招く。顔が見える。値段が見える。次の一歩が見える。60歳の店主が迷わないこと。