Styleguide

Unsere Markenidentität

Dieser Styleguide definiert die visuelle Identität von Mediform und sorgt für ein konsistentes Erscheinungsbild über alle digitalen Kanäle hinweg – von der Website bis zu internen Tools.

Zu den Logos Zu den Farben

Mediform

KI-Powered

Erfolgreich

Lädt...

Hinweis: Die Nutzung aller hier gezeigten Markenelemente bedarf unserer ausdrücklichen Genehmigung.

1. Markenkern

Mediform steht für professionelle, vertrauenswürdige KI-Lösungen im Gesundheitswesen. Unsere visuelle Sprache ist klar, modern und menschlich – wir verbinden technologische Innovation mit der Wärme und Verlässlichkeit, die Patienten und Ärzte von einem Partner im Gesundheitsbereich erwarten.

Vertrauenswürdig

Seriös und zuverlässig wie ein medizinischer Partner

Innovativ

Moderne Technologie, die Komplexität vereinfacht

Menschlich

Zugänglich und unterstützend, nie kalt oder steril

2. Logo-Verwendung

Das Mediform-Logo besteht aus dem Icon und dem Schriftzug. Es ist in verschiedenen Varianten verfügbar, um eine optimale Darstellung auf unterschiedlichen Hintergründen zu gewährleisten. Laden Sie die passende Version für Ihren Anwendungsfall herunter.

Varianten

Standard (heller Hintergrund)

Mediform

Logo

SVG PNG JPEG

Icon

SVG PNG JPEG

Invertiert (dunkler Hintergrund)

Mediform

Logo

SVG PNG JPEG

Icon

SVG PNG JPEG

Monochrom (heller Hintergrund)

Mediform

Logo

SVG PNG JPEG

Icon

SVG PNG JPEG

Monochrom (dunkler Hintergrund)

Mediform

Logo

SVG PNG JPEG

Icon

SVG PNG JPEG

Icon-Größen

xs (20px)

sm (24px)

default (32px)

lg (48px)

xl (64px)

2xl (96px)

3xl (128px)

Mindestabstände

Mediform

1×

1× = Höhe des Icons. Das Logo benötigt immer mindestens diesen Abstand zu anderen Elementen.

Regeln

Richtig

✓ Logo nur horizontal verwenden
✓ Ausreichend Kontrast zum Hintergrund
✓ Mindestabstände einhalten
✓ Original-Farbverlauf des Icons beibehalten

Vermeiden

✗ Logo verzerren oder rotieren
✗ Farben des Logos ändern
✗ Schatten oder Effekte hinzufügen
✗ Logo auf unruhigen Hintergründen platzieren

3. Farbsystem

Primärfarbe (Primary Blue)

Die Hauptfarbe von Mediform. Vermittelt Vertrauen, Professionalität und Zuverlässigkeit. Verwenden für primäre Aktionen, Links und Akzente.

Farbe

Name

OKLCH

HEX

CSS Variable

primary-50

oklch(0.966 0.017 247.99)

#EBF5FF

--color-primary-50

primary-100

oklch(0.939 0.03 249.68)

#DCEDFF

--color-primary-100

primary-200

oklch(0.877 0.063 247.83)

#B6DBFF

--color-primary-200

primary-300

oklch(0.807 0.104 242.79)

#82C8FE

--color-primary-300

primary-400

oklch(0.745 0.147 238.22)

#39B8FE

--color-primary-400

primary-500

oklch(0.685 0.148 237.31)

#0EA5E9

--color-primary-500

primary-600 ⭐

oklch(0.572 0.124 237.62)

#0981B8

--color-primary-600

primary-700

oklch(0.461 0.1 237.65)

#055F89

--color-primary-700

primary-800

oklch(0.359 0.077 236.94)

#024260

--color-primary-800

primary-900

oklch(0.247 0.053 237.52)

#012437

--color-primary-900

primary-950

oklch(0.186 0.041 238.24)

#001523

--color-primary-950

Verwendung: primary-600 für Buttons, primary-50 für Hintergründe

Sekundärfarbe (Teal)

Ergänzt die Primärfarbe. Steht für Innovation, Frische und Gesundheit. Ideal für Akzente, Erfolgs-Zustände und sekundäre Elemente.

Farbe

Name

OKLCH

HEX

CSS Variable

secondary-50

oklch(0.984 0.014 180.72)

#F0FDFA

--color-secondary-50

secondary-100

oklch(0.953 0.051 180.8)

#CBFBF1

