DESIGN
AquaWiz デザインシステム v3.1 — このサイト自身が仕様書です。
ここに並ぶ値・クラス・コンポーネントはすべて実装から直接読み出しています。掲載していない色は HSL のみを表示し、HEX 値を独自に作成することはしません。
01 — Color
Color
ライト（Paper）とダーク（Abyss）、両テーマのトークン値を並べて表示します。HEX はブランドカラーとして公開されている値のみ、CopyButton でコピーできます。
Light
hsl(45 25% 97%)
Dark
hsl(220 25% 5%)
Background
--background
Light
hsl(220 30% 8%)
Dark
hsl(40 20% 96%)
Foreground
--foreground
Light
hsl(0 0% 100%)
Dark
hsl(220 20% 7%)
Card
--card
Light
hsl(0 72% 51%)
Dark
hsl(0 76% 58%)
Primary
--primary
Light
hsl(45 18% 93%)
Dark
hsl(220 16% 11%)
Secondary
--secondary
Light
hsl(45 18% 93%)
Dark
hsl(220 16% 11%)
Muted
--muted
Light
hsl(220 10% 40%)
Dark
hsl(220 10% 62%)
Muted foreground
--muted-foreground
Light
hsl(45 12% 86%)
Dark
hsl(220 12% 16%)
Border
--border
02 — Typography
Typography
Inter + Noto Sans JP（sans / display）と JetBrains Mono（data）の 2 系統。日本語ディスプレイは palt（詰め組み）＋文節単位の改行（Segmented + word-break:keep-all）。クラスレシピをそのまま表示します。
Display (h1)
深い海を、身近に。
Bring the deep sea closer.
palt font-display font-bold tracking-[-0.03em] leading-[1.04] text-5xl md:text-7xl
Section heading (h2)
観測を、続けられる行為へ。
Turn observation into something sustainable.
palt font-display font-semibold tracking-tight leading-[1.1] text-3xl md:text-4xl lg:text-5xl
Sub-heading (h3)
Autonomous Buoyancy
Autonomous Buoyancy
font-display font-semibold tracking-[-0.01em] text-xl md:text-2xl
Manifesto — 文節改行 (Segmented + keep-all)
観測が増えれば、
We believe advanced underwater monitoring shouldn't be a luxury.
palt text-2xl md:text-4xl font-medium leading-[1.55] tracking-[-0.01em] [word-break:keep-all]
Body
水中環境は、静かに変化します。だからこそ必要なのは、一度きりの調査ではなく、継続して観測すること。
The underwater environment changes quietly. What matters is continued observation, not a single survey.
text-base md:text-lg leading-[1.9] text-muted-foreground
Data / numerals
89M / ±0.1°C / 2026.07.03
89M / ±0.1°C / 2026.07.03
font-mono tabular-nums text-sm text-foreground
03 — Grid & Rules
Grid & Rules
container-site は最大幅 1440px、可変パディング。区切りは影ではなくヘアライン（border）で表現します。
container-site — max-width: 1440px
Hairline rule — border-t / divide-y
カードの影は使わず、border と divide-y のみで領域を区切ります。
Conventions — 2026-07
- セクションは見出しで直接開く。ページ名の眉ラベルと赤スクエアは全廃（機能ラベルと、長文ドキュメントの章番号のみ存続）。
- 赤は hover / focus ステートと、1ページにつき意図した強調1箇所まで。
- 日本語ディスプレイ文字は palt を敷き、文節境界でのみ改行する（Segmented + word-break:keep-all。動的コピーは text-wrap:pretty）。
04 — Elements
Elements
実装済みの UI プリミティブを、実際の props で動かして確認できます。
Badge
Chip
Kbd
keys=["mod", "k"]
Spinner
AnimatedCounter
value={89} suffix="M"
Skeleton
Pagination
page = 3 / pageCount = 9
Tabs
水中観測を、もっと身近にしたい。そのために、私たちはつくっています。