Skip to content

Search design systems

Search for a design system by domain or name

Marvel.com
1

Colors

Spacing

xs
4px
sm
8px
md
16px
lg
24px
xl
40px
gutter
16px
margin
20px

Rounded

none0px
sm0.25rem
md0.375rem
lg0.5rem
xl1rem
full9999px

Shadows

sm

0 1px 3px 0 rgb(0 0 0 / 0.5)

md

0 4px 8px -1px rgb(0 0 0 / 0.6), 0 2px 4px -2px rgb(0 0 0 / 0.5)

lg

1px 5px 10px #000

xl

0 20px 40px -5px rgb(0 0 0 / 0.8)

Font

urwdin-regular, Trebuchet MS, Helvetica, Arial, sans-serif

Aa Bb Cc 0123

ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz

urwdin-semi-condensed-medium, Trebuchet MS, Helvetica, Arial, sans-serif

Aa Bb Cc 0123

ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz

urwdin-condensed-black, Trebuchet MS, Helvetica, Arial, sans-serif

Aa Bb Cc 0123

ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz

Heading

Headline Displayurwdin-condensed-black, Trebuchet MS, Helvetica, Arial, sans-serif · 36px · 900

Display headline

Headline LGurwdin-condensed-black, Trebuchet MS, Helvetica, Arial, sans-serif · 36px · 900

The quick brown fox

Headline MDurwdin-condensed-black, Trebuchet MS, Helvetica, Arial, sans-serif · 28px · 900

Design systems at scale

Headline SMurwdin-semi-condensed-demi, Trebuchet MS, Helvetica, Arial, sans-serif · 18px · 600

Color, type, and spacing

Text

Body LGurwdin-regular, Trebuchet MS, Helvetica, Arial, sans-serif · 16px · 400

The quick brown fox jumps over the lazy dog. Lead paragraph copy for marketing pages.

Body MDurwdin-regular, Trebuchet MS, Helvetica, Arial, sans-serif · 14px · 400

The quick brown fox jumps over the lazy dog. Standard body copy throughout the application.

Body SMurwdin-semi-condensed-medium, Trebuchet MS, Helvetica, Arial, sans-serif · 12px · 600

Supporting text, captions, and metadata appear at this size.

Label LGurwdin-semi-condensed-demi, Trebuchet MS, Helvetica, Arial, sans-serif · 16px · 600

Button label · Primary action

Label MDurwdin-semi-condensed-medium, Trebuchet MS, Helvetica, Arial, sans-serif · 12px · 600

Form label · Required field

Label SMUrwDin, Trebuchet MS, Helvetica, Arial, sans-serif · 12px · 400

Badge · Tag · Micro-copy