--color-secondary-100

secondary-200

oklch(0.91 0.096 180.43)

#96F7E4

--color-secondary-200

secondary-300

oklch(0.855 0.138 181.07)

#46ECD5

--color-secondary-300

secondary-400

oklch(0.777 0.152 181.91)

#00D5BE

--color-secondary-400

secondary-500 ⭐

oklch(0.704 0.14 182.5)

#00BBA7

--color-secondary-500

secondary-600

oklch(0.6 0.118 184.7)

#009689

--color-secondary-600

secondary-700

oklch(0.511 0.096 186.39)

#00786F

--color-secondary-700

secondary-800

oklch(0.437 0.078 188.22)

#005F5A

--color-secondary-800

secondary-900

oklch(0.386 0.063 188.42)

#0B4F4A

--color-secondary-900

secondary-950

oklch(0.277 0.046 192.52)

#022F2E

--color-secondary-950

Verwendung: secondary-600 für Akzente und Erfolgs-Elemente, secondary-500 im Icon-Gradient

Neutralfarben (Slate)

Für Text, Hintergründe und strukturelle Elemente. Bietet eine warme, professionelle Grundlage.

Farbe

Name

OKLCH

HEX

CSS Variable

slate-50

oklch(0.984 0.003 247.86)

#F8FAFC

--color-slate-50

slate-100

oklch(0.968 0.007 247.9)

#F1F5F9

--color-slate-100

slate-200

oklch(0.929 0.013 255.51)

#E2E8F0

--color-slate-200

slate-300

oklch(0.869 0.022 252.89)

#CAD5E2

--color-slate-300

slate-400

oklch(0.704 0.04 256.79)

#90A1B9

--color-slate-400

slate-500

oklch(0.554 0.046 257.42)

#62748E

--color-slate-500

slate-600 ⭐

oklch(0.446 0.043 257.28)

#45556C

--color-slate-600

slate-700

oklch(0.372 0.044 257.29)

#314158

--color-slate-700

slate-800

oklch(0.279 0.041 260.03)

#1D293D

--color-slate-800

slate-900 ⭐

oklch(0.208 0.042 265.75)

#0F172B

--color-slate-900

slate-950

oklch(0.129 0.042 264.69)

#020618

--color-slate-950

Verwendung: slate-900 für Überschriften, slate-600 für Fließtext

Semantische Farben

Für Zustände und Feedback. Sparsam und konsistent einsetzen.

Erfolg

green-600

Fehler

red-600

Warnung

amber-500

Info

sky-500

Marken-Gradient

Der charakteristische Farbverlauf von primary-600 zu secondary-500. Nur für besondere Hervorhebungen und das Logo-Icon verwenden.

primary-600 -> secondary-500

bg-linear-to-r from-primary-600 to-secondary-500

Dezenter Gradient

Ein zurückhaltender Farbverlauf von primary-600 zu primary-800. Ideal für großflächige Hintergründe wie Kontakt-Sektionen oder CTA-Bereiche, bei denen der Marken-Gradient zu dominant wäre.

primary-600 -> primary-800

bg-linear-to-br from-primary-600 to-primary-800

4. Typografie

Schriftart

Inter Variable

Inter ist eine moderne, gut lesbare Sans-Serif-Schrift, die für Benutzeroberflächen optimiert wurde. Sie bietet hervorragende Lesbarkeit auf allen Bildschirmgrößen.

font-family: Inter Variable, ui-sans-serif, sans-serif, system-ui;

Schriftgrößen

6xl Display

5xl Headline

4xl H1

3xl H2

2xl H3

xl H4

lg Lead / Intro

base Body Text (Standard-Fließtext)

sm Small / Captions

xs Labels / Badges

Hierarchie & Farben

Element	Gewicht	Farbe
Überschriften	font-bold (700)	`slate-900`
Sub-Überschriften	font-semibold (600)	`slate-800`
Fließtext	font-normal (400)	`slate-600`
Beschriftungen	font-medium (500)	`slate-700`
Sekundärtext	font-normal (400)	`slate-500`
Links	font-medium (500)	`primary-600`

Abstände & Laufweite

Tracking-Tight (-0.025em): Für große Überschriften (4xl+)
Tracking-Normal (0): Für Fließtext und kleine Überschriften
Tracking-Wide (0.025em): Für Badges und Labels in Uppercase
Leading-Tight (1.25): Für Überschriften
Leading-Relaxed (1.625): Für Fließtext mit viel Inhalt