デザイントークン

Tsumio デザインシステムの基本要素

選択したカラーのプレビュー

コンポーネントへの適用例

カード見出し

この色をアクセントカラーとして使用したカードの例です。

ステータスバッジ

選択中のカラー情報

#2196f3

HEX:#2196f3

RGB:rgb(33, 150, 243)

カラーパレット

Primary (信頼の青)

primary-50

#e3f2fd

primary-100

#bbdefb

primary-200

#90caf9

primary-300

#64b5f6

primary-400

#42a5f5

primary-500

#2196f3

primary-600

#1e88e5

primary-700

#1976d2

primary-800

#1565c0

primary-900

#0d47a1

Success (利益の緑)

success-50

#e8f5e8

success-100

#c8e6c9

success-200

#a5d6a7

success-300

#81c784

success-400

#66bb6a

success-500

#4caf50

success-600

#43a047

success-700

#388e3c

success-800

#2e7d32

success-900

#1b5e20

Warning (注意の橙)

warning-50

#fff3e0

warning-100

#ffe0b2

warning-200

#ffcc80

warning-300

#ffb74d

warning-400

#ffa726

warning-500

#ff9800

warning-600

#fb8c00

warning-700

#f57c00

warning-800

#ef6c00

warning-900

#e65100

Error (エラーの赤)

error-50

#ffebee

error-100

#ffcdd2

error-200

#ef9a9a

error-300

#e57373

error-400

#ef5350

error-500

#f44336

error-600

#e53935

error-700

#d32f2f

error-800

#c62828

error-900

#b71c1c

Gray (グレースケール)

gray-50

#fafafa

gray-100

#f5f5f5

gray-200

#eeeeee

gray-300

#e0e0e0

gray-400

#bdbdbd

gray-500

#9e9e9e

gray-600

#757575

gray-700

#616161

gray-800

#424242

gray-900

#212121

Background Colors

light

#ffffff

dark

#121212

paper

#f5f5f5

Text Colors

primary

#212121

secondary

#757575

disabled

#bdbdbd

hint

#9e9e9e

タイポグラフィ

Font Families

Heading (Noto Sans JP)

見出しサンプル - Heading Sample

Body (Noto Sans JP)

本文のサンプルテキストです。The quick brown fox jumps over the lazy dog. 日本語も美しく表示されます。

Mono (Roboto Mono)

function hello() {
  return "Hello, World!";
}

Numeric (Roboto)

¥1,234,567,890

前年比: +12.34%

2024/01/15 09:30:45

Font Sizes

0.75rem

テキストサンプル - Sample Text

0.875rem

テキストサンプル - Sample Text

base

1rem

テキストサンプル - Sample Text

1.125rem

テキストサンプル - Sample Text

1.25rem

テキストサンプル - Sample Text

2xl

1.5rem

テキストサンプル - Sample Text

3xl

1.875rem

テキストサンプル - Sample Text

4xl

2.25rem

テキストサンプル - Sample Text

5xl

3rem

テキストサンプル - Sample Text

Font Weights

light

300

フォントウェイト - Font Weight Sample

normal

400

フォントウェイト - Font Weight Sample

medium

500

フォントウェイト - Font Weight Sample

semibold

600

フォントウェイト - Font Weight Sample

bold

700

フォントウェイト - Font Weight Sample

Line Heights

tight

1.25

この文章はtightの行間隔で表示されています。複数行にわたるテキストの読みやすさを確認してください。 The quick brown fox jumps over the lazy dog.

snug

1.375

この文章はsnugの行間隔で表示されています。複数行にわたるテキストの読みやすさを確認してください。 The quick brown fox jumps over the lazy dog.

normal

1.5

この文章はnormalの行間隔で表示されています。複数行にわたるテキストの読みやすさを確認してください。 The quick brown fox jumps over the lazy dog.

relaxed

1.625

この文章はrelaxedの行間隔で表示されています。複数行にわたるテキストの読みやすさを確認してください。 The quick brown fox jumps over the lazy dog.

loose

この文章はlooseの行間隔で表示されています。複数行にわたるテキストの読みやすさを確認してください。 The quick brown fox jumps over the lazy dog.

スペーシング

スペーシング値

0.25rem

0.5rem

1rem

1.5rem

2rem

2xl

3rem

3xl

4rem

実際の適用例

パディング適用例

padding-xs

padding-sm

padding-md

padding-lg

マージン適用例

margin-bottom-xs

margin-bottom-sm

margin-bottom-md

Border Radius

none

0.125rem

0.375rem

0.5rem

0.75rem

full

9999px

Shadows

0 1px 2px 0 rgba(0, 0, 0, 0.05)

0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)

0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)

0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)

コンポーネントへの適用例

デフォルトカード

shadow-smを使用

浮き上がったカード

shadow-lgを使用

ホバー効果例

通常時: shadow-md

強調要素

shadow-xlで注目を集める

Animation

Duration - ホバーして確認

Easing Functions

linear

ボールをホバーして動きを確認

ease

ボールをホバーして動きを確認

easeIn

ease-in

ボールをホバーして動きを確認

easeOut

ease-out

ボールをホバーして動きを確認

easeInOut

ease-in-out

ボールをホバーして動きを確認

実際のアニメーション例

Shadow Transition

ホバーで影が変化

Transform Animation

ホバーで浮き上がる

Color Transition

ホバーで色が変化

Breakpoints

640px

768px

1024px

1280px

2xl

1536px