01 / Colors

インディゴ1色で導線を引く

ブランド色は #2227b2 ひとつ。文字色として 34 要素、面色として 8 要素にしか現れないが、CTA・リンク・数値の強調・セクションラベルをすべて担う。 本文の黒は純黒ではなく #0f131a(可視 464 要素)。サービス3領域のバッジだけが 青 → インディゴ → 紫 と色相を連続させた3色を使う。

Brand Indigo
#2227b2
★ CTA の面、リンク、数値強調、アウトラインの枠
Ink
#0f131a
本文・見出し。可視 464 要素。純黒 #000 は使わない
Ink / secondary
#3c4149
補足文、ログインボタンの文字
Ink / muted
#6d727c
注釈 11px、カテゴリタグ
設計 / Planning
#085f96
バッジ面のみ。他では使わない
活用 / Enablement
#4622b2
バッジ面のみ。他では使わない
Success
#0d735b
「提供予定」バッジの文字(面は #f3f4f7)
Surface
#f3f4f7
フッター面、ステータスバッジの面
Border
#e9eaed
カードの枠
Border / strong
#afb6c1
セカンダリボタン・入力欄の枠
Gradient / bar
rgba(218,219,247,.5) → rgba(180,212,241,.5)
実績バー。白に限りなく近い
Gradient / section
#f5fafd → #f5f6fd → #f7f5fd
セクション面。彩度を上げないこと

このサイトに CSS 変数は 1 個も無い。Next.js の CSS Modules(index-module-scss-module__…__button)でビルド時に解決されているため、実装値そのものが仕様になる。

palt は見出しだけ、字間は body から継承

欧文 Manrope → 和文 Noto Sans JP の順にスタックを積み、数字とラテン文字を Manrope に拾わせる。 letter-spacing は body に 1 回だけ書いて 0.368px として可視 493 要素に継承させ、見出しだけが em で 0.05〜0.06em に開く。 font-feature-settings: "palt" は可視 540 要素中わずか 9 要素——すべて見出しと円ラベルで、本文には当てない。

h1 / Hero
56px · 600 · 1.2
letter-spacing .05em
palt あり
株式報酬、まるごとプロに。
h2 / Section
32px · 600 · 1.65
letter-spacing .06em
palt あり
株式報酬の課題、誰に相談していますか?
h3
20px · 600 · 1.55
letter-spacing .03em
100社以上の支援実績をもとに、最適な設計に伴走
Lead
20px · 500 · 1.75
継承 0.368px
設計も、管理も、活用も。AIと専門家が、すべてに応える。
Body
16px · 400 · 1.8
継承 0.368px
palt なし
株式報酬の最適解は、成長フェーズごとに変わります。制度の設計も、日々の管理も、従業員への価値の伝え方も、担当者ひとりで抱えるには広すぎる領域です。
Small
14px · 400 · 1.45
最頻サイズ(51 要素)
制度設計・運用体制の相談/税制適格SO 契約書ひな型の提供/株価算定
Note
11px · 400 · 1.52
#6d727c
※ Nstock は法律・税務の助言や株価算定業務そのものを行うものではありません。
font-feature-settings: "palt" — 見出しに当てる
その課題、Nstock株式報酬が「まるごと」解決します。
normal — 本文はこちら(palt を当てない)
その課題、Nstock株式報酬が「まるごと」解決します。

和文に 700 以上を使わないこと。Noto Sans JP の 700 は @font-face に宣言されているが document.fonts の status が unloaded(=参照する要素が存在しない)。 実測のウェイト分布は 600 が 50、400 が 45、500 が 22、700 は数字の「100」1 要素だけ。Manrope も 800 は unloaded。

03 / Document

本文は 603px の読み幅に置く

コンテナは 1120px だが、長文ブロックは 603px / 540px に絞って 1 行の字数を抑える。

急成長スタートアップ・上場準備企業 100 社以上の支援実績

その課題、まるごと解決します

エクセル管理は、成長とともに限界を迎えます。付与・変動・登記の履歴が担当者の手元にしか無い状態では、 資金調達や上場準備のたびに棚卸しが発生し、そのつど同じ確認を繰り返すことになります。

設計・管理・活用の3領域を 1 つの窓口にまとめることで、誰に聞けばいいか分からないという状態そのものを無くします。

提供予定

角丸 4px、アウトラインの文字は黒

CTA は塗り(インディゴ)とアウトライン(枠だけインディゴ・文字は黒)の2種だけ。アウトラインの文字色までブランド色にしないのがこのサイトの流儀。 面や大型 CTA だけ角丸が 6px、カテゴリタグは 2px、課題ラベルは 角丸ゼロ。

設計支援 Planning 管理支援 Admin 活用支援 Enablement
設計の課題 管理の課題 Press Release 提供予定 最適な設計か分からない

塗りボタンの角丸は 4px、フッターの大型 CTA だけ 6px。課題ラベル(.label-col)は border-radius: 0、カテゴリタグは 2px。 浮きラベルはこのサイトで唯一影が付く要素(rgba(0,0,0,.08) 2px 4px 4px 0・実測 3 要素)。

05 / Cards

影を使わず、1px の罫線で囲む

カードは 1px solid #e9eaed と角丸 4px のみ。サービス3領域のカードだけ角丸 6px で、円ラベルに palt が当たる。

導入事例
チューリング初のストックオプション説明会レポート
CFO が語る、設計から従業員への伝え方まで。
2026.09.02
Press Release
LayerX が資金調達とあわせて Nstock を導入した理由
成長フェーズごとに変わる最適解にどう追随するか。
2026.08.21
お知らせ
日本経済新聞に掲載されました
株式報酬の設計・管理・活用をめぐる潮流について。
2026.08.05
設計PLANNING
Planning
最適な設計に伴走
100社以上の支援実績をもとに、自社に合った制度の方向性を専門家と決めます。
設計支援を詳しく見る
管理ADMIN
Admin
正確なデータと堅牢な体制
付与・変動・登記の履歴をソフトウェアで一元化し、棚卸しを不要にします。
管理支援を詳しく見る
活用ENABLE
Enablement
価値を伝え、原動力へ
従業員に株式報酬の価値が伝わる説明会・資料づくりまで支援します。
活用支援を詳しく見る

入力欄も角丸 4px・枠 1px

既定・フォーカス・エラーの3状態。フォーカスリングはインディゴの 12% を 3px。

登記上の名称をご記入ください
電話番号の形式が正しくありません
07 / Elevation

影は 1 種類・3 要素だけ

可視 540 要素のうち 537 要素が box-shadow: none。階層は罫線と面色で表す。

Level 0 — 既定
box-shadow: none
可視 537 要素。カードもボタンも影なし
Level 1 — ヒーローの浮きラベルのみ
rgba(0,0,0,.08) 2px 4px 4px 0
実測 3 要素

コンテナ 1120px、余白は 8px 刻み

ヒーローと全幅セクションだけ 1440px。長文は 603px / 540px に絞る。

1440px — ヒーロー・全幅セクション
1120px — 本文コンテンツ(最頻)
603px / 540px — 長文ブロック
8
12
16
20
24
32
40
64

ブレークポイントは min-width 方式。実測の出現回数は 1024px(150) → 768px(96) → 1280px(65) → 640px(7)。 (prefers-reduced-motion: reduce) も 1 箇所で扱っている。