07 / Website + Core-App

Ein Zusammenhang.
Zwei Aufgaben.

Die Website erklärt Velcure. Die App begleitet die tägliche Arbeit. Gemeinsame Haltung, Logo und Gestaltungsregeln verbinden beide – mit passenden Schriftgrößen und Farben für ihren jeweiligen Einsatz.

Website / Kommunikation

Grün · Archivo + Geist · großzügige Hierarchie

Core-App / Arbeitsoberfläche

Petrol · Inter · kompakte Listen und Formulare

07.1

Die Core-App als Referenz.

Core-UI · Gestaltungsreferenz · Beispieldaten

Alle MaßnahmenNach Status gruppiert

Aktuelle Vorgänge 3

Ausgewählte Maßnahme · M-12

Fluchtweg in Halle 2 freihalten

StatusIn Bearbeitung

ZuständigHallenteam

KI-Vorschlag · zur Prüfung

Feststellung mit der GBU verbinden

Prüfe den Zusammenhang, bevor du den Vorschlag übernimmst.

Interaktive Referenz aus Brand-Hub-Bausteinen. Keine Original-Core-Komponenten, keine Verbindung zu App-Daten.

Abgeleitet aus den vorhandenen Core-Tokens, Schriftrollen, Komponenten und UI-Richtlinien. Die Vorschau illustriert diese Gestaltung mit lokalen Beispieldaten. Für Verhalten und Funktionsumfang bleibt der originale App-Styleguide maßgeblich.

07.2

Was zusammengehört.

Gemeinsame Gestaltung von Website und App
Bereich	Website	Core-App
Logo	Fokus in Grün, Archivo-Wortmarke	Dieselbe Geometrie, Petrol oder Weiß für die Navigation
Schrift	Archivo für Headlines, Geist für Lesetext	Inter mit festen Rollen für dichte Bedienoberflächen
Aktionen	Gut sichtbare grüne Hauptaktion	Petrol als Primary, Ghost und Outline für Nebenaktionen
Flächen	Canvas und Papier mit Haarlinien	Weiß, ruhige Grauflächen, klare Zeilen und Gruppen
Rhythmus	4-px-Raster, größere Abschnittsabstände	4-px-Raster, 12 px pro Block, 24 px pro Abschnitt
Zustände	Symbol und verständlicher Text	Form und Text, sechs Statusgruppen, zurückhaltende Tönung
KI	Unterstützung erklären, Fachleute entscheiden	Violette KI-Familie, Quelle und ausdrückliches Übernehmen oder Verwerfen

07.3

Die Farben im Zusammenhang.

Aktion

Website-Grün

#1c7a4b

App-Petrol

#032f2e

App-Fokus

#2563eb

App-Auswahl

#eff6ff

App-Flächen

Grundfläche

#ffffff

Ruhige Fläche

#f9fafb

Chip

#f3f4f6

Trennlinie

#e5e7eb

App-Zustände

Neu

#14532d

Geändert

#78350f

Information

#1e3a8a

Überfällig

#b91c1c

Grün ist die vorhandene Website-Farbe. Petrol ist die vorhandene App-Primary. Violett ist der funktionale Hinweis auf KI-Ausgaben. Diese Farben haben unterschiedliche Aufgaben und behalten ihre jeweiligen Rollen.

07.4

Inter für die tägliche Arbeit.

Arbeitsschutz gemeinsam organisieren.display1.875rem / 2.375rem · 600

Arbeitsschutz gemeinsam organisieren.title-md1.125rem / 1.5rem · 600

Arbeitsschutz gemeinsam organisieren.title-sm0.8125rem / 1.25rem · 600

Arbeitsschutz gemeinsam organisieren.body-md0.875rem / 1.25rem · 400

Arbeitsschutz gemeinsam organisieren.body-sm0.8125rem / 1.25rem · 400

Arbeitsschutz gemeinsam organisieren.caption0.75rem / 1rem · 400

Werte direkt aus core/apps/web/src/styles/typography.css. Inter wird für diese Referenz lokal ausgeliefert. Die App-Schrift ersetzt nicht die Archivo-Wortmarke.

07.5

Gemeinsame Regeln.

Hierarchie

Ordnung vor Dekoration.

Typografie, Weißraum und Ausrichtung tragen die Oberfläche. Keine farbigen Akzentstriche an Zeilen oder Karten. Schatten nur für schwebende Ebenen.

Verständlichkeit

Zustände brauchen Worte.

Farbe allein reicht nicht. Status hat Form und Text. Jede Eingabe hat ein Label, jeder Fehler eine verständliche Handlungshilfe.

Vorschlag bleibt Vorschlag.

Violett kennzeichnet KI-Ausgaben. Quelle, Kontext und Freigabe gehören dazu. Fachliche Vorschläge werden nicht als bereits geprüft dargestellt.

07.6

Quellen und Pflege.

Die Core-Referenz dokumentiert Farbwerte, Schriftrollen und Komponentenquellen der Produktoberfläche.

core/apps/web/src/tailwind.css
core/apps/web/src/styles/typography.css
core/docs/design/ui-guidelines.md
core/apps/web/src/components/ui/button.tsx
core/apps/web/src/components/ui/input.tsx
core/apps/web/src/modules/styleguide/FoundationsSection.tsx

Die beiden Repositories bleiben unabhängig. „pnpm brand:sync-core“ aktualisiert den lokalen Token-Abgleich. „pnpm tokens:check“ prüft die erzeugten Hub-Dateien. Original-App-Komponenten bleiben unter core/apps/web/src/components/ui; die Hub-Vorschauen ersetzen sie nicht.

Fokus-Logo und Anwendungen ansehen ↗