WEAREMS Design System v2.0
Silent Gold
静謐なゴールド。
WEAREMSが追求するデザインの美学を、
全プロジェクトの統一言語として体系化する。
Inter 200 × Gold #b8860b × Whitespace
W200
The Silence Speaks Louder
W300
Crafting Elegance Through
Restraint
W400
静謐の中にこそ
本物の品格が宿る
W500
Design
is Strategy · Silence is Power
Mono
font-weight:
200 | letter-spacing: -2px
Color Palette
Silent Gold Palette
色の節制。使うのはゴールド、ネイビー、グレーの3系統のみ。彩度を抑えたゴールドが品格を、ネイビーが知性を、グレーが静けさを担う。
Gold Warm
#d4a84b
グラデーション用
Gold Soft
rgba(184,134,11,0.08)
ゴールド背景・タグ
Text Primary
#1a1a1a
テキスト第1階層
Text Secondary
rgba(0,0,0,0.50)
テキスト第2階層
Typography
フォントウェイトの哲学
「太すぎるとやぼったい」——SATの直感を体系化する。Inter 200の繊細さがSilent Goldの核であり、600以上は原則使用しない。
WEIGHT 200
メイン見出し・インパクト表現
Momentum Peaks
WEIGHT 300
セクション見出し・サブタイトル
「なんとなく」からの脱却
WEIGHT 400
本文テキスト — 日本語はNoto Sans JP
飲食業界に蔓延する「経験と勘」を、365日分のデータで置き換える。季節・曜日・イベントを0.01〜5.00のスケールで統一し、データに基づく「適正な見通し」を構築する。
WEIGHT 500
ラベル・アイブロウ — UPPERCASE + SPACING
WEAREMS Intelligence · Season Index · Philosophy
MONOSPACE
データ値・数式・コード
KF① = ( Season + Weekday + Visitors ) ÷ 3
ウェイト比較
— なぜ200-500なのか
太いフォントは「力強さ」を、細いフォントは「品格」を表現する。WEAREMSが目指すのは後者。
Readability
「細いと読みづらい」問題の解法
Weight 200は大きく使い、本文は400で。コントラストとサイズで可読性を確保する。
✕ やぼったい — Weight 700-900
Momentum Peaks
太すぎるフォントは力強いが、ホスピタリティの上品さ・静謐さとは相反する。
◎ 静謐＋可読性 — Weight 200 × Large Size
Momentum Peaks
Weight 200でもサイズを大きくし、背景とのコントラストを確保すれば十分読みやすい。
✕ 読みづらい — Weight 200 × Small Size
小さいサイズでWeight 200を使うと線が細すぎて視認しづらくなる。これは避けるべき。
◎ 小さいテキスト — Weight 500 × Letter Spacing
WEAREMS Intelligence
小さいラベルは500 + レタースペーシングで可読性を確保。UPPERCASEも効果的。
Components
コンポーネントギャラリー
Silent Goldの全コンポーネント。すべてのプロジェクトでこれらを共通言語として使用する。
Cards
定量化
売上・入客・季節・イベントを0.01〜5.00のスケールで統一。
適正フォーキャスト
予測ではなく、データに基づく「適正な見通し」を構築。
曖昧さの排除
「去年もこうだったから」を数値で検証可能に。
Tags & Labels
Season Index
Key Factor
Layer 1
Layer 2
Draft
v1.0
Buttons
Data Table
| 月 |
季節指数 |
主なイベント |
| 7月 |
5.00 |
ビアガーデン・PMF |
| 12月 |
5.00 |
クリスマス |
| 2月 |
3.00 |
雪まつり |
| 4月 |
1.00 |
運休期間 |
Accordion
CASE OF 藻岩山（The Jewels）
藻岩山は札幌中心部から最もアクセスしやすい展望施設。ロープウェイと相性が良く、季節による変動が大きい。冬のイルミネーション期間と夏の夜景シーズンがピーク。
CASE OF テレビ塔
さっぽろテレビ塔は大通公園の東端に位置し、年間を通して安定した集客力を持つ。雪まつり・オータムフェスト期間は特に来場者が増加する。
Formula / Highlight Box
Timeline / Steps
PHASE 1 — TEMPLATE
定数テンプレートの構築。過去データを分析し、拠点ごとの標準パターンを確立する。
PHASE 2 — RECOMMENDATION
AIが提案する最適配置。データに基づく推薦をマネージャーが承認する。
PHASE 3 — ONE BUTTON
ワンボタンで最適シフトを自動生成。究極の業務革命。
Stats / KPI Cards
MP SCORE
3.42
Peak Season
Progress Bars
Alert / Notice Banners
新しいバージョンが利用可能です
接続エラーが発生しました
Tabs
タブでコンテンツを切り替え。店舗別、期間別、セグメント別の表示に最適。
Spacing
余白の呼吸
余白は沈黙のようなもの。コンテンツに呼吸を与え、情報の階層を伝える。
Border Radius
Icon Catalog
SVGアイコンライブラリ
クリックでSVGコードをコピー。テーマカラーに連動する統一アイコンセット。すべてstroke-based、24×24 viewBox。
Analytics
Navigation
Action
Status
alert-circle
info
x-circle
UI Elements
Business
Text Decoration
テキスト装飾パターン
文字そのものにスタイリッシュな表現を加える。タイトル・見出し・キーフレーズに適用し、視覚的インパクトを与える。
GRADIENT TEXT
Silent Gold
background: linear-gradient(135deg, gold, warm)
OUTLINE TEXT
MOMENTUM
-webkit-text-stroke: 1px gold
ENGRAVE / DARK BG
PEAKS
text-shadow: 0 1px 2px shadow + glow
UNDERLINE ACCENT
Intelligence Age
border-bottom: 2px solid gold
NEON GLOW
WEAREMS
text-shadow: multi-layer glow
SPACED UPPERCASE
enter
letter-spacing: 12px + uppercase
Decorative Marks & Dividers
GOLD LINE DIVIDER
width:60px; height:1px; bg:gold
GRADIENT FADE DIVIDER
linear-gradient(90deg, transparent, gold, transparent)
DIAMOND SEPARATOR
line — ◆ — line
TRIPLE DOT
● ● ● (3 dots)
DOUBLE LINE
2 lines with opacity variation
Section Decorations
QUOTE BLOCK
"
ここだけの美味しさ。
ここだけのエンターテインメント。
NUMBERED SECTION
01
Demand
Quantization
需要を数値化し、適正な見通しを構築する
STATUS BADGES
✅
ACHIEVED
🔜
IN PROGRESS
📋
PLANNED
⚠️
BLOCKED
VERTICAL ACCENT LABEL
WEAREMS
コンテンツの横に配置する垂直ラベル。セクションの文脈を静かに伝える。
Color Theme
Sans-Serif
Serif / Elegant
日本語フォント