Foundations
Colours
Every colour in the interface comes from a semantic token that names its role. When brand or mode changes, the values change and the roles stay the same.
How it works
Section titled “How it works”Colours are defined in three layers:
- Raw colours: An achromatic neutral ramp (
neutral.0…neutral.1000, includingneutral.450for input borders), seven pastel ramps (red, orange, green, blue, violet, teal, pink) and brand-specific ramps. Components and screens never use them directly. - Semantic tokens: Say what a colour is for:
color-surface-raisedis a raised surface,color-text-subtleis secondary text. The tokens on this page are these. - Component tokens: Sizes for one component only, such as
button-height-md.
One CSS file is built per brand and mode. The data-brand and data-theme attributes on the page root choose which one applies. The default pack is neutral: the primary action is near-black in light mode and near-white in dark mode; the brand colour shows in badges, accents and the brand tone. appearance.primary: brand in a brand file turns primary actions to the brand colour (the optional bigbang pack does this). The tables below show the selected brand’s values; the sample swatches follow the page’s current mode.
Light mode
surface-defaultsurface-raisedsurface-sunkentext-defaulttext-subtleborder-defaultaction-primary-defaultstatus-success-emphasisstatus-danger-emphasis
Dark mode
surface-defaultsurface-raisedsurface-sunkentext-defaulttext-subtleborder-defaultaction-primary-defaultstatus-success-emphasisstatus-danger-emphasis
Surfaces
Section titled “Surfaces”Backgrounds of the page and its layers. surface-default is the page itself; cards and panels stand out with surface-raised, and layer-1…layer-3 separate nested regions. In light mode the page is a light grey and cards, popups and inputs are white on it; in dark mode the page is a soft dark grey, never pure black, and cards are one step lighter.
| Token | Sample | Light mode | Dark mode |
|---|---|---|---|
--bigbang-color-surface-default | #f7f7f7#f7f7f7#f7f7f7 | #1e1e1e#1e1e1e#1e1e1e | |
--bigbang-color-surface-layer-1 | #f5f5f5#f5f5f5#f5f5f5 | #262626#262626#262626 | |
--bigbang-color-surface-layer-2 | #ededed#ededed#ededed | #303030#303030#303030 | |
--bigbang-color-surface-layer-3 | #e5e5e5#e5e5e5#e5e5e5 | #404040#404040#404040 | |
--bigbang-color-surface-raised | #ffffff#ffffff#ffffff | #262626#262626#262626 | |
--bigbang-color-surface-sunken | #f5f5f5#f5f5f5#f5f5f5 | #171717#171717#171717 | |
--bigbang-color-surface-hovered | #f5f5f5#f5f5f5#f5f5f5 | #303030#303030#303030 | |
--bigbang-color-surface-selected | #edf5f8#ededed#ededed | #092932#404040#404040 | |
--bigbang-color-surface-disabled | #f5f5f5#f5f5f5#f5f5f5 | #303030#303030#303030 | |
--bigbang-color-surface-inverse | #171717#171717#171717 | #fafafa#fafafa#fafafa | |
--bigbang-color-surface-brand | #146d83#171717#171717 | #46a0ba#e5e5e5#e5e5e5 | |
--bigbang-color-surface-translucent | rgba(252, 252, 252, 0.8509803921568627)rgba(252, 252, 252, 0.8509803921568627)rgba(252, 252, 252, 0.8509803921568627) | rgba(30, 30, 30, 0.8509803921568627)rgba(30, 30, 30, 0.8509803921568627)rgba(30, 30, 30, 0.8509803921568627) | |
--bigbang-color-surface-checker | #fafafa#fafafa#fafafa | #101010#101010#101010 | |
--bigbang-color-surface-scrim | rgba(0, 0, 0, 0.3215686274509804)rgba(0, 0, 0, 0.3215686274509804)rgba(0, 0, 0, 0.3215686274509804) | rgba(0, 0, 0, 0.47843137254901963)rgba(0, 0, 0, 0.47843137254901963)rgba(0, 0, 0, 0.47843137254901963) |
The glass material has its own tints: material-glass-regular for chrome, material-glass-regular-contrast for dialogs and selected thumbs, and material-glass-clear with material-glass-dim for icon buttons over dark media. material-glass-rim, material-glass-edge, material-glass-shade and material-glass-specular draw the light edge, the hairline, the inner shade and the highlight. Use them only through the material-glass utilities; see Material.
| Token | Sample | Light mode | Dark mode |
|---|---|---|---|
--bigbang-color-material-glass-regular | rgba(255, 255, 255, 0.8)rgba(255, 255, 255, 0.8)rgba(255, 255, 255, 0.8) | rgba(30, 30, 30, 0.8392156862745098)rgba(30, 30, 30, 0.8392156862745098)rgba(30, 30, 30, 0.8392156862745098) | |
--bigbang-color-material-glass-regular-contrast | rgba(255, 255, 255, 0.9215686274509803)rgba(255, 255, 255, 0.9215686274509803)rgba(255, 255, 255, 0.9215686274509803) | rgba(30, 30, 30, 0.8784313725490196)rgba(30, 30, 30, 0.8784313725490196)rgba(30, 30, 30, 0.8784313725490196) | |
--bigbang-color-material-glass-clear | rgba(255, 255, 255, 0.2784313725490196)rgba(255, 255, 255, 0.2784313725490196)rgba(255, 255, 255, 0.2784313725490196) | rgba(30, 30, 30, 0.30196078431372547)rgba(30, 30, 30, 0.30196078431372547)rgba(30, 30, 30, 0.30196078431372547) | |
--bigbang-color-material-glass-dim | rgba(0, 0, 0, 0.34901960784313724)rgba(0, 0, 0, 0.34901960784313724)rgba(0, 0, 0, 0.34901960784313724) | rgba(0, 0, 0, 0.34901960784313724)rgba(0, 0, 0, 0.34901960784313724)rgba(0, 0, 0, 0.34901960784313724) | |
--bigbang-color-material-glass-rim | rgba(255, 255, 255, 0.7019607843137254)rgba(255, 255, 255, 0.7019607843137254)rgba(255, 255, 255, 0.7019607843137254) | rgba(255, 255, 255, 0.1803921568627451)rgba(255, 255, 255, 0.1803921568627451)rgba(255, 255, 255, 0.1803921568627451) | |
--bigbang-color-material-glass-edge | rgba(0, 0, 0, 0.058823529411764705)rgba(0, 0, 0, 0.058823529411764705)rgba(0, 0, 0, 0.058823529411764705) | rgba(255, 255, 255, 0.10196078431372549)rgba(255, 255, 255, 0.10196078431372549)rgba(255, 255, 255, 0.10196078431372549) | |
--bigbang-color-material-glass-shade | rgba(0, 0, 0, 0.0392156862745098)rgba(0, 0, 0, 0.0392156862745098)rgba(0, 0, 0, 0.0392156862745098) | rgba(0, 0, 0, 0.30196078431372547)rgba(0, 0, 0, 0.30196078431372547)rgba(0, 0, 0, 0.30196078431372547) | |
--bigbang-color-material-glass-specular | rgba(255, 255, 255, 0.5490196078431373)rgba(255, 255, 255, 0.5490196078431373)rgba(255, 255, 255, 0.5490196078431373) | rgba(255, 255, 255, 0.12156862745098039)rgba(255, 255, 255, 0.12156862745098039)rgba(255, 255, 255, 0.12156862745098039) |
Everything people read. text-default is body text and headings, text-subtle is supporting text, text-subtlest is for the lowest-priority information such as timestamps. Links use text-link; in the neutral appearance it equals the text colour, so links always carry an underline.
| Token | Sample | Light mode | Dark mode |
|---|---|---|---|
--bigbang-color-text-default | #171717#171717#171717 | #fafafa#fafafa#fafafa | |
--bigbang-color-text-subtle | #404040#404040#404040 | #d4d4d4#d4d4d4#d4d4d4 | |
--bigbang-color-text-subtlest | #525252#525252#525252 | #a1a1a1#a1a1a1#a1a1a1 | |
--bigbang-color-text-placeholder | #737373#737373#737373 | #a1a1a1#a1a1a1#a1a1a1 | |
--bigbang-color-text-disabled | #a1a1a1#a1a1a1#a1a1a1 | #525252#525252#525252 | |
--bigbang-color-text-inverse | #ffffff#ffffff#ffffff | #171717#171717#171717 | |
--bigbang-color-text-on-brand | #ffffff#fafafa#fafafa | #0a0a0a#171717#171717 | |
--bigbang-color-text-link | #125768#171717#171717 | #77bacf#fafafa#fafafa | |
--bigbang-color-text-link-hovered | #0e414f#404040#404040 | #a4d0df#d4d4d4#d4d4d4 | |
--bigbang-color-text-danger | #a6383c#a6383c#a6383c | #ffbebb#ffbebb#ffbebb | |
--bigbang-color-text-success | #0e7644#0e7644#0e7644 | #a5e2b9#a5e2b9#a5e2b9 | |
--bigbang-color-text-warning | #8a5600#8a5600#8a5600 | #f7c790#f7c790#f7c790 | |
--bigbang-color-text-info | #0068a5#0068a5#0068a5 | #a9d7ff#a9d7ff#a9d7ff |
Icon colours are separate from text because the minimum contrast for icons (3:1) is lower than for text (4.5:1).
| Token | Sample | Light mode | Dark mode |
|---|---|---|---|
--bigbang-color-icon-default | #262626#262626#262626 | #f5f5f5#f5f5f5#f5f5f5 | |
--bigbang-color-icon-subtle | #737373#737373#737373 | #a1a1a1#a1a1a1#a1a1a1 | |
--bigbang-color-icon-disabled | #a1a1a1#a1a1a1#a1a1a1 | #525252#525252#525252 | |
--bigbang-color-icon-inverse | #ffffff#ffffff#ffffff | #171717#171717#171717 | |
--bigbang-color-icon-brand | #146d83#9a451c#4f55b4 | #77bacf#ea9774#9aa6ff | |
--bigbang-color-icon-danger | #c14347#c14347#c14347 | #ff9a97#ff9a97#ff9a97 | |
--bigbang-color-icon-success | #138a50#138a50#138a50 | #7dd09b#7dd09b#7dd09b | |
--bigbang-color-icon-warning | #a16600#a16600#a16600 | #ecac5f#ecac5f#ecac5f | |
--bigbang-color-icon-info | #007ac1#007ac1#007ac1 | #79c2ff#79c2ff#79c2ff |
Borders
Section titled “Borders”border-input outlines form fields, checkboxes and radio buttons and carries 3:1 contrast; border-default and border-subtle are decorative lines that separate regions. border-overlay is the hairline of popovers, menus, dialogs and toasts. The focused element is marked with border-focus.
| Token | Sample | Light mode | Dark mode |
|---|---|---|---|
--bigbang-color-border-default | #e5e5e5#e5e5e5#e5e5e5 | #404040#404040#404040 | |
--bigbang-color-border-subtle | #ededed#ededed#ededed | #303030#303030#303030 | |
--bigbang-color-border-strong | #8c8c8c#8c8c8c#8c8c8c | #8c8c8c#8c8c8c#8c8c8c | |
--bigbang-color-border-input | #8c8c8c#8c8c8c#8c8c8c | #737373#737373#737373 | |
--bigbang-color-border-focus | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 | |
--bigbang-color-border-selected | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 | |
--bigbang-color-border-danger | #c14347#c14347#c14347 | #ff9a97#ff9a97#ff9a97 | |
--bigbang-color-border-disabled | #e5e5e5#e5e5e5#e5e5e5 | #404040#404040#404040 | |
--bigbang-color-border-overlay | #ededed#ededed#ededed | rgba(255, 255, 255, 0.10196078431372549)rgba(255, 255, 255, 0.10196078431372549)rgba(255, 255, 255, 0.10196078431372549) |
Actions
Section titled “Actions”Backgrounds of Button and other interactive elements, and the text on them. Each appearance has separate tokens for default, hovered and pressed; tokens starting with “on” are the text colour on that background.
| Token | Sample | Light mode | Dark mode |
|---|---|---|---|
--bigbang-color-action-primary-default | #146d83#171717#171717 | #77bacf#e5e5e5#e5e5e5 | |
--bigbang-color-action-primary-hovered | #125768#262626#262626 | #a4d0df#d4d4d4#d4d4d4 | |
--bigbang-color-action-primary-pressed | #0e414f#404040#404040 | #cfe6ee#a1a1a1#a1a1a1 | |
--bigbang-color-action-on-primary-default | #ffffff#fafafa#fafafa | #0a0a0a#171717#171717 | |
--bigbang-color-action-secondary-default | #ffffff#ffffff#ffffff | #262626#262626#262626 | |
--bigbang-color-action-secondary-hovered | #fafafa#fafafa#fafafa | #303030#303030#303030 | |
--bigbang-color-action-secondary-pressed | #f5f5f5#f5f5f5#f5f5f5 | #404040#404040#404040 | |
--bigbang-color-action-on-secondary-default | #171717#171717#171717 | #fafafa#fafafa#fafafa | |
--bigbang-color-action-subtle-hovered | #f5f5f5#f5f5f5#f5f5f5 | #303030#303030#303030 | |
--bigbang-color-action-subtle-pressed | #ededed#ededed#ededed | #404040#404040#404040 | |
--bigbang-color-action-danger-default | #a6383c#a6383c#a6383c | #ff9a97#ff9a97#ff9a97 | |
--bigbang-color-action-danger-hovered | #822b2e#822b2e#822b2e | #ffbebb#ffbebb#ffbebb | |
--bigbang-color-action-danger-pressed | #4c1d1d#4c1d1d#4c1d1d | #ffd6d4#ffd6d4#ffd6d4 | |
--bigbang-color-action-danger-subtle-hovered | #fff4f3#fff4f3#fff4f3 | #331212#331212#331212 | |
--bigbang-color-action-danger-subtle-pressed | #ffe8e7#ffe8e7#ffe8e7 | #4c1d1d#4c1d1d#4c1d1d | |
--bigbang-color-action-on-danger-subtle-default | #a6383c#a6383c#a6383c | #ffbebb#ffbebb#ffbebb | |
--bigbang-color-action-on-danger-default | #ffffff#ffffff#ffffff | #0a0a0a#0a0a0a#0a0a0a | |
--bigbang-color-action-disabled-default | #f5f5f5#f5f5f5#f5f5f5 | #303030#303030#303030 | |
--bigbang-color-action-on-disabled-default | #a1a1a1#a1a1a1#a1a1a1 | #525252#525252#525252 |
Status
Section titled “Status”Colours that report a state: transaction statuses, warnings, notifications. Each tone has five roles: background and foreground for the subtle style, emphasis and on-emphasis for the bold style, and border for the edge of the subtle style. The subtle style is pastel: a light fill with dark text. The pastel border is decorative and may stay below 3:1; this is accepted only for Badge and InlineAlert, where the text carries the status. Form field and state borders keep the 3:1 rule.
| Token | Sample | Light mode | Dark mode |
|---|---|---|---|
--bigbang-color-status-neutral-background | #f5f5f5#f5f5f5#f5f5f5 | #303030#303030#303030 | |
--bigbang-color-status-neutral-foreground | #404040#404040#404040 | #e5e5e5#e5e5e5#e5e5e5 | |
--bigbang-color-status-neutral-emphasis | #737373#737373#737373 | #a1a1a1#a1a1a1#a1a1a1 | |
--bigbang-color-status-neutral-border | #e5e5e5#e5e5e5#e5e5e5 | #404040#404040#404040 | |
--bigbang-color-status-neutral-on-emphasis | #ffffff#ffffff#ffffff | #0a0a0a#0a0a0a#0a0a0a | |
--bigbang-color-status-brand-background | #edf5f8#fcf1ec#f0f3ff | #092932#3c190a#1d2046 | |
--bigbang-color-status-brand-foreground | #125768#7b3717#3e4490 | #a4d0df#f3b9a1#b9c4ff | |
--bigbang-color-status-brand-emphasis | #146d83#9a451c#4f55b4 | #77bacf#ea9774#9aa6ff | |
--bigbang-color-status-brand-border | #cfe6ee#fad9cc#d9dfff | #0e414f#5e2911#2f336e | |
--bigbang-color-status-brand-on-emphasis | #ffffff#ffffff#ffffff | #0a0a0a#0a0a0a#0a0a0a | |
--bigbang-color-status-info-background | #e1f1ff#e1f1ff#e1f1ff | #0d304b#0d304b#0d304b | |
--bigbang-color-status-info-foreground | #015182#015182#015182 | #c8e5ff#c8e5ff#c8e5ff | |
--bigbang-color-status-info-emphasis | #2193e0#2193e0#2193e0 | #79c2ff#79c2ff#79c2ff | |
--bigbang-color-status-info-border | #c8e5ff#c8e5ff#c8e5ff | #015182#015182#015182 | |
--bigbang-color-status-info-on-emphasis | #072033#072033#072033 | #072033#072033#072033 | |
--bigbang-color-status-success-background | #def6e5#def6e5#def6e5 | #103620#103620#103620 | |
--bigbang-color-status-success-foreground | #0d5c34#0d5c34#0d5c34 | #c3eed1#c3eed1#c3eed1 | |
--bigbang-color-status-success-emphasis | #2da264#2da264#2da264 | #7dd09b#7dd09b#7dd09b | |
--bigbang-color-status-success-border | #c3eed1#c3eed1#c3eed1 | #0d5c34#0d5c34#0d5c34 | |
--bigbang-color-status-success-on-emphasis | #092414#092414#092414 | #092414#092414#092414 | |
--bigbang-color-status-warning-background | #ffebd5#ffebd5#ffebd5 | #422702#422702#422702 | |
--bigbang-color-status-warning-foreground | #6c4300#6c4300#6c4300 | #fddbb4#fddbb4#fddbb4 | |
--bigbang-color-status-warning-emphasis | #c17a00#c17a00#c17a00 | #ecac5f#ecac5f#ecac5f | |
--bigbang-color-status-warning-border | #fddbb4#fddbb4#fddbb4 | #6c4300#6c4300#6c4300 | |
--bigbang-color-status-warning-on-emphasis | #2c1902#2c1902#2c1902 | #2c1902#2c1902#2c1902 | |
--bigbang-color-status-danger-background | #ffe8e7#ffe8e7#ffe8e7 | #4c1d1d#4c1d1d#4c1d1d | |
--bigbang-color-status-danger-foreground | #822b2e#822b2e#822b2e | #ffd6d4#ffd6d4#ffd6d4 | |
--bigbang-color-status-danger-emphasis | #e1595b#e1595b#e1595b | #ff9a97#ff9a97#ff9a97 | |
--bigbang-color-status-danger-border | #ffd6d4#ffd6d4#ffd6d4 | #822b2e#822b2e#822b2e | |
--bigbang-color-status-danger-on-emphasis | #331212#331212#331212 | #331212#331212#331212 |
For financial data such as an amount going up or down. These show the direction of a number, not a status.
| Token | Sample | Light mode | Dark mode |
|---|---|---|---|
--bigbang-color-data-positive | #0e7644#0e7644#0e7644 | #a5e2b9#a5e2b9#a5e2b9 | |
--bigbang-color-data-negative | #a6383c#a6383c#a6383c | #ffbebb#ffbebb#ffbebb |
Chart series colours and scales are on the Data visualisation page.
Tag colours
Section titled “Tag colours”Category colours with no status meaning, used by Tag, Badge and Avatar initials. Each hue has a fill, text and border; the text has at least 4.5:1 contrast on its fill.
| Token | Sample | Light mode | Dark mode |
|---|---|---|---|
--bigbang-color-tag-red-background | #ffe8e7#ffe8e7#ffe8e7 | #4c1d1d#4c1d1d#4c1d1d | |
--bigbang-color-tag-red-foreground | #822b2e#822b2e#822b2e | #ffd6d4#ffd6d4#ffd6d4 | |
--bigbang-color-tag-red-border | #ffd6d4#ffd6d4#ffd6d4 | #822b2e#822b2e#822b2e | |
--bigbang-color-tag-orange-background | #ffebd5#ffebd5#ffebd5 | #422702#422702#422702 | |
--bigbang-color-tag-orange-foreground | #6c4300#6c4300#6c4300 | #fddbb4#fddbb4#fddbb4 | |
--bigbang-color-tag-orange-border | #fddbb4#fddbb4#fddbb4 | #6c4300#6c4300#6c4300 | |
--bigbang-color-tag-green-background | #def6e5#def6e5#def6e5 | #103620#103620#103620 | |
--bigbang-color-tag-green-foreground | #0d5c34#0d5c34#0d5c34 | #c3eed1#c3eed1#c3eed1 | |
--bigbang-color-tag-green-border | #c3eed1#c3eed1#c3eed1 | #0d5c34#0d5c34#0d5c34 | |
--bigbang-color-tag-blue-background | #e1f1ff#e1f1ff#e1f1ff | #0d304b#0d304b#0d304b | |
--bigbang-color-tag-blue-foreground | #015182#015182#015182 | #c8e5ff#c8e5ff#c8e5ff | |
--bigbang-color-tag-blue-border | #c8e5ff#c8e5ff#c8e5ff | #015182#015182#015182 | |
--bigbang-color-tag-violet-background | #efebff#efebff#efebff | #31264c#31264c#31264c | |
--bigbang-color-tag-violet-foreground | #523e83#523e83#523e83 | #e3dcff#e3dcff#e3dcff | |
--bigbang-color-tag-violet-border | #e3dcff#e3dcff#e3dcff | #523e83#523e83#523e83 | |
--bigbang-color-tag-teal-background | #dcf5f2#dcf5f2#dcf5f2 | #093533#093533#093533 | |
--bigbang-color-tag-teal-foreground | #005956#005956#005956 | #bfece8#bfece8#bfece8 | |
--bigbang-color-tag-teal-border | #bfece8#bfece8#bfece8 | #005956#005956#005956 | |
--bigbang-color-tag-pink-background | #ffe7f1#ffe7f1#ffe7f1 | #461e32#461e32#461e32 | |
--bigbang-color-tag-pink-foreground | #782f56#782f56#782f56 | #ffd3e6#ffd3e6#ffd3e6 | |
--bigbang-color-tag-pink-border | #ffd3e6#ffd3e6#ffd3e6 | #782f56#782f56#782f56 |
| Token | Sample | Light mode | Dark mode |
|---|---|---|---|
--bigbang-color-focus-ring | #146d83#737373#737373 | #77bacf#8c8c8c#8c8c8c |
Contrast
Section titled “Contrast”Every time a brand and mode are built, a test checks these pairs and stops the build if one fails:
- Text against its background: at least 4.5:1, including the subtle and bold styles of every status colour, status text on raised surfaces, the tag colour pairs, the
violet,tealandpinktag text on the page surface in outline badges, and text onsurface-layer-1(CodeBlock). - Form field borders, the focus outline, icons, status emphasis fills and chart series: at least 3:1.
A new brand’s colour ramp cannot go into use until it passes this test.
Guidelines
Section titled “Guidelines”Choose colour by role, not by look
Section titled “Choose colour by role, not by look”bg-surface-raised text-fg-defaultbg-[#FFFFFF] text-[#1B1E23]Do not rely on colour alone
Section titled “Do not rely on colour alone”For people who cannot see or tell colours apart, status is always stated in text as well.