Typography

Typography design tokens represent the fundamental decisions of Cedar’s visual language:

  • Stores font specifications using variable names, not hard-coded values such as font family name or pixel values for font size
  • Specifies a hierarchical and semantically defined system


Web

Default

A different kind of company

cdr-text-default-compact (Mixin)
Suggested usage: Use only for compact spacing with informational and supplemental body content

cdr-text-default-compact-family Roboto, "Helvetica Neue", Helvetica,
Arial, sans-serif
cdr-text-default-compact-style Normal
cdr-text-default-compact-weight 400
cdr-text-default-compact-spacing Normal
cdr-text-default-compact-size 14px
cdr-text-default-compact-height 24px

A different kind of company

cdr-text-default (Mixin)
Suggested usage: Default for body content. Uses a more open line height to font size ratio

cdr-text-default-family Roboto, "Helvetica Neue", Helvetica,
Arial, sans-serif
cdr-text-default-style Normal
cdr-text-default-weight 400
cdr-text-default-spacing Normal
cdr-text-default-size 16px
cdr-text-default-height 26px

Editorial

A different kind of company

cdr-text-editorial-compact (Mixin)
Suggested Usage: Use only for compact spacing with editorial body content

cdr-text-editorial-compact-family Sentinel, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif
cdr-text-editorial-compact-style Normal
cdr-text-editorial-compact-weight 400
cdr-text-editorial-compact-spacing Normal
cdr-text-editorial-compact-size 18px
cdr-text-editorial-compact-height 28px

A different kind of company

cdr-text-editorial (Mixin)
Suggested Usage: Default for editorial long-form content. Uses a more open line height to font size ratio

cdr-text-editorial-family Sentinel, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif
cdr-text-editorial-style Normal
cdr-text-editorial-weight 400
cdr-text-editorial-spacing Normal
cdr-text-editorial-size 20px
cdr-text-editorial-height 32px

Headings

A different kind of company

cdr-text-header-1 (Mixin)

cdr-text-header-1-family Sentinel, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif
cdr-text-header-1-style Normal
cdr-text-header-1-weight 600
cdr-text-header-1-spacing 0.2
cdr-text-header-1-size 56px
cdr-text-header-1-height 60px

A different kind of company

cdr-text-header-2 (Mixin)

cdr-text-header-2-family Sentinel, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif
cdr-text-header-2-style Normal
cdr-text-header-2-weight 600
cdr-text-header-2-spacing 0.2
cdr-text-header-2-size 40px
cdr-text-header-2-height 48px

A different kind of company

cdr-text-header-3 (Mixin)

cdr-text-header-3-family Sentinel, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif
cdr-text-header-3-style Normal
cdr-text-header-3-weight 600
cdr-text-header-3-spacing 0.2
cdr-text-header-3-size 32px
cdr-text-header-3-height 40px

A different kind of company

cdr-text-header-4 (Mixin)

cdr-text-header-4-family Sentinel, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif
cdr-text-header-4-style Normal
cdr-text-header-4-weight 600
cdr-text-header-4-spacing 0.2
cdr-text-header-4-size 28px
cdr-text-header-4-height 36px

A different kind of company

cdr-text-header-5 (Mixin)

cdr-text-header-5-family Sentinel, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif
cdr-text-header-5-style Normal
cdr-text-header-5-weight 600
cdr-text-header-5-spacing 0.2
cdr-text-header-5-size 24px
cdr-text-header-5-height 32px

A different kind of company

cdr-text-header-6 (Mixin)

cdr-text-header-6-family Sentinel, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif
cdr-text-header-6-style Normal
cdr-text-header-6-weight 600
cdr-text-header-6-spacing 0.2
cdr-text-header-6-size 20px
cdr-text-header-6-height 28px

A different kind of company

cdr-text-header-7 (Mixin)

cdr-text-header-7-family Sentinel, Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif
cdr-text-header-7-style Normal
cdr-text-header-7-weight 600
cdr-text-header-7-spacing 0.2
cdr-text-header-7-size 18px
cdr-text-header-7-height 24px


Mobile

Headings

A different kind of company

Android: Display 1
iOS: Large Title
Suggested Usage: Frequently used as the largest title for phone apps and can be used for page titles for larger devices

font-family Roboto
font-weight Medium
font-size 34sp
font-height 40sp

A different kind of company

Android and iOS: Title 1
Suggested Usage: Content titles, level 1

font-family Sentinel
font-weight Semi Bold
font-size 28sp
line-height 36sp

A different kind of company

Android and iOS: Title 2
Suggested Usage: Content titles, product names, level 2

font-family Sentinel
font-weight Semi Bold
font-size 26sp
line-height 32sp

A different kind of company

Android and iOS: Title 3
Suggested Usage: Content titles, product names, product prices, level 3

font-family Sentinel
font-weight Semi Bold
font-size 21sp
line-height 28sp

A different kind of company

Android and iOS: Headline
Suggested Usage: Heading primarily used with body copy, list items, table headers

font-family Roboto
font-weight Medium
font-size 17sp
line-height 24sp

A different kind of company

Android and iOS: Subhead
Suggested Usage: Subheading primarily used with body copy

font-family Roboto
font-weight Medium
font-size 15sp
line-height 20sp

Body

A different kind of company

Android: Body 2
iOS: Footnote
Suggested Usage: Secondary text intended for informational and supplemental body content

font-family Roboto
font-weight Regular
font-size 13sp
line-height 20sp

A different kind of company

Android: Body 1
iOS: Body
Suggested Usage: Default for body content

font-family Roboto
font-weight Regular
font-size 15sp
line-height 20sp

A different kind of company

Android and iOS: Caption 2
Suggested Usage: Smallest text size, use sparingly or for bottom tab bar text

font-family Roboto
font-weight Regular
font-size 11sp
line-height 16sp

A different kind of company

Android and iOS: Caption 1
Suggested Usage: Tertiary text, also intended for informational and supplemental body content. Also used for bottom action bar text for larger devices

font-family Roboto
font-weight Regular
font-size 12sp
line-height 16sp

Buttons

A different kind of company

Android: Button
iOS: N/A
Suggested Usage: Button text has a thicker weight than body copy

font-family Roboto
font-weight Medium
font-size 15sp
line-height 24sp

A different kind of company

Android: Button_accent
iOS: N/A
Suggested Usage: Link text has a thicker weight than body copy. Use #3278ae only on light background

font-family Roboto
font-weight Medium
font-size 15sp
line-height 24sp
color #3278ae

A different kind of company

Android: Button_accent
iOS: N/A
Suggested Usage: Link text has a thicker weight than body copy. Use #5197cd only on dark background

font-family Roboto
font-weight Medium
font-size 15sp
line-height 24sp
color #5197cd

Message States

A different kind of company

Android: Error State
iOS: N/A
Suggested Usage: Only for message text with error or warning states. Use #c32a2e only on light background

font-family Roboto
font-weight Medium
font-size 15sp
line-height 20sp
color #c32a2e

A different kind of company

Android: Error State
iOS: N/A
Suggested Usage: Only for message text with error or warning states. Use #e86868 only on dark background

font-family Roboto
font-weight Medium
font-size 15sp
line-height 20sp
color #e86868