Design Playground - あんちょこツール

COLOR

HEX

RGB

59, 130, 246

💡 Primary: #3B82F6 / Success: #10B981

ROUND

💡 Card: 8 / 12 / 16 / Button: 4 / 8 / 24

PIXEL SIZE

💡 8px Base: 8 / 16 / 24 / 32 / 48 / 64

SHADOW

Y: 4

Blur: 6

💡 Card: 0 2px 8px / Modal: 0 10px 25px

LINE

💡 Thin: 1 / Normal: 2 / Bold: 4-6

FONT

Sample

💡 Body: 14-16 / H1: 32-48 / H2: 24-32

FONT COLOR

Bold

Light

💡 Dark: #1F2937 / Gray: #6B7280

LINE SPACING

The quick brown fox jumps over the lazy dog

1.5

💡 Tight: 1.2 / Normal: 1.5 / Loose: 1.8

BUTTON

💡 Height: 24 / 32 / 40 / 48 / 56px

Box Visualizer

Pixel + Margin + Padding

BOX SIZE

Width (max 800)

Height (max 400)

MARGIN (外側余白)

上下 (max 200)

左右 (max 200)

PADDING (内側余白)

上下 (max 200)

左右 (max 200)

CONTENT SIZE (計算結果)

Width: 368px

Height: 176px

Margin

Padding

Content

💡 よく使う値: 余白 8/16/24/32/48 | マージン(SP) 16〜24 / (PC) 40〜80 | パディング上下12〜16 / 左右16〜24