Brand Identity
美しさは、秩序の中に宿る。
Philtz のデザインシステムは、黄金比と調和数列に基づく数理的な秩序を基盤に構築されています。 装飾を排し、構造そのものが美となる設計を目指します。
ロゴLogo
Philtz のロゴは、和文と欧文の二つの書体で構成されるワードマークです。 ロゴの周囲には、黄金比に基づくクリアランスを確保してください。
クリアランス
ロゴの面積を 1 としたとき、φ (1.618) 倍のバウンディングボックスをクリアランスとして確保します。 この領域内に他の要素を配置してはなりません。
マスターロゴφφ
ネームロゴ
φφ
禁止事項
- ロゴの色を変更しない
- ロゴを変形・回転させない
- クリアランス内に要素を配置しない
- ロゴの一部だけを切り取って使用しない
推奨事項
- コンテンツの四隅に配置する
ブランドカラーBrand Colors
Philtz のブランドカラーは、和紙のような温かみを持つニュートラルベージュです。 印刷とWebで異なる色値を使用し、媒体ごとに最適な表現を行います。
ブランド (印刷)
| Hex | #e1dedb |
|---|---|
| CMYK | C:0 M:2 Y:4 K:11 |
| DIC | DIC-2227 (ΔE₀₀ 2.74) |
| Token | --pltz-color-brand |
| 用途 | 印刷物の背景色・紙面 |
ブランド (Web)
| Hex | #f5f2ef |
|---|---|
| CMYK | C:0 M:1 Y:2 K:4 |
| DIC | DIC 583s (ΔE₀₀ 1.51) |
| Token | --pltz-color-brand-web |
| 用途 | Webサイトの背景色 |
グリッドGrid
黄金比 (1:1.618) に基づく可変カラムグリッド。6本の分割線が画面を不均等に区切り、 自然界に見られる比率で情報を配置します。
2カラム
golden(2)
golden(3)
3カラム
golden(3)
golden(4)
golden(3)
4カラム (非対称)
golden(4)
golden(3)
golden(5)
golden(4)
6カラム (Webサイト採用)
golden(5)
golden(6)
golden(4)
golden(3)
golden(6)
golden(7)
色彩Colors
墨と紙。Philtz のカラーパレットはグレースケールのみで構成されます。
グレースケール
紙 / Paper
--pltz-color-paper#fbfbfb石 / Stone
--pltz-color-stone#eeeeee灰 / Ash
--pltz-color-ash#a9a9a9薄墨 / Light Ink
--pltz-color-light-ink#777777墨 / Ink
--pltz-color-ink#333333セマンティック
Error
--pltz-color-error#E08383Warn
--pltz-color-warn#E4E286Success
--pltz-color-success#A2B3D5書体Typography
Helvetica Neue とたづがね角ゴシック Info。欧文と和文、二つの普遍性。 調和数列に基づくスケールで、文字の大きさに秩序を与えます。
禁止事項
- 欧文は Helvetica Neue を用いる
- 和文はたづがね角ゴシック Info を用いる
タイプスケール
Aa あいう 美
Aa あいう 美
Aa あいう 美
Aa あいう 美
Aa あいう 美
Aa あいう 美
Aa あいう 美
Aa あいう 美
余白Spacing
フィボナッチ数列に基づく余白体系。自然の成長パターンが、要素間の呼吸を決定します。
構成要素Components
最小限の構成要素。入力と送信、それだけ。
v0.1.0