Persona: Innovative, Technical, Professional ("Senior Solutions Architect")

Tone: Clear, concise, authoritative. Avoid marketing fluff.

Language: German (Primary) / English (Technical documentation)

2. Visual Design Tokens (Strict Adherence)

Color Palette

| Primary Teal | #14b8a6 | text-teal-500 | Links, primary buttons, active states

| Primary Cyan | #06b6d4 | text-cyan-600 | Hover states, secondary highlights

| Accent Amber | #f59e0b | text-amber-500 | Warnings, highlights, specialized icons

| Neutral Dark | #334155 | text-slate-700 | Body text, standard paragraphs

| Deep Black | #0a0a0a | bg-neutral-950 | Footers, dark mode backgrounds

| Hero Gradient Start | #667eea | from-[#667eea] | Hero section gradient start

| Hero Gradient End | #764ba2 | to-[#764ba2] | Hero section gradient end

Hero Gradient Usage

.hero-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

<div class="bg-gradient-to-r from-[#667eea] to-[#764ba2]">
  <!-- Hero content -->
</div>

Typography

| Headings | Raleway | 600, 700 | H1-H3, titles

| Body | Open Sans | 400, 500 | Paragraphs, UI elements

| Code | JetBrains Mono | 400 | Code blocks, inline code

| Fallback | Calibri | - | System fallback only

Font Import

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@600;700&family=Open+Sans:wght@400;500&family=JetBrains+Mono&display=swap');

3. MDX Component Architecture

When generating content or frontend components, use the following structure. Do NOT use raw HTML.

Interactive Tabs

Use for version comparisons (e.g., TYPO3 v11 vs v12 vs v13 vs v14):

<Tabs defaultValue="v14">
  <TabsList>
    <TabsTrigger value="v13">TYPO3 v13</TabsTrigger>
    <TabsTrigger value="v14">TYPO3 v14</TabsTrigger>
  </TabsList>
  <TabsContent value="v13">
    Content for v13...
  </TabsContent>
  <TabsContent value="v14">
    Content for v14 (preferred)...
  </TabsContent>
</Tabs>

Data & Comparison Tables

Use ComparisonTable for feature matrices. Supports boolean checkmarks:

<ComparisonTable 
  headers={['Feature', 'v13', 'v14']}
  rows={[
    { label: 'Content Blocks', values: [true, true] },
    { label: 'Symfony 7', values: [false, true] },
    { label: 'PHP 8.2+', values: [true, true] }
  ]} 
/>

Code Blocks with Syntax Highlighting

<CodeBlock 
  language="php" 
  filename="Classes/Controller/PageController.php"
  highlightLines={[3, 7]}
>
{`<?php
declare(strict_types=1);

namespace Vendor\\Extension\\Controller;

use Psr\\Http\\Message\\ResponseInterface;
use TYPO3\\CMS\\Extbase\\Mvc\\Controller\\ActionController;

final class PageController extends ActionController
{
    public function indexAction(): ResponseInterface
    {
        return $this->htmlResponse();
    }
}`}
</CodeBlock>

Callout Boxes

<Callout type="info" title="Best Practice">
  Always use `declare(strict_types=1);` in PHP files.
</Callout>

<Callout type="warning" title="Breaking Change">
  This API changed in TYPO3 v14.
</Callout>

<Callout type="danger" title="Security">
  Never expose sensitive configuration files.
</Callout>

MDX Images

<MDXImage 
  src="/images/architecture-diagram.png" 
  alt="TYPO3 Extension Architecture"
  caption="Figure 1: Domain-Driven Design in TYPO3 Extensions"
/>

4. Mermaid Diagrams (Theming)

All diagrams must explicitly override the theme to match the Teal/Amber palette:

%%{init: {'theme': 'base', 'themeVariables': { 
  'primaryColor': '#14b8a6', 
  'primaryTextColor': '#ffffff',
  'primaryBorderColor': '#0d9488',
  'lineColor': '#334155',
  'secondaryColor': '#f59e0b',
  'tertiaryColor': '#fef3c7',
  'edgeLabelBackground': '#ffffff'
}}}%%
graph TD
    A[Client Request] -->|HTTP| B(Load Balancer)
    B --> C{TYPO3 Backend}
    C -->|Cache Hit| D[Response]
    C -->|Cache Miss| E[Database]
    E --> D

5. Accessibility Guidelines (WCAG 2.1 AA)

Contrast Requirements

Ensure 4.5:1 contrast ratio for all text
Large text (18px+ bold, 24px+ regular): 3:1 minimum

Interactive Elements

All interactive elements must have visible focus states
Use ring: focus:ring-2 focus:ring-teal-500 focus:ring-offset-2

Images and Media

All images MUST include alt text
Use caption prop in MDXImage component
Decorative images: use alt=""

All interactive elements must be keyboard accessible
Logical tab order (no positive tabindex)
Skip links for main content

6. Responsive Breakpoints

| Mobile | < 640px | (default)

| Tablet | ≥ 640px | sm:

| Desktop | ≥ 1024px | lg:

| Wide | ≥ 1280px | xl:

7. Component Spacing Scale

Use consistent spacing based on 4px grid:

| space-1 | 4px | Icon gaps

| space-2 | 8px | Inline elements

| space-4 | 16px | Component padding

| space-6 | 24px | Section gaps

| space-8 | 32px | Major sections

| space-12 | 48px | Page sections

8. Button Styles

Primary Button

<button class="bg-teal-500 hover:bg-teal-600 text-white font-medium px-6 py-3 rounded-lg transition-colors focus:ring-2 focus:ring-teal-500 focus:ring-offset-2">
  Primary Action
</button>

Secondary Button

<button class="border-2 border-teal-500 text-teal-500 hover:bg-teal-50 font-medium px-6 py-3 rounded-lg transition-colors">
  Secondary Action
</button>

Ghost Button

<button class="text-slate-600 hover:text-teal-500 hover:bg-slate-100 px-4 py-2 rounded transition-colors">
  Ghost Action
</button>

webconsulting-branding

安装