@czi-sds/mcp 0.2.2 → 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-cache.json +5195 -0
- package/data/zeroheight-exports/Accordion.md +717 -0
- package/data/zeroheight-exports/Banner.md +599 -0
- package/data/zeroheight-exports/Borders.md +117 -0
- package/data/zeroheight-exports/Buttons.md +2305 -0
- package/data/zeroheight-exports/Callout.md +778 -0
- package/data/zeroheight-exports/Colors.md +632 -0
- package/data/zeroheight-exports/Content-Card.md +161 -0
- package/data/zeroheight-exports/Contributing-to-SDS.md +98 -0
- package/data/zeroheight-exports/Control-Inputs.md +2121 -0
- package/data/zeroheight-exports/Corners.md +111 -0
- package/data/zeroheight-exports/Cover-page.md +3 -0
- package/data/zeroheight-exports/Dialog.md +1191 -0
- package/data/zeroheight-exports/Downloads.md +120 -0
- package/data/zeroheight-exports/Drop-Shadows.md +79 -0
- package/data/zeroheight-exports/Dropdown-Input.md +1180 -0
- package/data/zeroheight-exports/Dropdown-Menu.md +3883 -0
- package/data/zeroheight-exports/Element-Status-Tracker.md +267 -0
- package/data/zeroheight-exports/Field-Inputs.md +984 -0
- package/data/zeroheight-exports/Filters.md +888 -0
- package/data/zeroheight-exports/Getting-Started.md +1159 -0
- package/data/zeroheight-exports/Hero.md +262 -0
- package/data/zeroheight-exports/Icons.md +431 -0
- package/data/zeroheight-exports/Intent.md +46 -0
- package/data/zeroheight-exports/Introduction-to-Bases.md +35 -0
- package/data/zeroheight-exports/Introduction-to-Cells.md +35 -0
- package/data/zeroheight-exports/Introduction-to-DNA.md +35 -0
- package/data/zeroheight-exports/Introduction-to-Genes.md +35 -0
- package/data/zeroheight-exports/Introduction.md +115 -0
- package/data/zeroheight-exports/Link.md +386 -0
- package/data/zeroheight-exports/Lists.md +632 -0
- package/data/zeroheight-exports/Loading-Indicator.md +37 -0
- package/data/zeroheight-exports/Navigation.md +874 -0
- package/data/zeroheight-exports/Notification.md +888 -0
- package/data/zeroheight-exports/Panel.md +978 -0
- package/data/zeroheight-exports/README.md +124 -0
- package/data/zeroheight-exports/Responsive-Design.md +278 -0
- package/data/zeroheight-exports/Search-Input.md +53 -0
- package/data/zeroheight-exports/Search.md +592 -0
- package/data/zeroheight-exports/Segmented-Control.md +584 -0
- package/data/zeroheight-exports/Spacing.md +297 -0
- package/data/zeroheight-exports/Table.md +4944 -0
- package/data/zeroheight-exports/Tabs.md +801 -0
- package/data/zeroheight-exports/Tags.md +1055 -0
- package/data/zeroheight-exports/Text-Link.md +184 -0
- package/data/zeroheight-exports/Theming.md +332 -0
- package/data/zeroheight-exports/Tooltips.md +1580 -0
- package/data/zeroheight-exports/Typography.md +768 -0
- package/dist/stdio.js +193 -93
- package/package.json +4 -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
|
@@ -0,0 +1,768 @@
|
|
|
1
|
+
# Typography
|
|
2
|
+
|
|
3
|
+
Typography encompasses font style, appearance, and structure which together deliver a consistent aesthetic while providing easily readable copy
|
|
4
|
+
|
|
5
|
+
## Wide
|
|
6
|
+
|
|
7
|
+
### Typefaces
|
|
8
|
+
|
|
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
|
+
|
|
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
|
+
|
|
18
|
+
### Font Weights
|
|
19
|
+
|
|
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
|
+
|
|
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
|
+
|
|
30
|
+
---
|
|
31
|
+
|
|
32
|
+
### Typography Variables
|
|
33
|
+
|
|
34
|
+
#### TItle
|
|
35
|
+
|
|
36
|
+
For use with Hero component.
|
|
37
|
+
|
|
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
|
+
|
|
57
|
+
#### Header
|
|
58
|
+
|
|
59
|
+
For use with `<H1>`, `<H2>`, `<H3>`, `<H4>`, `<H5>`, `<H6>` tags.
|
|
60
|
+
|
|
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
|
+
|
|
110
|
+
#### Body
|
|
111
|
+
|
|
112
|
+
For use with `<p>` tags.
|
|
113
|
+
|
|
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
|
+
|
|
163
|
+
#### All-caps
|
|
164
|
+
|
|
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
|
+
|
|
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
|
+
|
|
186
|
+
#### Tabular
|
|
187
|
+
|
|
188
|
+
Use when there is a need for numbers to be an equal width such as in Tables.
|
|
189
|
+
|
|
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
|
+
|
|
207
|
+
#### Code
|
|
208
|
+
|
|
209
|
+
Use only when referring to code snippets.
|
|
210
|
+
|
|
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
|
+
|
|
228
|
+
## Narrow
|
|
229
|
+
|
|
230
|
+
### Typefaces
|
|
231
|
+
|
|
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
|
+
|
|
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
|
+
|
|
241
|
+
### Font Weights
|
|
242
|
+
|
|
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
|
+
|
|
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
|
+
|
|
253
|
+
---
|
|
254
|
+
|
|
255
|
+
### Typography Variables
|
|
256
|
+
|
|
257
|
+
#### TItle
|
|
258
|
+
|
|
259
|
+
For use with Hero component.
|
|
260
|
+
|
|
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
|
+
|
|
280
|
+
#### Header
|
|
281
|
+
|
|
282
|
+
For use with `<H1>`, `<H2>`, `<H3>`, `<H4>`, `<H5>`, `<H6>` tags.
|
|
283
|
+
|
|
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
|
+
|
|
333
|
+
#### Body
|
|
334
|
+
|
|
335
|
+
For use with `<p>` tags.
|
|
336
|
+
|
|
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
|
+
|
|
386
|
+
#### All-caps
|
|
387
|
+
|
|
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
|
+
|
|
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
|
+
|
|
409
|
+
#### Tabular
|
|
410
|
+
|
|
411
|
+
Use when there is a need for numbers to be an equal width such as in Tables.
|
|
412
|
+
|
|
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
|
+
|
|
430
|
+
#### Code
|
|
431
|
+
|
|
432
|
+
Use only when referring to code snippets.
|
|
433
|
+
|
|
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
|
+
|
|
451
|
+
## Code
|
|
452
|
+
|
|
453
|
+
**Using SDS Typography Variables with Tailwind CSS**
|
|
454
|
+
|
|
455
|
+
The SDS design tokens for Tailwind are exported via **Style Dictionary** and can be found in the tailwind.json file. These tokens have been updated to adhere to Tailwind’s configuration standards and follow the correct format.
|
|
456
|
+
|
|
457
|
+
The typography variables in the sds tailwind.json file are defined as objects with detailed CSS properties, for example:
|
|
458
|
+
|
|
459
|
+
```json
|
|
460
|
+
{
|
|
461
|
+
"fontFamily": {
|
|
462
|
+
"sds-body": "\"Inter\", sans-serif",
|
|
463
|
+
...
|
|
464
|
+
},
|
|
465
|
+
"fontSize": {
|
|
466
|
+
"sds-body-xxxs-400-narrow": "12px",
|
|
467
|
+
"sds-body-xxxs-400-wide": "11px",
|
|
468
|
+
...
|
|
469
|
+
},
|
|
470
|
+
"fontVariantNumeric": {
|
|
471
|
+
"sds-body-xxxs-400-narrow": "normal",
|
|
472
|
+
"sds-body-xxxs-400-wide": "normal",
|
|
473
|
+
...
|
|
474
|
+
},
|
|
475
|
+
"letterSpacing": {
|
|
476
|
+
"sds-body-xxxs-400-narrow": "0.1px",
|
|
477
|
+
"sds-body-xxxs-400-wide": "0.1px",
|
|
478
|
+
...
|
|
479
|
+
},
|
|
480
|
+
"lineHeight": {
|
|
481
|
+
"sds-body-xxxs-400-narrow": "18px",
|
|
482
|
+
"sds-body-xxxs-400-wide": "16px",
|
|
483
|
+
...
|
|
484
|
+
},
|
|
485
|
+
"textTransform": {
|
|
486
|
+
"sds-body-xxxs-400-narrow": "none",
|
|
487
|
+
"sds-body-xxxs-400-wide": "none",
|
|
488
|
+
...
|
|
489
|
+
},
|
|
490
|
+
"typography": {
|
|
491
|
+
"sds-body-xxxs-400-narrow": {
|
|
492
|
+
"css": {
|
|
493
|
+
"fontFamily": "Inter, sans-serif",
|
|
494
|
+
"fontSize": "12px",
|
|
495
|
+
"fontStyle": "normal",
|
|
496
|
+
"fontVariantNumeric": "normal",
|
|
497
|
+
"fontWeight": "400",
|
|
498
|
+
"letterSpacing": "0.1px",
|
|
499
|
+
"lineHeight": "18px",
|
|
500
|
+
"textTransform": "none"
|
|
501
|
+
}
|
|
502
|
+
},
|
|
503
|
+
...
|
|
504
|
+
}
|
|
505
|
+
}
|
|
506
|
+
```
|
|
507
|
+
|
|
508
|
+
**Using Font Variables**
|
|
509
|
+
|
|
510
|
+
To use these variables, import them into your Tailwind configuration file.
|
|
511
|
+
|
|
512
|
+
```js
|
|
513
|
+
const sds = require("@czi-sds/components/dist/tailwind.json");
|
|
514
|
+
|
|
515
|
+
module.exports = {
|
|
516
|
+
theme: {
|
|
517
|
+
extend: {
|
|
518
|
+
fontFamily: sds.fontFamily,
|
|
519
|
+
fontSize: sds.fontSize,
|
|
520
|
+
lineHeight: sds.lineHeight,
|
|
521
|
+
letterSpacing: sds.letterSpacing,
|
|
522
|
+
textTransform: sds.textTransform,
|
|
523
|
+
...
|
|
524
|
+
},
|
|
525
|
+
},
|
|
526
|
+
};
|
|
527
|
+
```
|
|
528
|
+
|
|
529
|
+
and use them within the tailwind classes to achieve the desired typography styles:
|
|
530
|
+
|
|
531
|
+
```tsx
|
|
532
|
+
<div class="font-sds-header text-sds-header-l-600-wide leading-sds-header-l-600-wide">
|
|
533
|
+
<p>This text uses the SDS header style.</p>
|
|
534
|
+
</div>
|
|
535
|
+
```
|
|
536
|
+
|
|
537
|
+
**Using Typography Styles**
|
|
538
|
+
|
|
539
|
+
Each typography variable includes properties such as fontFamily, fontSize, lineHeight, and others to define a complete typographic style.
|
|
540
|
+
|
|
541
|
+
To utilize SDS typography variables in your Tailwind CSS setup, follow these steps:
|
|
542
|
+
|
|
543
|
+
1. **Set Up Your Tailwind Configuration**
|
|
544
|
+
|
|
545
|
+
To integrate SDS typography variables, import the tailwind.json file from SDS into your tailwind.config.js file:
|
|
546
|
+
|
|
547
|
+
```js
|
|
548
|
+
const sds = require("@czi-sds/components/dist/tailwind.json");
|
|
549
|
+
const typography = require("@tailwindcss/typography");
|
|
550
|
+
|
|
551
|
+
module.exports = {
|
|
552
|
+
theme: {
|
|
553
|
+
extend: {
|
|
554
|
+
typography: sds.typography, // Add the imported typography variables
|
|
555
|
+
},
|
|
556
|
+
},
|
|
557
|
+
plugins: [typography], // Ensure the typography plugin is included
|
|
558
|
+
};
|
|
559
|
+
```
|
|
560
|
+
|
|
561
|
+
1. **Apply SDS Typography in Components**
|
|
562
|
+
|
|
563
|
+
Once the typography variables are integrated, you can apply them in your components using Tailwind’s prose class. To apply a specific SDS typography style, use the corresponding `prose-*` variant:
|
|
564
|
+
|
|
565
|
+
```tsx
|
|
566
|
+
<div class="prose prose-sds-body-xxxs-400-narrow">
|
|
567
|
+
<p>This text uses the custom typography style for narrow body text.</p>
|
|
568
|
+
</div>
|
|
569
|
+
```
|
|
570
|
+
|
|
571
|
+
---
|
|
572
|
+
|
|
573
|
+
Typography encompasses font style, appearance, and structure which together deliver a consistent aesthetic while providing easily readable copy.
|
|
574
|
+
|
|
575
|
+
### Typefaces
|
|
576
|
+
|
|
577
|
+
Barlow is the primary typeface to be used throughout the product. JetBrains Mono should only be used when referring to code snippets.
|
|
578
|
+
|
|
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
|
+
|
|
586
|
+
### Font Weights
|
|
587
|
+
|
|
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
|
+
|
|
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
|
+
|
|
599
|
+
### Header Variables
|
|
600
|
+
|
|
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
|
+
|
|
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
|
+
|
|
613
|
+
### Code Variables
|
|
614
|
+
|
|
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
|
+
|
|
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
|
+
|
|
621
|
+
### Sidebar Variables
|
|
622
|
+
|
|
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
|
+
|
|
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
|
+
|
|
631
|
+
### Body Variables
|
|
632
|
+
|
|
633
|
+
The same type variables are used for body fonts on both wide and narrow screen widths. For this reason, screen width does not alter the font values used; simply use the variable corresponding to the font size needed.
|
|
634
|
+
|
|
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
|
+
|
|
637
|
+
> **Warning:** `bodyXxs` is being deprecated and should not be used in new designs moving forward.
|
|
638
|
+
|
|
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
|
+
|
|
646
|
+
---
|
|
647
|
+
|
|
648
|
+
Typography encompasses font style, appearance, and structure which together deliver a consistent aesthetic while providing easily readable copy.
|
|
649
|
+
|
|
650
|
+
### Typefaces
|
|
651
|
+
|
|
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
|
+
|
|
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
|
+
|
|
660
|
+
### Font Weights
|
|
661
|
+
|
|
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
|
+
|
|
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
|
+
|
|
672
|
+
### Header Variables
|
|
673
|
+
|
|
674
|
+
<H1>, <H2>, <H3>, <H4>, <H5>, <H6>
|
|
675
|
+
|
|
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
|
+
|
|
687
|
+
### Body Variables
|
|
688
|
+
|
|
689
|
+
<p>
|
|
690
|
+
|
|
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
|
+
|
|
700
|
+
### All Caps Variables
|
|
701
|
+
|
|
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
|
+
|
|
708
|
+
---
|
|
709
|
+
|
|
710
|
+
Typography encompasses font style, appearance, and structure which together deliver a consistent aesthetic while providing easily readable copy.
|
|
711
|
+
|
|
712
|
+
### Typefaces
|
|
713
|
+
|
|
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
|
+
|
|
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
|
+
|
|
722
|
+
### Font Weights
|
|
723
|
+
|
|
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
|
+
|
|
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
|
+
|
|
734
|
+
### Header Variables
|
|
735
|
+
|
|
736
|
+
<H1>, <H2>, <H3>, <H4>, <H5>, <H6>
|
|
737
|
+
|
|
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
|
+
|
|
749
|
+
### Body Variables
|
|
750
|
+
|
|
751
|
+
<p>
|
|
752
|
+
|
|
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
|
+
|
|
762
|
+
### All Caps Variables
|
|
763
|
+
|
|
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;` |
|