Colors
Bifrost consists of a defined set of colors that help us convey Intilitys identity and ensure the proper contrast for accessibility.
Color palettes
There are 2 color palettes available, which changes based on the usage of light or dark mode. Each of the palettes consists of one primary contrast color, supporting base colors and secondary contrast colors.
Primary contrast color
The primary contrast color should be available in all services that Intility delivers. The color should however be used with caution. Don’t cover large areas with the color.
Base colors
The base colors are used for layering and elevation of content sections in services. The base colors are neutral colors and can be used in a large variety of ways.
Secondary contrast colors
The secondary contrast colors are supporting colors that can be used to emphasize content or to convey status. E.g dashboards.
Full color table
| Main color | Contrasts | Text | Icon | Border | ||||
|---|---|---|---|---|---|---|---|---|
| base base-2 base-3 | base-c base-c-2 base-c-theme base-c-brand base-c-chill base-c-attn base-c-success base-c-warning base-c-alert base-c-wcag base-c-disabled base-c-dimmed | Text Text Text Text Text Text Text Text Text Text Text | ||||||
| base-dimmed base-dimmed-2 | base-c base-c-2 | Text Text | ||||||
| base-dimmed-3 | base-c | Text | ||||||
| base-disabled | base-c-2 | Text | ||||||
| base | base-c-inverted base-c-inverted-2 base-c-inverted-3 | Text Text Text | ||||||
| theme theme-2 theme-3 | theme-c theme-c-2 theme-hc | Text Text Text | ||||||
| theme-fade | theme-fade-c | Text | ||||||
| neutral | neutral-c neutral-hc | Text Text | ||||||
| neutral-fade | neutral-fade-c | Text | ||||||
| brand | brand-c brand-hc | Text Text | ||||||
| brand-fade | brand-fade-c | Text | ||||||
| chill | chill-c chill-hc | Text Text | ||||||
| chill-fade | chill-fade-c | Text | ||||||
| attn | attn-c attn-hc | Text Text | ||||||
| attn-fade | attn-fade-c | Text | ||||||
| success | success-c success-hc | Text Text | ||||||
| success-fade | success-fade-c | Text | ||||||
| warning | warning-c warning-hc | Text Text | ||||||
| warning-fade | warning-fade-c | Text | ||||||
| alert alert-2 | alert-c alert-hc | Text Text | ||||||
| alert-fade | alert-fade-c | Text | ||||||
| alert-fade-2 | alert-fade-2-c | Text | ||||||
Accessibility
We are following the current WCAG guidelines to ensure accessibility. When you are designing services you must ensure that the colors you are using, when creating custom content, are WCAG-compliant. You may read more on how to ensure accessibility and current laws at uutilsynet.no
Examples
- Background base can be used with base-c text
- Background theme can be used with theme-c text
- Background alert-fade-c can be used with alert-fade text
- Background success can be used with success-c text
- Background success-c can be used with success text
Contrast checker
Foreground
base-c
--bfc-base-c
Background
base
--bfc-base
| Contrast | Text | Icon | Border |
|---|---|---|---|
Light mode0.00:1 Dark mode0.00:1 | Bifrost approved Just a little bit of sample text | Bifrost approved | Bifrost approved |
Colors for print and presentations
For information regarding colors for print and presentations, please see marketing site on Sharepoint. On that page you will also be able to find logos, illustrations and so much more.
RGB-HEX format
Only use when CSS variables are not an option, like physical media or e-mail.
| Color name | Light mode | Dark mode |
|---|---|---|
| base | #f3f3f6 | #071627 |
| base-2 | #f9f9fa | #0a1c2e |
| base-3 | #ffffff | #0f2133 |
| base-c | #071627 | #f3f3f6 |
| base-c-2 | #565776 | #8a98a8 |
| base-c-brand | #007375 | #0df2d7 |
| base-c-chill | #631cce | #ad8aff |
| base-c-attn | #bd006e | #ff6bc4 |
| base-c-success | #007a4b | #00f597 |
| base-c-warning | #99620a | #ffdb70 |
| base-c-alert | #b92b18 | #ff4b33 |
| base-c-wcag | #8c8c97 | #636a79 |
| base-c-disabled | #9697b6 | #495869 |
| base-c-dimmed | #d3d3df | #243242 |
| base-dimmed | #d3d3df | #243242 |
| base-dimmed-2 | #d9dbde | #1a2b3c |
| base-dimmed-3 | #c0c4c8 | #283848 |
| base-disabled | #9697b6 | #44556a |
| base-c-inverted | #0f2133 | #ffffff |
| base-c-inverted-2 | #2f4156 | #d3d4df |
| base-c-inverted-3 | #1a2b3c | #d9dbde |
| neutral | #44556a | #cdd3da |
| neutral-c | #e3e3e8 | #1a2b3c |
| neutral-hc | #ffffff | #071627 |
| neutral-fade | #e3e3e8 | #1a2b3c |
| neutral-fade-c | #3d4c5c | #cdd3da |
| brand | #007375 | #0df2d7 |
| brand-c | #d8fdf8 | #003c42 |
| brand-hc | #ffffff | #071627 |
| brand-fade | #d8fdf8 | #003c42 |
| brand-fade-c | #007375 | #0df2d7 |
| chill | #631cce | #ad8aff |
| chill-c | #e7dcfe | #2b1e62 |
| chill-hc | #ffffff | #071627 |
| chill-fade | #e7dcfe | #2b1e62 |
| chill-fade-c | #631cce | #ad8aff |
| attn | #bd006e | #ff6bc4 |
| attn-c | #ffd1ed | #590d44 |
| attn-hc | #ffffff | #0f2133 |
| attn-fade | #ffd1ed | #590d44 |
| attn-fade-c | #bd006e | #ff6bc4 |
| success | #00f597 | #00f597 |
| success-c | #00331f | #00331f |
| success-hc | #071627 | #071627 |
| success-fade | #a3ffc8 | #007548 |
| success-fade-c | #006629 | #99ffd8 |
| warning | #ffdb70 | #ffdb70 |
| warning-c | #4d3200 | #4d3200 |
| warning-hc | #071627 | #071627 |
| warning-fade | #fff5c7 | #4d3200 |
| warning-fade-c | #99620a | #ffdb70 |
| alert | #c9341d | #c9341d |
| alert-2 | #d83a22 | #d83a22 |
| alert-c | #ffffff | #ffffff |
| alert-hc | #ffffff | #ffffff |
| alert-fade | #ffe4e0 | #4a2b33 |
| alert-fade-c | #b92b18 | #ff7866 |
| alert-fade-2 | #ffe8e5 | #420800 |
| alert-fade-2-c | #cc1800 | #ff7866 |
Teal theme
| Color name | Light mode | Dark mode |
|---|---|---|
| base-c-theme | #007375 | #0df2d7 |
| theme | #007375 | #0df2d7 |
| theme-2 | #007375 | #64f7e6 |
| theme-3 | #005557 | #9efaef |
| theme-c | #c5fcf5 | #003c42 |
| theme-c-2 | #e1fefa | #002129 |
| theme-hc | #ffffff | #071627 |
| theme-fade | #c5fcf5 | #003c42 |
| theme-fade-c | #007375 | #0df2d7 |
Purple theme
| Color name | Light mode | Dark mode |
|---|---|---|
| base-c-theme | #631cce | #ad8aff |
| theme | #631cce | #ad8aff |
| theme-2 | #5919b8 | #bfa3ff |
| theme-3 | #5016a7 | #d1bdff |
| theme-c | #dfd1ff | #2b1e62 |
| theme-c-2 | #eee7fe | #17183b |
| theme-hc | #ffffff | #071627 |
| theme-fade | #dfd1ff | #2b1e62 |
| theme-fade-c | #631cce | #ad8aff |
Pink theme
| Color name | Light mode | Dark mode |
|---|---|---|
| base-c-theme | #bb006d | #ff6cc5 |
| theme | #bb006d | #ff6cc5 |
| theme-2 | #a90565 | #ff8cd2 |
| theme-3 | #9a095f | #ffabde |
| theme-c | #ffd3ee | #590d44 |
| theme-c-2 | #ffdaf1 | #260f2e |
| theme-hc | #ffffff | #071627 |
| theme-fade | #ffd3ee | #590d44 |
| theme-fade-c | #bb006d | #ff6cc5 |
Yellow theme
| Color name | Light mode | Dark mode |
|---|---|---|
| base-c-theme | #9a640a | #ffda6e |
| theme | #9a640a | #ffda6e |
| theme-2 | #845706 | #ffe482 |
| theme-3 | #724d03 | #ffeb95 |
| theme-c | #fff5c8 | #4c3200 |
| theme-c-2 | #fff7d4 | #1a1200 |
| theme-hc | #ffffff | #071627 |
| theme-fade | #fff5c8 | #4c3200 |
| theme-fade-c | #9a640a | #ffda6e |