Design Tools

Design Center

Advanced tools for modern designers with real-time previews

Color Studio

Color Picker

#3b82f6
59, 130, 246
213°, 92%, 60%
76, 47, 0, 4

Typography Lab

16px
1.5

Preview

The quick brown fox

Jumps over the lazy dog. 1234567890

Fonts are loaded dynamically. Larger families may take a moment to render.

Gradient Master

90°

Design System Inspector

Spacing Scale spacing.scss

$space-xs
1rem (16px)
$space-sm
1.5rem (24px)
$space-md
2rem (32px)
$space-lg
3rem (48px)

Shadows shadows.scss

Extra Small shadow-xs
Small shadow-sm
Medium shadow
Large shadow-md
Extra Large shadow-lg

Border Radius borders.scss

0
0px
rounded-none
1
0.125rem
rounded-sm
2
0.25rem
rounded-md
3
0.5rem
rounded-lg
∞
9999px
rounded-full

Primary Colors colors.scss

50
100
200
300
400

Typography typography.scss

text-xs

The quick brown fox jumps over the lazy dog

text-sm

The quick brown fox jumps over the lazy dog

text-base

The quick brown fox jumps over the lazy dog

text-lg

The quick brown fox jumps over the lazy dog

Opacity opacity.scss

opacity-100
opacity-75
opacity-50
opacity-25
Made with love