Systra Tools

• 3 Markenfarben gegen 7 neutrale Töne. Die Marke arbeitet mit mehreren Buntfarben nebeneinander.
• Text auf Grund steht bei 15.6 zu 1 und erreicht AAA.
• Der Akzent #FF5C00 steht bei 2.8 zu 1 auf dem Grund und ist damit eine Fläche und kein Text.
• Der Grund #F5F5F5 liegt bei 96 Prozent Helligkeit, die Anlage ist also hell gedacht. Wer sie umdreht, muss jedes Paar neu prüfen.

• 2 Schriften: Albert Sans, Manrope. Die erste steht für Heading.
• Die Skala reicht von 16.5px bis 73.6px, das ist Faktor 4.5 über 3 Stufen.
• Von der zweiten auf die erste Stufe sind es 1.4. Der Abstand ist knapp, die Überschrift braucht zusätzlich Gewicht oder Raum.

• Die Basiseinheit ist 6px. Jeder Abstand auf der Seite ist ein Vielfaches davon, und deshalb sitzen Dinge untereinander auf denselben Linien.
• Ein einziger Eckenradius, 14px, gilt überall. Das hält die Kanten knapp.

## Overview
This document outlines the core design principles and system for Systra Tools, focusing on premium React and Tailwind components for AI workflows. Our design language aims to be modern, efficient, and user-friendly, reflecting the innovative nature of AI development.

## Color System
Our color palette is carefully selected to ensure readability, visual hierarchy, and a modern aesthetic.

*   **Primary**: `#1C1C1C` (Dark Gray) - Dominant color for headers, important elements.
*   **Secondary**: `#FFFFFF` (White) - Used for backgrounds, contrasted elements.
*   **Accent**: `#FF5C00` (Bright Orange) - Highlights key actions, calls-to-action, and interactive elements.
*   **Background**: `#F5F5F5` (Light Gray) - Default page background.
*   **Surface**: `#FFFFFF` (White) - Card backgrounds, component containers.
*   **Text Primary**: `#1C1C1C` (Dark Gray) - Main body text, headings.
*   **Text Secondary**: `#6B6B6B` (Medium Gray) - Supporting text, subtle details.
*   **Palette (Additional Neutrals/Tints)**:
    *   `#E0E0E0` (Light Gray)
    *   `#909090` (Gray)
    *   `#F2A669` (Light Orange)
    *   `#000000` (Black)
    *   `#171717` (Darkest Gray)

## Typography
We utilize a combination of Manrope and Albert Sans to create a clean, modern, and highly legible typographic experience.

*   **Primary Font Family**: `Manrope` (Body text, paragraphs)
*   **Heading Font Family**: `Albert Sans` (Headings H1-H6)

**Key Font Sizes:**

*   **H1**: `73.6px` (e.g., Hero titles)
*   **H2**: `52px` (e.g., Section titles)
*   **Body**: `16.5px` (Standard paragraph text)

## Spacing & Radius
Our spacing system is based on a `6px` base unit, ensuring consistent vertical and horizontal rhythm throughout the interface. A consistent border-radius is applied for a cohesive, modern feel.

*   **Base Unit**: `6px` (All spacing values should be multiples of 6)
*   **Border Radius**: `14px` (Applied to cards, buttons, input fields)

## Voice & Feel
Systra Tools communicates with a voice that is **expert, modern, and enabling**. The feel is **premium, efficient, and forward-thinking**. We aim to inspire confidence and ease, reflecting the power and sophistication of AI workflows while remaining accessible and user-friendly.

## Guidelines

### Do
*   **Prioritize clarity and directness** in all content, especially when explaining AI features.
*   **Use the accent color (`#FF5C00`) sparingly** to highlight critical actions or key information.
*   **Maintain generous spacing** around components and text blocks for breathability and focus.
*   **Apply the `14px` border-radius** consistently to all interactive elements and contained sections.
*   **Employ `Albert Sans` for all heading levels** to maintain a strong, modern visual hierarchy.
*   **Ensure high contrast** between text and background for optimal readability, especially for primary text.
*   **Integrate illustrations or icons** that align with AI, development, and productivity themes.

### Don't
*   **Overuse the accent color**, which can diminish its impact and create visual noise.
*   **Introduce new font families or weights** not defined in the typography system.
*   **Use spacing values that are not multiples of the `6px` base unit**.
*   **Vary the border-radius** on core components, as it can lead to an inconsistent appearance.
*   **Use overly casual or technical jargon** without clear explanation where a diverse audience is present.
*   **Clutter layouts** with too much information; leverage negative space effectively.
*   **Deviate from the established color palette** for core UI elements, preserving brand recognition.

## Implementation Notes (Tailwind tokens)

```css
:root {
  /* Colors */
  --color-primary: #1C1C1C;
  --color-secondary: #FFFFFF;
  --color-accent: #FF5C00;
  --color-background: #F5F5F5;
  --color-surface: #FFFFFF;
  --color-text-primary: #1C1C1C;
  --color-text-secondary: #6B6B6B;
  --color-palette-gray-light: #E0E0E0;
  --color-palette-gray-medium: #909090;
  --color-palette-orange-light: #F2A669;
  --color-palette-black: #000000;
  --color-palette-darkest-gray: #171717;

  /* Typography */
  --font-family-body: 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --font-family-heading: 'Albert Sans', 'Manrope', ui-sans-serif, system-ui, sans-serif;
  --font-size-h1: 73.6px;
  --font-size-h2: 52px;
  --font-size-body: 16.5px;

  /* Spacing & Radius */
  --spacing-base: 6px;
  --border-radius-default: 14px;
}
```