Digital Design Styleguide

Farben

Das Farbsystem orientiert sich am M3-Farbprinzip von Google. Medical und Sports haben jeweils eigene Primär-, Akzent- und Oberflächenfarben. Hinzu kommen gemeinsame Farben für Zustände wie Erfolg, Warnung oder Fehler sowie neutrale Töne für UI-Elemente. Alle Farbkombinationen erfüllen die WCAG 2.1 AA Kontrastanforderungen — ein internationaler Standard, der sicherstellt, dass Text und Bedienelemente auch für Menschen mit eingeschränktem Sehvermögen gut lesbar bleiben (4,5 : 1 für Text, 3 : 1 für große Schrift und UI-Elemente).

Medical

Die Medical-Palette basiert auf einem tiefen Blau (#133e8f) als Primärfarbe, das Vertrauen und Professionalität vermittelt. Cyan und Gelb dienen als Akzentfamilien — jeweils mit einer dunklen, mittleren und hellen Variante plus einem Tint für Hintergrundflächen. Dem Container-Prinzip von M3 folgend bieten die Tints (#d7ebf5, #fff3d7) dezente Hintergründe, die mit dem blauen Primärtext AAA-Kontrastwerte erreichen.

Blue

colourMedicalBlue

Light Blue

colourMedicalLightBlue

Cyan

colourMedicalCyan

Cyan Dark

colourMedicalCyanDark

Cyan Light

colourMedicalCyanLight

Light Cyan Tint

colourMedicalCyanTint

Yellow

colourMedicalYellow

Yellow Dark

colourMedicalYellowDark

Yellow Light

colourMedicalYellowLight

Light Yellow Tint

colourMedicalYellowTint

Sports

Die Sports-Palette verwendet ein dunkles Blau (#02263d) als Basis mit Neongrün als energiegeladene primäre Aktionsfarbe. Graublau-Töne bilden neutrale Oberflächen. Die kontrastreiche Kombination von Neongrün auf Dunkelblau sorgt für starke Sichtbarkeit und ein aktives, dynamisches Erscheinungsbild, das sich klar von der Medical-Submarke abgrenzt.

Dark Blue

colourSportsDarkBlue

Grey Blue

colourSportsGreyBlue

Grey Blue Dark

colourSportsGreyBlueDark

Grey Blue Light

colourSportsGreyBlueLight

Neon Green

colourSportsNeonGreen

Neon Green Dark

colourSportsNeonGreenDark

Neon Green Light

colourSportsNeonGreenLight

General / Utility

Markenneutrale Farben, die von beiden Submarken gemeinsam genutzt werden. Grautöne schaffen Texthierarchie und Oberflächendifferenzierung (nach dem on-surface / on-surface-variant Prinzip von M3), während die semantischen Grün/Rot-Paare Erfolgs- und Fehlerzustände abbilden. Die Overlay-Farbe (#00000099) wird für modale Hintergründe und Bildüberlagerungen eingesetzt.

Dark Grey

colourGeneralDarkGrey

Grey

colourGeneralGrey

Light Grey

colourGeneralLightGrey

Very Light Grey

colourGeneralVeryLightGrey

White

colourGeneralWhite

Overlay Tint

colourGeneralOverlayTint

Correct

colourGeneralCorrect

Incorrect

colourGeneralIncorrect

Correct Light

colourGeneralCorrectLight

Incorrect Light

colourGeneralIncorrectLight

Typografie

Zwei Schriften teilen sich die Arbeit: BF Headline Bold für große Überschriften (H1–H4, Großbuchstaben) und Pangea Text von Christoph Koeberlin (Fontwerk) für kleinere Überschriften (H5–H6) und Fließtext in Regular und SemiBold. Die Text-Variante von Pangea ist für kleine Schriftgrößen optimiert — mit weiterem Buchstabenabstand und offeneren Formen.

Die Schriftgrößen passen sich an drei Bildschirmbreiten an (Mobile, Tablet, Desktop). Überschriften erscheinen in Markenblau, Fließtext in Dunkelgrau (#4c5466) — das schafft Hierarchie und sorgt für angenehmen Lesekontrast.

BF Headline basiert auf der DIN 1451 — einer Schrift, die 1931 für Verkehrsschilder und technische Zeichnungen entstand und bis heute eine der meistverwendeten Schriften Deutschlands ist. Die BF Headline übernimmt deren klare Formensprache, rundet aber die Buchstabenenden ab — das wirkt moderner und zugänglicher. Gezeichnet von Sheehan Sista, fertig gebaut von TypeMates, steht sie als Eigenentwicklung lizenzfrei zur Verfügung.

Display Headings — BFHeadline

H1 68px / Bold / Upper Mobile: 40px

MOTION IS LIFE

H2 58px / Bold / Upper Mobile: 36px

ANKLE OSTEOARTHRITIS

H3 40px / Bold / Upper Mobile: 32px

WHAT IS ANKLE OSTEOARTHRITIS?

H4 32px / Bold / Upper Mobile: 28px

DIAGNOSIS AND TREATMENT

Text Headings & Body — Pangea Text

H5 28px / SemiBold Mobile: 22px

Quick facts about this condition

H6 22px / SemiBold Mobile: 20px

Related symptoms and causes

Body L 19px / Regular & SemiBold

Ankle osteoarthritis is a condition in which the cartilage in the ankle joint gradually wears away, causing pain, stiffness, and reduced mobility. Early diagnosis and treatment can help manage symptoms effectively.

Body M 17px / Regular & SemiBold

The condition most commonly develops after an injury to the ankle, or as a result of wear and tear over time. Supports and braces can provide relief during everyday activities.

Body S 14px / Regular & SemiBold

Used for captions, footnotes, and secondary information throughout the interface.

Body XS 13px / Regular & SemiBold

Small labels, metadata, and supplementary details.

Body XXS 12px / Regular & SemiBold

Legal text, fine print, and micro-copy.

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	—

Abstände & Layout

Alle Abstände bauen auf einer 4er-Skala auf (4, 8, 12, 16, 20, 24, 32, 40px) — so entstehen gleichmäßige Abstände in der gesamten Oberfläche. Kleinere Werte regeln Abstände innerhalb von Komponenten (z. B. Padding in einem Button), größere Werte den Abstand zwischen Sektionen. Die Eckenrundungen reichen von dezent (12px bei Eingabefeldern) bis vollständig rund (40px bei Pill-Buttons).

Inner Padding Scale

XS

4px

S

8px

M

16px

L

24px

XL

32px

XXL

40px

Component Padding

Desktop

96px

Mobile

72px

Border Radius

Small

12px

Medium

20px

Large

40px

Vertical Rhythm

Vertikale Abstände auf Artikelseiten folgen einem zweistufigen Prinzip: Zwischen Inhaltsblöcken innerhalb eines Abschnitts (z. B. Überschrift, Fließtext, Bild) beträgt der Abstand 32px. Zwischen eigenständigen Abschnitten (z. B. zwei aufeinanderfolgenden Themenblöcken) beträgt der Abstand 48px. Dieses System sorgt für eine klare visuelle Gliederung und hilft dem Leser, Zusammengehörigkeit und Trennung intuitiv zu erkennen.

Innerhalb eines Blocks

H3 Heading

32px

Body text paragraph

32px

Image

Zwischen Abschnitten

Abschnitt A

48px

Abschnitt B

48px

Abschnitt C

Grid System

Property	Desktop	Mobile
Gutter	`20px`	`12px`
Margin	`80px`	`20px`

1

2

3

4

5

6

7

8

9

10

11

12

12-column grid · 20px gutters · 80px margins

Effekte

Schatten erzeugen Tiefe und zeigen, welche Elemente im Vordergrund stehen. Drei Stufen decken die gängigen Fälle ab: klein für Karten und Hover-Zustände, mittel für Dropdowns und Popovers, groß für modale Dialoge. Als Schattenfarbe dient ein abgedunkeltes Markenblau statt reinem Schwarz — das wirkt wärmer und fügt sich besser in die Farbpalette ein.

Level 1

Level 2

Level 3

Level 4

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

Drei Stufen schaffen eine klare Rangfolge: Primary (gefüllt) für Hauptaktionen, Secondary (Outline) für weniger wichtige Aktionen, Akzent (Cyan/Gelb-Hintergrund) für Handlungsaufforderungen, die sich abheben sollen. Alle Buttons haben eine Pill-Form (40px Radius) und erfüllen die Kontrastanforderungen für gute Lesbarkeit.

Primary Buttons

Secondary / Outline Buttons

Accent Buttons

Sports Brand Buttons

Filter Chips

✓ Selected Option A Option B

CSS Specifications

Kopierbereites CSS für jede Button-Variante. Tab anklicken, um Code und Live-Vorschau anzuzeigen.

.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;
}

Height: ~44px (auto)

Padding: 12px top/bottom, 28px left/right

Border-radius: 40px (pill shape)

Font: Pangea Text SemiBold 14px

Border: 2px solid transparent

Icon gap: 8px

Transition: all 0.2s ease

.btn--primary {
  background: #133e8f;   /* colourMedicalBlue */
  color: #ffffff;
}

.btn--primary:hover {
  background: #0f3275;   /* 10% darker */
}

Default

Hover

Background: #133e8f

Text: #ffffff

Hover BG: #0f3275

Contrast: 9.44:1 ✓ AAA

.btn--secondary {
  background: transparent;
  border: 1.5px solid #133e8f;
  color: #133e8f;
}

.btn--secondary:hover {
  background: #e5ecf4;   /* colourMedicalLightBlue */
}

Default

Hover

Background: transparent

Border: 1.5px solid #133e8f

Text: #133e8f

Hover BG: #e5ecf4

.btn--disabled {
  background: #e6e6e6;   /* colourGeneralLightGrey */
  color: #c2c2c2;        /* colourGeneralGrey */
  cursor: not-allowed;
}

/* No hover state — interaction is blocked */

Disabled

Background: #e6e6e6

Text: #c2c2c2

Cursor: not-allowed

Contrast: 1.43:1 (intentionally muted)

.btn--cyan {
  background: #d7ebf5;   /* colourMedicalCyanTint */
  color: #133e8f;        /* colourMedicalBlue */
}

.btn--cyan:hover {
  background: #20b9d6;   /* colourMedicalCyan */
  color: #133e8f;
}

Default

Hover

Background: #d7ebf5

Text: #133e8f

Hover BG: #20b9d6

Contrast: 8.09:1 ✓ AAA

.btn--yellow {
  background: #fcce59;   /* colourMedicalYellowLight */
  color: #133e8f;        /* colourMedicalBlue */
}

.btn--yellow:hover {
  background: #fbba00;   /* colourMedicalYellow */
  color: #133e8f;
}

Default

Hover

Background: #fcce59

Text: #133e8f

Hover BG: #fbba00

Contrast: 6.68:1 ✓ AA

/* 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%;
}

Default

Small

Icon Only

Default: 12px 28px / 14px

Small: 8px 20px / 13px

Icon: 44×44px / round

.btn--sports-primary {
  background: #b9fd33;   /* colourSportsNeonGreen */
  color: #02263d;        /* colourSportsDarkBlue */
}

.btn--sports-secondary {
  background: transparent;
  border-color: #b3bec5; /* colourSportsGreyBlue */
  color: #02263d;
}

Primary

Outline (on dark)

Primary BG: #b9fd33

Primary Text: #02263d

Outline border: #b3bec5

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`

Eingabefelder

Formularfelder haben abgerundete Ecken (12px), einheitlichen Innenabstand (14px) und zeigen ihren Zustand über die Rahmenfarbe: Grau im Normalzustand, Markenblau bei Fokus, Grün bei Erfolg und Rot bei Fehler. Zusätzlich erscheint unter jedem Feld ein Hilfstext, der den Zustand beschreibt — so ist das Feedback nicht allein von Farbe abhängig.

Text Input States

Default

Filled

Focused

Error

This field is required

Success

Looks good!

Disabled

Other Input Types

Password

••••••••••••

Select

Textarea

Search

🔍

Validation Pattern

✓ At least 8 characters

✓ Contains a number

✗ Contains a special character

Dark Background Variant

Label

Auswahl

Checkboxen, Radio-Buttons und Toggles nutzen einheitlich Markenblau für den ausgewählten Zustand und Grau für den nicht ausgewählten. Toggle-Switches zeigen ihren Zustand durch einen deutlichen Farbwechsel zwischen Ein und Aus. Alle Steuerungen haben eine Mindest-Tippfläche von 44px, damit sie auch auf Mobilgeräten gut bedienbar sind.

Checkboxes

Compression Sleeves Insoles

Radio Buttons

Featured Newest Price: High–Low Price: Low–High

Toggles

Off

On

Navigation

Breadcrumbs zeigen den aktuellen Pfad innerhalb der Seitenhierarchie. Segmented Controls ermöglichen die Auswahl zwischen sich ausschließenden Optionen — z. B. als Filter. Tabs heben den aktiven Reiter mit einem gefüllten Hintergrund hervor, inaktive erscheinen in gedämpftem Grau — so ist auf einen Blick klar, wo man sich befindet.

Breadcrumb

‹ See Arthrosis

Segmented Control

Improved Stability

Pain-free running

More performance

Faster Regeneration

Classic Tabs ↗ M3

Product Details

Sizing

Indications

Downloads

Accessories

Soft Tabs

Active Tab Inactive Tab Another Tab Last Tab

Weitere

Ergänzende Elemente wie Badges, Info-Tabs, Tooltips und Scrollbars. Badges nutzen die Markenfarben zur Kennzeichnung und Statusanzeige. Info-Tabs kennzeichnen Inhaltsbereiche mit einem L-förmigen Rahmen. Tooltips erscheinen dunkel auf hellem Grund für gute Lesbarkeit. Scrollbars sind optisch an das Gesamtdesign angepasst.

Badges

Injuries Injuries Perfomance Perfomance

padding	`4px 8px`
border-radius	`12px`
font-size	`12px`
font-weight	`600 (SemiBold)`
line-height	`16px`

Info-Tab

Der Info-Tab dient als strukturierendes Gestaltungselement ergänzend zur Headline. Er schafft Orientierung ähnlich wie ein Browser-Tab. Vorgesehen für kurze Inhalte wie Produktnamen, Kategorien, Krankheitsbilder oder Begriffe wie „Gewinnspiel". Die Anwendung ist optional — zur Hervorhebung in Sektionen wie Header, Newsletter oder Über uns bietet er sich besonders an.

Winter Season Winter Season

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

Hover state with interaction area

Alle Tokens

Alle Design-Tokens auf einen Blick — also die benannten Werte für Farben, Abstände, Schriftgrößen usw., die in Figma und im Code verwendet werden. Tokens sorgen dafür, dass Designentscheidungen an einer Stelle gepflegt werden und überall gleich ankommen: in Figma (via Tokens Studio) und im Code (als 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`