Design Tokens
Status levels
requested -
Not available, yet. More information related to the experiment might be available in a feature request ticket.
experimental -
Used in experiments to see how they pan out. More information related to the experiment might be available in a feature request ticket.
proposed -
Contributed experiments show this token works well. The concept is tested, the name might need more research. Renaming can be done in patch releases.
unstable -
Used in alpha and beta releases before 1.0.0. At this stage, the name less likely to change. Renaming is a minor change.
stable Available in a stable >=1.0.0 release.
deprecated -
Recommended to stop using, or replace with alternative token for applications that are still maintained. Renaming is a major change. In case of a deprecation in a stable release, the token is likely to become unavailable in the next major release. In case of deprecation in an unstable release, removal can be expected in any upcoming minor release.
removed This token was available previously, but not anymore in recent releases.
rejected This token was experimentally available previously, but not in any stable releases.
Overview
| component | name | status | summary |
|---|---|---|---|
| Common Color | nih-color-feedback-danger |
Traffic light red | |
| Common Color | nih-color-feedback-warning |
Traffic light amber | |
| Common Color | nih-color-feedback-safe |
Traffic light green | |
| Common Color | nih-color-feedback-info |
Expectation is this color is implemented as info sign blue | |
| Common Color | nih-color-feedback-neutral |
Alternative to nih-color-feedback-info, not necessarily blue |
|
| Common Color | nih-document-background-color |
Document root background color | |
| Common Color | nih-document-color |
Document root text color | |
| Common Color | nih-application-background-color |
Application root background color | |
| Common Color | nih-application-color |
Application root text color | |
| Common Color | nih-border-color-subtle |
Low contrast border color | |
| Common Color | nih-background-color-subtle |
Low contrast background color | |
| Dataviz Color | nih-color-dataviz-1 |
Dataviz color #1. Contrasting color for data visualizations (charts, tags, etc.) | |
| Dataviz Color | nih-color-dataviz-2 |
Dataviz color #2 | |
| Dataviz Color | nih-color-dataviz-3 |
Dataviz color #3 | |
| Dataviz Color | nih-color-dataviz-4 |
Dataviz color #4 | |
| Dataviz Color | nih-color-dataviz-5 |
Dataviz color #5 | |
| Dataviz Color | nih-color-dataviz-6 |
Dataviz color #6 | |
| Dataviz Color | nih-color-dataviz-7 |
Dataviz color #7 | |
| Dataviz Color | nih-color-dataviz-8 |
Dataviz color #8 | |
| Dataviz Color | nih-color-dataviz-9 |
Dataviz color #9 | |
| Dataviz Color | nih-color-dataviz-10 |
Dataviz color #10 | |
| Dataviz Color | nih-color-dataviz-11 |
Dataviz color #11 | |
| Dataviz Color | nih-color-dataviz-12 |
Dataviz color #12 | |
| Dataviz Color | nih-color-dataviz-13 |
Dataviz color #13 | |
| Dataviz Color | nih-color-dataviz-14 |
Dataviz color #14 | |
| Dataviz Color | nih-color-dataviz-15 |
Dataviz color #15 | |
| Dataviz Color | nih-color-dataviz-16 |
Dataviz color #16 | |
| Dataviz Color | nih-color-dataviz-17 |
Dataviz color #17 | |
| Dataviz Color | nih-color-dataviz-18 |
Dataviz color #18 | |
| Dataviz Color | nih-color-dataviz-19 |
Dataviz color #19 | |
| Dataviz Color | nih-color-dataviz-20 |
Dataviz color #20 | |
| Link | nih-link-color |
Default link color | |
| Link | nih-link-color-visited |
Visited state of link | |
| Link | nih-link-color-active |
Active state of link | |
| Common Typography | nih-text-max-width |
Maximum line length for improved readability | |
| Common Typography | nih-font-family-sans-serif |
Default built-in font for sans-serif styling | |
| Common Typography | nih-font-family-sans-serif-webfont |
Default web font for sans-serif styling | |
| Common Typography | nih-font-family-serif |
Default built-in font for serif styling | |
| Common Typography | nih-font-family-serif-webfont |
Default web font for serif styling | |
| Common Typography | nih-font-family-monospace |
Default built-in font for monospace styling | |
| Common Typography | nih-font-family-monospace-webfont |
Default web font for monospace styling | |
| Code (abstract) | nih-code-font-family |
Font family for code snippets | |
nih-main-font-size |
Default font size (should we call it main or default?) |
||
nih-main-line-height |
Default line height. Perhaps read-only when using baseline grid | ||
| Heading (abstract) | nih-heading-color |
Text color of all heading levels, unless specified at heading level | |
| Heading (abstract) | nih-heading-font-weight |
Heading font weight | |
| Heading (abstract) | nih-heading-font-family |
Heading font family | |
| Heading 1 | nih-heading-1-color |
Heading 1 text color, subset of nih-heading-color |
|
| Heading 2 | nih-heading-2-color |
Heading 2 text color, subset of nih-heading-color |
|
| Heading 3 | nih-heading-3-color |
Heading 3 text color, subset of nih-heading-color |
|
| Heading 4 | nih-heading-4-color |
Heading 4 text color, subset of nih-heading-color |
|
| Heading 5 | nih-heading-5-color |
Heading 5 text color, subset of nih-heading-color |
|
| Heading 6 | nih-heading-6-color |
Heading 6 text color, subset of nih-heading-color |
|
| Heading 1 | nih-heading-1-line-height |
Heading 1 line height: perhaps read-only when using baseline grid | |
| Heading 2 | nih-heading-2-line-height |
Heading 2 line height: perhaps read-only when using baseline grid | |
| Heading 3 | nih-heading-3-line-height |
Heading 3 line height: perhaps read-only when using baseline grid | |
| Heading 4 | nih-heading-4-line-height |
Heading 4 line height: perhaps read-only when using baseline grid | |
| Heading 5 | nih-heading-5-line-height |
Heading 5 line height: perhaps read-only when using baseline grid | |
| Heading 6 | nih-heading-6-line-height |
Heading 6 line height: perhaps read-only when using baseline grid | |
| Heading 1 | nih-heading-1-font-size |
Heading 1 font size | |
| Heading 2 | nih-heading-2-font-size |
Heading 2 font size | |
| Heading 3 | nih-heading-3-font-size |
Heading 3 font size | |
| Heading 4 | nih-heading-4-font-size |
Heading 4 font size | |
| Heading 5 | nih-heading-5-font-size |
Heading 5 font size | |
| Heading 6 | nih-heading-6-font-size |
Heading 6 font size | |
| Heading 1 | nih-heading-1-font-weight |
Heading 1 font-weight. Subset of nih-heading-font-weight. |
|
| Heading 2 | nih-heading-2-font-weight |
Heading 2 font-weight. Subset of nih-heading-font-weight. |
|
| Heading 3 | nih-heading-3-font-weight |
Heading 3 font-weight. Subset of nih-heading-font-weight. |
|
| Heading 4 | nih-heading-4-font-weight |
Heading 4 font-weight. Subset of nih-heading-font-weight. |
|
| Heading 5 | nih-heading-5-font-weight |
Heading 5 font-weight. Subset of nih-heading-font-weight. |
|
| Heading 6 | nih-heading-6-font-weight |
Heading 6 font-weight. Subset of nih-heading-font-weight. |
|
| Intro Paragraph | nih-intro-paragraph-font-weight |
Intro paragraph font weight | |
| Intro Paragraph | nih-intro-paragraph-font-size |
Intro paragraph font size | |
| Intro Paragraph | nih-intro-paragraph-line-height |
Intro paragraph line height | |
| Table Heading | nih-table-heading-text-transform |
Table heading (thead) text transformation |
|
| Table Heading | nih-table-heading-font-weight |
Table heading (thead) font size |
|
| Table Header | nih-table-header-font-weight |
Table header (th) font size |
|
| Action (abstract) | nih-color-action-primary |
Primary action color | |
| Action (abstract) | nih-color-action-primary-hover |
Primary action color - hover state | |
| Action (abstract) | nih-color-action-primary-active |
Primary action color - active state | |
| Action (abstract) | nih-color-action-primary-disabled |
Primary action color - disabled state | |
| Action (abstract) | nih-color-action-secondary |
Secondary action color | |
| Action (abstract) | nih-color-action-secondary-hover |
Secondary action color - hover state | |
| Action (abstract) | nih-color-action-secondary-active |
Secondary action color - active state | |
| Action (abstract) | nih-color-action-secondary-disabled |
Secondary action color - disabled state |