Skip to content

README-Branding und aktuelle Kompass-Collage ergänzen #150

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
TimoFrank merged 1 commit into from
Jul 29, 2026
Merged

README-Branding und aktuelle Kompass-Collage ergänzen #150

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 32 additions & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<p align="center">
<img src="dokumentation/assets/readme/versorgungs-kompass-header-v2.svg" alt="#Mitmachen und Versorgungs-Kompass mit den Modulen Versorgung, Stakeholder, Hospitation und Formate" width="100%" />
<img src="dokumentation/assets/readme/mitmachen-kompass-banner-v3.png" alt="#Mitmachen mit Versorgungs-Kompass, Stakeholder-Kompass, Hospitations-Kompass und Format-Kompass" width="100%" />
</p>

<p align="center">
Expand All @@ -17,11 +17,40 @@
> [!IMPORTANT]
> Die öffentliche Demo arbeitet ausschließlich mit fiktiven Beispieldaten. Verbindliche Informationen zu [#Mitmachen](https://www.gematik.de/mitmachen) und dem [Versorgungs-Netzwerk](https://www.gematik.de/mitmachen/versorgungs-netzwerk) stehen auf gematik.de.

## Vier Kompasse

**#Mitmachen** verbindet vier gleichrangige Kompasse. Eigene Signets und Farben schaffen Orientierung; die vollständigen Namen bleiben in allen Ansichten sichtbar.

<table>
<tr>
<td width="50%" align="center">
<img src="public/brand/versorgungs-kompass/lockup-horizontal.svg" alt="Versorgungs-Kompass" width="92%" />
<br /><sub>Versorgung regional verstehen.</sub>
</td>
<td width="50%" align="center">
<img src="public/brand/modules/stakeholder/lockup-horizontal.svg" alt="Stakeholder-Kompass" width="92%" />
<br /><sub>Perspektiven gezielt verbinden.</sub>
</td>
</tr>
<tr>
<td width="50%" align="center">
<img src="public/brand/modules/hospitation/lockup-horizontal.svg" alt="Hospitations-Kompass" width="92%" />
<br /><sub>Von Beobachtung zu Evidenz.</sub>
</td>
<td width="50%" align="center">
<img src="public/brand/modules/formate/lockup-horizontal.svg" alt="Format-Kompass" width="92%" />
<br /><sub>Austausch wirksam gestalten.</sub>
</td>
</tr>
</table>

## Aktueller Einblick

<p align="center">
<img src="dokumentation/assets/readme/versorgungs-kompass-module-collage-v2.png" alt="#Mitmachen mit Versorgungs-Kompass, Stakeholder-Kompass, Hospitations-Kompass und Format-Kompass" width="100%" />
<img src="dokumentation/assets/readme/mitmachen-kompass-collage-v3.png" alt="Aktuelle Anwendungscollage mit Versorgungs-Kompass, Stakeholder-Kompass, Hospitations-Kompass und Format-Kompass" width="100%" />
</p>

<p align="center"><sub>Vier Marken, eine gemeinsame Anwendung. Sämtliche dargestellten Personen, Organisationen und Fachdaten sind fiktiv.</sub></p>
<p align="center"><sub>Vier Kompasse, eine gemeinsame Anwendung. Sämtliche dargestellten Personen, Organisationen und Fachdaten sind fiktiv.</sub></p>

**#Mitmachen** verbindet Versorgungs-Kompass, Stakeholder-Kompass, Hospitations-Kompass und Format-Kompass in einer gemeinsamen Anwendung. So werden regionale Perspektiven sichtbar, Erfahrungen nachvollziehbar und Erkenntnisse für die gemeinsame Arbeit nutzbar.

Expand Down
4 changes: 4 additions & 0 deletions dokumentation/assets/readme/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@

Diese Bilder sind versionierte Dokumentationsassets und keine Laufzeitquellen der Anwendung.

- `mitmachen-kompass-banner-v3.png`: aktuelles Markenbanner mit `#Mitmachen` und den vier gleichrangigen Kompassen.
- `mitmachen-kompass-collage-v3.png`: aktuelle Collage aus neu aufgenommenen Browserzuständen aller vier Kompasse.
- `mitmachen-kompass-collage-v3.html`: reproduzierbare Browserquelle der aktuellen Collage.
- `module-previews-v3/`: aktuelle Browseraufnahmen für die vier Collage-Kacheln.
- `versorgungs-kompass-header-v2.svg`: skalierbarer README-Header mit den vier Produktmodulen.
- `versorgungs-kompass-module-collage-v2.png`: gerenderte Collage aus realen Browserzuständen aller vier Produktmodule.
- `versorgungs-kompass-module-collage-v2.html`: reproduzierbare Browserquelle der Collage.
Expand Down
Binary file added dokumentation/assets/readme/mitmachen-kompass-banner-v3.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
203 changes: 203 additions & 0 deletions dokumentation/assets/readme/mitmachen-kompass-collage-v3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,203 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="data:," />
<title>#Mitmachen – vier Kompasse</title>
<style>
:root {
font-family: Arial, Helvetica, sans-serif;
color: #17275f;
background: #eef3fa;
}

* {
box-sizing: border-box;
}

html,
body {
width: 1600px;
height: 1200px;
margin: 0;
overflow: hidden;
}

body {
background:
radial-gradient(circle at 92% 4%, rgba(0, 255, 101, 0.1), transparent 24%),
linear-gradient(180deg, #f8faff 0%, #edf2f9 100%);
}

.collage {
width: 100%;
height: 100%;
padding: 42px 54px 46px;
}

.collage__header {
height: 132px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 42px;
}

.collage__headline {
display: flex;
align-items: center;
gap: 30px;
}

.mitmachen-lockup {
width: 330px;
height: auto;
}

.header-divider {
width: 1px;
height: 64px;
background: #cbd6e8;
}

.collage__title {
max-width: 610px;
margin: 0;
color: #10236e;
font-size: 36px;
line-height: 1.08;
letter-spacing: -1.2px;
}

.collage__badge {
padding: 12px 18px;
border: 1px solid #cbd8eb;
border-radius: 999px;
background: rgba(255, 255, 255, 0.8);
color: #65728a;
font-size: 15px;
font-weight: 700;
}

.compass-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(2, 1fr);
gap: 24px;
height: calc(100% - 132px);
}

.compass-card {
--accent: #559ee8;
overflow: hidden;
border: 1px solid #d5deec;
border-top: 8px solid var(--accent);
border-radius: 22px;
background: #ffffff;
box-shadow: 0 18px 44px rgba(16, 35, 110, 0.1);
}

.compass-card--stakeholder {
--accent: #43b391;
}

.compass-card--hospitation {
--accent: #e0a44d;
}

.compass-card--format {
--accent: #a980da;
}

.compass-card__media {
height: 330px;
overflow: hidden;
border-bottom: 1px solid #dce4f0;
background: #eef3fa;
}

.compass-card__media img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: top center;
}

