DESIGN
AquaWiz Design System v3.1 — this site is its own specification.
Every value, class, and component shown here is read directly from the implementation. Colors without a published brand value show HSL only — no hex is invented.
01 — Color
Color
Light ("Paper") and dark ("Abyss") token values are shown side by side. Only values published as brand colors get a 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
Two families: Inter + Noto Sans JP (sans / display) and JetBrains Mono (data). JP display type sets palt and breaks only at bunsetsu boundaries (Segmented + word-break:keep-all). Class recipes are shown verbatim.
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 — bunsetsu breaking (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 caps at 1440px with fluid padding. Divisions read through hairlines (border), not shadows.
container-site — max-width: 1440px
Hairline rule — border-t / divide-y
No card shadows — only border and divide-y separate regions.
Conventions — 2026-07
- Sections open directly with their heading. Page-name eyebrow labels and red squares are retired (functional labels and long-document chapter numbers remain).
- Red appears only on hover/focus states, plus at most one deliberate accent per page.
- JP display type sets palt and breaks only at bunsetsu boundaries (Segmented + word-break:keep-all; dynamic copy uses text-wrap:pretty).
04 — Elements
Elements
Implemented UI primitives, driven with real props.
Badge
Chip
Kbd
keys=["mod", "k"]
Spinner
AnimatedCounter
value={89} suffix="M"
Skeleton
Pagination
page = 3 / pageCount = 9
Tabs
We want underwater observation to feel closer. That is what we build for.