tailbreeze

Colors

Typography

Borders

Effects

Filters

Motion

Sizing & Spacing

Colors

26 ramps, 288 styles – apply them as color styles

50

100

200

300

400

500

600

700

800

900

950

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

slate

gray

zinc

neutral

stone

taupe

mauve

mist

olive

Typography

Size scale, weights, leading and tracking

Typescale

text-xs

text-xs

text-xs

text-sm

text-sm

text-sm

text-base

text-base

text-base

text-lg

text-lg

text-lg

text-xl

text-xl

text-xl

text-2xl

text-2xl

text-2xl

text-3xl

text-3xl

text-3xl

text-4xl

text-4xl

text-4xl

text-5xl

text-5xl

text-5xl

text-6xl

text-6xl

text-6xl

text-7xl

text-7xl

text-7xl

text-8xl

text-8xl

text-8xl

text-9xl

text-9xl

text-9xl

Weights

The quick brown fox

font-thin

font-thin

The quick brown fox

font-extralight

font-extralight

The quick brown fox

font-light

font-light

The quick brown fox

font-normal

font-normal

The quick brown fox

font-medium

font-medium

The quick brown fox

font-semibold

font-semibold

The quick brown fox

font-bold

font-bold

The quick brown fox

font-extrabold

font-extrabold

The quick brown fox

font-black

font-black

Leading

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

leading-tight

leading-tight

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

leading-snug

leading-snug

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

leading-normal

leading-normal

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

leading-relaxed

leading-relaxed

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

leading-loose

leading-loose

Tracking

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

tracking-tighter

tracking-tighter

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

tracking-tight

tracking-tight

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

tracking-normal

tracking-normal

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

tracking-wide

tracking-wide

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

tracking-wider

tracking-wider

The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

tracking-widest

tracking-widest

Borders

Radius, width and line style

Radius

Width

Style

Effects

Shadow, ring, blur, backdrop blur, opacity and filters

Shadow

Inset Shadow

Blur

Hot-air balloons against a blue sky, shown with blur-none (no blur)
Hot-air balloons against a blue sky, shown with blur-xs (4px blur)
Hot-air balloons against a blue sky, shown with blur-sm (8px blur)
Hot-air balloons against a blue sky, shown with blur-md (12px blur)
Hot-air balloons against a blue sky, shown with blur-lg (16px blur)
Hot-air balloons against a blue sky, shown with blur-xl (24px blur)
Hot-air balloons against a blue sky, shown with blur-2xl (40px blur)
Hot-air balloons against a blue sky, shown with blur-3xl (64px blur)

Opacity

Hot-air balloons against a blue sky at 0% opacity (opacity-0)
Hot-air balloons against a blue sky at 10% opacity (opacity-10)
Hot-air balloons against a blue sky at 20% opacity (opacity-20)
Hot-air balloons against a blue sky at 30% opacity (opacity-30)
Hot-air balloons against a blue sky at 40% opacity (opacity-40)
Hot-air balloons against a blue sky at 50% opacity (opacity-50)
Hot-air balloons against a blue sky at 60% opacity (opacity-60)
Hot-air balloons against a blue sky at 70% opacity (opacity-70)
Hot-air balloons against a blue sky at 80% opacity (opacity-80)
Hot-air balloons against a blue sky at 90% opacity (opacity-90)
Hot-air balloons against a blue sky at 100% opacity (opacity-100)

Ring

Backdrop Blur

Hot-air balloons against a blue sky behind a panel with backdrop-blur-none (no blur)
Hot-air balloons against a blue sky behind a panel with backdrop-blur-xs (4px backdrop blur)
Hot-air balloons against a blue sky behind a panel with backdrop-blur-sm (8px backdrop blur)
Hot-air balloons against a blue sky behind a panel with backdrop-blur-md (12px backdrop blur)
Hot-air balloons against a blue sky behind a panel with backdrop-blur-lg (16px backdrop blur)
Hot-air balloons against a blue sky behind a panel with backdrop-blur-xl (24px backdrop blur)
Hot-air balloons against a blue sky behind a panel with backdrop-blur-2xl (40px backdrop blur)
Hot-air balloons against a blue sky behind a panel with backdrop-blur-3xl (64px backdrop blur)

