breakpilot-lehrer/website/components/admin/system-info-configs/brandbook-config.ts

import type { SystemInfoConfig } from './types'

export const brandbookConfig: SystemInfoConfig = {
  title: 'Brandbook System-Info',
  description: 'Corporate Design Guidelines und Style Guide.',
  version: '1.0',
  architecture: {
    layers: [
      { title: 'Style Guide UI', components: ['Colors', 'Typography', 'Components'], color: '#3b82f6' },
      { title: 'Design Tokens', components: ['CSS Variables', 'Tailwind Config', 'Figma Tokens'], color: '#8b5cf6' },
      { title: 'Assets', components: ['Logo', 'Icons', 'Illustrations'], color: '#10b981' },
      { title: 'Documentation', components: ['Usage Guidelines', 'Examples', 'Do/Donts'], color: '#f59e0b' },
    ],
  },
  features: [
    { name: 'Farb-Palette', status: 'active', description: 'Primaer- und Sekundaerfarben' },
    { name: 'Typografie', status: 'active', description: 'Schriftarten und -groessen' },
    { name: 'Komponenten-Bibliothek', status: 'active', description: 'UI-Komponenten-Dokumentation' },
    { name: 'Figma Sync', status: 'planned', description: 'Design Token Synchronisation' },
  ],
  roadmap: [
    { phase: 'Phase 1: Foundation (Q1)', priority: 'high', items: ['Design Tokens', 'Color System', 'Typography Scale', 'Spacing System'] },
    { phase: 'Phase 2: Components (Q2)', priority: 'medium', items: ['Button Variants', 'Form Elements', 'Cards', 'Navigation'] },
    { phase: 'Phase 3: Templates (Q3)', priority: 'low', items: ['Page Templates', 'E-Mail Templates', 'Print Templates', 'Social Media'] },
  ],
  technicalDetails: [
    { component: 'CSS', technology: 'Tailwind CSS', version: '3.x', description: 'Utility Classes' },
    { component: 'Icons', technology: 'Heroicons', version: '2.x', description: 'SVG Icons' },
    { component: 'Fonts', technology: 'Inter/System', description: 'Web Fonts' },
    { component: 'Design', technology: 'Figma', description: 'Design Source' },
  ],
  auditInfo: [
    {
      category: 'Design System Status',
      items: [
        { label: 'Farbpalette', value: 'Definiert', status: 'ok' },
        { label: 'Typografie', value: 'Definiert', status: 'ok' },
        { label: 'Komponenten', value: '15+ Komponenten', status: 'ok' },
        { label: 'Figma Sync', value: 'Geplant', status: 'warning' },
      ],
    },
    {
      category: 'Dokumentation',
      items: [
        { label: 'Usage Guidelines', value: 'Vorhanden', status: 'ok' },
        { label: 'Code Examples', value: 'Vorhanden', status: 'ok' },
        { label: 'Do/Donts', value: 'Vorhanden', status: 'ok' },
        { label: 'Accessibility', value: 'WCAG 2.1 AA', status: 'ok' },
      ],
    },
  ],
  fullDocumentation: `
<h2>Brandbook & Design System</h2>

<h3>1. Uebersicht</h3>
<p>Das Brandbook definiert alle visuellen Elemente der BreakPilot-Marke. Es dient als zentrale Referenz fuer konsistentes Design ueber alle Produkte und Plattformen.</p>

<h3>2. Farbpalette</h3>
<table>
  <tr><th>Name</th><th>Hex</th><th>Verwendung</th></tr>
  <tr><td>Primary</td><td>#3B82F6</td><td>Buttons, Links, Akzente</td></tr>
  <tr><td>Primary Dark</td><td>#1E40AF</td><td>Hover States</td></tr>
  <tr><td>Secondary</td><td>#8B5CF6</td><td>Sekundaere Aktionen</td></tr>
  <tr><td>Success</td><td>#10B981</td><td>Erfolg, Bestaetigung</td></tr>
  <tr><td>Warning</td><td>#F59E0B</td><td>Warnungen</td></tr>
  <tr><td>Error</td><td>#EF4444</td><td>Fehler, Loeschung</td></tr>
  <tr><td>Slate 900</td><td>#0F172A</td><td>Text, Headings</td></tr>
  <tr><td>Slate 500</td><td>#64748B</td><td>Sekundaerer Text</td></tr>
</table>

<h3>3. Typografie</h3>
<pre>
Font Family: Inter (System Fallback)

Scale:
├── Display:  2.25rem (36px) / Bold
├── H1:       1.875rem (30px) / Semibold
├── H2:       1.5rem (24px) / Semibold
├── H3:       1.25rem (20px) / Medium
├── Body:     1rem (16px) / Regular
├── Small:    0.875rem (14px) / Regular
└── Caption:  0.75rem (12px) / Regular
</pre>

<h3>4. Spacing System</h3>
<table>
  <tr><th>Token</th><th>Wert</th><th>Verwendung</th></tr>
  <tr><td>space-1</td><td>4px</td><td>Inline-Elemente</td></tr>
  <tr><td>space-2</td><td>8px</td><td>Eng verwandte Elemente</td></tr>
  <tr><td>space-3</td><td>12px</td><td>Standard-Gap</td></tr>
  <tr><td>space-4</td><td>16px</td><td>Sections</td></tr>
  <tr><td>space-6</td><td>24px</td><td>Grosse Sections</td></tr>
  <tr><td>space-8</td><td>32px</td><td>Page Sections</td></tr>
</table>

<h3>5. Komponenten-Bibliothek</h3>
<pre>
Components/
├── Buttons/
│   ├── Primary Button
│   ├── Secondary Button
│   ├── Ghost Button
│   └── Icon Button
├── Forms/
│   ├── Input
│   ├── Select
│   ├── Checkbox
│   └── Radio
├── Feedback/
│   ├── Alert
│   ├── Toast
│   └── Badge
├── Layout/
│   ├── Card
│   ├── Modal
│   └── Sidebar
└── Navigation/
    ├── Tabs
    ├── Breadcrumb
    └── Pagination
</pre>

<h3>6. Icon-System</h3>
<ul>
  <li><strong>Library:</strong> Heroicons v2</li>
  <li><strong>Style:</strong> Outline (24px), Solid (20px)</li>
  <li><strong>Farbe:</strong> currentColor (erbt Text-Farbe)</li>
</ul>

<h3>7. Logo-Verwendung</h3>
<table>
  <tr><th>Variante</th><th>Verwendung</th><th>Min. Groesse</th></tr>
  <tr><td>Primary (Farbe)</td><td>Helle Hintergruende</td><td>120px breit</td></tr>
  <tr><td>White</td><td>Dunkle Hintergruende</td><td>120px breit</td></tr>
  <tr><td>Icon Only</td><td>Favicon, App Icon</td><td>32px</td></tr>
</table>

<h3>8. Accessibility</h3>
<ul>
  <li><strong>Kontrast:</strong> Minimum 4.5:1 fuer Text</li>
  <li><strong>Focus States:</strong> Sichtbarer Fokusring</li>
  <li><strong>Keyboard:</strong> Alle interaktiven Elemente erreichbar</li>
  <li><strong>Screen Reader:</strong> ARIA Labels vorhanden</li>
</ul>

<h3>9. Do's and Don'ts</h3>
<pre>
✓ Do:
  - Konsistente Spacing verwenden
  - Primary Color fuer CTAs
  - Ausreichend Weissraum
  - Hierarchie durch Typografie

✗ Don't:
  - Farben mischen
  - Logo verzerren
  - Zu viele Schriftgroessen
  - Zu wenig Kontrast
</pre>

<h3>10. Design Token Export</h3>
<p>Tokens sind verfuegbar als:</p>
<ul>
  <li>CSS Custom Properties</li>
  <li>Tailwind Config</li>
  <li>Figma Variables (geplant)</li>
  <li>JSON Token File</li>
</ul>
`,
}