.compass-card__body {
min-height: 140px;
padding: 21px 26px 22px;
}

.compass-card__lockup {
width: min(430px, 100%);
height: auto;
display: block;
margin-bottom: 12px;
}

.compass-card p {
margin: 0;
color: #59677f;
font-size: 18px;
font-weight: 650;
line-height: 1.35;
}
</style>
</head>
<body>
<main class="collage" aria-labelledby="collage-title">
<header class="collage__header">
<div class="collage__headline">
<img class="mitmachen-lockup" src="../../../public/brand/mitmachen/lockup-horizontal.svg" alt="#Mitmachen" />
<span class="header-divider" aria-hidden="true"></span>
<h1 class="collage__title" id="collage-title">Vier Kompasse.<br />Gemeinsam Versorgung gestalten.</h1>
</div>
<span class="collage__badge">Aktueller Einblick · synthetische Demo</span>
</header>

<section class="compass-grid" aria-label="Einblicke in die vier Kompasse">
<article class="compass-card">
<div class="compass-card__media">
<img src="./module-previews-v3/versorgung.png" alt="Kartenansicht mit regional verteilten Kontakten" />
</div>
<div class="compass-card__body">
<img class="compass-card__lockup" src="../../../public/brand/versorgungs-kompass/lockup-horizontal.svg" alt="Versorgungs-Kompass" />
<p>Versorgung regional verstehen.</p>
</div>
</article>

<article class="compass-card compass-card--stakeholder">
<div class="compass-card__media">
<img src="./module-previews-v3/stakeholder.png" alt="Stakeholder-Organisationen in einer strukturierten Übersicht" />
</div>
<div class="compass-card__body">
<img class="compass-card__lockup" src="../../../public/brand/modules/stakeholder/lockup-horizontal.svg" alt="Stakeholder-Kompass" />
<p>Perspektiven gezielt verbinden.</p>
</div>
</article>

<article class="compass-card compass-card--hospitation">
<div class="compass-card__media">
<img src="./module-previews-v3/hospitation.png" alt="Hospitationsframework von Beobachtungen bis zu nächsten Schritten" />
</div>
<div class="compass-card__body">
<img class="compass-card__lockup" src="../../../public/brand/modules/hospitation/lockup-horizontal.svg" alt="Hospitations-Kompass" />
<p>Von Beobachtung zu Evidenz.</p>
</div>
</article>

<article class="compass-card compass-card--format">
<div class="compass-card__media">
<img src="./module-previews-v3/formate.png" alt="Formate für Roundtables, Fachgespräche und Veranstaltungen" />
</div>
<div class="compass-card__body">
<img class="compass-card__lockup" src="../../../public/brand/modules/formate/lockup-horizontal.svg" alt="Format-Kompass" />
<p>Austausch wirksam gestalten.</p>
</div>
</article>
</section>
</main>
</body>
</html>
Binary file added dokumentation/assets/readme/mitmachen-kompass-collage-v3.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added dokumentation/assets/readme/module-previews-v3/formate.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added dokumentation/assets/readme/module-previews-v3/hospitation.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added dokumentation/assets/readme/module-previews-v3/stakeholder.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added dokumentation/assets/readme/module-previews-v3/versorgung.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading