Design System Preview — teamLab.art / 日本語版

DESIGN.md から抽出したデザイントークンのカタログ。背景 #0e0f0e の純黒を基調に、Helvetica と OS 既定の和文フォントだけで構成された極限までストイックなダーク UI。computed style 実測値（2026-05-07 取得）に基づく。

もっとみる
01 / Colors

カラーパレット

Surface
Page Background
#0e0f0e
ページ全体（純黒ではない深いブラック）
Section Alt
#1a1a1a
入力欄・推奨ホバー面
Text
Text Primary
#ffffff
本文・見出し
Text Muted
#999999
日付・キャプション
Badge / Accent
Badge BG
#ffffff
「ON VIEW」「VIDEO」
Badge Text
#000000
白バッジ内テキスト
Border (CTA)
#5a5a5a
ボタン枠線
02 / Typography — 実測値

タイポグラフィ階層

セクション見出し — WORKS
20px / 700 / line-height: 1.5 / letter-spacing: normal / palt: なしトップページ h2
本文テキスト — チームラボ バイオヴォルテックス 京都 - 大成建設。深いブラック #0e0f0e 上に純白テキスト、line-height: 1.6 で組まれた標準本文。
16px / 400 / line-height: 1.6 / letter-spacing: normal本文 p
アクティブナビ — WORKS
14px / 600 / line-height: 1.6ヘッダー a.active
サブメタ — 2025.10.07(火) - 常設
13px / 400 / line-height: 1.6 / color: #ffffff作品開催情報
会場名 — teamLab Museum
13px / 400 / line-height: 1.6 / color: #999999会場サブメタ
キャプション — 2025.4.18(金) - 常設
12px / 400 / line-height: 1.6 / color: #999999日付キャプション
言語切替 — Deutsch English Español Français
12px / 400 / line-height: 1.6 / letter-spacing: 0.24px (+0.02em)ヘッダー言語切替
ON VIEW
10px / 700 / 黒文字 #000 on 白 #fff / padding 4px 8px作品状態バッジ
03 / Works — 作品カード

作品グリッド

ON VIEW
Forest of Resonating Lamps
2025.10.07(火) - 常設
teamLab Museum
VIDEO
Floating Flower Garden
2025.4.18(金) - 常設
teamLab Borderless
ON VIEW
Flutter of Butterflies
2025.7.15(火) - 常設
teamLab Planets
04 / Buttons & Badges

UI コンポーネント

もっとみる
Outlined CTA
ON VIEW
Mini Badge
VIDEO
Mini Badge
日本語 English 中文
Lang Switch (letter-spacing 0.24px)
05 / Forms

フォーム要素

デフォルト — border: 1px solid #5a5a5a, radius: 0px
フォーカス — border: #ffffff（白）
06 / Spacing — 8px グリッド

スペーシング

XS · 4px
S · 8px
M · 16px
L · 24px
XL · 40px
XXL · 80px