Colours by screen

Find the colour key of an element on a screen of the Symptom & Illness Check App.

Find the screen, then find the element and its property (background, border, text or icon). Each row gives one key, and the link goes to the key in Colour keys. If an element is not in this list, look for a similar element on another screen.

Screen	Element	Key
Header	Background of the header bar	`headerBackground`
Header	Background behind your logo	`logoBackdrop`
Header	Menu (☰) icon	`headerIcon`
Header	Labels of the reached and current steps (for example 1. Profile)	`progressStepActive`
Header	Labels of the next steps	`progressStepInactive`
Header	Progress line under the header: filled part	`progressFill`
Header	Progress line under the header: unfilled part	`track`
Side menu	Background	`sideMenuBackground`
Side menu	Labels and icons of the menu items (for example Home)	`sideMenuText`
Side menu	Keyboard focus outline (Tab) around a menu item (for example Home) or around the close (×) icon. Not `focusRing`.	`sideMenuText`
Side menu	Close (×) icon	`sideMenuCloseIcon`
All screens	Page behind the app (around the card)	`background`
All screens except the side menu	Keyboard focus outline (Tab). Not the logo in the header: the logo shows the default focus outline of the browser, and no colour key changes it.	`focusRing`
All screens	Shadows	`shadow`
All screens	Loading spinner	`primary`
All screens	Shine of loading placeholders	`skeletonHighlight`
All screens	Veil over content that loads	`backdrop`
Start screen	Title (Hello!) and card titles	`primary`
Start screen	Text under the title	`text`
Start screen	Text of the check cards	`textSecondary`
Start screen	Check card when the user points to it	`primarySubtle`
Start screen	Band behind the cards and its wave	`primarySubtle`
Start screen	Start Symptom Check and Start Illness Check buttons: background	`primary`
Start screen	Start Symptom Check and Start Illness Check buttons: label	`onPrimary`
Start screen	Illustrations on the check cards: lines	`illustrationInk`
Start screen	Illustrations on the check cards: light-blue parts	`illustrationAccent`
Content library search (Search for symptoms or conditions on the start screen)	Matched words in the results	`highlight`
Content library search (Search for symptoms or conditions on the start screen)	Group headings (for example Symptoms, Conditions and Most commonly searched symptoms). Not `heading`.	`textSecondary`
Content library search (Search for symptoms or conditions on the start screen)	Dividers	`neutralSubtle`
Content library search (Search for symptoms or conditions on the start screen)	Current page number: background	`primary`
Content library search (Search for symptoms or conditions on the start screen)	Current page number: number	`onPrimary`
Content library search (Search for symptoms or conditions on the start screen)	Page number when the user points to it: background	`surfaceHover`
Content library search (Search for symptoms or conditions on the start screen)	Page arrows	`textMuted`
Content library search (Search for symptoms or conditions on the start screen)	Disabled page arrow	`textDisabled`
Content library details (a result opened with Show more)	Subheadings (for example Symptoms and Conditions). Not `heading`.	`textSecondary`
Footer	Powered by text	`text`
Footer	Band and its wave	`primarySubtle`
Onboarding	Step boxes	`surface`
Onboarding	Step numbers	`primary`
Onboarding	Line between the steps	`neutralSubtle`
Onboarding	Headings	`heading`
Onboarding	Trust area: outer box	`surfaceSubtle`
Onboarding	Trust area: inner boxes	`surface`
Onboarding	Trust area: icons	`icon`
Onboarding	Background behind the illustration	`imageBackdrop`
Terms of use step	Accept and Do not accept buttons: background	`buttonNeutralBackground`
Terms of use step	Accept and Do not accept buttons: border	`buttonNeutralBorder`
Terms of use step	Accept and Do not accept buttons: label	`buttonNeutralText`
Question	Card with the question	`surface`
Question	Question title	`heading`
Question	Answer texts and slider labels	`text`
Question	Next and Confirm buttons: background	`buttonConfirmBackground`
Question	Next and Confirm buttons: label	`buttonConfirmText`
Question	Disabled (greyed-out) Confirm button, for example before the user enters a value: background	`neutralSubtle`
Question	Disabled (greyed-out) Confirm button, for example before the user enters a value: label	`textDisabled`
Question	Skip and None of these buttons: background	`buttonSecondaryBackground`
Question	Skip and None of these buttons: border	`buttonSecondaryBorder`
Question	Skip and None of these buttons: label	`buttonSecondaryText`
Question	Back arrow in the footer	`icon`
Question	Single-choice answers and Yes / No: background	`buttonNeutralBackground`
Question	Single-choice answers and Yes / No: border	`buttonNeutralBorder`
Question	Single-choice answers and Yes / No: label	`buttonNeutralText`
Question	Single-choice answers (for example Male and Female) and Yes / No when the user points to them: border and label	`primary` (a lighter shade). Not `linkHover`: these answers are buttons, not links.
Question	Multiple-choice answers: line under each answer row	`borderStrong`
Question	Slider: filled part, handle border, + and − icons	`primary`
Question	Slider: unfilled part	`track`
Question	Slider: handle fill	`bodyMapFill`
Question	Slider: + and − buttons	`surfaceRaised`
Question	Input field: border	`controlBorder`
Question	Input field: border when the user types	`controlBorderFocus`
Question	Input field: placeholder and unit label	`textMuted`
Question	Input field with an invalid value: red border and error message	`dangerText`
Question	Body-part selector: body fill	`bodyMapFill`
Question	Body-part selector: outline and selected area	`bodyMapOutline`
Question	Abdomen areas	`primary`
Question	Abdomen Right / Left tags	`neutralSubtle`
Condition list and symptom list (Illness check and Symptom check)	Small section labels above the list (Common conditions, Common symptoms, Conditions A-Z, Symptoms A-Z). Not `heading`.	`textMuted`
Condition list and symptom list (Illness check and Symptom check)	Category titles with an icon	`heading`
Condition list and symptom list (Illness check and Symptom check)	Row when the user points to it	`surfaceHover`
Condition list and symptom list (Illness check and Symptom check)	Card fill of each row: in dark mode, and in light mode only when you set `surfaceRaised` or `border` in `customization.colors.light`. In light mode without these colours, the rows are cards with a shadow.	`surfaceRaised`
Condition list and symptom list (Illness check and Symptom check)	Card outline of each row: in dark mode, and in light mode only when you set `surfaceRaised` or `border` in `customization.colors.light`. In light mode without these colours, the rows are cards with a shadow and no outline.	`border`
Question	Symptom suggestions: description	`textMuted`
Question	Symptom suggestions: line under each item	`borderStrong`
Question	Symptom suggestions: check mark of a selected item	`success`
Question	Symptom suggestions: round + icon at the right of each row, before the user selects the row. Not `success`.	`icon`
Question	Symptom search: matched words	`highlight`
Emergency screen (emergency question with the red Potential emergency box)	Page background around the card. Not `danger`.	`background`
Emergency screen (emergency question with the red Potential emergency box)	Red box at the top of the card (for example Potential emergency)	`danger`
Emergency screen (emergency question with the red Potential emergency box)	Text, icons and the call link in the red box	`onStatus`
Emergency screen (emergency question with the red Potential emergency box)	Buttons: background	`buttonNeutralBackground`
Emergency screen (emergency question with the red Potential emergency box)	Buttons: border	`buttonNeutralBorder`
Emergency screen (emergency question with the red Potential emergency box)	Buttons: label	`buttonNeutralText`
Emergency during a check	Banner: background	`danger`
Emergency during a check	Banner: text	`onStatus`
Emergency during a check	Card border	`border`
Emergency during a check	Section and card titles	`dangerText`
Dialog	Dialog panel	`surfaceRaised`
Dialog	Veil behind the dialog	`backdrop`
Dialog	Title	`heading`
Dialog	Text	`text`
Dialog	Close (×) button	`textMuted`
Dialog	OK button: background	`primary`
Dialog	OK button: label	`onPrimary`
Dialog	Cancel button: background	`buttonSecondaryBackground`
Dialog	Cancel button: border	`buttonSecondaryBorder`
Dialog	Cancel button: label	`buttonSecondaryText`
Report (Symptom check report)	Report container	`surface`
Report (Symptom check report)	Header card and basic-information cards	`surfaceSubtle`
Report (Symptom check report)	Urgency box at the top (for example Requires immediate medical attention): background. Not `danger`.	`surfaceSubtle`
Report (Symptom check report)	Urgency box at the top: stripe at the left and icon, high (red)	`danger`
Report (Symptom check report)	Urgency box at the top: stripe at the left and icon, medium (orange)	`warning`
Report (Symptom check report)	Urgency box at the top: stripe at the left and icon, low (green)	`success`
Report (Symptom check report)	Main title and section titles	`primary`
Report (Symptom check report)	Recommendation text: hospital	`dangerText`
Report (Symptom check report)	Recommendation text: doctor	`warningText`
Report (Symptom check report)	Recommendation text: home treatment	`successText`
Report (Symptom check report)	Red Potential emergency box next to the basic-information cards: background	`danger`
Report (Symptom check report)	Red Potential emergency box next to the basic-information cards: text	`onStatus`
Report (Symptom check report)	Borders of illness and service cards	`border`
Report (Symptom check report)	Illness cards: filled Show details button: background	`primary`
Report (Symptom check report)	Illness cards: filled Show details button: label, also when XUND set up colours for your app. Not `buttonSecondaryText` and not `buttonConfirmText`.	`onPrimary`
Report (Symptom check report)	Illness cards: Hide details button: background	`buttonNeutralBackground`
Report (Symptom check report)	Illness cards: Hide details button: border	`buttonNeutralBorder`
Report (Symptom check report)	Illness cards: Hide details button: label	`buttonNeutralText`
Report (Symptom check report)	Small probability bar next to a condition: filled part	`primary`
Report (Symptom check report)	Small probability bar next to a condition: unfilled part. Not `track`.	`neutralSubtle`
Report (Symptom check report)	Feedback button: background	`buttonConfirmBackground`
Report (Symptom check report)	Feedback button: text and icon	`buttonConfirmText`
Report (Symptom check report)	Download button at the end of the report	`buttonConfirmBackground`
Report (Symptom check report)	Restart check button at the bottom (no border): background. Not `buttonSecondaryText`.	`buttonSecondaryBackground`
Report (Symptom check report)	Restart check button at the bottom (no border): label text	`buttonSecondaryText`
Report (Symptom check report)	Background behind partner-service images	`imageBackdrop`
Report (Illness check report)	Action ribbon: background. The app draws it over `surface`, so the ribbon is opaque, also when it stays at the top while the user scrolls.	`primarySubtle`
Report (Illness check report)	Action ribbon: border	`primary`
Report (Illness check report)	Action cards in the action ribbon	`surfaceRaised`
Report (mobile)	Summary card: background	`surfaceSubtle`
Report (mobile)	Summary card: divider	`border`
Report (mobile)	Summary card: labels	`textMuted`
Medical library	Background behind the title and the article. The article has no card of its own.	`background`
Medical library	Title and article headings (for example Overview and symptoms)	`heading`
Medical library	Descriptions in the list	`textSecondary`
Medical library	Dividers in the list	`neutralSubtle`
Medical library	Search: matched words	`highlight`
Medical library	Badges: background	`primarySubtle`
Medical library	Badges: text	`heading`
Medical library	Thieme attribution: box	`surfaceSubtle`
Medical library	Thieme attribution: text	`heading`
Medical library	Background behind the Thieme logo	`imageBackdrop`
Medical library	Recommendation text: hospital	`dangerText`
Medical library	Recommendation text: doctor	`warningText`
Medical library	Recommendation text: home treatment	`successText`
Health solutions	Panels, filter panel and result cards	`surfaceRaised`
Health solutions	Border of the result cards	`neutralSubtle`
Health solutions	Service names	`text`
Health solutions	Addresses and opening hours	`textSecondary`
Health solutions	Section titles	`heading`
Health solutions	open text	`success`
Health solutions	closed and closes soon text	`dangerText`
Health solutions	Opening hours: today's row	`primary`
Health solutions	Opening hours: Closed row	`danger`
Health solutions	Doctor and pharmacy icons and map markers	`icon`
Health solutions	Hospital icon	`dangerText`
Health solutions	Map cluster markers: background	`primary`
Health solutions	Map cluster markers: number	`onPrimary`
Health solutions	Unselected service markers on the map	`surface`
Health solutions	Unselected filter chips: background	`primarySubtle`
Health solutions	Unselected filter chips: text	`primary`
Health solutions	Selected filter chips: background	`primary`
Health solutions	Selected filter chips: text	`onPrimary`
Health solutions	Keyboard focus outline (Tab) of the filter chips, Reset filters, Apply filters, Clear all and Done. Not the filter icon next to the search field and not the close (×) icon that replaces it: these show the default focus outline of the browser, and no colour key changes it.	`focusRing`
Health solutions (mobile)	Drag handle of the result sheet	`textMuted`
Imprint	Links	`link`
Imprint	Links when the user points to them	`linkHover`
Imprint	Background behind the CE mark	`imageBackdrop`
Follow-up screen (Stay in touch e-mail page)	Page background	`surfaceRaised`
Follow-up screen (Stay in touch e-mail page)	Close (×) icon in the top-right corner, normal state	`textMuted`
Follow-up screen (Stay in touch e-mail page)	Close (×) icon in the top-right corner when the user points to it. Not `textMuted`.	`text`
Follow-up screen (Stay in touch e-mail page)	Round shading behind the close (×) icon when the user points to it (5 % opacity)	`shadow`
Follow-up screen (Stay in touch e-mail page)	Title	`heading`
Follow-up screen (Stay in touch e-mail page)	Links	`link`
Follow-up screen (Stay in touch e-mail page)	Error message	`dangerText`
Follow-up screen (Stay in touch e-mail page)	Confirm button: background	`buttonConfirmBackground`
Follow-up screen (Stay in touch e-mail page)	Confirm button: label	`buttonConfirmText`
Error screen	Title and gear icon	`heading`
Error screen	Restart button	`buttonConfirmBackground`
No internet screen (the app has no connection)	Title No internet	`heading`
No internet screen (the app has no connection)	Text Please connect to a Wi-Fi network to continue. and the Wi-Fi icon before it. Not `heading` and not `textSecondary`.	`text`
Page not found (title Hmm, this page does not seem to exist.)	Area behind the water-drop character picture: background. Not `background`.	`imageBackdrop`
Session expired (title Your session has expired)	Area behind the water-drop character picture: background. Not `background`.	`imageBackdrop`