RESPONSIVE DESIGN SYSTEM

Fluid Scale

本文・見出し・余白のclamp()をまとめて作る。

CSS clamp() 対応
01

LIVE SCALE BUILDER

本文・見出し・余白を、画面幅に合わせて設定する

960PX 13TOKENS
fluid.local / preview
EDITORIAL960PX
NORTH / TYPE

FLUID SYSTEM · 2026

Design grows
between screens.

Breakpoints are boundaries. The space between them should still feel designed.

Explore scale ↗01—07
VIEWPORT960PX
BASE18.2PX
STEP 452.4PX
SPACE L54.5PX

ハンドルを動かすと、同じルールで文字と余白が同時に変化します。

FLUID CURVE

最小・流体・最大の3区間を見る

MINFLUIDMAX
Fluid Scale curve 画面幅に応じて選択したトークンが最小値から最大値まで変化するグラフです。
現在の画面幅 960px使用値 52.4pxclamp(...)

CSS VARIABLES

スケールを持ち帰る

Root Font Sizeは16pxとして`rem`へ変換しています。

GENERATED TOKENS

13個のFluid Tokenを一覧する

TokenMinCurrentMaxCSS clamp()