Inhalt

NY Crew

Design System

Tokens und Komponenten für die Mitarbeitenden-App — auf Basis von shadcn/ui (base-nova) und dem digitalen NEW YORKER-Auftritt.

Grundlagen

Farben, Typografie, Abstände und Formen.

Prinzipien

Schwarz / Weiß / Rot
Neutrale Flächen dominieren. Rot nur für CTAs, Logo und gezielte Akzente.
Kontextuelle Formen
Website: scharfe Kanten. Consumer App: Pills und gerundete Cards (12px).
Semantic Tokens
Komponenten nutzen bg-primary, text-muted-foreground — keine Raw-Tailwind-Farben.

Semantic Colors (shadcn)

primary

#e30613

--primary

CTAs, Akzente

foreground

#000000

--foreground

Text, Headlines

background

#ffffff

--background

App-Hintergrund

muted

#f5f5f5

--muted

Sections, Flächen

border

#cccccc

--border

Trennlinien, Inputs

destructive

#d32f2f

--destructive

Fehler

Brand & Status

NY Red

#e30613

--ny-red

Black

#000000

--ny-black

Gray 900

#1a1a1a

--ny-gray-900

Gray 600

#666666

--ny-gray-600

Gray 100

#f5f5f5

--ny-gray-100

Success

#2d8c3c

--ny-success

Warning

#e8a817

--ny-warning

Info

#1565c0

--ny-info

Error

#d32f2f

--ny-error

Typografie

Wordmark · Roboto 700

NEW YORKER

Headline · Roboto 900

Dress for the moment.

Body · Open Sans

Fließtext in normal case — für Beschreibungen und Formulare.

Spacing (8px Grid)

xs0.25rem
sm0.5rem
md1rem
lg1.5rem
xl2rem
2xl3rem
3xl4rem

Radius

Editorial0

Website-Buttons

App12px

Cards, Modals

CTApill

Mobile-Primäraktionen

Komponenten

shadcn/ui-Komponenten mit NEW YORKER-Anpassungen.

Buttons
CTA-Pill für Mobile, Editorial für Website-Kontext. Varianten über shadcn.
Formulare
Input, Select, Checkbox und Switch.
Feedback
Badges und Status über semantische Varianten.
PrimarySecondaryOutlineError
Hinweis mit primary-Tokens.

Patterns

NY-Utilities und wiederverwendbare CSS-Klassen.

NY Utilities
App-spezifische Klassen in globals.css.
.ny-brand-wordmarkNEW YORKER
.ny-headlineDress for the moment.
.ny-cardStatische Card
.ny-card-consumerConsumer-App-Card
.ny-nav-pillFilter

Consumer-App-Card

Registrieren

Weiße Card auf muted-Hintergrund — wie in der NY App.

App-Beispiele

Echte Bausteine aus dem NY Crew Prototype — Home, News, Navigation.

Live-Komponenten aus dem Prototype — gleiche Dateien wie in /shift-start und verwandten Flows. Klick-Verhalten ist in der Doku deaktiviert oder vereinfacht.

Neuigkeiten-Teaser

Horizontale Card-Carousel auf dem Home-Screen mit Bild, Headline, Preview und Unread-Dot.

components/prototype/shift-start/home-news-teaser.tsx · Shift Home

Neuigkeiten

Wichtige Meldung

Roter Banner für pflichtige Store-News — tap führt in den Detail-Feed.

components/prototype/shift-start/important-news-notification.tsx · Shift Home · Store Lead

Neue Retouren-Richtlinie ab 01.06.

Bitte lesen und bestätigen

News-Feed-Cards

Listen-Cards im News-Tab mit Typ-Badge (Lieferung, Alert, Performance) und Aktionen.

components/prototype/shift-start/news-feed-screen.tsx · News

  • Lieferung

    Lieferung unterwegs: FSBN Summer Street Vol. 2

    Ankunft voraussichtlich 10:00 Uhr · 4 Paletten · Flächen 2+3.

  • Richtlinie

    Neue Retouren-Richtlinie ab 01.06.

    Bitte im Team durchgehen und im News-Feed bestätigen.

  • Performance

    Verkaufs-Performance: 78 % vom Tagesziel

    Stand 11:45 — Umsatz 18.420 € / 23.500 €.

Begrüßung & Status

Headline, Schicht-Status-Badge und Notification-Bell mit Unread-Indikator.

components/prototype/shift-start/home-greeting-header.tsx · Shift Home

Hallo, Sara

Schön, dass du da bist.

Gerade im Einsatz

Eingestempelt · Schicht ab 09:00 Uhr

Schnellzugriff

Icon-Grid für häufige Aktionen — aktiver Zustand mit primary-Ring.

components/prototype/shift-start/quick-actions-row.tsx · Shift Home

Schnellzugriff

Digitaler Ausweis

Kompakte ID-Card mit QR-Bereich — öffnet Vollbild-Ausweis.

components/mobile/digital-id-card.tsx · Services / Profil

Bottom Navigation

Glass-Navigation mit Badge auf News — fixed in der App, hier inline zur Vorschau.

components/prototype/app-bottom-nav.tsx · Alle Flows

Tab: Home