Brand-Kit · App-Design

Das App-Design-Kit

41 lebende Karten — die komplette Design-Fläche der Living App, beim Entstehen zuzusehen. Jede Karte ist echtes HTML/CSS aus dem versionierten Kit-Bundle, gespeist aus derselben Token-Quelle wie diese Site (tokens.json).

← Zum Brand-Kit

Screens

Alle Screens der App

Welt / Heute (G2)Robin in der Welt · Score-Glance · EingabezeileVollbild ↗

Gespräch (G1)Kamera-Dolly · Glass-GesprächsflächeVollbild ↗

TagebuchStimmung · K/G/S-Slider · Tags · NotizVollbild ↗

Tagebuch-VerlaufMonatsgruppen · Mood · K/G/S · TagsVollbild ↗

Tages-DetailTages-Summary · Einträge · Swipe-DeleteVollbild ↗

InsightsGesamtverfassung · Metriken · MusterVollbild ↗

Insights-Sammelphase3/7 Tage · klare AktionVollbild ↗

Metrik-Detail (HRV)Hero-Wert · Baseline-Zone · Robin-EinordnungVollbild ↗

Body BatteryNetto-Bar · Erklär-KarteVollbild ↗

Korrelations-DetailModal-Sheet · Scatter · EinordnungVollbild ↗

ProfilKonto · Garmin · EinstellungenVollbild ↗

AnmeldenVollbild ↗

RegistrierenVollbild ↗

Passwort vergessenEin Feld · Reset-LinkVollbild ↗

Consent-GateNach Login · Links externVollbild ↗

Onboarding — DimensionenKörper / Geist / SeeleVollbild ↗

Garmin verbindenOptional · AES-256-HinweisVollbild ↗

Garmin-EinstellungenStatus · Auto-Sync · BackfillVollbild ↗

Sync-VerlaufHeatmap 14 Tage · ProtokollVollbild ↗

Tags verwaltenHinzufügen · Zähler · LöschenVollbild ↗

ErinnerungenMomente statt AlarmeVollbild ↗

Datenschutz & DatenExport · Legal · LöschungVollbild ↗

SystemstatusDienste-Ampel · letzte LäufeVollbild ↗

Über RobinSignet · Wortmarke · StoryVollbild ↗

Foundations

Typografie, Raster, Ikonografie und A11y leben hier. Die Farb-Palette und die Logo-Geometrie (Proportionen, Schutzraum, Downloads) stehen im Brand-Kit. Zum Brand-Kit →

TypografieFredoka · Nunito — Gewichte · App-Größen · Verwendungs-MatrixVollbild ↗

RasterSpacing · Radius · Elevation · GlassVollbild ↗

IkonografieStroke-Sprache · GrößenrasterVollbild ↗

Brand in der AppApp-Icon · Splash · Push-BadgeVollbild ↗

AccessibilityKontrast-Paare · Targets · MotionVollbild ↗

Components

KomponentenScore-Chip · Buttons · Chat · Metrik · NavVollbild ↗

Robin-PräsenzPorträt · Navbar-Zustand · PresenceVollbild ↗

FormulareZustandsmatrix · Toggle · SegmentedVollbild ↗

Overlays & LadenDialog · Sheet · Toast · SkeletonVollbild ↗

Charts6 Muster + RegelnVollbild ↗

ZuständeEmpty · Offline · FehlerVollbild ↗

System-FlächenLock Screen · StandBy · Live ActivityVollbild ↗

NotificationsRobins Stimme von außenVollbild ↗

MicrocopyGut/Schlecht-Tabelle + PrinzipienVollbild ↗

Status-Mapping (Phase B)Alt-Pastell → Brand · Abnahme-Gate GAF-362Vollbild ↗

Motion

Motion — Tempo & ChoreografieLive-Demos aller Tempo-Tokens · Easings · 6 Choreografie-PrinzipienVollbild ↗

ÜbergängeG2→G1-Dolly ~0,9 s · Robin→Porträt ~450 ms · StaggerVollbild ↗

Quelle: Claude-Design-Projekt „GAF Mobile — App Design (Brand-Kit)", versioniert im App-Repo unter docs/05-Design/UI-Kit. Robin und Welt stammen aus der Asset-Bibliothek (Identität v3) — nichts hier ist nachgebaut, alles ist das Original.