アクセントは #f8444d の 1 色だけ。面にも文字にも罫にも同じ赤を使い回す。本文の黒は純黒ではなく #16171d、面の階調は #f0f1f4 と #fafafc の 2 段しかない。
フォーム部品だけブランドのニュートラルから外れている。本文の黒は #16171d なのに入力欄の文字は #020617(slate-950)、罫は #c5c8d3 ではなく #e2e8f0(slate-200)。実装の実態としてそうなっているので、既存ページに合わせるならこの 3 値を使う。
一見ヘビーゴシックだが、実体は 貂明朝アンチック(ten-mincho-antique)700。仮名が写植のアンチック、漢字がゴシック寄りという字面で、ゴシックに置き換えると仮名の表情が消える。和文の本文には Web フォントを 1 本も使わず、游ゴシック体(OS ローカル)で組む。
サイズには 2 つの系統がある。見出し・本文・カードは rem で viewport に連動し、ナビ・ボタン・チップは px 固定(12 / 13 / 14px)。UI 部品はどの画面幅でも同じ大きさにする設計。
字間も同じ考え方で rem 宣言。em で書くとサイズに比例してしまい、「本文の字間は絶対値」という設計が崩れる。例外は 40px を超える大見出しだけで、そこは 0.08em(ヒーローも h2 もちょうど 8%)。
border-radius は実測 3 値だけ ——1.2rem(73 要素)、0.4rem(28 要素)、999px(1 要素)。静止状態の box-shadow は 0 要素で、--shadow-card は宣言されているだけ。
フィルタだけ border-radius: 0。このサイトで唯一の角丸ゼロ部品。選択状態が #f8444d、非選択が #f0f1f4。
AIのプロフェッショナルが戦略策定をご支援します。現状の業務を棚卸しし、効果の出る領域から着手します。
経営層がAIの可能性と限界を掴み、自ら意思決定できる状態をつくります。
創業以来50以上のAIネイティブな事業立ち上げで培った型を持ち込みます。
人物写真だけ --radius-xs(0.4rem / 実測 3.38823px)。カードとボタンは 1.2rem。
フォームのトークンは Tailwind slate の素通し(#020617 / #64748b / #e2e8f0)。フォーカスはアクセントの赤で示す。autofocus は使わず .is-focus クラスで見せている。
html { font-size: calc(100vw / 170) } ——1440px で 1rem = 8.47058px、デザイン幅 1700px で 1rem = 10px になる流体ルート。このサイトの寸法はすべてこの rem に乗っている。16px や 62.5% に変えると --section-padding-y: 14rem をはじめトークンの数値が全部壊れる。
ブレークポイントは (width <= 768px) の 1 本だけ(実測 15 件)。中間幅の調整は html の流体 font-size が引き受けている。(hover: hover) 11 件、(prefers-reduced-motion: reduce) 10 件でホバー演出とアニメーションを丁寧に切り分けている。
html { font-size: calc(100vw / 170) } を先に置く。全トークンがこれ前提ten-mincho-antique 700。落ちる先は明朝(Hiragino Mincho ProN)rem で宣言(本文 .064rem / タグ .024rem / ボタン .028rem)letter-spacing: 0.08em + palt-0.02em と逆に詰める#f8444d 1 色。本文色は #16171dfont-size は px 固定nexa の font-weight: 300 を使わない(unloaded)letter-spacing を em で書かないbox-shadow を足さない(静止時 0 要素)#fafafc を面に使わない(実サイトでは未使用)