Style Guide: Font Specs Text

FONT STYLE TABLE

STYLE FONT WEIGHT SIZE RELATIVE COLORS ALERT COLOR
DARK LIGHT DARK LIGHT
Large_Title SFCompact Black 36 Large Title #F5F5F5 #282828 #FAB76F #F57320
Title_1 SFCompact SemiBold 22 Title 1 #F5F5F5 #282828 — —
Title_2 SFCompact Regular 22 Title 2 #BEBEBE #282828 — —
Title_3 SFCompact Semibold 18 Title 3 #BEBEBE #282828 — —
Headline_Control SFCompact Black 14 Headline #BEBEBE #707070 — —
Headline_2_Ornament SFCompact Black 16 Headline #F5F5F5 #282828 — —
Headline_3 SFCompact Black 13 Headline #F5F5F5 #282828 — —
Body_UX SFCompact Regular 14 Body #F5F5F5 #282828 — —
Subhead_1 SFCompact Semibold 16 Subhead 1 #BEBEBE #707070 — —
Subhead_2 SFCompact Semibold 14 Subhead 2 #F5F5F5 #282828 — —
Subhead_3 SFCompact Semibold 14 Subhead 3 #BEBEBE #707070 — —
Body_Mono SFMono Regular 13 Body #F5F5F5 #282828 — —
Subhead_1_Mono SFMono Heavy 16 Subhead 1 #BEBEBE #707070 — —
Subhead_2_Mono SFMono Heavy 14 Subhead 2 #F5F5F5 #282828 — —
Subhead_3_Mono SFMono Regular 14 Subhead 3 #BEBEBE #707070 — —
Footnote SFCompact Regular 14 Footnote #BEBEBE #707070 — —
Caption_1 SFCompact Regular 17 Caption 1 #F5F5F5 #282828 — —
Caption_2 SFCompact Regular 14 Caption 2 #F5F5F5 #282828 — —
Callout SFCompact Bold 14 Callout #F5F5F5 #282828 — —

* Prominent colors: #f5f5f5 and #282828
Default colors: #BEBEBE and #707070
Alert colors: #FAB76F and #F57320

 

FONT STYLE LIST

Large_Title
SF Compact Black
Font Size: 36 px 
Color:
Dark:#f5f5f5, rgb(245, 245, 245)
Light: #282828, rgb(40, 40, 40)

Title_1
SF Compact Semibold
Font-Size: 28 px
Color: 
Dark:#f5f5f5, rgb(245, 245, 245) 
Light: #282828, rgb(40, 40, 40)

Title_2
SF Compact Regular
Font-Size: 22 px
Color:
Dark:#f5f5f5, rgb(245, 245, 245) 
Light: #282828, rgb(40, 40, 40) 

Title_3 
SF Compact Regular 
Font-Size: 16 px  
Color: 
Dark:#f5f5f5, rgb(190, 190, 190) 
Light: #282828, rgb(40, 40, 40) 

Headline_Control 
SF Compact Semibold 
Font-Size: 14 px 
Color: 
Dark:#BEBEBE, rgb(190, 190, 190) 
Light: #707070, rgb(112, 112, 112) 

Headline_2_Ornament 
SF Compact Black 
Font-Size: 13 px 
Color: 
Dark:#f5f5f5, rgb(245, 245, 245) 
Light: #282828, rgb(40, 40, 40)

Body_UX 
SF Compact Regular 
Font-Size: 14 px 
Color: 
Dark:#F3F0E7, rgb(243, 240, 231) 
Light: #231F20, rgb(35, 31, 32)  

Subhead_1 
SF Mono Heavy 
Font-Size: 16 px 
Color: 
Dark: #BEBEC0, rgb(190, 190, 192) 
Light: #707070, rgb(112, 112, 112)  

Subhead_2 
SF Mono Heavy 
Font-Size: 16 px 
Color: 
Dark:#F3F0E7, rgb(243, 240, 231) 
Light: #231F20, rgb(35, 31, 32)  

Subhead_3 
SF Mono Regular 
Font-Size: 14 px 
Color: 
Dark: #BEBEC0, rgb(190, 190, 192) 
Light: #707070, rgb(112, 112, 112) 

Body_Mono 
SF Mono Regular 
Font-Size: 13 px 
Color: 
*Dark:#F3F0E7, rgb(243, 240, 231) 
*Light: #231F20, rgb(35, 31, 32)  

Subhead_1_Mono 
SF Mono Heavy 
Font-Size: 16 px 
Dark: #BEBEC0, rgb(190, 190, 192) 
Light: #707070, rgb(112, 112, 112)  

Subhead_2_Mono 
SF Mono Heavy 
Font-Size: 16 px 
Color: 
Dark:#F3F0E7, rgb(243, 240, 231) 
Light: #231F20, rgb(35, 31, 32)  

Subhead_3_Mono 
SF Mono Regular 
Font-Size: 14 px 
Color: 
Dark: #BEBEC0, rgb(190, 190, 192) 
Light: #707070, rgb(112, 112, 112)
Caption_1 
SF Compact Regular 
Font-Size: 17 px 
Color: 
Dark:#f5f5f5, rgb(245, 245, 245) 
Light: #282828, rgb(40, 40, 40)

Caption_2 
SF Compact Regular 
Font-Size: 17 px 
Color: 
Dark:#f5f5f5, rgb(245, 245, 245) 
Light: #282828, rgb(40, 40, 40)

Footnote 
SF Compact Regular 
Font-Size: 14 px 
Color: 
Dark: #BEBEC0, rgb(190, 190, 192) 
Light: #707070, rgb(112, 112, 112)  

Callout SF Compact Bold 
Font-Size: 16 px 
Color: 
*Dark:#F3F0E7, rgb(243, 240, 231) 
*Light: #231F20, rgb(35, 31, 32)

Object Style Specs

Object Specs

OBJECT LIGHT / ANY APPEARANCE DARK
ddGridRowOdd RGB/Hex 250, 250, 250 #ffffff RGB 20,20,20 #141414
Opacity 20% Opacity 15%
ddPanelInset RGB/Hex 120,120,120 #787878 RGB 25,21,21 #191515
Opacity 10% Opacity 20%
ddSidebarButtonHighlight RGB/Hex 245,245,245 #f5f5f5 RGB 250, 250, 250  #fafafa
Opacity 15% Opacity 10%
ddSystemGroupedBackground RGB/Hex 235,235,235 #ebebeb RGB 20,20,20 #787878
Opacity 70% Opacity 20%
ddText RGB/Hex 25,25,25 #191919 RGB 235,235,235 #ebebeb
Opacity 90% Opacity 90%
Font RGB/Hex 112,112,112 #707070 RGB 190,190,190 #bebebe
Opacity 100% Opacity 100%
FontProminent RGB/Hex 40,40,40 #282828 RGB 245, 245, 245 #f5f5f5
Opacity 80% Opacity 100%