feat(redesign): Design-Tokens + Ebene-2 "Cyber trifft Safety" (additiv)

Schritt A (Tokens): zentrale Design-Sprache aus dem Claude-Design-Handoff — Tailwind-Tokens (re/geltung/severity/domain) + Fonts (Public Sans / Source Serif 4 / IBM Plex Mono) + components/redesign/{tokens.ts,Chips.tsx} (GeltungChip, SeverityChip, DomainTag, MonoId) + Showcase /sdk/design-system. Bestehende Farben/sans unangetastet. Schritt B (Ebene 2): CyberMeetsSafety als USP-Hero im CRA/Cyber-Tab (/sdk/iace/[id]/cra) — Domaenen-Bar, Hazard-Karten (CE-gemildert -> Cyber-Befund -> Restrisiko, Warum-Box, Pflicht/Empfehlung-Massnahmen, aufklappbarer Norm-Bezug), Massnahmen-Backlog mit Geltung-Filter. Gebunden an echte cross_links/findings/open_measures. Bisheriger CRACyberView bleibt eingeklappt erhalten -> kein Inhaltsverlust. Guardrail-Doku: design/redesign/ (HANDOFF_README, CONTENT_INVENTORY mit 40-Screen-Mapping + Waisen-Liste, Arbeitsbereich.dc.html-Referenz). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-06-18 16:49:04 +02:00
parent 43e02f794a
commit 42d4b4d9c5
10 changed files with 1312 additions and 3 deletions
@@ -1,8 +1,13 @@
 import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
+import { Inter, Public_Sans, Source_Serif_4, IBM_Plex_Mono } from 'next/font/google'
 import './globals.css'

 const inter = Inter({ subsets: ['latin'] })
+// Redesign fonts (design/redesign) — exposed as CSS variables; the new
+// design-language components opt in via Tailwind font-publicSans/-sourceSerif/-plexMono.
+const publicSans = Public_Sans({ subsets: ['latin'], weight: ['400', '500', '600', '700', '800'], variable: '--font-public-sans' })
+const sourceSerif = Source_Serif_4({ subsets: ['latin'], weight: ['400', '500', '600'], style: ['normal', 'italic'], variable: '--font-source-serif' })
+const plexMono = IBM_Plex_Mono({ subsets: ['latin'], weight: ['400', '500', '600'], variable: '--font-plex-mono' })

 export const metadata: Metadata = {
  title: 'BreakPilot Admin Compliance',
@@ -15,7 +20,7 @@ export default function RootLayout({
  children: React.ReactNode
 }) {
  return (
-    <html lang="de">
+    <html lang="de" className={`${publicSans.variable} ${sourceSerif.variable} ${plexMono.variable}`}>
      <body className={inter.className}>{children}</body>
    </html>
  )