Filters

Any number works, these are the documented values

Brightness

Hot-air balloons against a blue sky with the brightness-0 filter applied
Hot-air balloons against a blue sky with the brightness-50 filter applied
Hot-air balloons against a blue sky with the brightness-75 filter applied
Hot-air balloons against a blue sky with the brightness-100 filter applied
Hot-air balloons against a blue sky with the brightness-125 filter applied
Hot-air balloons against a blue sky with the brightness-150 filter applied
Hot-air balloons against a blue sky with the brightness-200 filter applied

Contrast

Hot-air balloons against a blue sky with the contrast-0 filter applied
Hot-air balloons against a blue sky with the contrast-50 filter applied
Hot-air balloons against a blue sky with the contrast-75 filter applied
Hot-air balloons against a blue sky with the contrast-100 filter applied
Hot-air balloons against a blue sky with the contrast-125 filter applied
Hot-air balloons against a blue sky with the contrast-150 filter applied
Hot-air balloons against a blue sky with the contrast-200 filter applied

Saturate

Hot-air balloons against a blue sky with the saturate-0 filter applied
Hot-air balloons against a blue sky with the saturate-50 filter applied
Hot-air balloons against a blue sky with the saturate-100 filter applied
Hot-air balloons against a blue sky with the saturate-150 filter applied
Hot-air balloons against a blue sky with the saturate-200 filter applied

Grayscale

Hot-air balloons against a blue sky with the grayscale-0 filter applied
Hot-air balloons against a blue sky with the grayscale-25 filter applied
Hot-air balloons against a blue sky with the grayscale-50 filter applied
Hot-air balloons against a blue sky with the grayscale-75 filter applied
Hot-air balloons against a blue sky with the grayscale filter applied

Sepia

Hot-air balloons against a blue sky with the sepia-0 filter applied
Hot-air balloons against a blue sky with the sepia-25 filter applied
Hot-air balloons against a blue sky with the sepia-50 filter applied
Hot-air balloons against a blue sky with the sepia-75 filter applied
Hot-air balloons against a blue sky with the sepia filter applied

Invert

Hot-air balloons against a blue sky with the invert-0 filter applied
Hot-air balloons against a blue sky with the invert-25 filter applied
Hot-air balloons against a blue sky with the invert-50 filter applied
Hot-air balloons against a blue sky with the invert-75 filter applied
Hot-air balloons against a blue sky with the invert filter applied

Hue Rotate

Hot-air balloons against a blue sky with the hue-rotate-0 filter applied
Hot-air balloons against a blue sky with the hue-rotate-30 filter applied
Hot-air balloons against a blue sky with the hue-rotate-60 filter applied
Hot-air balloons against a blue sky with the hue-rotate-90 filter applied
Hot-air balloons against a blue sky with the hue-rotate-180 filter applied
Hot-air balloons against a blue sky with the hue-rotate-270 filter applied

Motion

Easing curves and animation presets

Easing

Animation

Sizing & Spacing

Spacing scale, container widths and breakpoints

Spacing Scale

1px

1px

2px

2px

4px

4px

6px

6px

8px

8px

10px

10px

12px

12px

14px

14px

16px

16px

20px

20px

24px

24px

28px

28px

32px

32px

36px

36px

40px

40px

44px

44px

48px

48px

56px

56px

64px

64px

80px

80px

96px

96px

112px

112px

128px

128px

144px

144px

160px

160px

176px

176px

192px

192px

208px

208px

224px

224px

240px

240px

256px

256px

288px

288px

320px

320px

384px

384px

Containers

256px

max-w-3xs

288px

max-w-2xs

320px

max-w-xs

384px

max-w-sm

448px

max-w-md

512px

max-w-lg

576px

max-w-xl

672px

max-w-2xl

768px

max-w-3xl

896px

max-w-4xl

1024px

max-w-5xl

1152px

max-w-6xl

1280px

max-w-7xl

Breakpoints

640px

sm

768px

md

1024px

lg

1280px

xl

1536px

2xl

Create a free website with Framer, the website builder loved by startups, designers and agencies.