印
INDEN-YA

模様

自然の力や四季の美しさを想う日本人の心から生まれた様式美

更紗「雀踊り」模様
Colors
01 — 面色はグレーだけ。紅 #9b0e15 は「いまここ」を指す1本の線にしか使わない
Accent
紅 / Crimson#9b0e15 — 現在地の 1px 下線と文字色のみ。面に塗らない
Ink
Body Inkrgba(0,0,0,.843) ≒ #272727。純黒ではない
Ink（CTA の面色）#000000
Text Sub（ナビ）#333333
Text Muted（タグの面）#666666
Text Faint#7c7c7c
Text Thin#999999
Surface
Background#ffffff
Surface#efefef
Surface Alt（サブナビ）#ededed

色は商品写真（漆の黒・鹿革の色）が担い、UI には持ち込みません。 本文色を rgba(0,0,0,.843) とアルファ付きで持つのは、写真の上に置いたときに 下地が透けるようにするためです。

Typography
02 — 見出しは明朝、本文はゴシックの分業 / palt を全体に継承 / letter-spacing 0.64px
Hero Title（明朝）
50px / 400 / line-height 34px / 4px
※字面より小さい行送り。2〜4文字専用
模様
Hero Lead（明朝）
24px / 400 / 1.46 / 0.64px
自然の力や四季の美しさを想う日本人の心から生まれた様式美
Section Head（明朝）
30px / 400 / 1.7 / 0.8px
印伝の美と伝統の物語。
Sub Head（明朝）
24px / 400 / 1.7 / 1.44px
小桜
Nav（明朝）
18px / 400 / 1.0 / 0.64px
印傳屋について
Nav Current（明朝）
18px / 400 / 1.0 / 0.64px
color #9b0e15 + 下線 1px
模様
Body（ゴシック）
16px / 400 / 1.69 / 0.64px
平安時代以降、花といえば桜を意味するようになり、現在では日本を象徴する花として親しまれています。 印伝の模様のなかでも小桜は最も古くから伝わるもののひとつです。
Body Emphasis（ゴシック）
16px / 400 / 1.69 / 0.96px
【配送情報】台風の接近により、一部地域でお届けを停止しております。
CTA L（明朝）
20px / 400 / 1.0 / 0.64px
更紗「雀踊り」模様
CTA S（明朝）
16px / 400 / 1.0 / normal
詳細を見る
Tag（ゴシック）
14px / 400 / 1.0 / 0.64px
直営店 企業情報
Caption（ゴシック）
14px / 400 / 1.7 / 0.64px
鹿革に漆で模様を置く、甲州印伝の技法
Copyright（ゴシック）
11px / 400 / 1.0 / 0.44px
Copyright © INDEN-YA Co.,Ltd. All Rights Reserved.

font-weight は全要素 400。太字を使わず、強調は書体そのものを DemiBold（FOT-筑紫ゴシック Pr5 D）に差し替えて表現します。
font-feature-settings: "palt" を body に置いて全体へ継承させたうえで、 letter-spacing: 0.64px（0.04em）を重ねます。詰めてから開き直す組み方で、 約物だけが詰まり、字面は均等に開きます。明朝の見出しで最も効きます。
ヒーロー見出しの line-height: 34px（50px の字面より小さい）は、 2〜4文字の大見出しを写真に載せるための詰めです。多行の見出しに使わないでください。

Article
03 — 読み物の版面は 854px。模様名は途中で折らない
トップ ／ 印伝の世界 ／ 模様

小桜

平安時代以降、花といえば桜を意味するようになり、現在では日本を象徴する花として 親しまれています。武具にも多く用いられた小桜は、印伝の模様のなかでも最も古くから 伝わるもののひとつです。

とんぼ（とんぼ）

とんぼは前にしか進まないことから「勝ち虫」と呼ばれ、武将に好まれました。 更紗「雀踊り」模様と同じく、 いまも定番として受け継がれています。

詳細を見る 一覧へ
Buttons
04 — 黒ベタの角丸 5px、サイズ違いの2種類だけ。文字は明朝
更紗「雀踊り」模様 詳細を見る

L — 背景 #000000 / 文字 #fff / radius 5px / padding 16px 36px / 明朝 20px / letter-spacing 0.64px
S — 背景 #000000 / 文字 #fff / radius 5px / padding 12.8px 28.8px / 明朝 16px / letter-spacing normal
ボタンの文字が明朝というのがこのサイトの声です。 枠線ボタンを持たず、ホバーで色も影も変えません。

Tags（グレー #666666・同じ角丸 5px）
直営店企業情報お知らせ

紅を使いません。タグは情報の分類であって「いまここ」ではないためです。

Text Link（枠を持たず、記号を1つ添えるだけ）
一覧へ
Navigation
05 — 現在地は「紅の 1px 下線 ＋ 紅の文字色」で示す。面を塗らない

項目の区切りは縦の細い罫（1px solid #ddd）。 言語切替（日本語 / English / 簡体中文 / 繁体中文）も同じルールで、選択中に紅の下線が付きます。

News List
Cards
06 — 写真をフルブリードで見せ、白い明朝を直に載せる。枠も影も敷かない
product photo

小桜

最も古くから伝わる模様のひとつ

product photo

とんぼ

前にしか進まぬ「勝ち虫」

product photo

青海波

穏やかな波が重なる吉祥文様

Forms
07 — デフォルト / フォーカス / エラー。radius 5px、入力欄にも palt を効かせる
全角でご入力ください
フォーカスは #000000 の枠＋ #efefef のアウトライン
電話番号を正しくご入力ください

エラーだけ紅 #9b0e15 を線と文字に使います（面には塗りません）。

Elevation & Layout
08 — 影は4種類しか宣言がない。版面は 944px。1280px 以上では vw に切り替わる
Level 0 — none ほぼすべての要素。階層は写真のフルブリードと面色（#fff → #efefef → #ededed）でつくります。
Level 1 — 0 4px 8px rgba(0,0,0,.08) わずかに浮かせるカード。
Level 3 — 0 0 10px rgba(0,0,0,.2) 固定ヘッダー・モーダル。これが最も濃い影です。
Container
944px — 標準コンテナ
854px — 記事・読み物
616px — 2カラムの主
288px — 2カラムの副
Spacing Scale
8
12
16
28
36
60
100

ブレークポイントは 767/768px と 1280px の2本。 1280px 以上では px 指定が vw 指定に置き換わり（border-radius: 0.39063vw = 1280px で 5px）、 全体が比例拡大します。固定 px を前提にしないでください。