Reference
Colour keys
Every colour key of the Symptom & Illness Check App, with its defaults and what it follows.
The app has 56 colour keys. Set them with the JS API in customization.colors.light and customization.colors.dark — see Colours for the setup, the accepted values and dark mode.
How to read the tables:
- Light default and Dark default are the values that the app uses when no other setting changes the key.
- When not set tells what the key follows when you do not set it. "Same as
primary" means: the key changes whenprimarychanges. "Fixed value" means: the key keeps its default until you set it. - The defaults do not include the colours that XUND set up for your app. Your set-up colours apply in light mode only. To find out how they work with your own colours, see Where the colours come from.
If you know only the element on the screen, use Colours by screen.
Each group starts with one or more pictures. In each picture, the keys of the group have test colours. A box marks each area that changed, and its label gives the key. Select a box to go to the key. The Shown in links of a key go back to the pictures that show it.
Brand
Your brand colour, the text on it, and a light tint of it. Most other keys follow primary.
| Key | What it paints | Light default | Dark default | When not set |
|---|---|---|---|---|
primary | Your brand colour. Background of filled buttons (dialog OK buttons, Show all illnesses, Show details on the illness cards in the report, More and Discover on report cards, partner-service buttons, selected filter chips). Start screen: page title and card titles. Report: main title, section titles, the filled part of the probability bars and the borders of the action ribbon. Filled part of the pain and temperature sliders and the border of the slider handle. Text buttons such as show more. Onboarding step numbers. Current page number in the search results. Loading spinners. Map markers in Health solutions. Border and label of the neutral outlined buttons (for example single-choice answers and Yes / No) when the user points to them, in a lighter shade of primary. Shown in: primary picture, core colours, light, core colours, dark, Brand picture. | #0065bd | #00adef | Fixed value. |
onPrimary | Text and icons on primary fills: labels of filled buttons (for example Show details on the illness cards in the report), the current page number in the search results, map cluster numbers, the spinner inside filled and emergency buttons, the icon of the mobile Download report button. Shown in: onPrimary picture, Brand picture. | #ffffff | #0b0d17 | Fixed value. |
primarySubtle | Light brand tint. The light band behind the cards on the start screen and the band of the Powered by XUND footer, each with its wave. Hover background of the check cards on the start screen. Background of the action ribbon in the illness-check report: the app draws it over surface, so the ribbon is opaque. Badges in the medical library. Unselected filter chips in Health solutions. The selected option in drop-down lists. Shown in: Brand picture. | rgba(0, 101, 189, 0.1) | rgba(0, 173, 239, 0.16) | Light: primary at 10 % opacity. Dark: primary at 16 % opacity. |
Surfaces
The page, the cards and the layers that float above them.
| Key | What it paints | Light default | Dark default | When not set |
|---|---|---|---|---|
background | The page behind the app (around the chat card) on every screen. This includes the page around the card on the emergency screen (the emergency question with the red Potential emergency box). In light mode it is transparent, so your page shows through. Not the area behind the water-drop character picture on the page not found and session expired screens: see imageBackdrop. Shown in: background picture, core colours, light, core colours, dark, Surfaces picture. | transparent | #121420 | Fixed value. |
surface | The main content surface: the chat card with the questions, the report container, the onboarding boxes. Also unselected map markers and the fade at the top and bottom of scrolling lists. Not the handle of the sliders: see bodyMapFill. Shown in: surface picture, core colours, light, core colours, dark, Surfaces picture. | #ffffff | #1b1e2e | Fixed value. |
surfaceRaised | Floating layers: dialogs, the imprint panel, the Health solutions panels, filter panel and result cards, the action cards in the report, the + and − buttons of the sliders, the icon discs on the start screen, the background of the follow-up screen. Shown in: surfaceRaised picture, core colours, light, core colours, dark, Surfaces picture, dialog picture. | #ffffff | #22263a | Fixed value. |
surfaceSubtle | Inset panels inside a surface: the report header card, the background of the urgency box at the top of the report (the box with the urgency title, for example Requires immediate medical attention; not danger), the basic-information cards and the mobile summary card of the report, the Thieme attribution box in the medical library, the trust box of the onboarding. The coloured stripe at the left of the urgency box uses danger, warning or success. Shown in: Surfaces picture. | #f9f9f9 | #161926 | Fixed value. |
surfaceHover | Hover background of list rows and cards: symptom and illness lists, symptom suggestions, overview cards, service items in the report. Also the background of a page number in the search results (content library search) when the user points to it. Shown in: Surfaces picture. | #f7f8fa | #262a3d | Fixed value. |
neutralSubtle | Light neutral fill and thin dividers: the unfilled part of the small probability bar next to each condition in the report (not track), dividers in the medical library and in the search results, borders of the Health solutions result cards, the onboarding step line, the abdomen Right / Left tags. Also the background of disabled (greyed-out) buttons, for example the Confirm button of a question before the user enters a value. Shown in: Surfaces picture. | #f0f0f0 | #2a2e44 | Fixed value. |
backdrop | The veil behind dialogs and over content that loads. Shown in: dialog picture. | rgba(255, 255, 255, 0.1) | rgba(8, 9, 15, 0.6) | Fixed value. |
skeletonHighlight | The moving shine of loading placeholders. | rgba(255, 255, 255, 0.6) | rgba(255, 255, 255, 0.06) | Fixed value. |
Text
Text colours, links and the search highlight.
| Key | What it paints | Light default | Dark default | When not set |
|---|---|---|---|---|
text | Body text: question texts, answer and list texts, dialog texts, slider labels, onboarding texts, report values, Health solutions names and labels, Powered by, the drop-down arrow, small icons next to text. Also the text colour of the page. Also the text Please connect to a Wi-Fi network to continue. on the No internet screen (not heading). Also the close (×) icon of the follow-up screen (Stay in touch), only when the user points to it. Shown in: text picture, core colours, light, core colours, dark, Text picture. | #000000 | #ecf1f8 | Fixed value. |
textSecondary | Supporting text: the text of the start-screen cards, the group headings in the content library search (Search for symptoms or conditions on the start screen, for example Symptoms, Conditions and Most commonly searched symptoms), the subheadings in the content library details (a result opened with Show more, for example Symptoms), descriptions in the medical library, addresses and opening hours in Health solutions. These group headings and subheadings do not use heading. Shown in: Text picture. | #000000 | #c4c9d9 | Light: same as text. Dark: fixed value. |
textMuted | De-emphasised text and muted icons: input placeholders, descriptions of symptom suggestions, the small section labels above the condition and symptom lists of a check (Common conditions, Common symptoms, Conditions A-Z, Symptoms A-Z; not heading), list hints such as most searched, unit labels, labels of the mobile report summary, the close (×) button of dialogs, the close (×) icon of the follow-up screen (Stay in touch) in its normal state (when the user points to it, it uses text), pagination arrows, the drag handle of the mobile Health solutions sheet. Shown in: textMuted picture, Text picture. | #717171 | #a6acc2 | Fixed value. |
textDisabled | Disabled text and icons: the label of disabled (greyed-out) buttons, for example the Confirm button of a question before the user enters a value, and the disabled pagination arrow in the search results. | rgba(0, 0, 0, 0.25) | rgba(236, 241, 248, 0.35) | Fixed value. |
heading | Headings: question titles, dialog titles, the medical library title and article headings (for example Overview and symptoms), onboarding headings, titles of the follow-up, error and No internet screens, the gear icon on the error screen, category titles with an icon in the condition and symptom lists, section titles in Health solutions, badge text. Not the group headings of the content library search and not the subheadings of the content library details (for example Symptoms): these use textSecondary. Not the small labels Common conditions and Common symptoms above the lists: these use textMuted. Shown in: heading picture, core colours, light, core colours, dark, Text picture. | #00417a | #d5f6ff | Fixed value. |
link | Inline links, for example in the imprint, the terms of use and the follow-up screen. Shown in: Text picture. | #0065bd | #4cc3f5 | Light: same as primary. Dark: fixed value. |
linkHover | Links and text buttons (show more, see more) when the user points to them. Not the single-choice answers or Yes / No when the user points to them: these use primary. | #0065bd | #7fd4f8 | Light: same as link. Dark: fixed value. |
highlight | Background of the matched words in search results (start screen, medical library, symptom and illness search). | #e6f0f8 | rgba(0, 173, 239, 0.3) | Light: 10 % of primary mixed into surface (opaque). Dark: primary at 30 % opacity. |
Borders
Lines around cards and between items.
| Key | What it paints | Light default | Dark default | When not set |
|---|---|---|---|---|
border | Default borders and dividers: report cards (illness, service and no-result cards), the mobile summary divider, the emergency card during a check, overview cards, the search field in Health solutions, horizontal lines, the dots of the loading indicator. Also the outline of each row card in the condition and symptom lists of a check, around a surfaceRaised fill: in dark mode, and in light mode only when you set surfaceRaised or border in customization.colors.light. In light mode without these colours, these rows keep their card shadow and have no outline. The lines under the answers of a multiple-choice question use borderStrong. Shown in: border picture, core colours, light, borders picture. | #d9d9d9 | #353a52 | Fixed value. |
borderStrong | The line under each answer row of a multiple-choice question, and the line under each symptom suggestion. Shown in: answer lines picture. | #bfbfbf | #4a5070 | Fixed value. |
Form controls and focus
Input fields, drop-down lists and the keyboard focus outline.
| Key | What it paints | Light default | Dark default | When not set |
|---|---|---|---|---|
controlBorder | Border of input fields and drop-down lists, for example the search field. Shown in: input field picture. | #d9d9d9 | #6c7393 | Light: same as border. Dark: fixed value. |
controlBorderFocus | Border and glow of an input field when the user points to it or types in it. Shown in: input field hover picture. | #0065bd | #00adef | Same as primary. |
focusRing | The outline that shows keyboard focus on buttons, links, the menu (☰) button in the header and slider handles. In Health solutions, it is the focus outline of all filter chips (specializations, genders, insurers, opening hours and location), of Reset filters and Apply filters, and of Clear all and Done in the specialization and location lists. Not the filter icon next to the search field in Health solutions and not the close (×) icon that replaces it: these show the default focus outline of the browser, and no colour key changes it. Not the side menu: the focus outline around the menu items (for example Home) and around the close (×) icon in the side menu uses sideMenuText. Shown in: focusRing picture, keyboard focus picture. | #0065bd | #00adef | primary if it has a contrast of at least 3:1 against surface on background; otherwise text. |
Status
Emergency, caution and positive colours. A fill key paints a background or a symbol. A text key paints text on a normal surface.
| Key | What it paints | Light default | Dark default | When not set |
|---|---|---|---|---|
danger | Emergency fill: the red box at the top of the card on the emergency screen (for example Potential emergency), the emergency banner, the red Potential emergency box next to the basic-information cards in the report, the emergency number box, emergency buttons, the high (red) urgency level (the stripe at the left of the urgency box and its icon), the Closed row in opening hours, red emergency icons. Not the page around the card on the emergency screen: that uses background. Not the background of the urgency box at the top of the report (for example Requires immediate medical attention): that uses surfaceSubtle. In that box, only the stripe at the left and the icon use danger. Shown in: danger picture, core colours, light, core colours, dark, emergency picture. | #db2424 | #db2424 | Fixed value. |
dangerText | Danger text on a surface: error messages of input fields, the red border of an input field with an invalid value (for example a weight that is too high), warning signs on the emergency screen and in the report, the closed and closes soon text in Health solutions, the hospital icon, hospital recommendations in the report and medical library. Shown in: emergency picture. | #db2424 | #e76c6c | Light: same as danger. Dark: fixed value. |
warning | Caution fill: the medium (orange) urgency level and its icon. Shown in: caution picture. | #f58e31 | #f58e31 | Fixed value. |
warningText | Warning text on a surface: doctor recommendations in the report and medical library. | #c75300 | #f56600 | Fixed value. |
success | Positive fill: the low (green) urgency level and its icon, the check mark of a selected symptom suggestion, the open text and row in opening hours. Shown in: low urgency picture. | #66d096 | #66d096 | Fixed value. |
successText | Success text on a surface: home-treatment recommendations in the report and medical library. | #107f42 | #15a857 | Fixed value. |
onStatus | Text and icons on status fills (danger, success): the red box on the emergency screen, the emergency banner and its call link, the red Potential emergency box in the report, the emergency number box, labels of emergency buttons, the open / closed rows in opening hours, the check mark of a selected symptom suggestion. Shown in: emergency picture. | #ffffff | #ffffff | Fixed value. |
Icons, shadow, illustrations and images
Icons, shadows, the illustrations, the body-part selector and the backgrounds behind logos and images.
| Key | What it paints | Light default | Dark default | When not set |
|---|---|---|---|---|
icon | Standalone icons: icon buttons, the back arrow in the question footer, the search icon, overview and list icons, illness category icons, doctor and pharmacy icons and markers in Health solutions, contact and filter icons. It also paints the round + icon at the right of each row of a symptom suggestion question, before the user selects the row. The check mark of a selected row uses success. The gear icon on the error screen uses heading. Shown in: start screen icons picture, body map picture. | #0065bd | #00adef | Same as primary. |
shadow | Colour of every shadow (always drawn translucent): chat card, dialogs, cards, slider handles, map markers, menus. Also the hover background of small plain buttons, at 5 % opacity: for example the round shading behind the close (×) icon of the follow-up screen (Stay in touch) when the user points to it. Shown in: dialog picture. | #000000 | #000000 | Fixed value. |
illustrationInk | Dark lines of the illustrations on the start-screen check cards and on the intro screens of a check. Shown in: start screen icons picture. | #191b46 | #ecf1f8 | Fixed value. |
illustrationAccent | Light-blue parts of the illustrations on the start-screen check cards. Shown in: start screen icons picture. | #87c4f0 | #4cc3f5 | Fixed value. |
bodyMapFill | Fill of the body figure in the body-part selector (drawn at 35 % opacity). Also the fill of the round handle of the pain and temperature sliders that the user drags. The dark default is light, so that the handle stands out from the unfilled part of the slider (track) and from the card. In light mode, while you do not set bodyMapFill in colors.light, the handle has the colour of surfaceRaised. Shown in: body map picture. | #ffffff | #ecf1f8 | Fixed value. |
bodyMapOutline | Outline of the body figure in the body-part selector, and the fill of a body area that the user points to or selects. Shown in: body map picture. | #cccccc | #6c7393 | Fixed value. |
logoBackdrop | Background behind your logo in the header and behind the Powered by XUND logo. Shown in: start screen icons picture. | transparent | transparent | Fixed value. |
imageBackdrop | Background behind raster images: the CE mark in the imprint, the Thieme logo, partner-service images in the report, the onboarding illustration, the illustration on the page not found and session expired screens. On these two screens, it is the area behind the water-drop character picture, also in dark mode. Not background: that key is the page around the picture. | transparent | #ecf1f8 | Fixed value. |
Components
The header, the side menu, the progress line and the three types of buttons.
| Key | What it paints | Light default | Dark default | When not set |
|---|---|---|---|---|
headerBackground | Background of the header bar. Shown in: side menu picture. | #ffffff | #1b1e2e | Same as surface. |
headerIcon | The menu (☰) icon in the header that opens the side menu. Shown in: question screen picture. | #0065bd | #00adef | Same as icon. |
sideMenuBackground | Background of the side menu. Shown in: side menu picture. | #0065bd | #22263a | Light: same as primary. Dark: fixed value. |
sideMenuText | Labels and icons in the side menu (for example Home). Also the keyboard focus outline of the menu items and of the close (×) icon in the side menu. Shown in: side menu picture. | #ffffff | #ecf1f8 | Light: same as onPrimary. Dark: same as text. |
sideMenuCloseIcon | The close (×) icon of the side menu. Shown in: side menu picture. | #ffffff | #ecf1f8 | Same as sideMenuText. |
progressFill | Filled part of the progress line under the header. Shown in: question screen picture. | #0065bd | #00adef | Same as primary. |
track | Unfilled part of the progress line under the header, and the unfilled part of the pain and temperature sliders. Not the probability bars in the report: their unfilled part uses neutralSubtle. Shown in: question screen picture. | #f0f0f0 | #2a2e44 | Same as neutralSubtle. |
progressStepActive | Labels of the reached and current steps in the header (for example 1. Profile). Shown in: question screen picture. | #00417a | #d5f6ff | Same as heading. |
progressStepInactive | Labels of the next steps in the header. Shown in: question screen picture. | #717171 | #a6acc2 | Same as textMuted. |
buttonConfirmBackground | Background of the Next and Confirm buttons in the question footer, the Restart button on the error screen, the download button at the end of the report, the report service button, the confirm button of the follow-up screen, the feedback button in the report. A disabled (greyed-out) Confirm button uses neutralSubtle. The Accept button of the terms of use uses buttonNeutralBackground. Not the Show details button on the illness cards in the report: its background uses primary, and its label uses onPrimary. Shown in: question screen picture. | #0065bd | #00adef | Same as primary. |
buttonConfirmText | Label of the buttons that use buttonConfirmBackground, and the text and icon of the feedback button. The label of a disabled (greyed-out) Confirm button uses textDisabled. Not the label of the Show details button on the illness cards in the report: it uses onPrimary, also when XUND set up colours for your app. Shown in: question screen picture. | #ffffff | #0b0d17 | Same as onPrimary. |
buttonSecondaryBackground | Background of brand-outlined buttons: Skip and None of these in the question footer, Cancel in dialogs, Restart check at the bottom of the report, skip on the follow-up screen. The Restart check button has no border. Thus it looks like a text link, but its background uses this key (not buttonSecondaryText). Shown in: question screen picture. | #ffffff | #1b1e2e | Same as surface. |
buttonSecondaryBorder | Border of the brand-outlined buttons (see buttonSecondaryBackground). The Restart check button at the bottom of the report has no border. Shown in: question screen picture. | #0065bd | #00adef | Same as primary. |
buttonSecondaryText | Label text of the brand-outlined buttons (for example the label of Restart check at the bottom of the report), and their hover colour. Not the background of these buttons: see buttonSecondaryBackground. Not the Show details button of the illness cards in the report: it is a filled button, and its label uses onPrimary. Shown in: question screen picture. | #0065bd | #00adef | Same as primary. |
buttonNeutralBackground | Background of neutral outlined buttons: single-choice answers, Yes / No, the body-part list, the abdomen buttons, Accept / Do not accept on the terms of use step, Back to home, the buttons on the emergency screen, Hide details on the illness cards in the report. Shown in: answer buttons picture. | #ffffff | #1b1e2e | Same as surface. |
buttonNeutralBorder | Border of the neutral outlined buttons, and of the More details button in the red Potential emergency box of the report. When the user points to the button, the border uses a lighter shade of primary. Shown in: answer buttons picture. | #d9d9d9 | #6c7393 | Light: same as border. Dark: same as controlBorder. |
buttonNeutralText | Label of the neutral outlined buttons. When the user points to the button, the label uses a lighter shade of primary. Shown in: answer buttons picture. | #000000 | #ecf1f8 | Same as text. |
Last updated on