logo
Charcoal

Colors

black

white

transparent

-hover

-press

-disabled

current

background1

-hover

-press

-disabled

background2

-hover

-press

-disabled

icon6

-hover

-press

-disabled

link1

-hover

-press

-disabled

link2

-hover

-press

-disabled

surface1

-hover

-press

-disabled

surface2

-hover

-press

-disabled

surface3

-hover

-press

-disabled

surface4

-hover

-press

-disabled

surface6

-hover

-press

-disabled

surface7

-hover

-press

-disabled

surface8

-hover

-press

-disabled

surface9

-hover

-press

-disabled

surface10

-hover

-press

-disabled

text1

-hover

-press

-disabled

text2

-hover

-press

-disabled

text3

-hover

-press

-disabled

text4

-hover

-press

-disabled

text5

-hover

-press

-disabled

brand

-hover

-press

-disabled

assertive

-hover

-press

-disabled

warning

-hover

-press

-disabled

success

-hover

-press

-disabled

updatedItem

-hover

-press

-disabled

border

-hover

-press

-disabled

Text Colors

text-black

charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web フロントエンドの実装に用いる npm パッケージ集のことを言います。

text-white

charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web フロントエンドの実装に用いる npm パッケージ集のことを言います。

text-transparent

charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web フロントエンドの実装に用いる npm パッケージ集のことを言います。

text-current

charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web フロントエンドの実装に用いる npm パッケージ集のことを言います。

text-background1

charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web フロントエンドの実装に用いる npm パッケージ集のことを言います。

text-background2

charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web フロントエンドの実装に用いる npm パッケージ集のことを言います。

text-icon6

charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web フロントエンドの実装に用いる npm パッケージ集のことを言います。

text-link1

charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web フロントエンドの実装に用いる npm パッケージ集のことを言います。

text-link2

charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web フロントエンドの実装に用いる npm パッケージ集のことを言います。

text-surface1

charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web フロントエンドの実装に用いる npm パッケージ集のことを言います。

text-surface2

charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web フロントエンドの実装に用いる npm パッケージ集のことを言います。

text-surface3

charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web フロントエンドの実装に用いる npm パッケージ集のことを言います。

text-surface4

charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web フロントエンドの実装に用いる npm パッケージ集のことを言います。

text-surface6

charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web フロントエンドの実装に用いる npm パッケージ集のことを言います。

text-surface7

charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web フロントエンドの実装に用いる npm パッケージ集のことを言います。

text-surface8

charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web フロントエンドの実装に用いる npm パッケージ集のことを言います。

text-surface9

charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web フロントエンドの実装に用いる npm パッケージ集のことを言います。

text-surface10

charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web フロントエンドの実装に用いる npm パッケージ集のことを言います。

text-text1

charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web フロントエンドの実装に用いる npm パッケージ集のことを言います。

text-text2

charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web フロントエンドの実装に用いる npm パッケージ集のことを言います。

text-text3

charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web フロントエンドの実装に用いる npm パッケージ集のことを言います。

text-text4

charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web フロントエンドの実装に用いる npm パッケージ集のことを言います。

text-text5

charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web フロントエンドの実装に用いる npm パッケージ集のことを言います。

text-brand

charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web フロントエンドの実装に用いる npm パッケージ集のことを言います。

text-assertive

charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web フロントエンドの実装に用いる npm パッケージ集のことを言います。

text-warning

charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web フロントエンドの実装に用いる npm パッケージ集のことを言います。

text-success

charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web フロントエンドの実装に用いる npm パッケージ集のことを言います。

text-updatedItem

charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web フロントエンドの実装に用いる npm パッケージ集のことを言います。

text-border

charcoal はピクシブ株式会社のデザインシステムです。ここでは特に、Web フロントエンドの実装に用いる npm パッケージ集のことを言います。

Gradients

bg-surface5-top

-hover

-press

-disabled

bg-surface5-bottom

-hover

-press

-disabled

bg-surface5-right

-hover

-press

-disabled

bg-surface5-left

-hover

-press

-disabled

bg-call-to-action-top

-hover

-press

-disabled

bg-call-to-action-bottom

-hover

-press

-disabled

bg-call-to-action-right

-hover

-press

-disabled

bg-call-to-action-left

-hover

-press

-disabled