classes

border-0

デフォルト デザイントークン

編集権限状態アイコンの切り替え

テーマカラー・選択ボタン内１個目のSpanの切り替え

テーマカラー・プルダウンメニュー

フルスクリーン・トグルボタンの切り替え

デフォルト デザイントークン

Breakpoint

Typography

Color

Size

Border

Spacing

Shadow

Filter

Transition

Z-index

Animation

Background Image

Breakpoint

media-breakpoint

container-width

Typography

font-size

line-height

letter-spacing

font-family

typography

Color

color

bg-color

Size

width

height

size

Border

border-thickness

border-radius

Spacing

spacing

inline-spacing

Shadow

text-shadow

box-shadow

Filter

opacity

filter-radius

Transition

transition-duration

transition-timing-function

transition-delay

Z-Index

z-index

Animation

animation

Background Image

background-image

background-image-url

デフォルト デザイントークン

media-breakpoint

Breakpoint Name
Value

extra small cellphone extra small cellphone extra small cellphone extra small cellphone

16px

0px

cellphone

16px

0px

Breakpoint Name
Value
16px
16px

デフォルト デザイントークン

media-breakpoint

SingularTokenValue<T> を扱うTokenEditor

デフォルト デザイントークン

ResponsiveTokenValue<T> を扱うTokenEditor

デフォルト デザイントークン

font-size

Query

font-size

Token Name
xsp
sp
tb
pc
xpc
2xpc

extra small text
extra small text

13.555555px
青い空
Lazy Foxy Sphinx
13px
青い空
Lazy Foxy Sphinx
13px
青い空
Lazy Foxy Sphinx
13px
青い空
Lazy Foxy Sphinx
13px
青い空
Lazy Foxy Sphinx
13px
青い空
Lazy Foxy Sphinx

base text size

16px
青い空
Lazy Foxy Sphinx
16px
青い空
Lazy Foxy Sphinx
16px
青い空
Lazy Foxy Sphinx
16px
青い空
Lazy Foxy Sphinx
16px
青い空
Lazy Foxy Sphinx
16px
青い空
Lazy Foxy Sphinx

extra large text

29px

青い空
Lazy Foxy Sphinx

29px

青い空
Lazy Foxy Sphinx Sphinx Sphinx

37px

37px

37px

37px

SingularTokenValue<T> のGridレイアウトTokenEditor

デフォルト デザイントークン

background-image

extra small cellphone

extra small cellphone

extra small cellphone

extra small cellphone

extra small cellphone

extra small cellphone

extra small cellphone

BreakpointSample

1920px

SingleLineTextSample

青い空

MultiLineTextSample

青い空
Lazy Foxy Sphinx
青い空

TypographySample

青い空
Lazy Foxy Sphinx

ColorSwatch

P3Fallback
sRGB

ColorSample

青い空
Lazy Foxy Sphinx

WidthSample

64px

HeightSample

64px

RectSample

2px

RectSample

32px

SpacingSample

16px

InlineSpacingSample

64px

TextShadowSample

青い空
Lazy Foxy Sphinx

BoxShadowSample

OpacitySample

0.5

BlurSample

20px

TransitionSample

2000ms

BackgroundImageSample

BackgroundImageSample

breakpoint

13.555555px
数値形式が正しくありません

input error

13.555555px
数値形式が正しくありません

size

13.555555px
数値形式が正しくありません

font-family

color

Rec2020Fallback
Fallback#0099ecccContrast17.2

dual swatch

Rec2020Fallback

single swatch

sRGB

text-shadow

青い空
Lazy Foxy Sphinx

box-shadow

numeric

long-text

animation

background-image

Modal Samples

Modal Title–primary
Breakpoint Editor–primary
Size in Pixels16.5px
Color Editor–primary
Rec2020Fallback
Fallback#0099ecccContrast1
Line Height Editor–primary
step 2 of 4 : Scaling Base Value

result = base × ratio^n（ratio = Scale type, n = Steps)

Text Shadow Editor–primary
青い空
Lazy Foxy Sphinx
Rec2020Fallback
fallback#0099eccc
Size Editor–lg
Size in Pixels
16.5px
step 1 of 4 : Base Value
step 2 of 4 : Scaling Base Value

result = base × ratio^n（ratio = Scale type, n = Steps)

Step 3 of 4 : Rounding value to pixelsRounding to
Step 4 of 4 : Final Value Unit
Image Editor–gear
Image Editor–gear
px px
Font Family Editor–gear
Playfair DisplayExternalLoaded
青い空
Lazy Foxy Sphinx
ホスティング