Colors
01 — 生成りの地に、朱赤ひと色
Base
Background(生成り)
#f8f8f5
Surface White
#ffffff
Ink(黒茶)
#1b120f
Text Sub
#6e6765
Brand / Neutral
Brand Red(朱赤)
#e7190a
Surface Tag
#efefec

有彩色は朱赤 #e7190a の1色だけ。緑・青・黄を足さない。朱赤は「いま居る場所」と「触れる場所」にだけ現れる。

Typography
02 — 明朝=見出し / 角ゴ=本文。font-weight は 400 一択
Page Title
明朝 56px / 400 / 1.4 / normal
にんべんとは
Section Title
明朝 42px / 400 / 1.714 / normal
商品情報
Sub Section
明朝 28px / 400 / 1.682 / normal
ブランドサイト
Photo Title
角ゴ 24px / 400 / 1.176 / 0.05em
日本橋本店
Recipe Title
角ゴ 24px / 400 / 1.556 / 0.05em
和風タコライス(白だし使用)
Card Title
角ゴ 20px / 400 / 1.5 / normal
にんべんの約束
Body
角ゴ 16px / 400 / 2.0 / 0.05em
豊かな海の恵みと四季の育み、伝統の技に磨かれてきた鰹節。にんべんは一六九九年の創業から、 その味をこの国の食卓へ届けてきました。
Nav
角ゴ 15px / 400 / 1.733 / normal
にんべんとは
Breadcrumb
角ゴ 13px / 400 / 1.769
ホーム > にんべんとは
Utility
角ゴ 12px / 400 / 1.667 / -0.07em
ネットショップ
Sub Nav
角ゴ 12px / 400 / 2.0 / #6e6765
商品情報トップ
Tag
角ゴ 11px / 400 / -0.04em
ニュースリリース
縦組み — ブランドステートメント(サイト内で1箇所だけ)
この国の味、ここから。

writing-mode: vertical-rl / 明朝 42px / line-height 1.556 / letter-spacing 0.13em。 この字間は横組みの見出しではなく、縦に並ぶ一文字ずつの間隔として設計されている。

Article
03 — 生成りの地に、白い本文エリアを置く
ホーム > にんべんとは > 本枯鰹節ができるまで

本枯鰹節ができるまで

鰹節は、生の鰹をおろし、煮て、幾度も燻し、そのうえでカビを付けて乾かす。 半年をかけて水分を抜ききったものだけが「本枯鰹節」と呼ばれます。 削れば、湯を注ぐ前から香りが立ちます。

職人が選び抜いた一本

形が整っていること、背と腹の締まりが揃っていること、叩いたときに硬い音が返ること。 仕入れの場で見ているのはその三つです。数値では表せない差が、 だしの澄み方にそのまま出ます。

すべての商品を見る

Buttons
04 — 主役はボタンではなくリンク。朱赤の1px下線が伸びる
Link(グラデーション下線 / hover でご確認ください)
すべての商品を見る レシピ一覧を見る いま見ているページ

background: linear-gradient(rgba(0,0,0,0) calc(100% - 1px), #e7190a 0);
background-size: 0 100% → hover で 100% 100%。text-decoration は使わない。

Block Link(塗り・角丸ゼロ)
にんべんとは 店舗をさがす
Circle Badge / Tag / PAGE TOP
今月の
レシピ
お勧め
ニュースリリース PAGE
TOP

border-radius は 50%(円)と 3px(タグ)だけ。角丸の矩形をつくらない。

Cards
05 — 生成り地の上に白の面。影は使わない
product

だし

削りたての香りをそのまま封じたフレッシュパック。

product

つゆ・白だし

かえしとだしの比を、料理ごとに整えました。

product

本節・削り節

半年かけて仕上げた鰹節の王様、本枯鰹節。

お勧め
product

贈り物

お祝いの席にふさわしい、日本橋からの詰め合わせ。

Photo Card(写真の上に白文字)

日本橋本店

本物のだしの美味しさを体験

CSS のスクリムを重ねていない。暗く処理した写真そのものを使う。

Forms
06 — デフォルト / フォーカス / エラー。角丸ゼロ
全角でご入力ください
フォーカス時は罫線が朱赤 #e7190a に変わる
電話番号を正しくご入力ください
Elevation
07 — box-shadow は実測で1件もない
Level 0 — none すべての要素が影なし。カード・ヘッダー・ドロワー・モーダルすべて。
面色の差でつくる 生成り #f8f8f5 の上に白 #ffffff のカードを置く。これが唯一の階層表現。
Layout
08 — コンテナ 1200px。主境界は 999px / 1000px
1440px — フルブリード
1200px — 標準コンテナ
1000px — 読み物・狭い版面
Spacing Scale
5
10
20
40
80
120

ブレークポイントは 767px(モバイル)/ 999px・1000px(主境界)/ 1360・1400・1750px(ワイド)。 一般的な 768px ではなく 1000px を境にレイアウトが切り替わる。@media print も持つ。