@czi-sds/mcp 0.3.0 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/component-props/Accordion.json +14 -15
- package/data/component-props/Alert.json +2 -44
- package/data/component-props/Autocomplete.json +14 -32
- package/data/component-props/Banner.json +11 -12
- package/data/component-props/Button.json +17 -82
- package/data/component-props/ButtonDropdown.json +26 -0
- package/data/component-props/ButtonIcon.json +4 -60
- package/data/component-props/ButtonToggle.json +2 -66
- package/data/component-props/Callout.json +11 -65
- package/data/component-props/CellBasic.json +28 -56
- package/data/component-props/CellComponent.json +4 -32
- package/data/component-props/CellHeader.json +13 -49
- package/data/component-props/ComplexFilter.json +24 -4
- package/data/component-props/ContentCard.json +66 -2
- package/data/component-props/Dialog.json +26 -0
- package/data/component-props/Dropdown.json +29 -67
- package/data/component-props/DropdownMenu.json +16 -56
- package/data/component-props/HeatmapChart.json +6 -87
- package/data/component-props/Icon.json +3 -8
- package/data/component-props/InputCheckbox.json +5 -53
- package/data/component-props/InputDropdown.json +11 -33
- package/data/component-props/InputRadio.json +5 -53
- package/data/component-props/InputSearch.json +6 -70
- package/data/component-props/InputSlider.json +21 -35
- package/data/component-props/InputText.json +7 -63
- package/data/component-props/InputToggle.json +5 -54
- package/data/component-props/Link.json +18 -0
- package/data/component-props/LoadingIndicator.json +1 -2
- package/data/component-props/MenuItem.json +11 -41
- package/data/component-props/MenuSelect.json +4 -67
- package/data/component-props/NavigationFooter.json +0 -8
- package/data/component-props/NavigationHeader.json +14 -65
- package/data/component-props/NavigationJumpTo.json +0 -40
- package/data/component-props/Notification.json +14 -58
- package/data/component-props/Pagination.json +8 -33
- package/data/component-props/Panel.json +4 -54
- package/data/component-props/SegmentedControl.json +0 -55
- package/data/component-props/TableRow.json +10 -38
- package/data/component-props/Tabs.json +18 -0
- package/data/component-props/Tag.json +10 -56
- package/data/component-props/TagFilter.json +0 -47
- package/data/component-props/Tooltip.json +12 -61
- package/data/component-props/TooltipCondensed.json +18 -0
- package/data/component-props/TooltipTable.json +0 -4
- package/data/zeroheight-exports/Accordion.md +167 -125
- package/data/zeroheight-exports/Banner.md +71 -48
- package/data/zeroheight-exports/Borders.md +72 -73
- package/data/zeroheight-exports/Buttons.md +375 -330
- package/data/zeroheight-exports/Callout.md +138 -116
- package/data/zeroheight-exports/Colors.md +254 -255
- package/data/zeroheight-exports/Content-Card.md +36 -37
- package/data/zeroheight-exports/Contributing-to-SDS.md +34 -35
- package/data/zeroheight-exports/Control-Inputs.md +289 -234
- package/data/zeroheight-exports/Corners.md +63 -64
- package/data/zeroheight-exports/Cover-page.md +0 -1
- package/data/zeroheight-exports/Dialog.md +237 -179
- package/data/zeroheight-exports/Downloads.md +10 -11
- package/data/zeroheight-exports/Drop-Shadows.md +40 -41
- package/data/zeroheight-exports/Dropdown-Input.md +158 -127
- package/data/zeroheight-exports/Dropdown-Menu.md +814 -718
- package/data/zeroheight-exports/Element-Status-Tracker.md +191 -192
- package/data/zeroheight-exports/Field-Inputs.md +149 -130
- package/data/zeroheight-exports/Filters.md +114 -94
- package/data/zeroheight-exports/Getting-Started.md +112 -249
- package/data/zeroheight-exports/Hero.md +43 -37
- package/data/zeroheight-exports/Icons.md +205 -206
- package/data/zeroheight-exports/Intent.md +6 -7
- package/data/zeroheight-exports/Introduction-to-Bases.md +8 -9
- package/data/zeroheight-exports/Introduction-to-Cells.md +11 -12
- package/data/zeroheight-exports/Introduction-to-DNA.md +8 -9
- package/data/zeroheight-exports/Introduction-to-Genes.md +8 -9
- package/data/zeroheight-exports/Introduction.md +52 -53
- package/data/zeroheight-exports/Link.md +50 -37
- package/data/zeroheight-exports/Lists.md +78 -63
- package/data/zeroheight-exports/Loading-Indicator.md +7 -8
- package/data/zeroheight-exports/Navigation.md +163 -142
- package/data/zeroheight-exports/Notification.md +132 -102
- package/data/zeroheight-exports/Panel.md +231 -115
- package/data/zeroheight-exports/Responsive-Design.md +35 -32
- package/data/zeroheight-exports/Search-Input.md +9 -10
- package/data/zeroheight-exports/Search.md +87 -104
- package/data/zeroheight-exports/Segmented-Control.md +68 -45
- package/data/zeroheight-exports/Spacing.md +210 -211
- package/data/zeroheight-exports/Table.md +414 -302
- package/data/zeroheight-exports/Tabs.md +126 -98
- package/data/zeroheight-exports/Tags.md +148 -118
- package/data/zeroheight-exports/Text-Link.md +32 -33
- package/data/zeroheight-exports/Theming.md +48 -29
- package/data/zeroheight-exports/Tooltips.md +253 -237
- package/data/zeroheight-exports/Typography.md +463 -464
- package/dist/stdio.js +44 -132
- package/package.json +3 -4
- package/data/component-props/Chip.json +0 -73
- package/data/component-props/List.json +0 -43
- package/data/component-props/Menu.json +0 -48
- package/data/component-props/Table.json +0 -26
- package/data/component-props-storybook/Accordion-storybook.json +0 -45
- package/data/component-props-storybook/Alert-storybook.json +0 -30
- package/data/component-props-storybook/Autocomplete-storybook.json +0 -67
- package/data/component-props-storybook/Banner-storybook.json +0 -78
- package/data/component-props-storybook/Button-storybook.json +0 -115
- package/data/component-props-storybook/ButtonDropdown-storybook.json +0 -73
- package/data/component-props-storybook/ButtonIcon-storybook.json +0 -60
- package/data/component-props-storybook/ButtonToggle-storybook.json +0 -68
- package/data/component-props-storybook/Callout-storybook.json +0 -90
- package/data/component-props-storybook/CellBasic-storybook.json +0 -138
- package/data/component-props-storybook/CellComponent-storybook.json +0 -48
- package/data/component-props-storybook/CellHeader-storybook.json +0 -71
- package/data/component-props-storybook/Chip-storybook.json +0 -26
- package/data/component-props-storybook/ComplexFilter-storybook.json +0 -60
- package/data/component-props-storybook/ContentCard-storybook.json +0 -175
- package/data/component-props-storybook/Dialog-storybook.json +0 -56
- package/data/component-props-storybook/Dropdown-storybook.json +0 -93
- package/data/component-props-storybook/DropdownMenu-storybook.json +0 -73
- package/data/component-props-storybook/HeatmapChart-storybook.json +0 -55
- package/data/component-props-storybook/Icon-storybook.json +0 -75
- package/data/component-props-storybook/InputCheckbox-storybook.json +0 -57
- package/data/component-props-storybook/InputDropdown-storybook.json +0 -80
- package/data/component-props-storybook/InputRadio-storybook.json +0 -56
- package/data/component-props-storybook/InputSearch-storybook.json +0 -55
- package/data/component-props-storybook/InputSlider-storybook.json +0 -55
- package/data/component-props-storybook/InputText-storybook.json +0 -59
- package/data/component-props-storybook/InputToggle-storybook.json +0 -42
- package/data/component-props-storybook/Link-storybook.json +0 -50
- package/data/component-props-storybook/List-storybook.json +0 -26
- package/data/component-props-storybook/LoadingIndicator-storybook.json +0 -34
- package/data/component-props-storybook/Menu-storybook.json +0 -26
- package/data/component-props-storybook/MenuItem-storybook.json +0 -74
- package/data/component-props-storybook/MenuSelect-storybook.json +0 -38
- package/data/component-props-storybook/NavigationFooter-storybook.json +0 -67
- package/data/component-props-storybook/NavigationHeader-storybook.json +0 -115
- package/data/component-props-storybook/NavigationJumpTo-storybook.json +0 -41
- package/data/component-props-storybook/Notification-storybook.json +0 -89
- package/data/component-props-storybook/Pagination-storybook.json +0 -50
- package/data/component-props-storybook/Panel-storybook.json +0 -52
- package/data/component-props-storybook/SegmentedControl-storybook.json +0 -30
- package/data/component-props-storybook/Table-storybook.json +0 -26
- package/data/component-props-storybook/TableHeader-storybook.json +0 -26
- package/data/component-props-storybook/TableRow-storybook.json +0 -62
- package/data/component-props-storybook/Tabs-storybook.json +0 -45
- package/data/component-props-storybook/Tag-storybook.json +0 -78
- package/data/component-props-storybook/TagFilter-storybook.json +0 -30
- package/data/component-props-storybook/Tooltip-storybook.json +0 -85
- package/data/component-props-storybook/TooltipCondensed-storybook.json +0 -38
- package/data/component-props-storybook/TooltipTable-storybook.json +0 -47
|
@@ -8,24 +8,24 @@ Typography encompasses font style, appearance, and structure which together deli
|
|
|
8
8
|
|
|
9
9
|
Inter is the primary typeface to be used throughout product and marketing materials. IBM Plex Mono should only be used when referring to code snippets.
|
|
10
10
|
|
|
11
|
-
| **Visual** |
|
|
12
|
-
|
|
|
13
|
-
|
|
|
14
|
-
|
|
|
15
|
-
|
|
|
16
|
-
|
|
|
11
|
+
| **Visual** | | **Typeface** | | **Usage** |
|
|
12
|
+
| ---------- | --- | ------------------- | --- | ---------------------------------------------------------------------------------------------------------------------------- |
|
|
13
|
+
| | | Inter (600) | | All headers throughout the product and marketing materials, and emphasized body copy. |
|
|
14
|
+
| | | Inter (500) | | For text that needs slight emphasis. |
|
|
15
|
+
| | | Inter (400) | | All body copy throughout the product and marketing materials. If emphasized copy is needed, use a font weight of 500 or 600. |
|
|
16
|
+
| | | IBM Plex Mono (400) | | Use only when referring to code snippets. |
|
|
17
17
|
|
|
18
18
|
### Font Weights
|
|
19
19
|
|
|
20
20
|
Regular (400) and SemiBold (600) are the two font weights primarily used across the product, however additional font weights are available to be selectively used if needed.
|
|
21
21
|
|
|
22
|
-
| **Visual** |
|
|
23
|
-
|
|
|
24
|
-
|
|
|
25
|
-
|
|
|
26
|
-
|
|
|
27
|
-
|
|
|
28
|
-
|
|
|
22
|
+
| **Visual** | | **Variable** | | **Value** |
|
|
23
|
+
| ---------- | --- | -------------------- | --- | ------------------- |
|
|
24
|
+
| | | `fontWeightHeavy` | | `font-weight: 800;` |
|
|
25
|
+
| | | `fontWeightBold` | | `font-weight: 700;` |
|
|
26
|
+
| | | `fontWeightSemibold` | | `font-weight: 600;` |
|
|
27
|
+
| | | `fontWeightRegular` | | `font-weight: 400;` |
|
|
28
|
+
| | | `fontWeightThin` | | `font-weight: 300;` |
|
|
29
29
|
|
|
30
30
|
---
|
|
31
31
|
|
|
@@ -35,195 +35,195 @@ Regular (400) and SemiBold (600) are the two font weights primarily used across
|
|
|
35
35
|
|
|
36
36
|
For use with Hero component.
|
|
37
37
|
|
|
38
|
-
| **Font Title L**
|
|
39
|
-
|
|
|
40
|
-
|
|
|
41
|
-
|
|
|
42
|
-
|
|
|
43
|
-
| `--sds-font-title-l-700-font` `$sds-font-title-l-700-font`
|
|
44
|
-
|
|
|
45
|
-
| **Font Title M**
|
|
46
|
-
|
|
|
47
|
-
|
|
|
48
|
-
|
|
|
49
|
-
| `--sds-font-title-m-700-font` `$sds-font-title-m-700-font`
|
|
50
|
-
|
|
|
51
|
-
| **Font Tile S**
|
|
52
|
-
|
|
|
53
|
-
|
|
|
54
|
-
|
|
|
55
|
-
| `--sds-font-title-s-700-font` `$sds-font-title-s-700-font`
|
|
38
|
+
| **Font Title L** | | |
|
|
39
|
+
| ----------------------------------------------------------------------------------------------------------------------------------------- | --- | ----------------------------------------------------------------- |
|
|
40
|
+
| _Visual_ | | _Figma Variable_ |
|
|
41
|
+
| | | `wide/fontTitleL/700` |
|
|
42
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
43
|
+
| `--sds-font-title-l-700-font` `$sds-font-title-l-700-font` `--sds-font-title-l-700-letter-spacing` `$sds-font-title-l-700-letter-spacing` | | `font: 700 52px/64px "Inter", sans-serif;` `letter-spacing: 0px;` |
|
|
44
|
+
| | | |
|
|
45
|
+
| **Font Title M** | | |
|
|
46
|
+
| _Visual_ | | _Figma Variable_ |
|
|
47
|
+
| | | `wide/fontTitleM/700` |
|
|
48
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
49
|
+
| `--sds-font-title-m-700-font` `$sds-font-title-m-700-font` `--sds-font-title-m-700-letter-spacing` `$sds-font-title-m-700-letter-spacing` | | `font: 700 40px/50px "Inter", sans-serif;` `letter-spacing: 0px;` |
|
|
50
|
+
| | | |
|
|
51
|
+
| **Font Tile S** | | |
|
|
52
|
+
| _Visual_ | | _Figma Variable_ |
|
|
53
|
+
| | | `wide/fontTitleS/700` |
|
|
54
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
55
|
+
| `--sds-font-title-s-700-font` `$sds-font-title-s-700-font` `--sds-font-title-s-700-letter-spacing` `$sds-font-title-s-700-letter-spacing` | | `font: 700 32px/40px "Inter", sans-serif;` `letter-spacing: 0px;` |
|
|
56
56
|
|
|
57
57
|
#### Header
|
|
58
58
|
|
|
59
59
|
For use with `<H1>`, `<H2>`, `<H3>`, `<H4>`, `<H5>`, `<H6>` tags.
|
|
60
60
|
|
|
61
|
-
| **Font Header XXL**
|
|
62
|
-
|
|
|
63
|
-
|
|
|
64
|
-
|
|
|
65
|
-
|
|
|
66
|
-
| `--sds-font-header-xxl-600-font` `$sds-font-header-xxl-600-font`
|
|
67
|
-
|
|
|
68
|
-
| **Font Header XL**
|
|
69
|
-
|
|
|
70
|
-
|
|
|
71
|
-
|
|
|
72
|
-
| `--sds-font-header-xl-600-font` `$sds-font-header-xl-600-font`
|
|
73
|
-
|
|
|
74
|
-
| **Font Header L**
|
|
75
|
-
|
|
|
76
|
-
|
|
|
77
|
-
|
|
|
78
|
-
| `--sds-font-header-l-600-font` `$sds-font-header-l-600-font`
|
|
79
|
-
|
|
|
80
|
-
| **Font Header M**
|
|
81
|
-
|
|
|
82
|
-
|
|
|
83
|
-
|
|
|
84
|
-
| `--sds-font-header-m-600-font` `$sds-font-header-m-600-font`
|
|
85
|
-
|
|
|
86
|
-
| **Font Header S**
|
|
87
|
-
|
|
|
88
|
-
|
|
|
89
|
-
|
|
|
90
|
-
| `--sds-font-header-s-600-font` `$sds-font-header-s-600-font`
|
|
91
|
-
|
|
|
92
|
-
| **Font Header XS**
|
|
93
|
-
|
|
|
94
|
-
|
|
|
95
|
-
|
|
|
96
|
-
| `--sds-font-header-xs-600-font` `$sds-font-header-xs-600-font`
|
|
97
|
-
|
|
|
98
|
-
| **Font Header XXS**
|
|
99
|
-
|
|
|
100
|
-
|
|
|
101
|
-
|
|
|
102
|
-
| `--sds-font-header-xxs-600-font` `$sds-font-header-xxs-600-font`
|
|
103
|
-
|
|
|
104
|
-
| **Font Header XXXS**
|
|
105
|
-
|
|
|
106
|
-
|
|
|
107
|
-
|
|
|
108
|
-
| `--sds-font-header-xxxs-600-font` `$sds-font-header-xxxs-600-font`
|
|
61
|
+
| **Font Header XXL** | | |
|
|
62
|
+
| --------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | -------------------------------------------------------------------- |
|
|
63
|
+
| _Visual_ | | _Figma Variable_ |
|
|
64
|
+
| | | `wide/fontHeaderXxl/600` |
|
|
65
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
66
|
+
| `--sds-font-header-xxl-600-font` `$sds-font-header-xxl-600-font` `--sds-font-header-xxl-600-letter-spacing` `$sds-font-header-xxl-600-letter-spacing` | | `font: 600 26px/34px "Inter", sans-serif;` `letter-spacing: 0px;` |
|
|
67
|
+
| | | |
|
|
68
|
+
| **Font Header XL** | | |
|
|
69
|
+
| _Visual_ | | _Figma Variable_ |
|
|
70
|
+
| | | `wide/fontHeaderXl/600` |
|
|
71
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
72
|
+
| `--sds-font-header-xl-600-font` `$sds-font-header-xl-600-font` `--sds-font-header-xl-600-letter-spacing` `$sds-font-header-xl-600-letter-spacing` | | `font: 600 22px/30px "Inter", sans-serif;` `letter-spacing: 0px;` |
|
|
73
|
+
| | | |
|
|
74
|
+
| **Font Header L** | | |
|
|
75
|
+
| _Visual_ | | _Figma Variable_ |
|
|
76
|
+
| | | `wide/fontHeaderL/600` |
|
|
77
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
78
|
+
| `--sds-font-header-l-600-font` `$sds-font-header-l-600-font` `--sds-font-header-l-600-letter-spacing` `$sds-font-header-l-600-letter-spacing` | | `font: 600 18px/24px "Inter", sans-serif;` `letter-spacing: 0px;` |
|
|
79
|
+
| | | |
|
|
80
|
+
| **Font Header M** | | |
|
|
81
|
+
| _Visual_ | | _Figma Variable_ |
|
|
82
|
+
| | | `wide/fontHeaderM/600` |
|
|
83
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
84
|
+
| `--sds-font-header-m-600-font` `$sds-font-header-m-600-font` `--sds-font-header-m-600-letter-spacing` `$sds-font-header-m-600-letter-spacing` | | `font: 600 16px/22px "Inter", sans-serif;` `letter-spacing: 0px;` |
|
|
85
|
+
| | | |
|
|
86
|
+
| **Font Header S** | | |
|
|
87
|
+
| _Visual_ | | _Figma Variable_ |
|
|
88
|
+
| | | `wide/fontHeaderS/600` |
|
|
89
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
90
|
+
| `--sds-font-header-s-600-font` `$sds-font-header-s-600-font` `--sds-font-header-s-600-letter-spacing` `$sds-font-header-s-600-letter-spacing` | | `font: 600 14px/20px "Inter", sans-serif;` `letter-spacing: 0.08px;` |
|
|
91
|
+
| | | |
|
|
92
|
+
| **Font Header XS** | | |
|
|
93
|
+
| _Visual_ | | _Figma Variable_ |
|
|
94
|
+
| | | `wide/fontHeaderXs/600` |
|
|
95
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
96
|
+
| `--sds-font-header-xs-600-font` `$sds-font-header-xs-600-font` `--sds-font-header-xs-600-letter-spacing` `$sds-font-header-xs-600-letter-spacing` | | `font: 600 13px/18px "Inter", sans-serif;` `letter-spacing: 0.08px;` |
|
|
97
|
+
| | | |
|
|
98
|
+
| **Font Header XXS** | | |
|
|
99
|
+
| _Visual_ | | _Figma Variable_ |
|
|
100
|
+
| | | `wide/fontHeaderXxs/600` |
|
|
101
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
102
|
+
| `--sds-font-header-xxs-600-font` `$sds-font-header-xxs-600-font` `--sds-font-header-xxs-600-letter-spacing` `$sds-font-header-xxs-600-letter-spacing` | | `font: 600 12px/18px "Inter", sans-serif;` `letter-spacing: 0.1px;` |
|
|
103
|
+
| | | |
|
|
104
|
+
| **Font Header XXXS** | | |
|
|
105
|
+
| _Visual_ | | _Figma Variable_ |
|
|
106
|
+
| | | `wide/fontHeaderXxxs/600` |
|
|
107
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
108
|
+
| `--sds-font-header-xxxs-600-font` `$sds-font-header-xxxs-600-font` `--sds-font-header-xxxs-600-letter-spacing` `$sds-font-header-xxxs-600-letter-spacing` | | `font: 600 11px/16px "Inter", sans-serif;` `letter-spacing: 0.1px;` |
|
|
109
109
|
|
|
110
110
|
#### Body
|
|
111
111
|
|
|
112
112
|
For use with `<p>` tags.
|
|
113
113
|
|
|
114
|
-
| **Font Body L**
|
|
115
|
-
|
|
|
116
|
-
|
|
|
117
|
-
|
|
|
118
|
-
|
|
|
119
|
-
| `--sds-font-body-l-600-font` `$sds-font-body-l-600-font`
|
|
120
|
-
| `--sds-font-body-l-500-font` `$sds-font-body-l-500-font`
|
|
121
|
-
| `--sds-font-body-l-400-font` `$sds-font-body-l-400-font`
|
|
122
|
-
|
|
|
123
|
-
| **Font Body M**
|
|
124
|
-
|
|
|
125
|
-
|
|
|
126
|
-
|
|
|
127
|
-
| `--sds-font-body-m-600-font` `$sds-font-body-m-600-font``--sds-font-body-m-600-letter-spacing``$sds-font-body-m-600-letter-spacing`
|
|
128
|
-
| `--sds-font-body-m-500-font` `$sds-font-body-m-500-font``--sds-font-body-m-500-letter-spacing``$sds-font-body-m-500-letter-spacing`
|
|
129
|
-
| `--sds-font-body-m-400-font` `$sds-font-body-m-400-font`
|
|
130
|
-
|
|
|
131
|
-
| **Font Body S**
|
|
132
|
-
|
|
|
133
|
-
|
|
|
134
|
-
|
|
|
135
|
-
| `--sds-font-body-s-600-font` `$sds-font-body-s-600-font`
|
|
136
|
-
| `--sds-font-body-s-500-font` `$sds-font-body-s-500-font`
|
|
137
|
-
| `--sds-font-body-s-400-font` `$sds-font-body-s-400-font`
|
|
138
|
-
|
|
|
139
|
-
| **Font Body XS**
|
|
140
|
-
|
|
|
141
|
-
|
|
|
142
|
-
|
|
|
143
|
-
| `--sds-font-body-xs-600-font` `$sds-font-body-xs-600-font`
|
|
144
|
-
| `--sds-font-body-xs-500-font` `$sds-font-body-xs-500-font`
|
|
145
|
-
| `--sds-font-body-xs-400-font` `$sds-font-body-xs-400-font`
|
|
146
|
-
|
|
|
147
|
-
| **Font Body XXS**
|
|
148
|
-
|
|
|
149
|
-
|
|
|
150
|
-
|
|
|
151
|
-
| `--sds-font-body-xxs-600-font` `$sds-font-body-xxs-600-font`
|
|
152
|
-
| `--sds-font-body-xxs-500-font` `$sds-font-body-xxs-500-font`
|
|
153
|
-
| `--sds-font-body-xxs-400-font` `$sds-font-body-xxs-400-font`
|
|
154
|
-
|
|
|
155
|
-
| **Font Body XXXS**
|
|
156
|
-
|
|
|
157
|
-
|
|
|
158
|
-
|
|
|
159
|
-
| `--sds-font-body-xxxs-600-font` `$sds-font-body-xxxs-600-font`
|
|
160
|
-
| `--sds-font-body-xxxs-500-font` `$sds-font-body-xxxs-500-font`
|
|
161
|
-
| `--sds-font-body-xxxs-400-font` `$sds-font-body-xxxs-400-font`
|
|
114
|
+
| **Font Body L** | | |
|
|
115
|
+
| ------------------------------------------------------------------------------------------------------------------------------------------------- | --- | ----------------------------------------------------------------------- |
|
|
116
|
+
| _Visual_ | | _Figma Variables_ |
|
|
117
|
+
| | | `wide/fontBodyL/600` `wide/fontBodyL/500` `wide/fontBodyL/400` |
|
|
118
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
119
|
+
| `--sds-font-body-l-600-font` `$sds-font-body-l-600-font` `--sds-font-body-l-600-letter-spacing` `$sds-font-body-l-600-letter-spacing` | | `font: 600 18px/28px "Inter", sans-serif;` `letter-spacing: 0px;` |
|
|
120
|
+
| `--sds-font-body-l-500-font` `$sds-font-body-l-500-font` `--sds-font-body-l-500-letter-spacing` `$sds-font-body-l-500-letter-spacing` | | `font: 500 18px/28px "Inter", sans-serif;` `letter-spacing: 0px;` |
|
|
121
|
+
| `--sds-font-body-l-400-font` `$sds-font-body-l-400-font` `--sds-font-body-l-400-letter-spacing` `$sds-font-body-l-400-letter-spacing` | | `font: 400 18px/28px "Inter", sans-serif;` `letter-spacing: 0px;` |
|
|
122
|
+
| | | |
|
|
123
|
+
| **Font Body M** | | |
|
|
124
|
+
| _Visual_ | | _Figma Variables_ |
|
|
125
|
+
| | | `wide/fontBodyM/600` `wide/fontBodyM/500` `wide/fontBodyM/400` |
|
|
126
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
127
|
+
| `--sds-font-body-m-600-font` `$sds-font-body-m-600-font``--sds-font-body-m-600-letter-spacing``$sds-font-body-m-600-letter-spacing` | | `font: 600 16px/26px "Inter", sans-serif;` `letter-spacing: 0px;` |
|
|
128
|
+
| `--sds-font-body-m-500-font` `$sds-font-body-m-500-font``--sds-font-body-m-500-letter-spacing``$sds-font-body-m-500-letter-spacing` | | `font: 500 16px/26px "Inter", sans-serif;` `letter-spacing: 0px;` |
|
|
129
|
+
| `--sds-font-body-m-400-font` `$sds-font-body-m-400-font` `--sds-font-body-m-400-letter-spacing` `$sds-font-body-m-400-letter-spacing` | | `font: 400 16px/26px "Inter", sans-serif;` `letter-spacing: 0px;` |
|
|
130
|
+
| | | |
|
|
131
|
+
| **Font Body S** | | |
|
|
132
|
+
| _Visual_ | | _Figma Variables_ |
|
|
133
|
+
| | | `wide/fontBodyS/600` `wide/fontBodyS/500` `wide/fontBodyS/400` |
|
|
134
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
135
|
+
| `--sds-font-body-s-600-font` `$sds-font-body-s-600-font` `--sds-font-body-s-600-letter-spacing` `$sds-font-body-s-600-letter-spacing` | | `font: 600 14px/24px "Inter", sans-serif;` `letter-spacing: 0.08px;` |
|
|
136
|
+
| `--sds-font-body-s-500-font` `$sds-font-body-s-500-font` `--sds-font-body-s-500-letter-spacing` `$sds-font-body-s-500-letter-spacing` | | `font: 500 14px/24px "Inter", sans-serif;` `letter-spacing: 0.08px;` |
|
|
137
|
+
| `--sds-font-body-s-400-font` `$sds-font-body-s-400-font` `--sds-font-body-s-400-letter-spacing` `$sds-font-body-s-400-letter-spacing` | | `font: 400 14px/24px "Inter", sans-serif;` `letter-spacing: 0.08px;` |
|
|
138
|
+
| | | |
|
|
139
|
+
| **Font Body XS** | | |
|
|
140
|
+
| _Visual_ | | _Figma Variables_ |
|
|
141
|
+
| | | `wide/fontBodyXs/600` `wide/fontBodyXs/500` `wide/fontBodyXs/400` |
|
|
142
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
143
|
+
| `--sds-font-body-xs-600-font` `$sds-font-body-xs-600-font` `--sds-font-body-xs-600-letter-spacing` `$sds-font-body-xs-600-letter-spacing` | | `font: 600 13px/20px "Inter", sans-serif;` `letter-spacing: 0.08px;` |
|
|
144
|
+
| `--sds-font-body-xs-500-font` `$sds-font-body-xs-500-font` `--sds-font-body-xs-500-letter-spacing` `$sds-font-body-xs-500-letter-spacing` | | `font: 500 13px/20px "Inter", sans-serif;` `letter-spacing: 0.08px;` |
|
|
145
|
+
| `--sds-font-body-xs-400-font` `$sds-font-body-xs-400-font` `--sds-font-body-xs-400-letter-spacing` `$sds-font-body-xs-400-letter-spacing` | | `font: 400 13px/20px "Inter", sans-serif;` `letter-spacing: 0.08px;` |
|
|
146
|
+
| | | |
|
|
147
|
+
| **Font Body XXS** | | |
|
|
148
|
+
| _Visual_ | | _Figma Variables_ |
|
|
149
|
+
| | | `wide/fontBodyXxs/600` `wide/fontBodyXxs/500` `wide/fontBodyXxs/400` |
|
|
150
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
151
|
+
| `--sds-font-body-xxs-600-font` `$sds-font-body-xxs-600-font` `--sds-font-body-xxs-600-letter-spacing` `$sds-font-body-xxs-600-letter-spacing` | | `font: 600 12px/18px "Inter", sans-serif;` `letter-spacing: 0.1px;` |
|
|
152
|
+
| `--sds-font-body-xxs-500-font` `$sds-font-body-xxs-500-font` `--sds-font-body-xxs-500-letter-spacing` `$sds-font-body-xxs-500-letter-spacing` | | `font: 500 12px/18px "Inter", sans-serif;` `letter-spacing: 0.1px;` |
|
|
153
|
+
| `--sds-font-body-xxs-400-font` `$sds-font-body-xxs-400-font` `--sds-font-body-xxs-400-letter-spacing` `$sds-font-body-xxs-400-letter-spacing` | | `font: 400 12px/18px "Inter", sans-serif;` `letter-spacing: 0.1px;` |
|
|
154
|
+
| | | |
|
|
155
|
+
| **Font Body XXXS** | | |
|
|
156
|
+
| _Visual_ | | _Figma Variables_ |
|
|
157
|
+
| | | `wide/fontBodyXxxs/600` `wide/fontBodyXxxs/500` `wide/fontBodyXxxs/400` |
|
|
158
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
159
|
+
| `--sds-font-body-xxxs-600-font` `$sds-font-body-xxxs-600-font` `--sds-font-body-xxxs-600-letter-spacing` `$sds-font-body-xxxs-600-letter-spacing` | | `font: 600 11px/16px "Inter", sans-serif;` `letter-spacing: 0.1px;` |
|
|
160
|
+
| `--sds-font-body-xxxs-500-font` `$sds-font-body-xxxs-500-font` `--sds-font-body-xxxs-500-letter-spacing` `$sds-font-body-xxxs-500-letter-spacing` | | `font: 500 11px/16px "Inter", sans-serif;` `letter-spacing: 0.1px;` |
|
|
161
|
+
| `--sds-font-body-xxxs-400-font` `$sds-font-body-xxxs-400-font` `--sds-font-body-xxxs-400-letter-spacing` `$sds-font-body-xxxs-400-letter-spacing` | | `font: 400 11px/16px "Inter", sans-serif;` `letter-spacing: 0.1px;` |
|
|
162
162
|
|
|
163
163
|
#### All-caps
|
|
164
164
|
|
|
165
165
|
Use for emphasis or when there is a need for distinction between fonts on a page or in a component, such as in Minimal Buttons.
|
|
166
166
|
|
|
167
|
-
| **Font Caps XXS**
|
|
168
|
-
|
|
|
169
|
-
|
|
|
170
|
-
|
|
|
171
|
-
|
|
|
172
|
-
| `--sds-font-caps-xxs-600-font` `$sds-font-caps-xxs-600-font`
|
|
173
|
-
|
|
|
174
|
-
| **Font Caps XXXS**
|
|
175
|
-
|
|
|
176
|
-
|
|
|
177
|
-
|
|
|
178
|
-
| `--sds-font-caps-xxxs-600-font` `$sds-font-caps-xxxs-600-font`
|
|
179
|
-
|
|
|
180
|
-
| **Font Caps XXXXS**
|
|
181
|
-
|
|
|
182
|
-
|
|
|
183
|
-
|
|
|
184
|
-
| `--sds-font-caps-xxxxs-600-font` `$sds-font-caps-xxxxs-600-font`
|
|
167
|
+
| **Font Caps XXS** | | |
|
|
168
|
+
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --- | ------------------------------------------------------------------------------------------------ |
|
|
169
|
+
| _Visual_ | | _Figma Variable_ |
|
|
170
|
+
| | | `wide/fontCapsXxs/600` |
|
|
171
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
172
|
+
| `--sds-font-caps-xxs-600-font` `$sds-font-caps-xxs-600-font` `--sds-font-caps-xxs-600-letter-spacing` `$sds-font-caps-xxs-600-letter-spacing` `--sds-font-caps-xxs-600-text-transform``$sds-font-caps-xxs-600-text-transform` | | `font: 600 12px/18px "Inter", sans-serif;` `letter-spacing: 0.5px;` `text-transform: uppercase;` |
|
|
173
|
+
| | | |
|
|
174
|
+
| **Font Caps XXXS** | | |
|
|
175
|
+
| _Visual_ | | _Figma Variable_ |
|
|
176
|
+
| | | `wide/fontCapsXxxs/600` |
|
|
177
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
178
|
+
| `--sds-font-caps-xxxs-600-font` `$sds-font-caps-xxxs-600-font` `--sds-font-caps-xxxs-600-letter-spacing` `$sds-font-caps-xxxs-600-letter-spacing` `--sds-font-caps-xxxs-600-text-transform` `$sds-font-caps-xxxs-600-text-transform` | | `font: 600 11px/16px "Inter", sans-serif;` `letter-spacing: 0.5px;` `text-transform: uppercase;` |
|
|
179
|
+
| | | |
|
|
180
|
+
| **Font Caps XXXXS** | | |
|
|
181
|
+
| _Visual_ | | _Figma Variable_ |
|
|
182
|
+
| | | `wide/fontCapsXxxxs/600` |
|
|
183
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
184
|
+
| `--sds-font-caps-xxxxs-600-font` `$sds-font-caps-xxxxs-600-font` `--sds-font-caps-xxxxs-600-letter-spacing` `$sds-font-caps-xxxxs-600-letter-spacing` `--sds-font-caps-xxxxs-600-text-transform` `$sds-font-caps-xxxxs-600-text-transform` | | `font: 600 10px/14px "Inter", sans-serif;` `letter-spacing: 0.5px;` `text-transform: uppercase;` |
|
|
185
185
|
|
|
186
186
|
#### Tabular
|
|
187
187
|
|
|
188
188
|
Use when there is a need for numbers to be an equal width such as in Tables.
|
|
189
189
|
|
|
190
|
-
| **Font Tabular S**
|
|
191
|
-
|
|
|
192
|
-
|
|
|
193
|
-
|
|
|
194
|
-
|
|
|
195
|
-
| `--sds-font-tabular-s-600-font` `$sds-font-tabular-s-600-font`
|
|
196
|
-
| `--sds-font-tabular-s-500-font` `$sds-font-tabular-s-500-font`
|
|
197
|
-
| `--sds-font-tabular-s-400-font` `$sds-font-tabular-s-400-font`
|
|
198
|
-
|
|
|
199
|
-
| **Font Tabular XS**
|
|
200
|
-
|
|
|
201
|
-
|
|
|
202
|
-
|
|
|
203
|
-
| `--sds-font-tabular-xs-600-font` `$sds-font-tabular-xs-600-font`
|
|
204
|
-
| `--sds-font-tabular-xs-500-font` `$sds-font-tabular-xs-500-font`
|
|
205
|
-
| `--sds-font-tabular-xs-400-font` `$sds-font-tabular-xs-400-font`
|
|
190
|
+
| **Font Tabular S** | | |
|
|
191
|
+
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --- | ------------------------------------------------------------------------------------------------------- |
|
|
192
|
+
| _Visual_ | | _Figma Variables_ |
|
|
193
|
+
| | | `wide/fontTabularS/600` `wide/fontTabularS/500` `wide/fontTabularS/400` |
|
|
194
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
195
|
+
| `--sds-font-tabular-s-600-font` `$sds-font-tabular-s-600-font` `--sds-font-tabular-s-600-font-variant-numeric` `$sds-font-tabular-s-600-font-variant-numeric` `--sds-font-tabular-s-600-letter-spacing` `$sds-font-tabular-s-600-letter-spacing` | | `font: 600 14px/24px "Inter", sans-serif;` `font-variant-numeric: tabular-nums;` `letter-spacing: 0px;` |
|
|
196
|
+
| `--sds-font-tabular-s-500-font` `$sds-font-tabular-s-500-font` `--sds-font-tabular-s-500-font-variant-numeric` `$sds-font-tabular-s-500-font-variant-numeric` `--sds-font-tabular-s-500-letter-spacing` `$sds-font-tabular-s-500-letter-spacing` | | `font: 500 14px/24px "Inter", sans-serif;` `font-variant-numeric: tabular-nums;` `letter-spacing: 0px;` |
|
|
197
|
+
| `--sds-font-tabular-s-400-font` `$sds-font-tabular-s-400-font` `--sds-font-tabular-s-400-font-variant-numeric` `$sds-font-tabular-s-400-font-variant-numeric` `--sds-font-tabular-s-400-letter-spacing` `$sds-font-tabular-s-400-letter-spacing` | | `font: 400 14px/24px "Inter", sans-serif;` `font-variant-numeric: tabular-nums;` `letter-spacing: 0px;` |
|
|
198
|
+
| | | |
|
|
199
|
+
| **Font Tabular XS** | | |
|
|
200
|
+
| _Visual_ | | _Figma Variables_ |
|
|
201
|
+
| | | `wide/fontTabularXs/600` `wide/fontTabularXs/500` `wide/fontTabularXs/400` |
|
|
202
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
203
|
+
| `--sds-font-tabular-xs-600-font` `$sds-font-tabular-xs-600-font` `--sds-font-tabular-xs-600-font-variant-numeric` `$sds-font-tabular-xs-600-font-variant-numeric` `--sds-font-tabular-xs-600-letter-spacing` `$sds-font-tabular-xs-600-letter-spacing` | | `font: 600 13px/20px "Inter", sans-serif;` `font-variant-numeric: tabular-nums;` `letter-spacing: 0px;` |
|
|
204
|
+
| `--sds-font-tabular-xs-500-font` `$sds-font-tabular-xs-500-font` `--sds-font-tabular-xs-500-font-variant-numeric` `$sds-font-tabular-xs-500-font-variant-numeric` `--sds-font-tabular-xs-500-letter-spacing` `$sds-font-tabular-xs-500-letter-spacing` | | `font: 500 13px/20px "Inter", sans-serif;` `font-variant-numeric: tabular-nums;` `letter-spacing: 0px;` |
|
|
205
|
+
| `--sds-font-tabular-xs-400-font` `$sds-font-tabular-xs-400-font` `--sds-font-tabular-xs-400-font-variant-numeric` `$sds-font-tabular-xs-400-font-variant-numeric` `--sds-font-tabular-xs-400-letter-spacing` `$sds-font-tabular-xs-400-letter-spacing` | | `font: 400 13px/20px "Inter", sans-serif;` `font-variant-numeric: tabular-nums;` `letter-spacing: 0px;` |
|
|
206
206
|
|
|
207
207
|
#### Code
|
|
208
208
|
|
|
209
209
|
Use only when referring to code snippets.
|
|
210
210
|
|
|
211
|
-
| **Font Code S**
|
|
212
|
-
|
|
|
213
|
-
|
|
|
214
|
-
|
|
|
215
|
-
|
|
|
216
|
-
| `--sds-font-code-s-600-font` `$sds-font-code-s-600-font`
|
|
217
|
-
| `--sds-font-code-s-500-font` `$sds-font-code-s-500-font`
|
|
218
|
-
| `--sds-font-code-s-400-font` `$sds-font-code-s-400-font`
|
|
219
|
-
|
|
|
220
|
-
| **Font Code XS**
|
|
221
|
-
|
|
|
222
|
-
|
|
|
223
|
-
|
|
|
224
|
-
| `--sds-font-code-xs-600-font` `$sds-font-code-xs-600-font`
|
|
225
|
-
| `--sds-font-code-xs-500-font` `$sds-font-code-xs-500-font`
|
|
226
|
-
| `--sds-font-code-xs-400-font` `$sds-font-code-xs-400-font`
|
|
211
|
+
| **Font Code S** | | |
|
|
212
|
+
| ----------------------------------------------------------------------------------------------------------------------------------------- | --- | ------------------------------------------------------------------------ |
|
|
213
|
+
| _Visual_ | | _Figma Variables_ |
|
|
214
|
+
| | | `wide/fontCodeS/600` `wide/fontCodeS/500` `wide/fontCodeS/400` |
|
|
215
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
216
|
+
| `--sds-font-code-s-600-font` `$sds-font-code-s-600-font` `--sds-font-code-s-600-letter-spacing` `$sds-font-code-s-600-letter-spacing` | | `font: 600 14px/24px "IBM Plex Mono", monospace;` `letter-spacing: 0px;` |
|
|
217
|
+
| `--sds-font-code-s-500-font` `$sds-font-code-s-500-font` `--sds-font-code-s-500-letter-spacing` `$sds-font-code-s-500-letter-spacing` | | `font: 500 14px/24px "IBM Plex Mono", monospace;` `letter-spacing: 0px;` |
|
|
218
|
+
| `--sds-font-code-s-400-font` `$sds-font-code-s-400-font` `--sds-font-code-s-400-letter-spacing` `$sds-font-code-s-400-letter-spacing` | | `font: 400 14px/24px "IBM Plex Mono", monospace;` `letter-spacing: 0px;` |
|
|
219
|
+
| | | |
|
|
220
|
+
| **Font Code XS** | | |
|
|
221
|
+
| _Visual_ | | _Figma Variables_ |
|
|
222
|
+
| | | `wide/fontCodeXs/600` `wide/fontCodeXs/500` `wide/fontCodeXs/400` |
|
|
223
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
224
|
+
| `--sds-font-code-xs-600-font` `$sds-font-code-xs-600-font` `--sds-font-code-xs-600-letter-spacing` `$sds-font-code-xs-600-letter-spacing` | | `font: 600 13px/20px "IBM Plex Mono", monospace;` `letter-spacing: 0px;` |
|
|
225
|
+
| `--sds-font-code-xs-500-font` `$sds-font-code-xs-500-font` `--sds-font-code-xs-500-letter-spacing` `$sds-font-code-xs-500-letter-spacing` | | `font: 500 13px/20px "IBM Plex Mono", monospace;` `letter-spacing: 0px;` |
|
|
226
|
+
| `--sds-font-code-xs-400-font` `$sds-font-code-xs-400-font` `--sds-font-code-xs-400-letter-spacing` `$sds-font-code-xs-400-letter-spacing` | | `font: 400 13px/20px "IBM Plex Mono", monospace;` `letter-spacing: 0px;` |
|
|
227
227
|
|
|
228
228
|
## Narrow
|
|
229
229
|
|
|
@@ -231,24 +231,24 @@ Use only when referring to code snippets.
|
|
|
231
231
|
|
|
232
232
|
Inter is the primary typeface to be used throughout product and marketing materials. IBM Plex Mono should only be used when referring to code snippets.
|
|
233
233
|
|
|
234
|
-
| **Visual** |
|
|
235
|
-
|
|
|
236
|
-
|
|
|
237
|
-
|
|
|
238
|
-
|
|
|
239
|
-
|
|
|
234
|
+
| **Visual** | | **Typeface** | | **Usage** |
|
|
235
|
+
| ---------- | --- | ------------------- | --- | --------------------------------------------------------------------------------------------------------------------- |
|
|
236
|
+
| | | Inter (600) | | All headers throughout the product and marketing materials, and emphasized body copy. |
|
|
237
|
+
| | | Inter (500) | | For text that needs slight emphasis. |
|
|
238
|
+
| | | Inter (400) | | All body copy throughout the product and marketing materials. If emphasized copy is needed, use a font weight of 600. |
|
|
239
|
+
| | | IBM Plex Mono (400) | | Use only when referring to code snippets. |
|
|
240
240
|
|
|
241
241
|
### Font Weights
|
|
242
242
|
|
|
243
243
|
Regular (400) and SemiBold (600) are the two font weights primarily used across the product, however additional font weights are available to be selectively used if needed.
|
|
244
244
|
|
|
245
|
-
| **Visual** |
|
|
246
|
-
|
|
|
247
|
-
|
|
|
248
|
-
|
|
|
249
|
-
|
|
|
250
|
-
|
|
|
251
|
-
|
|
|
245
|
+
| **Visual** | | **Variable** | | **Value** |
|
|
246
|
+
| ---------- | --- | -------------------- | --- | ------------------- |
|
|
247
|
+
| | | `fontWeightHeavy` | | `font-weight: 800;` |
|
|
248
|
+
| | | `fontWeightBold` | | `font-weight: 700;` |
|
|
249
|
+
| | | `fontWeightSemibold` | | `font-weight: 600;` |
|
|
250
|
+
| | | `fontWeightRegular` | | `font-weight: 400;` |
|
|
251
|
+
| | | `fontWeightThin` | | `font-weight: 300;` |
|
|
252
252
|
|
|
253
253
|
---
|
|
254
254
|
|
|
@@ -258,195 +258,195 @@ Regular (400) and SemiBold (600) are the two font weights primarily used across
|
|
|
258
258
|
|
|
259
259
|
For use with Hero component.
|
|
260
260
|
|
|
261
|
-
| **Font Title L**
|
|
262
|
-
|
|
|
263
|
-
|
|
|
264
|
-
|
|
|
265
|
-
|
|
|
266
|
-
| `--sds-font-title-l-700-font-narrow` `$sds-font-title-l-700-font-narrow`
|
|
267
|
-
|
|
|
268
|
-
| **Font Title M**
|
|
269
|
-
|
|
|
270
|
-
|
|
|
271
|
-
|
|
|
272
|
-
| `--sds-font-title-m-700-font-narrow` `$sds-font-title-m-700-font-narrow`
|
|
273
|
-
|
|
|
274
|
-
| **Font Tile S**
|
|
275
|
-
|
|
|
276
|
-
|
|
|
277
|
-
|
|
|
278
|
-
| `--sds-font-title-s-700-font-narrow` `$sds-font-title-s-700-font-narrow`
|
|
261
|
+
| **Font Title L** | | |
|
|
262
|
+
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | ----------------------------------------------------------------- |
|
|
263
|
+
| _Visual_ | | _Figma Variable_ |
|
|
264
|
+
| | | `narrow/fontTitleL/700` |
|
|
265
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
266
|
+
| `--sds-font-title-l-700-font-narrow` `$sds-font-title-l-700-font-narrow` `--sds-font-title-l-700-letter-spacing-narrow` `$sds-font-title-l-700-letter-spacing-narrow` | | `font: 700 40px/50x "Inter", sans-serif;` `letter-spacing: 0px;` |
|
|
267
|
+
| | | |
|
|
268
|
+
| **Font Title M** | | |
|
|
269
|
+
| _Visual_ | | _Figma Variable_ |
|
|
270
|
+
| | | `narrow/fontTitleM/700` |
|
|
271
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
272
|
+
| `--sds-font-title-m-700-font-narrow` `$sds-font-title-m-700-font-narrow` `--sds-font-title-m-700-letter-spacing-narrow` `$sds-font-title-m-700-letter-spacing-narrow` | | `font: 700 32px/40px "Inter", sans-serif;` `letter-spacing: 0px;` |
|
|
273
|
+
| | | |
|
|
274
|
+
| **Font Tile S** | | |
|
|
275
|
+
| _Visual_ | | _Figma Variable_ |
|
|
276
|
+
| | | `narrow/fontTitleS/700` |
|
|
277
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
278
|
+
| `--sds-font-title-s-700-font-narrow` `$sds-font-title-s-700-font-narrow` `--sds-font-title-s-700-letter-spacing-narrow` `$sds-font-title-s-700-letter-spacing-narrow` | | `font: 700 26px/34px "Inter", sans-serif;` `letter-spacing: 0px;` |
|
|
279
279
|
|
|
280
280
|
#### Header
|
|
281
281
|
|
|
282
282
|
For use with `<H1>`, `<H2>`, `<H3>`, `<H4>`, `<H5>`, `<H6>` tags.
|
|
283
283
|
|
|
284
|
-
| **Font Header XXL**
|
|
285
|
-
|
|
|
286
|
-
|
|
|
287
|
-
|
|
|
288
|
-
|
|
|
289
|
-
| `--sds-font-header-xxl-600-font-narrow` `$sds-font-header-xxl-600-font-narrow`
|
|
290
|
-
|
|
|
291
|
-
| **Font Header XL**
|
|
292
|
-
|
|
|
293
|
-
|
|
|
294
|
-
|
|
|
295
|
-
| `--sds-font-header-xl-600-font-narrow` `$sds-font-header-xl-600-font-narrow`
|
|
296
|
-
|
|
|
297
|
-
| **Font Header L**
|
|
298
|
-
|
|
|
299
|
-
|
|
|
300
|
-
|
|
|
301
|
-
| `--sds-font-header-l-600-font-narrow` `$sds-font-header-l-600-font-narrow`
|
|
302
|
-
|
|
|
303
|
-
| **Font Header M**
|
|
304
|
-
|
|
|
305
|
-
|
|
|
306
|
-
|
|
|
307
|
-
| `--sds-font-header-m-600-font-narrow` `$sds-font-header-m-600-font-narrow`
|
|
308
|
-
|
|
|
309
|
-
| **Font Header S**
|
|
310
|
-
|
|
|
311
|
-
|
|
|
312
|
-
|
|
|
313
|
-
| `--sds-font-header-s-600-font-narrow` `$sds-font-header-s-600-font-narrow`
|
|
314
|
-
|
|
|
315
|
-
| **Font Header XS**
|
|
316
|
-
|
|
|
317
|
-
|
|
|
318
|
-
|
|
|
319
|
-
| `--sds-font-header-xs-600-font-narrow` `$sds-font-header-xs-600-font-narrow`
|
|
320
|
-
|
|
|
321
|
-
| **Font Header XXS**
|
|
322
|
-
|
|
|
323
|
-
|
|
|
324
|
-
|
|
|
325
|
-
| `--sds-font-header-xxs-600-font-narrow` `$sds-font-header-xxs-600-font-narrow`
|
|
326
|
-
|
|
|
327
|
-
| **Font Header XXXS**
|
|
328
|
-
|
|
|
329
|
-
|
|
|
330
|
-
|
|
|
331
|
-
| `--sds-font-header-xxxs-600-font-narrow` `$sds-font-header-xxxs-600-font-narrow`
|
|
284
|
+
| **Font Header XXL** | | |
|
|
285
|
+
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | -------------------------------------------------------------------- |
|
|
286
|
+
| _Visual_ | | _Figma Variable_ |
|
|
287
|
+
| | | `narrow/fontHeaderXxl/600` |
|
|
288
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
289
|
+
| `--sds-font-header-xxl-600-font-narrow` `$sds-font-header-xxl-600-font-narrow` `--sds-font-header-xxl-600-letter-spacing-narrow` `$sds-font-header-xxl-600-letter-spacing-narrow` | | `font: 600 22px/30px "Inter", sans-serif;` `letter-spacing: 0px;` |
|
|
290
|
+
| | | |
|
|
291
|
+
| **Font Header XL** | | |
|
|
292
|
+
| _Visual_ | | _Figma Variable_ |
|
|
293
|
+
| | | `narrow/fontHeaderXl/600` |
|
|
294
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
295
|
+
| `--sds-font-header-xl-600-font-narrow` `$sds-font-header-xl-600-font-narrow` `--sds-font-header-xl-600-letter-spacing-narrow` `$sds-font-header-xl-600-letter-spacing-narrow` | | `font: 600 18px/24px "Inter", sans-serif;` `letter-spacing: 0px;` |
|
|
296
|
+
| | | |
|
|
297
|
+
| **Font Header L** | | |
|
|
298
|
+
| _Visual_ | | _Figma Variable_ |
|
|
299
|
+
| | | `narrow/fontHeaderL/600` |
|
|
300
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
301
|
+
| `--sds-font-header-l-600-font-narrow` `$sds-font-header-l-600-font-narrow` `--sds-font-header-l-600-letter-spacing-narrow` `$sds-font-header-l-600-letter-spacing-narrow` | | `font: 600 16px/22px "Inter", sans-serif;` `letter-spacing: 0px;` |
|
|
302
|
+
| | | |
|
|
303
|
+
| **Font Header M** | | |
|
|
304
|
+
| _Visual_ | | _Figma Variable_ |
|
|
305
|
+
| | | `narrow/fontHeaderM/600` |
|
|
306
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
307
|
+
| `--sds-font-header-m-600-font-narrow` `$sds-font-header-m-600-font-narrow` `--sds-font-header-m-600-letter-spacing-narrow` `$sds-font-header-m-600-letter-spacing-narrow` | | `font: 600 14px/20px "Inter", sans-serif;` `letter-spacing: 0.08px;` |
|
|
308
|
+
| | | |
|
|
309
|
+
| **Font Header S** | | |
|
|
310
|
+
| _Visual_ | | _Figma Variable_ |
|
|
311
|
+
| | | `narrow/fontHeaderS/600` |
|
|
312
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
313
|
+
| `--sds-font-header-s-600-font-narrow` `$sds-font-header-s-600-font-narrow` `--sds-font-header-s-600-letter-spacing-narrow` `$sds-font-header-s-600-letter-spacing-narrow` | | `font: 600 14px/20px "Inter", sans-serif;` `letter-spacing: 0.08px;` |
|
|
314
|
+
| | | |
|
|
315
|
+
| **Font Header XS** | | |
|
|
316
|
+
| _Visual_ | | _Figma Variable_ |
|
|
317
|
+
| | | `narrow/fontHeaderXs/600` |
|
|
318
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
319
|
+
| `--sds-font-header-xs-600-font-narrow` `$sds-font-header-xs-600-font-narrow` `--sds-font-header-xs-600-letter-spacing-narrow` `$sds-font-header-xs-600-letter-spacing-narrow` | | `font: 600 13px/18px "Inter", sans-serif;` `letter-spacing: 0.08px;` |
|
|
320
|
+
| | | |
|
|
321
|
+
| **Font Header XXS** | | |
|
|
322
|
+
| _Visual_ | | _Figma Variable_ |
|
|
323
|
+
| | | `narrow/fontHeaderXxs/600` |
|
|
324
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
325
|
+
| `--sds-font-header-xxs-600-font-narrow` `$sds-font-header-xxs-600-font-narrow` `--sds-font-header-xxs-600-letter-spacing-narrow` `$sds-font-header-xxs-600-letter-spacing-narrow` | | `font: 600 12px/18px "Inter", sans-serif;` `letter-spacing: 0.1px;` |
|
|
326
|
+
| | | |
|
|
327
|
+
| **Font Header XXXS** | | |
|
|
328
|
+
| _Visual_ | | _Figma Variable_ |
|
|
329
|
+
| | | `narrow/fontHeaderXxxs/600` |
|
|
330
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
331
|
+
| `--sds-font-header-xxxs-600-font-narrow` `$sds-font-header-xxxs-600-font-narrow` `--sds-font-header-xxxs-600-letter-spacing-narrow` `$sds-font-header-xxxs-600-letter-spacing-narrow` | | `font: 600 12px/18px "Inter", sans-serif;` `letter-spacing: 0.1px;` |
|
|
332
332
|
|
|
333
333
|
#### Body
|
|
334
334
|
|
|
335
335
|
For use with `<p>` tags.
|
|
336
336
|
|
|
337
|
-
| **Font Body L**
|
|
338
|
-
|
|
|
339
|
-
|
|
|
340
|
-
|
|
|
341
|
-
|
|
|
342
|
-
| `--sds-font-body-l-600-font-narrow` `$sds-font-body-l-600-font-narrow`
|
|
343
|
-
| `--sds-font-body-l-500-font-narrow` `$sds-font-body-l-500-font-narrow`
|
|
344
|
-
| `--sds-font-body-l-400-font-narrow` `$sds-font-body-l-400-font-narrow`
|
|
345
|
-
|
|
|
346
|
-
| **Font Body M**
|
|
347
|
-
|
|
|
348
|
-
|
|
|
349
|
-
|
|
|
350
|
-
| `--sds-font-body-m-600-font-narrow` `$sds-font-body-m-600-font-narrow``--sds-font-body-m-600-letter-spacing-narrow``$sds-font-body-m-600-letter-spacing-narrow`
|
|
351
|
-
| `--sds-font-body-m-500-font-narrow` `$sds-font-body-m-500-font-narrow``--sds-font-body-m-500-letter-spacing-narrow``$sds-font-body-m-500-letter-spacing-narrow`
|
|
352
|
-
| `--sds-font-body-m-400-font-narrow` `$sds-font-body-m-400-font-narrow`
|
|
353
|
-
|
|
|
354
|
-
| **Font Body S**
|
|
355
|
-
|
|
|
356
|
-
|
|
|
357
|
-
|
|
|
358
|
-
| `--sds-font-body-s-600-font-narrow` `$sds-font-body-s-600-font-narrow`
|
|
359
|
-
| `--sds-font-body-s-500-font-narrow` `$sds-font-body-s-500-font-narrow`
|
|
360
|
-
| `--sds-font-body-s-400-font-narrow` `$sds-font-body-s-400-font-narrow`
|
|
361
|
-
|
|
|
362
|
-
| **Font Body XS**
|
|
363
|
-
|
|
|
364
|
-
|
|
|
365
|
-
|
|
|
366
|
-
| `--sds-font-body-xs-600-font-narrow` `$sds-font-body-xs-600-font-narrow`
|
|
367
|
-
| `--sds-font-body-xs-500-font-narrow` `$sds-font-body-xs-500-font-narrow`
|
|
368
|
-
| `--sds-font-body-xs-400-font-narrow` `$sds-font-body-xs-400-font-narrow`
|
|
369
|
-
|
|
|
370
|
-
| **Font Body XXS**
|
|
371
|
-
|
|
|
372
|
-
|
|
|
373
|
-
|
|
|
374
|
-
| `--sds-font-body-xxs-600-font-narrow` `$sds-font-body-xxs-600-font-narrow`
|
|
375
|
-
| `--sds-font-body-xxs-500-font-narrow` `$sds-font-body-xxs-500-font-narrow`
|
|
376
|
-
| `--sds-font-body-xxs-400-font-narrow` `$sds-font-body-xxs-400-font-narrow`
|
|
377
|
-
|
|
|
378
|
-
| **Font Body XXXS**
|
|
379
|
-
|
|
|
380
|
-
|
|
|
381
|
-
|
|
|
382
|
-
| `--sds-font-body-xxxs-600-font-narrow` `$sds-font-body-xxxs-600-font-narrow`
|
|
383
|
-
| `--sds-font-body-xxxs-500-font-narrow` `$sds-font-body-xxxs-500-font-narrow`
|
|
384
|
-
| `--sds-font-body-xxxs-400-font-narrow` `$sds-font-body-xxxs-400-font-narrow`
|
|
337
|
+
| **Font Body L** | | |
|
|
338
|
+
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | ----------------------------------------------------------------------------- |
|
|
339
|
+
| _Visual_ | | _Figma Variables_ |
|
|
340
|
+
| | | `narrow/fontBodyL/600` `narrow/fontBodyL/500` `narrow/fontBodyL/400` |
|
|
341
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
342
|
+
| `--sds-font-body-l-600-font-narrow` `$sds-font-body-l-600-font-narrow` `--sds-font-body-l-600-letter-spacing-narrow` `$sds-font-body-l-600-letter-spacing-narrow` | | `font: 600 16px/26px "Inter", sans-serif;` `letter-spacing: 0px;` |
|
|
343
|
+
| `--sds-font-body-l-500-font-narrow` `$sds-font-body-l-500-font-narrow` `--sds-font-body-l-500-letter-spacing-narrow` `$sds-font-body-l-500-letter-spacing-narrow` | | `font: 500 16px/26px "Inter", sans-serif;` `letter-spacing: 0px;` |
|
|
344
|
+
| `--sds-font-body-l-400-font-narrow` `$sds-font-body-l-400-font-narrow` `--sds-font-body-l-400-letter-spacing-narrow` `$sds-font-body-l-400-letter-spacing-narrow` | | `font: 400 16px/26px "Inter", sans-serif;` `letter-spacing: 0px;` |
|
|
345
|
+
| | | |
|
|
346
|
+
| **Font Body M** | | |
|
|
347
|
+
| _Visual_ | | _Figma Variables_ |
|
|
348
|
+
| | | `narrow/fontBodyM/600` `narrow/fontBodyM/500` `narrow/fontBodyM/400` |
|
|
349
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
350
|
+
| `--sds-font-body-m-600-font-narrow` `$sds-font-body-m-600-font-narrow``--sds-font-body-m-600-letter-spacing-narrow``$sds-font-body-m-600-letter-spacing-narrow` | | `font: 600 14px/24px "Inter", sans-serif;` `letter-spacing: 0.08px;` |
|
|
351
|
+
| `--sds-font-body-m-500-font-narrow` `$sds-font-body-m-500-font-narrow``--sds-font-body-m-500-letter-spacing-narrow``$sds-font-body-m-500-letter-spacing-narrow` | | `font: 500 14px/24px "Inter", sans-serif;` `letter-spacing: 0.08px;` |
|
|
352
|
+
| `--sds-font-body-m-400-font-narrow` `$sds-font-body-m-400-font-narrow` `--sds-font-body-m-400-letter-spacing-narrow` `$sds-font-body-m-400-letter-spacing-narrow` | | `font: 400 14px/24px "Inter", sans-serif;` `letter-spacing: 0.08px;` |
|
|
353
|
+
| | | |
|
|
354
|
+
| **Font Body S** | | |
|
|
355
|
+
| _Visual_ | | _Figma Variables_ |
|
|
356
|
+
| | | `narrow/fontBodyS/600` `narrow/fontBodyS/500` `narrow/fontBodyS/400` |
|
|
357
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
358
|
+
| `--sds-font-body-s-600-font-narrow` `$sds-font-body-s-600-font-narrow` `--sds-font-body-s-600-letter-spacing-narrow` `$sds-font-body-s-600-letter-spacing-narrow` | | `font: 600 14px/24px "Inter", sans-serif;` `letter-spacing: 0.08px;` |
|
|
359
|
+
| `--sds-font-body-s-500-font-narrow` `$sds-font-body-s-500-font-narrow` `--sds-font-body-s-500-letter-spacing-narrow` `$sds-font-body-s-500-letter-spacing-narrow` | | `font: 500 14px/24px "Inter", sans-serif;` `letter-spacing: 0.08px;` |
|
|
360
|
+
| `--sds-font-body-s-400-font-narrow` `$sds-font-body-s-400-font-narrow` `--sds-font-body-s-400-letter-spacing-narrow` `$sds-font-body-s-400-letter-spacing-narrow` | | `font: 400 14px/24px "Inter", sans-serif;` `letter-spacing: 0.08px;` |
|
|
361
|
+
| | | |
|
|
362
|
+
| **Font Body XS** | | |
|
|
363
|
+
| _Visual_ | | _Figma Variables_ |
|
|
364
|
+
| | | `narrow/fontBodyXs/600` `narrow/fontBodyXs/500` `narrow/fontBodyXs/400` |
|
|
365
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
366
|
+
| `--sds-font-body-xs-600-font-narrow` `$sds-font-body-xs-600-font-narrow` `--sds-font-body-xs-600-letter-spacing-narrow` `$sds-font-body-xs-600-letter-spacing-narrow` | | `font: 600 13px/20px "Inter", sans-serif;` `letter-spacing: 0.08px;` |
|
|
367
|
+
| `--sds-font-body-xs-500-font-narrow` `$sds-font-body-xs-500-font-narrow` `--sds-font-body-xs-500-letter-spacing-narrow` `$sds-font-body-xs-500-letter-spacing-narrow` | | `font: 500 13px/20px "Inter", sans-serif;` `letter-spacing: 0.08px;` |
|
|
368
|
+
| `--sds-font-body-xs-400-font-narrow` `$sds-font-body-xs-400-font-narrow` `--sds-font-body-xs-400-letter-spacing-narrow` `$sds-font-body-xs-400-letter-spacing-narrow` | | `font: 400 13px/20px "Inter", sans-serif;` `letter-spacing: 0.08px;` |
|
|
369
|
+
| | | |
|
|
370
|
+
| **Font Body XXS** | | |
|
|
371
|
+
| _Visual_ | | _Figma Variables_ |
|
|
372
|
+
| | | `narrow/fontBodyXxs/600` `narrow/fontBodyXxs/500` `narrow/fontBodyXxs/400` |
|
|
373
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
374
|
+
| `--sds-font-body-xxs-600-font-narrow` `$sds-font-body-xxs-600-font-narrow` `--sds-font-body-xxs-600-letter-spacing-narrow` `$sds-font-body-xxs-600-letter-spacing-narrow` | | `font: 600 12px/18px "Inter", sans-serif;` `letter-spacing: 0.1px;` |
|
|
375
|
+
| `--sds-font-body-xxs-500-font-narrow` `$sds-font-body-xxs-500-font-narrow` `--sds-font-body-xxs-500-letter-spacing-narrow` `$sds-font-body-xxs-500-letter-spacing-narrow` | | `font: 500 12px/18px "Inter", sans-serif;` `letter-spacing: 0.1px;` |
|
|
376
|
+
| `--sds-font-body-xxs-400-font-narrow` `$sds-font-body-xxs-400-font-narrow` `--sds-font-body-xxs-400-letter-spacing-narrow` `$sds-font-body-xxs-400-letter-spacing-narrow` | | `font: 400 12px/18px "Inter", sans-serif;` `letter-spacing: 0.1px;` |
|
|
377
|
+
| | | |
|
|
378
|
+
| **Font Body XXXS** | | |
|
|
379
|
+
| _Visual_ | | _Figma Variables_ |
|
|
380
|
+
| | | `narrow/fontBodyXxxs/600` `narrow/fontBodyXxxs/500` `narrow/fontBodyXxxs/400` |
|
|
381
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
382
|
+
| `--sds-font-body-xxxs-600-font-narrow` `$sds-font-body-xxxs-600-font-narrow` `--sds-font-body-xxxs-600-letter-spacing-narrow` `$sds-font-body-xxxs-600-letter-spacing-narrow` | | `font: 600 12px/18px "Inter", sans-serif;` `letter-spacing: 0.1px;` |
|
|
383
|
+
| `--sds-font-body-xxxs-500-font-narrow` `$sds-font-body-xxxs-500-font-narrow` `--sds-font-body-xxxs-500-letter-spacing-narrow` `$sds-font-body-xxxs-500-letter-spacing-narrow` | | `font: 500 12px/18px "Inter", sans-serif;` `letter-spacing: 0.1px;` |
|
|
384
|
+
| `--sds-font-body-xxxs-400-font-narrow` `$sds-font-body-xxxs-400-font-narrow` `--sds-font-body-xxxs-400-letter-spacing-narrow` `$sds-font-body-xxxs-400-letter-spacing-narrow` | | `font: 400 12px/18px "Inter", sans-serif;` `letter-spacing: 0.1px;` |
|
|
385
385
|
|
|
386
386
|
#### All-caps
|
|
387
387
|
|
|
388
388
|
Use for emphasis or when there is a need for distinction between fonts on a page or in a component, such as in Minimal Buttons.
|
|
389
389
|
|
|
390
|
-
| **Font Caps XXS**
|
|
391
|
-
|
|
|
392
|
-
|
|
|
393
|
-
|
|
|
394
|
-
|
|
|
395
|
-
| `--sds-font-caps-xxs-600-font-narrow` `$sds-font-caps-xxs-600-font-narrow`
|
|
396
|
-
|
|
|
397
|
-
| **Font Caps XXXS**
|
|
398
|
-
|
|
|
399
|
-
|
|
|
400
|
-
|
|
|
401
|
-
| `--sds-font-caps-xxxs-600-font-narrow` `$sds-font-caps-xxxs-600-font-narrow`
|
|
402
|
-
|
|
|
403
|
-
| **Font Caps XXXXS**
|
|
404
|
-
|
|
|
405
|
-
|
|
|
406
|
-
|
|
|
407
|
-
| `--sds-font-caps-xxxxs-600-font-narrow` `$sds-font-caps-xxxxs-600-font-narrow`
|
|
390
|
+
| **Font Caps XXS** | | |
|
|
391
|
+
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --- | ------------------------------------------------------------------------------------------------ |
|
|
392
|
+
| _Visual_ | | _Figma Variable_ |
|
|
393
|
+
| | | `narrow/fontCapsXxs/600` |
|
|
394
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
395
|
+
| `--sds-font-caps-xxs-600-font-narrow` `$sds-font-caps-xxs-600-font-narrow` `--sds-font-caps-xxs-600-letter-spacing-narrow` `$sds-font-caps-xxs-600-letter-spacing-narrow` `--sds-font-caps-xxs-600-text-transform-narrow``$sds-font-caps-xxs-600-text-transform-narrow` | | `font: 600 12px/18px "Inter", sans-serif;` `letter-spacing: 0.5px;` `text-transform: uppercase;` |
|
|
396
|
+
| | | |
|
|
397
|
+
| **Font Caps XXXS** | | |
|
|
398
|
+
| _Visual_ | | _Figma Variable_ |
|
|
399
|
+
| | | `narrow/fontCapsXxxs/600` |
|
|
400
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
401
|
+
| `--sds-font-caps-xxxs-600-font-narrow` `$sds-font-caps-xxxs-600-font-narrow` `--sds-font-caps-xxxs-600-letter-spacing-narrow` `$sds-font-caps-xxxs-600-letter-spacing-narrow` `--sds-font-caps-xxxs-600-text-transform-narrow` `$sds-font-caps-xxxs-600-text-transform-narrow` | | `font: 600 11px/16px "Inter", sans-serif;` `letter-spacing: 0.5px;` `text-transform: uppercase;` |
|
|
402
|
+
| | | |
|
|
403
|
+
| **Font Caps XXXXS** | | |
|
|
404
|
+
| _Visual_ | | _Figma Variable_ |
|
|
405
|
+
| | | `narrow/fontCapsXxxxs/600` |
|
|
406
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
407
|
+
| `--sds-font-caps-xxxxs-600-font-narrow` `$sds-font-caps-xxxxs-600-font-narrow` `--sds-font-caps-xxxxs-600-letter-spacing-narrow` `$sds-font-caps-xxxxs-600-letter-spacing-narrow` `--sds-font-caps-xxxxs-600-text-transform-narrow` `$sds-font-caps-xxxxs-600-text-transform-narrow` | | `font: 600 11px/16px "Inter", sans-serif;` `letter-spacing: 0.5px;` `text-transform: uppercase;` |
|
|
408
408
|
|
|
409
409
|
#### Tabular
|
|
410
410
|
|
|
411
411
|
Use when there is a need for numbers to be an equal width such as in Tables.
|
|
412
412
|
|
|
413
|
-
| **Font Tabular S**
|
|
414
|
-
|
|
|
415
|
-
|
|
|
416
|
-
|
|
|
417
|
-
|
|
|
418
|
-
| `--sds-font-tabular-s-600-font-narrow` `$sds-font-tabular-s-600-font-narrow`
|
|
419
|
-
| `--sds-font-tabular-s-500-font-narrow` `$sds-font-tabular-s-500-font-narrow`
|
|
420
|
-
| `--sds-font-tabular-s-400-font-narrow` `$sds-font-tabular-s-400-font-narrow`
|
|
421
|
-
|
|
|
422
|
-
| **Font Tabular XS**
|
|
423
|
-
|
|
|
424
|
-
|
|
|
425
|
-
|
|
|
426
|
-
| `--sds-font-tabular-xs-600-font-narrow` `$sds-font-tabular-xs-600-font-narrow`
|
|
427
|
-
| `--sds-font-tabular-xs-500-font-narrow` `$sds-font-tabular-xs-500-font-narrow`
|
|
428
|
-
| `--sds-font-tabular-xs-400-font-narrow` `$sds-font-tabular-xs-400-font-narrow`
|
|
413
|
+
| **Font Tabular S** | | |
|
|
414
|
+
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --- | ------------------------------------------------------------------------------------------------------- |
|
|
415
|
+
| _Visual_ | | _Figma Variables_ |
|
|
416
|
+
| | | `narrow/fontTabularS/600` `narrow/fontTabularS/500` `narrow/fontTabularS/400` |
|
|
417
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
418
|
+
| `--sds-font-tabular-s-600-font-narrow` `$sds-font-tabular-s-600-font-narrow` `--sds-font-tabular-s-600-font-variant-numeric-narrow` `$sds-font-tabular-s-600-font-variant-numeric-narrow` `--sds-font-tabular-s-600-letter-spacing-narrow` `$sds-font-tabular-s-600-letter-spacing-narrow` | | `font: 600 14px/24px "Inter", sans-serif;` `font-variant-numeric: tabular-nums;` `letter-spacing: 0px;` |
|
|
419
|
+
| `--sds-font-tabular-s-500-font-narrow` `$sds-font-tabular-s-500-font-narrow` `--sds-font-tabular-s-500-font-variant-numeric-narrow` `$sds-font-tabular-s-500-font-variant-numeric-narrow` `--sds-font-tabular-s-500-letter-spacing-narrow` `$sds-font-tabular-s-500-letter-spacing-narrow` | | `font: 500 14px/24px "Inter", sans-serif;` `font-variant-numeric: tabular-nums;` `letter-spacing: 0px;` |
|
|
420
|
+
| `--sds-font-tabular-s-400-font-narrow` `$sds-font-tabular-s-400-font-narrow` `--sds-font-tabular-s-400-font-variant-numeric-narrow` `$sds-font-tabular-s-400-font-variant-numeric-narrow` `--sds-font-tabular-s-400-letter-spacing-narrow` `$sds-font-tabular-s-400-letter-spacing-narrow` | | `font: 400 14px/24px "Inter", sans-serif;` `font-variant-numeric: tabular-nums;` `letter-spacing: 0px;` |
|
|
421
|
+
| | | |
|
|
422
|
+
| **Font Tabular XS** | | |
|
|
423
|
+
| _Visual_ | | _Figma Variables_ |
|
|
424
|
+
| | | `narrow/fontTabularXs/600` `narrow/fontTabularXs/500` `narrow/fontTabularXs/400` |
|
|
425
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
426
|
+
| `--sds-font-tabular-xs-600-font-narrow` `$sds-font-tabular-xs-600-font-narrow` `--sds-font-tabular-xs-600-font-variant-numeric-narrow` `$sds-font-tabular-xs-600-font-variant-numeric-narrow` `--sds-font-tabular-xs-600-letter-spacing-narrow` `$sds-font-tabular-xs-600-letter-spacing-narrow` | | `font: 600 13px/20px "Inter", sans-serif;` `font-variant-numeric: tabular-nums;` `letter-spacing: 0px;` |
|
|
427
|
+
| `--sds-font-tabular-xs-500-font-narrow` `$sds-font-tabular-xs-500-font-narrow` `--sds-font-tabular-xs-500-font-variant-numeric-narrow` `$sds-font-tabular-xs-500-font-variant-numeric-narrow` `--sds-font-tabular-xs-500-letter-spacing-narrow` `$sds-font-tabular-xs-500-letter-spacing-narrow` | | `font: 500 13px/20px "Inter", sans-serif;` `font-variant-numeric: tabular-nums;` `letter-spacing: 0px;` |
|
|
428
|
+
| `--sds-font-tabular-xs-400-font-narrow` `$sds-font-tabular-xs-400-font-narrow` `--sds-font-tabular-xs-400-font-variant-numeric-narrow` `$sds-font-tabular-xs-400-font-variant-numeric-narrow` `--sds-font-tabular-xs-400-letter-spacing-narrow` `$sds-font-tabular-xs-400-letter-spacing-narrow` | | `font: 400 13px/20px "Inter", sans-serif;` `font-variant-numeric: tabular-nums;` `letter-spacing: 0px;` |
|
|
429
429
|
|
|
430
430
|
#### Code
|
|
431
431
|
|
|
432
432
|
Use only when referring to code snippets.
|
|
433
433
|
|
|
434
|
-
| **Font Code S**
|
|
435
|
-
|
|
|
436
|
-
|
|
|
437
|
-
|
|
|
438
|
-
|
|
|
439
|
-
| `--sds-font-code-s-600-font-narrow` `$sds-font-code-s-600-font-narrow`
|
|
440
|
-
| `--sds-font-code-s-500-font-narrow` `$sds-font-code-s-500-font-narrow`
|
|
441
|
-
| `--sds-font-code-s-400-font-narrow` `$sds-font-code-s-400-font-narrow`
|
|
442
|
-
|
|
|
443
|
-
| **Font Code XS**
|
|
444
|
-
|
|
|
445
|
-
|
|
|
446
|
-
|
|
|
447
|
-
| `--sds-font-code-xs-600-font-narrow` `$sds-font-code-xs-600-font-narrow`
|
|
448
|
-
| `--sds-font-code-xs-500-font-narrow` `$sds-font-code-xs-500-font-narrow`
|
|
449
|
-
| `--sds-font-code-xs-400-font-narrow` `$sds-font-code-xs-400-font-narrow`
|
|
434
|
+
| **Font Code S** | | |
|
|
435
|
+
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --- | ------------------------------------------------------------------------ |
|
|
436
|
+
| _Visual_ | | _Figma Variables_ |
|
|
437
|
+
| | | `narrow/fontCodeS/600` `narrow/fontCodeS/500` `narrow/fontCodeS/400` |
|
|
438
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
439
|
+
| `--sds-font-code-s-600-font-narrow` `$sds-font-code-s-600-font-narrow` `--sds-font-code-s-600-letter-spacing-narrow` `$sds-font-code-s-600-letter-spacing-narrow` | | `font: 600 14px/24px "IBM Plex Mono", monospace;` `letter-spacing: 0px;` |
|
|
440
|
+
| `--sds-font-code-s-500-font-narrow` `$sds-font-code-s-500-font-narrow` `--sds-font-code-s-500-letter-spacing-narrow` `$sds-font-code-s-500-letter-spacing-narrow` | | `font: 500 14px/24px "IBM Plex Mono", monospace;` `letter-spacing: 0px;` |
|
|
441
|
+
| `--sds-font-code-s-400-font-narrow` `$sds-font-code-s-400-font-narrow` `--sds-font-code-s-400-letter-spacing-narrow` `$sds-font-code-s-400-letter-spacing-narrow` | | `font: 400 14px/24px "IBM Plex Mono", monospace;` `letter-spacing: 0px;` |
|
|
442
|
+
| | | |
|
|
443
|
+
| **Font Code XS** | | |
|
|
444
|
+
| _Visual_ | | _Figma Variables_ |
|
|
445
|
+
| | | `narrow/fontCodeXs/600` `narrow/fontCodeXs/500` `narrow/fontCodeXs/400` |
|
|
446
|
+
| _CSS / SCSS Variables_ | | _Values_ |
|
|
447
|
+
| `--sds-font-code-xs-600-font-narrow` `$sds-font-code-xs-600-font-narrow` `--sds-font-code-xs-600-letter-spacing-narrow` `$sds-font-code-xs-600-letter-spacing-narrow` | | `font: 600 13px/20px "IBM Plex Mono", monospace;` `letter-spacing: 0px;` |
|
|
448
|
+
| `--sds-font-code-xs-500-font-narrow` `$sds-font-code-xs-500-font-narrow` `--sds-font-code-xs-500-letter-spacing-narrow` `$sds-font-code-xs-500-letter-spacing-narrow` | | `font: 500 13px/20px "IBM Plex Mono", monospace;` `letter-spacing: 0px;` |
|
|
449
|
+
| `--sds-font-code-xs-400-font-narrow` `$sds-font-code-xs-400-font-narrow` `--sds-font-code-xs-400-letter-spacing-narrow` `$sds-font-code-xs-400-letter-spacing-narrow` | | `font: 400 13px/20px "IBM Plex Mono", monospace;` `letter-spacing: 0px;` |
|
|
450
450
|
|
|
451
451
|
## Code
|
|
452
452
|
|
|
@@ -546,7 +546,7 @@ To integrate SDS typography variables, import the tailwind.json file from SDS in
|
|
|
546
546
|
|
|
547
547
|
```js
|
|
548
548
|
const sds = require("@czi-sds/components/dist/tailwind.json");
|
|
549
|
-
const typography = require(
|
|
549
|
+
const typography = require("@tailwindcss/typography");
|
|
550
550
|
|
|
551
551
|
module.exports = {
|
|
552
552
|
theme: {
|
|
@@ -576,57 +576,57 @@ Typography encompasses font style, appearance, and structure which together deli
|
|
|
576
576
|
|
|
577
577
|
Barlow is the primary typeface to be used throughout the product. JetBrains Mono should only be used when referring to code snippets.
|
|
578
578
|
|
|
579
|
-
| **Visual** |
|
|
580
|
-
|
|
|
581
|
-
|
|
|
582
|
-
|
|
|
583
|
-
|
|
|
584
|
-
|
|
|
579
|
+
| **Visual** | | **Typeface** | | **Usage** |
|
|
580
|
+
| ---------- | --- | -------------------- | --- | --------------------------------------------------------------------------------------------- |
|
|
581
|
+
| | | Barlow (600) | | All headers and emphasized body copy throughout the product. |
|
|
582
|
+
| | | Barlow (500) | | All text used in sidebars. |
|
|
583
|
+
| | | Barlow (400) | | All body copy throughout the product. If emphasized copy is needed, use a font weight of 600. |
|
|
584
|
+
| | | JetBrains Mono (400) | | Use only when referring to code snippets. |
|
|
585
585
|
|
|
586
586
|
### Font Weights
|
|
587
587
|
|
|
588
588
|
Regular (400), Medium (500), and SemiBold (600) are the three font weights primarily used across the product, however additional font weights are available to be selectively used if needed.
|
|
589
589
|
|
|
590
|
-
| **Visual** |
|
|
591
|
-
|
|
|
592
|
-
|
|
|
593
|
-
|
|
|
594
|
-
|
|
|
595
|
-
|
|
|
596
|
-
|
|
|
597
|
-
|
|
|
590
|
+
| **Visual** | | **Variable** | | **Value** |
|
|
591
|
+
| ---------- | --- | -------------------- | --- | ------------------- |
|
|
592
|
+
| | | `fontWeightHeavy` | | `font-weight: 800;` |
|
|
593
|
+
| | | `fontWeightBold` | | `font-weight: 700;` |
|
|
594
|
+
| | | `fontWeightSemibold` | | `font-weight: 600;` |
|
|
595
|
+
| | | `fontWeightMedium` | | `font-weight: 500;` |
|
|
596
|
+
| | | `fontWeightRegular` | | `font-weight: 400;` |
|
|
597
|
+
| | | `fontWeightThin` | | `font-weight: 300;` |
|
|
598
598
|
|
|
599
599
|
### Header Variables
|
|
600
600
|
|
|
601
601
|
The width of the user's screen will determine the font values used for any given variable. Wide screens are 495px or wider; narrow screens are 494px or narrower.
|
|
602
602
|
|
|
603
|
-
| **Visual** |
|
|
604
|
-
|
|
|
605
|
-
|
|
|
606
|
-
|
|
|
607
|
-
|
|
|
608
|
-
|
|
|
609
|
-
|
|
|
610
|
-
|
|
|
611
|
-
|
|
|
603
|
+
| **Visual** | | **Variable** | | **Wide screens (≥495px)** | | **Narrow screens (<494px)** |
|
|
604
|
+
| ---------- | --- | ------------ | --- | ---------------------------------------------------------------------------- | --- | ---------------------------------------------------------------------------- |
|
|
605
|
+
| | | `siteTitle` | | `font-size: 51px;` `line-height: 63.8px;` `font-weight: fontWeightSemibold;` | | `font-size: 35px;` `line-height: 43.8px;` `font-weight: fontWeightSemibold;` |
|
|
606
|
+
| | | `h1` | | `font-size: 35px;` `line-height: 43.8px;` `font-weight: fontWeightSemibold;` | | `font-size: 24px;` `line-height: 38px;` `font-weight: fontWeightSemibold;` |
|
|
607
|
+
| | | `h2` | | `font-size: 24px;` `line-height: 36px;` `font-weight: fontWeightSemibold;` | | `font-size: 20px;` `line-height: 27px;` `font-weight: fontWeightSemibold;` |
|
|
608
|
+
| | | `h3` | | `font-size: 20px;` `line-height: 27px;` `font-weight: fontWeightSemibold;` | | `font-size: 18px;` `line-height: 26px;` `font-weight: fontWeightSemibold;` |
|
|
609
|
+
| | | `h4` | | `font-size: 17px;` `line-height: 24px;` `font-weight: fontWeightSemibold;` | | `font-size: 16px;` `line-height: 23px;` `font-weight: fontWeightSemibold;` |
|
|
610
|
+
| | | `h5` | | `font-size: 14px;` `line-height: 21px;` `font-weight: fontWeightSemibold;` | | `font-size: 14px;` `line-height: 21px;` `font-weight: fontWeightSemibold;` |
|
|
611
|
+
| | | `h6` | | `font-size: 12px;` `line-height: 18px;` `font-weight: fontWeightSemibold;` | | `font-size: 12px;` `line-height: 18px;` `font-weight: fontWeightSemibold;` |
|
|
612
612
|
|
|
613
613
|
### Code Variables
|
|
614
614
|
|
|
615
615
|
The width of the user's screen will determine the font values used for any given variable. Wide screens are 495px or wider; narrow screens are 494px or narrower.
|
|
616
616
|
|
|
617
|
-
| **Visual** |
|
|
618
|
-
|
|
|
619
|
-
|
|
|
617
|
+
| **Visual** | | **Variable** | | **Wide screens (≥495px)** | | **Narrow screens (<494px)** |
|
|
618
|
+
| ---------- | --- | ------------ | --- | ------------------------------------------------------------------------- | --- | --------------------------------------------------------------------------- |
|
|
619
|
+
| | | `code` | | `font-size: 16px;` `line-height: 28px;` `font-weight: fontWeightRegular;` | | `font-size: 10px;` `line-height: 19.3px;` `font-weight: fontWeightRegular;` |
|
|
620
620
|
|
|
621
621
|
### Sidebar Variables
|
|
622
622
|
|
|
623
623
|
The width of the user's screen will determine the font values used for any given variable. Wide screens are 495px or wider; narrow screens are 494px or narrower.
|
|
624
624
|
|
|
625
|
-
| **Visual** |
|
|
626
|
-
|
|
|
627
|
-
|
|
|
628
|
-
|
|
|
629
|
-
|
|
|
625
|
+
| **Visual** | | **Variable** | | **Wide screens (≥595px)** | | **Narrow screens (<594px)** |
|
|
626
|
+
| ---------- | --- | ------------------- | --- | --------------------------------------------------------------------------------------------------------- | --- | --------------------------------------------------------------------------------------------------------- |
|
|
627
|
+
| | | `fontSidebarHeader` | | `font-size: 17px;` `line-height: 29.8px;` `font-weight: fontWeightSemibold;` `text-transform: uppercase;` | | `font-size: 11px;` `line-height: 20.4px;` `font-weight: fontWeightSemibold;` `text-transform: uppercase;` |
|
|
628
|
+
| | | `fontSidebarText` | | `font-size: 14px;` `line-height: 24.5px;` `font-weight: fontWeightMedium;` | | `font-size: 9px;` `line-height: 15.8px;` `font-weight: fontWeightMedium;` |
|
|
629
|
+
| | | `fontSidebarCode` | | `font-size: 13px;` `line-height: 24.5px;` `font-weight: fontWeightMedium;` | | `font-size: 8.5px;` `line-height: 15.8px;` `font-weight: fontWeightMedium;` |
|
|
630
630
|
|
|
631
631
|
### Body Variables
|
|
632
632
|
|
|
@@ -634,14 +634,14 @@ The same type variables are used for body fonts on both wide and narrow screen w
|
|
|
634
634
|
|
|
635
635
|
`BodyM` is the primary font used for wide screens (495px and wider); `bodyS` is the primary font used for narrow screens (494px and narrower).
|
|
636
636
|
|
|
637
|
-
|
|
637
|
+
> **Warning:** `bodyXxs` is being deprecated and should not be used in new designs moving forward.
|
|
638
638
|
|
|
639
|
-
| **Visual** |
|
|
640
|
-
|
|
|
641
|
-
|
|
|
642
|
-
|
|
|
643
|
-
|
|
|
644
|
-
|
|
|
639
|
+
| **Visual** | | **Variable** | | **Value** |
|
|
640
|
+
| ---------- | --- | ------------ | --- | --------------------------------------------------------------------------- |
|
|
641
|
+
| | | `bodyM` | | `font-size: 17px;` `line-height: 25.5px;` `font-weight: fontWeightRegular;` |
|
|
642
|
+
| | | `bodyS` | | `font-size: 14px;` `line-height: 17.5px;` `font-weight: fontWeightRegular;` |
|
|
643
|
+
| | | `bodyXs` | | `font-size: 12px;` `line-height: 16.5px;` `font-weight: fontWeightRegular;` |
|
|
644
|
+
| | | `bodyXxs` | | `font-size: 9px;` `line-height: 15.8px;` `font-weight: fontWeightRegular;` |
|
|
645
645
|
|
|
646
646
|
---
|
|
647
647
|
|
|
@@ -651,59 +651,59 @@ Typography encompasses font style, appearance, and structure which together deli
|
|
|
651
651
|
|
|
652
652
|
Open Sans is the primary typeface to be used throughout product and marketing materials. Andale Mono should only be used when referring to code snippets.
|
|
653
653
|
|
|
654
|
-
| **Visual** |
|
|
655
|
-
|
|
|
656
|
-
|
|
|
657
|
-
|
|
|
658
|
-
|
|
|
654
|
+
| **Visual** | | **Typeface** | | **Usage** |
|
|
655
|
+
| ---------- | --- | ----------------- | --- | --------------------------------------------------------------------------------------------------------------------- |
|
|
656
|
+
| | | Open Sans (600) | | All headers throughout the product and marketing materials and emphasized body copy. |
|
|
657
|
+
| | | Open Sans (400) | | All body copy throughout the product and marketing materials. If emphasized copy is needed, use a font weight of 600. |
|
|
658
|
+
| | | Andale Mono (400) | | Use only when referring to code snippets. |
|
|
659
659
|
|
|
660
660
|
### Font Weights
|
|
661
661
|
|
|
662
662
|
Regular (400) and SemiBold (600) are the two font weights primarily used across the product, however additional font weights are available to be selectively used if needed.
|
|
663
663
|
|
|
664
|
-
| **Visual** |
|
|
665
|
-
|
|
|
666
|
-
|
|
|
667
|
-
|
|
|
668
|
-
|
|
|
669
|
-
|
|
|
670
|
-
|
|
|
664
|
+
| **Visual** | | **Variable** | | **Value** |
|
|
665
|
+
| ---------- | --- | -------------------- | --- | ------------------- |
|
|
666
|
+
| | | `fontWeightHeavy` | | `font-weight: 800;` |
|
|
667
|
+
| | | `fontWeightBold` | | `font-weight: 700;` |
|
|
668
|
+
| | | `fontWeightSemibold` | | `font-weight: 600;` |
|
|
669
|
+
| | | `fontWeightRegular` | | `font-weight: 400;` |
|
|
670
|
+
| | | `fontWeightThin` | | `font-weight: 300;` |
|
|
671
671
|
|
|
672
672
|
### Header Variables
|
|
673
673
|
|
|
674
674
|
<H1>, <H2>, <H3>, <H4>, <H5>, <H6>
|
|
675
675
|
|
|
676
|
-
| **Visual** |
|
|
677
|
-
|
|
|
678
|
-
|
|
|
679
|
-
|
|
|
680
|
-
|
|
|
681
|
-
|
|
|
682
|
-
|
|
|
683
|
-
|
|
|
684
|
-
|
|
|
685
|
-
|
|
|
676
|
+
| **Visual** | | **Variable** | | **Value** |
|
|
677
|
+
| ---------- | --- | ---------------- | --- | --------------------------------------------------------------------------------------------------- |
|
|
678
|
+
| | | `fontHeaderXxl` | | `font-size: 26px;` `line-height: 34px;` `letter-spacing: 0.3px;` `font-weight: fontWeightSemibold;` |
|
|
679
|
+
| | | `fontHeaderXl` | | `font-size: 22px;` `line-height: 30px;` `letter-spacing: 0.3px;` `font-weight: fontWeightSemibold;` |
|
|
680
|
+
| | | `fontHeaderL` | | `font-size: 18px;` `line-height: 24px;` `letter-spacing: 0.3px;` `font-weight: fontWeightSemibold;` |
|
|
681
|
+
| | | `fontHeaderM` | | `font-size: 16px;` `line-height: 22px;` `letter-spacing: 0.3px;` `font-weight: fontWeightSemibold;` |
|
|
682
|
+
| | | `fontHeaderS` | | `font-size: 14px;` `line-height: 20px;` `letter-spacing: 0.3px;` `font-weight: fontWeightSemibold;` |
|
|
683
|
+
| | | `fontHeaderXs` | | `font-size: 13px;` `line-height: 18px;` `letter-spacing: 0.3px;` `font-weight: fontWeightSemibold;` |
|
|
684
|
+
| | | `fontHeaderXxs` | | `font-size: 12px;` `line-height: 18px;` `letter-spacing: 0.3px;` `font-weight: fontWeightSemibold;` |
|
|
685
|
+
| | | `fontHeaderXxxs` | | `font-size: 11px;` `line-height: 16px;` `letter-spacing: 0.3px;` `font-weight: fontWeightSemibold;` |
|
|
686
686
|
|
|
687
687
|
### Body Variables
|
|
688
688
|
|
|
689
689
|
<p>
|
|
690
690
|
|
|
691
|
-
| **Visual** |
|
|
692
|
-
|
|
|
693
|
-
|
|
|
694
|
-
|
|
|
695
|
-
|
|
|
696
|
-
|
|
|
697
|
-
|
|
|
698
|
-
|
|
|
691
|
+
| **Visual** | | **Variable** | | **Value** |
|
|
692
|
+
| ---------- | --- | -------------- | --- | -------------------------------------------------------------------------------------------------- |
|
|
693
|
+
| | | `fontBodyL` | | `font-size: 18px;` `line-height: 28px;` `letter-spacing: 0.3px;` `font-weight: fontWeightRegular;` |
|
|
694
|
+
| | | `fontBodyM` | | `font-size: 16px;` `line-height: 26px;` `letter-spacing: 0.3px;` `font-weight: fontWeightRegular;` |
|
|
695
|
+
| | | `fontBodyS` | | `font-size: 14px;` `line-height: 24px;` `letter-spacing: 0.3px;` `font-weight: fontWeightRegular;` |
|
|
696
|
+
| | | `fontBodyXs` | | `font-size: 13px;` `line-height: 20px;` `letter-spacing: 0.3px;` `font-weight: fontWeightRegular;` |
|
|
697
|
+
| | | `fontBodyXxs` | | `font-size: 12px;` `line-height: 18px;` `letter-spacing: 0.3px;` `font-weight: fontWeightRegular;` |
|
|
698
|
+
| | | `fontBodyXxxs` | | `font-size: 11px;` `line-height: 16px;` `letter-spacing: 0.3px;` `font-weight: fontWeightRegular;` |
|
|
699
699
|
|
|
700
700
|
### All Caps Variables
|
|
701
701
|
|
|
702
|
-
| **Visual** |
|
|
703
|
-
|
|
|
704
|
-
|
|
|
705
|
-
|
|
|
706
|
-
|
|
|
702
|
+
| **Visual** | | **Variable** | | **Value** |
|
|
703
|
+
| ---------- | --- | --------------- | --- | ------------------------------------------------------------------------------------------------------------------------------ |
|
|
704
|
+
| | | `fontCapsXxs` | | `font-size: 12px;` `line-height: 18px;` `letter-spacing: 1px;` `font-weight: fontWeightSemibold;` `text-transform: uppercase;` |
|
|
705
|
+
| | | `fontCapsXxxs` | | `font-size: 11px;` `line-height: 16px;` `letter-spacing: 1px;` `font-weight: fontWeightSemibold;` `text-transform: uppercase;` |
|
|
706
|
+
| | | `fontCapsXxxxs` | | `font-size: 10px;` `line-height: 14px;` `letter-spacing: 1px;` `font-weight: fontWeightSemibold;` `text-transform: uppercase;` |
|
|
707
707
|
|
|
708
708
|
---
|
|
709
709
|
|
|
@@ -713,57 +713,56 @@ Typography encompasses font style, appearance, and structure which together deli
|
|
|
713
713
|
|
|
714
714
|
Open Sans is the primary typeface to be used throughout product and marketing materials. Andale Mono should only be used when referring to code snippets.
|
|
715
715
|
|
|
716
|
-
| **Visual** |
|
|
717
|
-
|
|
|
718
|
-
|
|
|
719
|
-
|
|
|
720
|
-
|
|
|
716
|
+
| **Visual** | | **Typeface** | | **Usage** |
|
|
717
|
+
| ---------- | --- | ----------------- | --- | --------------------------------------------------------------------------------------------------------------------- |
|
|
718
|
+
| | | Open Sans (600) | | All headers throughout the product and marketing materials and emphasized body copy. |
|
|
719
|
+
| | | Open Sans (400) | | All body copy throughout the product and marketing materials. If emphasized copy is needed, use a font weight of 600. |
|
|
720
|
+
| | | Andale Mono (400) | | Use only when referring to code snippets. |
|
|
721
721
|
|
|
722
722
|
### Font Weights
|
|
723
723
|
|
|
724
724
|
Regular (400) and SemiBold (600) are the two font weights primarily used across the product, however additional font weights are available to be selectively used if needed.
|
|
725
725
|
|
|
726
|
-
| **Visual** |
|
|
727
|
-
|
|
|
728
|
-
|
|
|
729
|
-
|
|
|
730
|
-
|
|
|
731
|
-
|
|
|
732
|
-
|
|
|
726
|
+
| **Visual** | | **Variable** | | **Value** |
|
|
727
|
+
| ---------- | --- | -------------------- | --- | ------------------- |
|
|
728
|
+
| | | `fontWeightHeavy` | | `font-weight: 800;` |
|
|
729
|
+
| | | `fontWeightBold` | | `font-weight: 700;` |
|
|
730
|
+
| | | `fontWeightSemibold` | | `font-weight: 600;` |
|
|
731
|
+
| | | `fontWeightRegular` | | `font-weight: 400;` |
|
|
732
|
+
| | | `fontWeightThin` | | `font-weight: 300;` |
|
|
733
733
|
|
|
734
734
|
### Header Variables
|
|
735
735
|
|
|
736
736
|
<H1>, <H2>, <H3>, <H4>, <H5>, <H6>
|
|
737
737
|
|
|
738
|
-
| **Visual** |
|
|
739
|
-
|
|
|
740
|
-
|
|
|
741
|
-
|
|
|
742
|
-
|
|
|
743
|
-
|
|
|
744
|
-
|
|
|
745
|
-
|
|
|
746
|
-
|
|
|
747
|
-
|
|
|
738
|
+
| **Visual** | | **Variable** | | **Value** |
|
|
739
|
+
| ---------- | --- | ---------------- | --- | --------------------------------------------------------------------------------------------------- |
|
|
740
|
+
| | | `fontHeaderXxl` | | `font-size: 26px;` `line-height: 34px;` `letter-spacing: 0.3px;` `font-weight: fontWeightSemibold;` |
|
|
741
|
+
| | | `fontHeaderXl` | | `font-size: 22px;` `line-height: 30px;` `letter-spacing: 0.3px;` `font-weight: fontWeightSemibold;` |
|
|
742
|
+
| | | `fontHeaderL` | | `font-size: 18px;` `line-height: 24px;` `letter-spacing: 0.3px;` `font-weight: fontWeightSemibold;` |
|
|
743
|
+
| | | `fontHeaderM` | | `font-size: 16px;` `line-height: 22px;` `letter-spacing: 0.3px;` `font-weight: fontWeightSemibold;` |
|
|
744
|
+
| | | `fontHeaderS` | | `font-size: 14px;` `line-height: 20px;` `letter-spacing: 0.3px;` `font-weight: fontWeightSemibold;` |
|
|
745
|
+
| | | `fontHeaderXs` | | `font-size: 13px;` `line-height: 18px;` `letter-spacing: 0.3px;` `font-weight: fontWeightSemibold;` |
|
|
746
|
+
| | | `fontHeaderXxs` | | `font-size: 12px;` `line-height: 18px;` `letter-spacing: 0.3px;` `font-weight: fontWeightSemibold;` |
|
|
747
|
+
| | | `fontHeaderXxxs` | | `font-size: 11px;` `line-height: 16px;` `letter-spacing: 0.3px;` `font-weight: fontWeightSemibold;` |
|
|
748
748
|
|
|
749
749
|
### Body Variables
|
|
750
750
|
|
|
751
751
|
<p>
|
|
752
752
|
|
|
753
|
-
| **Visual** |
|
|
754
|
-
|
|
|
755
|
-
|
|
|
756
|
-
|
|
|
757
|
-
|
|
|
758
|
-
|
|
|
759
|
-
|
|
|
760
|
-
|
|
|
753
|
+
| **Visual** | | **Variable** | | **Value** |
|
|
754
|
+
| ---------- | --- | -------------- | --- | -------------------------------------------------------------------------------------------------- |
|
|
755
|
+
| | | `fontBodyL` | | `font-size: 18px;` `line-height: 28px;` `letter-spacing: 0.3px;` `font-weight: fontWeightRegular;` |
|
|
756
|
+
| | | `fontBodyM` | | `font-size: 16px;` `line-height: 26px;` `letter-spacing: 0.3px;` `font-weight: fontWeightRegular;` |
|
|
757
|
+
| | | `fontBodyS` | | `font-size: 14px;` `line-height: 24px;` `letter-spacing: 0.3px;` `font-weight: fontWeightRegular;` |
|
|
758
|
+
| | | `fontBodyXs` | | `font-size: 13px;` `line-height: 20px;` `letter-spacing: 0.3px;` `font-weight: fontWeightRegular;` |
|
|
759
|
+
| | | `fontBodyXxs` | | `font-size: 12px;` `line-height: 18px;` `letter-spacing: 0.3px;` `font-weight: fontWeightRegular;` |
|
|
760
|
+
| | | `fontBodyXxxs` | | `font-size: 11px;` `line-height: 16px;` `letter-spacing: 0.3px;` `font-weight: fontWeightRegular;` |
|
|
761
761
|
|
|
762
762
|
### All Caps Variables
|
|
763
763
|
|
|
764
|
-
| **Visual** |
|
|
765
|
-
|
|
|
766
|
-
|
|
|
767
|
-
|
|
|
768
|
-
|
|
|
769
|
-
|
|
764
|
+
| **Visual** | | **Variable** | | **Value** |
|
|
765
|
+
| ---------- | --- | --------------- | --- | ------------------------------------------------------------------------------------------------------------------------------ |
|
|
766
|
+
| | | `fontCapsXxs` | | `font-size: 12px;` `line-height: 18px;` `letter-spacing: 1px;` `font-weight: fontWeightSemibold;` `text-transform: uppercase;` |
|
|
767
|
+
| | | `fontCapsXxxs` | | `font-size: 11px;` `line-height: 16px;` `letter-spacing: 1px;` `font-weight: fontWeightSemibold;` `text-transform: uppercase;` |
|
|
768
|
+
| | | `fontCapsXxxxs` | | `font-size: 10px;` `line-height: 14px;` `letter-spacing: 1px;` `font-weight: fontWeightSemibold;` `text-transform: uppercase;` |
|