Digital Design Refresh
Colours, typography, spacing and components
— a first overview.
Digital design conceptually based on Google Material Design 3 — an open-source design system that unifies typography, colour, layout and interaction in a cohesive framework, serving as a worldwide reference for user-friendly, accessible and scalable digital products.
Rules, components and tokens to look up, for people and AI agents: Motion Intelligence
Colours
The colour system is based on Google's M3 colour principle. Medical and Sports each have their own primary, accent and surface colours. Shared colours cover states like success, warning or error as well as neutral tones for UI elements. All colour combinations meet WCAG 2.1 AA contrast requirements — an international standard that ensures text and controls remain readable for people with reduced vision (4.5 : 1 for text, 3 : 1 for large text and UI components).
Medical
The Medical palette is built on a deep blue (#133e8f) as primary colour, conveying trust and professionalism. Cyan and yellow serve as accent families — each with a dark, medium and light variant plus a tint for background surfaces. Following M3's container principle, the tints (#d7ebf5, #fff3d7) provide subtle backgrounds that achieve AAA contrast values with the blue primary text.
Sports
The Sports palette uses a dark blue (#02263d) as its base with neon green as an energetic primary action colour. Grey-blue tones form neutral surfaces. The high-contrast combination of neon green on dark blue provides strong visibility and an active, dynamic appearance that clearly differentiates from the Medical sub-brand.
General / Utility
Brand-neutral colours shared by both sub-brands. Grey tones create text hierarchy and surface differentiation (following M3's on-surface / on-surface-variant principle), while semantic green/red pairs represent success and error states. The overlay colour (#00000099) is used for modal backgrounds and image overlays.
Typography
Two typefaces share the work: BF Headline Bold for large headings (H1–H4, uppercase) and Pangea Text by Christoph Koeberlin (Fontwerk) for smaller headings (H5–H6) and body text in Regular and SemiBold. The Text variant of Pangea is optimised for small font sizes — with wider letter spacing and more open forms.
Font sizes adapt across three screen widths (mobile, tablet, desktop). Headings appear in brand blue, body text in dark grey (#4c5466) — creating hierarchy and comfortable reading contrast.
BF Headline is based on DIN 1451 — a typeface created in 1931 for road signs and technical drawings, still one of the most widely used typefaces in Germany today. BF Headline takes its clear design language but rounds the letter endings — giving it a more modern, approachable feel. Drawn by Sheehan Sista, finalised by TypeMates, it is available licence-free as a proprietary development.
Display Headings — BFHeadline
Text Headings & Body — Pangea Text
Responsive Type Scale
| Style | Font | Weight | Case | 390px | 1440px | 1920px |
|---|---|---|---|---|---|---|
| H1 | BFHeadline | Bold | UPPER | 40px | 68px | 82px |
| H2 | BFHeadline | Bold | UPPER | 36px | 58px | 68px |
| H3 | BFHeadline | Bold | UPPER | 32px | 40px | 48px |
| H4 | BFHeadline | Bold | UPPER | 28px | 32px | 40px |
| H5 | Pangea Text | SemiBold | Original | 22px | 28px | 36px |
| H6 | Pangea Text | SemiBold | Original | 20px | 22px | 28px |
| Body L | Pangea Text | Regular / SemiBold | Original | — | 19px | — |
| Body M | Pangea Text | Regular / SemiBold | Original | — | 17px | — |
| Body S | Pangea Text | Regular / SemiBold | Original | — | 14px | — |
| Body XS | Pangea Text | Regular / SemiBold | Original | — | 13px | — |
| Body XXS | Pangea Text | Regular / SemiBold | Original | — | 12px | — |
Spacing & Layout
All spacing builds on a 4-unit scale (4, 8, 12, 16, 20, 24, 32, 40px) — creating consistent distances throughout the interface. Smaller values control spacing within components (e.g. padding inside a button), larger values the space between sections. Corner radii range from subtle (12px for input fields) to fully rounded (40px for pill buttons).
Inner Padding Scale
Component Padding
Border Radius
Vertical Rhythm
Vertical spacing on article pages follows a two-tier principle: the gap between content elements within a section (e.g. heading, body text, image) is 32px. The gap between distinct sections (e.g. two consecutive topic blocks) is 48px. This system creates a clear visual structure and helps the reader intuitively recognise cohesion and separation.
Grid System
| Property | Desktop | Mobile |
|---|---|---|
| Gutter | 20px | 12px |
| Margin | 80px | 20px |
Effects
Shadows create depth and show which elements sit in the foreground. Three levels cover common cases: small for cards and hover states, medium for dropdowns and popovers, large for modal dialogues. Shadows use a darkened brand blue instead of pure black — this feels warmer and fits better into the colour palette.
| Level | Box Shadow | Usage |
|---|---|---|
| 1 | 0 1px 3px rgba(0,0,0,0.06) | Subtle card borders |
| 2 | 0 4px 12px rgba(0,0,0,0.08) | Default cards |
| 3 | 0 8px 24px rgba(0,0,0,0.1) | Hover / Elevated cards |
| 4 | 0 16px 48px rgba(0,0,0,0.14) | Modals & overlays |
Buttons
Three levels create a clear hierarchy: Primary (filled) for main actions, Secondary (outline) for less prominent actions, Accent (cyan/yellow background) for calls to action that need to stand out. All buttons have a pill shape (40px radius) and meet contrast requirements for good readability.
Primary Buttons
Secondary / Outline Buttons
Accent Buttons
Sports Brand Buttons
Filter Chips
CSS Specifications
Copy-ready CSS for each button variant. Click a tab to view code and live preview.
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: 'Pangea Text', sans-serif;
font-size: 14px;
font-weight: 600;
padding: 12px 28px;
border: 2px solid transparent;
border-radius: 40px;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
}.btn--primary {
background: #133e8f; /* colourMedicalBlue */
color: #ffffff;
}
.btn--primary:hover {
background: #0f3275; /* 10% darker */
}.btn--secondary {
background: transparent;
border: 1.5px solid #133e8f;
color: #133e8f;
}
.btn--secondary:hover {
background: #e5ecf4; /* colourMedicalLightBlue */
}.btn--disabled {
background: #e6e6e6; /* colourGeneralLightGrey */
color: #c2c2c2; /* colourGeneralGrey */
cursor: not-allowed;
}
/* No hover state — interaction is blocked */.btn--cyan {
background: #d7ebf5; /* colourMedicalCyanTint */
color: #133e8f; /* colourMedicalBlue */
}
.btn--cyan:hover {
background: #20b9d6; /* colourMedicalCyan */
color: #133e8f;
}.btn--yellow {
background: #fcce59; /* colourMedicalYellowLight */
color: #133e8f; /* colourMedicalBlue */
}
.btn--yellow:hover {
background: #fbba00; /* colourMedicalYellow */
color: #133e8f;
}/* Default */
.btn {
padding: 12px 28px;
font-size: 14px;
}
/* Small */
.btn--small {
padding: 8px 20px;
font-size: 13px;
}
/* Icon Only */
.btn--icon-only {
width: 44px;
height: 44px;
padding: 0;
border-radius: 50%;
}.btn--sports-primary {
background: #b9fd33; /* colourSportsNeonGreen */
color: #02263d; /* colourSportsDarkBlue */
}
.btn--sports-secondary {
background: transparent;
border-color: #b3bec5; /* colourSportsGreyBlue */
color: #02263d;
}Button Colour Matrix
Primary buttons adapt their colour to the active sub-brand theme:
| Brand | Primary BG | Primary Text | Accent |
|---|---|---|---|
| Medical | #133e8f | #ffffff | #20b9d6 |
| Sports | #b9fd33 | #02263d | #02263d |
Inputs
Form fields have rounded corners (12px), consistent inner padding (14px) and show their state through the border colour: grey by default, brand blue on focus, green for success and red for error. A helper text below each field describes the state — so feedback does not rely on colour alone.
Text Input States
Other Input Types
Validation Pattern
Dark Background Variant
Selection
Checkboxes, radio buttons and toggles consistently use brand blue for the selected state and grey for unselected. Toggle switches show their state through a clear colour change between on and off. All controls have a minimum tap area of 44px, making them easy to use on mobile devices.
Checkboxes
Radio Buttons
Toggles
Other
Supporting elements like badges, info tabs, tooltips and scrollbars. Badges use the brand colours for categorisation and status display. Info tabs mark content areas with an L-shaped frame. Tooltips appear dark on light for good readability. Scrollbars are visually aligned with the overall design.
Badges
| padding | 4px 8px |
| border-radius | 12px |
| font-size | 12px |
| font-weight | 600 (SemiBold) |
| line-height | 16px |
Info-Tab
The info tab acts as a structuring design element in addition to the headline. It provides orientation comparable with a browser tab. Intended for short content such as product names, categories, conditions, or terms like "Competition". Use is optional — it works particularly well for highlighting sections like headers, newsletters or about areas.
| font-size | 14px |
| font-weight | 400 (Regular) |
| line-height | 1.2 |
| letter-spacing | 0.85px |
| text-transform | uppercase |
| padding | 7px 15px 0 0 |
| margin-left | 12px |
| border-top | 1px solid |
| corner radius (::before) | 12px |
Tooltip
Custom Scrollbar
All Tokens
All design tokens at a glance — the named values for colours, spacing, font sizes etc. used in Figma and in code. Tokens ensure that design decisions are maintained in one place and arrive consistently everywhere: in Figma (via Tokens Studio) and in code (as CSS Custom Properties).
Colour Tokens
| Token | CSS Variable | Value | |
|---|---|---|---|
| colourMedicalBlue | --colour-medical-blue | #133e8f | |
| colourMedicalLightBlue | --colour-medical-light-blue | #e5ecf4 | |
| colourMedicalCyan | --colour-medical-cyan | #20b9d6 | |
| colourMedicalCyanDark | --colour-medical-cyan-dark | #178196 | |
| colourMedicalCyanLight | --colour-medical-cyan-light | #92e0ef | |
| colourMedicalYellow | --colour-medical-yellow | #fbba00 | |
| colourMedicalYellowDark | --colour-medical-yellow-dark | #bc8c00 | |
| colourMedicalYellowLight | --colour-medical-yellow-light | #fcce59 | |
| colourMedicalYellowTint | --colour-medical-yellow-tint | #fff3d7 | |
| colourMedicalCyanTint | --colour-medical-cyan-tint | #d7ebf5 | |
| colourSportsDarkBlue | --colour-sports-dark-blue | #02263d | |
| colourSportsGreyBlue | --colour-sports-grey-blue | #b3bec5 | |
| colourSportsGreyBlueDark | --colour-sports-grey-blue-dark | #586974 | |
| colourSportsGreyBlueLight | --colour-sports-grey-blue-light | #dce1e5 | |
| colourSportsNeonGreen | --colour-sports-neon-green | #b9fd33 | |
| colourSportsNeonGreenDark | --colour-sports-neon-green-dark | #4f6628 | |
| colourSportsNeonGreenLight | --colour-sports-neon-green-light | #cffc7a | |
| colourGeneralDarkGrey | --colour-general-dark-grey | #45484F | |
| colourGeneralGrey | --colour-general-grey | #c2c2c2 | |
| colourGeneralLightGrey | --colour-general-light-grey | #e6e6e6 | |
| colourGeneralVeryLightGrey | --colour-general-very-light-grey | #f0f0f0 | |
| colourGeneralWhite | --colour-general-white | #ffffff | |
| colourGeneralOverlayTint | --colour-general-overlay-tint | #00000099 | |
| colourGeneralCorrect | --colour-general-correct | #05944f | |
| colourGeneralIncorrect | --colour-general-incorrect | #e11900 | |
| colourGeneralCorrectLight | --colour-general-correct-light | #b4dfca | |
| colourGeneralIncorrectLight | --colour-general-incorrect-light | #f5bab4 |
Spacing Tokens
| Token | CSS Variable | Value |
|---|---|---|
| spacingComponentPaddingDesktop | --spacing-component-padding-desktop | 96px |
| spacingComponentPaddingMobile | --spacing-component-padding-mobile | 72px |
| spacingInnerPaddingXS | --spacing-inner-xs | 4px |
| spacingInnerPaddingS | --spacing-inner-s | 8px |
| spacingInnerPaddingM | --spacing-inner-m | 16px |
| spacingInnerPaddingL | --spacing-inner-l | 24px |
| spacingInnerPaddingXL | --spacing-inner-xl | 32px |
| spacingInnerPaddingXXL | --spacing-inner-xxl | 40px |
| spacingRadiusRadiusLarge | --radius-large | 40px |
| spacingRadiusRadiusMedium | --radius-medium | 20px |
| spacingRadiusRadiusSmall | --radius-small | 12px |
| spacingGridGutterDesktop | --grid-gutter-desktop | 20px |
| spacingGridGutterMobile | --grid-gutter-mobile | 12px |
| spacingGridMarginDesktop | --grid-margin-desktop | 80px |
| spacingGridMarginMobile | --grid-margin-mobile | 20px |