01 — Primitive Tokens
Brand Palette
Light
#E9EEF2
--primitive-gray-100
Sky Blue
#71B1D9
--primitive-blue-400
Olive
#98A62D
--primitive-green-400
Lime Accent
#DEF249
--primitive-lime-200
Near Black
#0D0D0D
--primitive-gray-950
01 — Primitive Tokens
Blue Scale
Blue 100
#D8ECF7
Blue 200
#B5D9EF
Blue 300
#91C5E7
Blue 400 ★
#71B1D9
Blue 500
#4E97C5
Blue 600
#3278A4
Blue 700
#1F5A80
01 — Primitive Tokens
Lime Scale
Lime 100
#EEF97E
Lime 200 ★
#DEF249
Lime 300
#C8DC1E
Lime 400
#A8B918
Lime 500
#879512
Lime 600
#65710D
Lime 700
#444D08
01 — Primitive Tokens
Green / Olive Scale
Green 100
#EDF0CB
Green 200
#D4DB96
Green 300
#BAC862
Green 400 ★
#98A62D
Green 500
#7A8522
Green 600
#5D6519
Green 700
#404711
01 — Primitive Tokens
Red Scale
Red 50
#FEF2F2
Red 100
#FAD9D7
Red 200
#F5A8A3
Red 300
#FB7185
Red 400
#E84E4E
Red 500
#D43A2F
Red 600
#B42318
Red 700
#8E1A11
Red 800
#7F1D1D
01 — Primitive Tokens
Amber Scale
Amber 50
#FFFBEB
Amber 100
#FDEFD0
Amber 200
#F9D88E
Amber 300
#FBBF24
Amber 400
#E5A40F
Amber 500
#D4820A
Amber 600
#A85D07
Amber 700
#7C4305
Amber 800
#713F12
01 — Primitive Tokens
Emerald Scale
Emerald 50
#ECFDF5
Emerald 100
#D4F0E1
Emerald 200
#A5E1BF
Emerald 300
#4ADE80
Emerald 400
#34C96A
Emerald 500
#2E9B5A
Emerald 600
#1F7A43
Emerald 700
#166534
Emerald 800
#14532D
02 — Semantic Tokens
Color — Background
bg-base
--color-bg-base
bg-surface
--color-bg-surface
bg-subtle
--color-bg-subtle
bg-muted
--color-bg-muted
bg-inverse
--color-bg-inverse
bg-overlay
--color-bg-overlay
02 — Semantic Tokens
Color — Brand
brand-primary
--color-brand-primary
primary-hover
--color-brand-primary-hover
primary-subtle
--color-brand-primary-subtle
brand-secondary
--color-brand-secondary
brand-accent
--color-brand-accent
accent-subtle
--color-brand-accent-subtle
02 — Semantic Tokens
Color — Status
status-success
--color-status-success
success-subtle
--color-status-success-subtle
status-warning
--color-status-warning
warning-subtle
--color-status-warning-subtle
status-error
--color-status-error
error-subtle
--color-status-error-subtle
status-info
--color-status-info
info-subtle
--color-status-info-subtle
02 — Semantic Tokens
Color — Text
text-primary
--color-text-primary
text-secondary
--color-text-secondary
text-tertiary
--color-text-tertiary
text-disabled
--color-text-disabled
text-inverse
--color-text-inverse
text-link
--color-text-link
text-on-accent
--color-text-on-accent
accent-on-dark
--color-text-accent-on-dark
accent-on-light
--color-text-accent-on-light
accent-muted
--color-text-accent-muted
02 — Semantic Tokens
Color — Border
border-default
--color-border-default
border-strong
--color-border-strong
border-focus
--color-border-focus
border-inverse
--color-border-inverse
border-accent
--color-border-accent
03 — Spacing Tokens
Spacing Scale — Primitive & Semantic
2px
4px
8px
12px
16px
24px
32px
40px
48px
64px
80px
96px
128px
04 — Typography Tokens
Type Scale — Display (Space Mono) & Accent (Grape Nuts)
Aa
Notelix
Drone System
Design Tokens
Section Header
Accent Eyebrow Label
01 — Foundation Tokens
04 — Typography Tokens
Type Scale — Body (Zen Kaku Gothic New)
セクションタイトル・強調見出し
カードタイトル・コールアウト
リード文・強調ボディコピー。重要な導入文やサービス説明に使用します。
標準ボディテキスト。UI全体の説明文・サポート情報・製品インターフェースの主要コンテンツに使用します。視認性と可読性のバランスを重視したサイズです。
補助情報・キャプション・ヘルパーテキスト・メタデータラベル
LABEL / TAG / STATUS
Section Label — eyebrow text
04 — Typography Tokens
日本語 × 英字 ペアリングプレビュー
Mission Brief
SECTOR 07
自律飛行ミッションを開始します。対象エリアの3Dマッピングを完了し、データをリアルタイムで送信中です。
BATTERY
94%
高度
120m
ステータス
飛行中
04.5 — Grape Nuts カラールール
アクセントフォントの背景別カラー指定
a quiet thrill in the everyday.
ワクワクの種、ここに。
DARK BG — LIME OK ✓
--color-font-accent-on-dark
→ var(--primitive-lime-200)
#DEF249
a quiet thrill in the everyday.
ワクワクの種、ここに。
LIGHT BG — OLIVE ✓
--color-text-accent-on-light
→ var(--primitive-green-600)
#5D6519
a quiet thrill in the everyday.
⚠ コントラスト比不足 — 使用禁止
LIGHT BG — LIME ✗ NG
lime (#DEF249) は白背景では
視認性が確保できないため禁止。
必ず dark bg と組み合わせること。
視認性が確保できないため禁止。
必ず dark bg と組み合わせること。
05 — Shadow Tokens
Elevation Scale
--shadow-xs
--shadow-sm
--shadow-md
--shadow-lg
--shadow-xl
--shadow-2xl
--shadow-glow-primary
--shadow-glow-accent
--shadow-glow-secondary
06 — Motion Tokens
Duration & Easing
--duration-fast
100ms
--duration-normal
200ms
--duration-slow
300ms
--duration-slower
500ms
--ease-out
cubic-bezier(0, 0, 0.2, 1)
--ease-in-out
cubic-bezier(0.4, 0, 0.2, 1)
--ease-spring
cubic-bezier(0.34, 1.56, 0.64, 1)
--ease-bounce
cubic-bezier(0.68, -0.55, 0.265, 1.55)
07 — Component Tokens
Buttons
07 — Component Tokens
Badges
Primary
Accent
Secondary
Success
Warning
Error
07 — Component Tokens
Input & Card
Mission Brief
Sector 7 Survey
自律飛行ミッション開始。風速は正常範囲内。バッテリー残量 94%。
08 — Radius Tokens
Border Radius
none / 0
xs / 2px
sm / 4px
md / 8px
lg / 12px
xl / 16px
2xl / 24px
full
09 — Dark Mode Preview
Inverse / Dark Surfaces
Active
In Flight
Sector Grid 07
autonomous flight system
10 — Sample Pages
Applied Examples
デザイントークンを実際に適用したサンプルページです。
トークンシステムがどのように実プロダクトで機能するかを確認できます。
Presentation
Service Introduction
ライトテーマのプレゼンスライド。サービス紹介・料金プラン・実績をまとめた8枚構成。
8 Slides
Light
Portfolio
Design Studio
ライトテーマのスタジオサイト。フィロソフィー・実績・チーム紹介の構成。
6 Sections
Light
Presentation
Pitch Deck
ダークテーマのプレゼンスライド。スタートアップピッチデッキ、8枚構成。
8 Slides
Dark
Portfolio
Portfolio Site
ダークテーマのポートフォリオサイト。ヒーロー・実績・経歴・コンタクトの6セクション構成。
6 Sections
Dark