Magpie
Describe a vibe. Get an UI Kit.
Generate
Magpie presets
Show all
Soft SaaS
Typography
The quick brown fox
Colors
bg
#F8FAFC
surface
#FFFFFF
text
#0F172A
muted
#64748B
primary
#6366F1
accent
#22D3EE
border
#E2E8F0
Typography
Heading & Body
Inter
Aa
48px
Aa
32px
Aa
24px
Aa
20px
Aa
16px
Aa
14px
Aa
12px
Components
Primary action
A card in this system
Body text reads on the surface color, with muted secondary information and an accent chip below.
TAG
Soft SaaS
Aurora
Typography
The quick brown fox
Colors
bg
#0B0F1F
surface
#141A2E
text
#F0F4FF
muted
#8B95B8
primary
#7C5CFF
accent
#22E5C8
border
#252D45
Typography
Heading
Outfit
Body
Inter
Aa
48px
Aa
32px
Aa
24px
Aa
20px
Aa
16px
Aa
14px
Aa
12px
Components
Primary action
A card in this system
Body text reads on the surface color, with muted secondary information and an accent chip below.
TAG
Aurora
Editorial
Typography
The quick brown fox
Colors
bg
#FAF7F2
surface
#FFFFFF
text
#1A1A1A
muted
#6B6B6B
primary
#1A1A1A
accent
#A8341A
border
#E8E2D8
Typography
Heading
Fraunces
Body
Source Serif 4
Aa
64px
Aa
40px
Aa
28px
Aa
20px
Aa
16px
Aa
14px
Aa
12px
Components
Primary action
A card in this system
Body text reads on the surface color, with muted secondary information and an accent chip below.
TAG
Editorial
Y2K
Typography
The quick brown fox
Colors
bg
#C8E8FF
surface
#FFFFFF
text
#1A0B5C
muted
#6B5BC4
primary
#FF2D87
accent
#7B2CFF
border
#B8C8FF
Typography
Heading
Bungee
Body
VT323
Aa
56px
Aa
36px
Aa
26px
Aa
20px
Aa
16px
Aa
14px
Aa
12px
Components
Primary action
A card in this system
Body text reads on the surface color, with muted secondary information and an accent chip below.
TAG
Y2K
Neo-brutalist
Typography
The quick brown fox
Colors
bg
#FFFB00
surface
#FFFFFF
text
#000000
muted
#3F3F3F
primary
#000000
accent
#FF3D00
border
#000000
Typography
Heading
Space Grotesk
Body
Space Mono
Aa
64px
Aa
40px
Aa
28px
Aa
22px
Aa
16px
Aa
14px
Aa
12px
Components
Primary action
A card in this system
Body text reads on the surface color, with muted secondary information and an accent chip below.
TAG
Neo-brutalist
Bauhaus
Typography
The quick brown fox
Colors
bg
#F2EDE4
surface
#FFFFFF
text
#1A1A1A
muted
#5C5C5C
primary
#D63A1F
accent
#1A4FBD
border
#1A1A1A
Typography
Heading & Body
Archivo
Aa
48px
Aa
32px
Aa
24px
Aa
20px
Aa
16px
Aa
14px
Aa
12px
Components
Primary action
A card in this system
Body text reads on the surface color, with muted secondary information and an accent chip below.
TAG
Bauhaus
Savanna Clay
Typography
The quick brown fox
Colors
bg
#F9F5F1
surface
#EBE2D5
text
#2D2621
muted
#7A6D63
primary
#4A5D23
accent
#C16622
border
#D1C7BA
Typography
Heading
Balthazar
Body
Andada Pro
Aa
52px
Aa
36px
Aa
24px
Aa
20px
Aa
16px
Aa
14px
Aa
12px
Components
Primary action
A card in this system
Body text reads on the surface color, with muted secondary information and an accent chip below.
TAG
Savanna Clay
Swiss
Typography
The quick brown fox
Colors
bg
#FFFFFF
surface
#FFFFFF
text
#000000
muted
#737373
primary
#E1140A
accent
#000000
border
#E5E5E5
Typography
Heading
Inter Tight
Body
Inter
Aa
48px
Aa
32px
Aa
24px
Aa
20px
Aa
16px
Aa
14px
Aa
12px
Components
Primary action
A card in this system
Body text reads on the surface color, with muted secondary information and an accent chip below.
TAG
Swiss