CNN Design System — Colors, Typography, Components

Gallery

edition.cnn.comCNN

Colors

Spacing

4px

8px

16px

24px

32px

gutter

24px

margin

32px

Rounded

none0px

sm2px

md4px

lg8px

xl16px

full999px

Shadows

0 1px 2px 0 rgba(106, 115, 129, 0.06)

0px 3px 8px 0px rgba(106, 115, 129, 0.06), 0px 6px 12px 0px rgba(106, 115, 129, 0.16)

0px 6px 16px 0px rgba(106, 115, 129, 0.10), 0px 12px 24px 0px rgba(106, 115, 129, 0.20)

0px 12px 32px 0px rgba(106, 115, 129, 0.14), 0px 24px 48px 0px rgba(106, 115, 129, 0.22)

Font

cnn_sans_display, helveticaneue, Helvetica, Arial, Utkal, sans-serif

Aa Bb Cc 0123

ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz

Heading

Headline Displaycnn_sans_display, helveticaneue, Helvetica, Arial, Utkal, sans-serif · 42px · 700

Display headline

Headline LGcnn_sans_display, helveticaneue, Helvetica, Arial, Utkal, sans-serif · 30px · 700

The quick brown fox

Headline MDcnn_sans_display, helveticaneue, Helvetica, Arial, Utkal, sans-serif · 24px · 700

Design systems at scale

Headline SMcnn_sans_display, helveticaneue, Helvetica, Arial, Utkal, sans-serif · 20px · 700

Color, type, and spacing

Text

Body LGcnn_sans_display, helveticaneue, Helvetica, Arial, Utkal, sans-serif · 18px · 400

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

Body MDcnn_sans_display, helveticaneue, Helvetica, Arial, Utkal, sans-serif · 16px · 400

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

Body SMcnn_sans_display, helveticaneue, Helvetica, Arial, Utkal, sans-serif · 14px · 400

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

Label LGcnn_sans_display, helveticaneue, Helvetica, Arial, Utkal, sans-serif · 16px · 700

Button label · Primary action

Label MDcnn_sans_display, helveticaneue, Helvetica, Arial, Utkal, sans-serif · 14px · 500

Form label · Required field

Label SMcnn_sans_display, helveticaneue, Helvetica, Arial, Utkal, sans-serif · 12px · 500

Badge · Tag · Micro-copy