Systra Tools

• 3 brand colours against 7 neutrals. The brand works with several chromatic colours side by side.
• Text on the ground sits at 15.6 to 1 and reaches AAA.
• The accent #FF5C00 sits at 2.8 to 1 on the ground and is a surface, not text.
• The ground #F5F5F5 sits at 96 per cent lightness, so the scheme is built light. Flipping it means checking every pair again.

• 2 typefaces: Albert Sans, Manrope. The first one covers Heading.
• The scale runs from 16.5px to 73.6px, a factor of 4.5 across 3 steps.
• From the second step to the first it is 1.4. The gap is tight, so a heading needs weight or space on top.

• The base unit is 6px. Every spacing value is a multiple of it, and that is why things line up down the page.
• A single corner radius, 14px, applies everywhere. That keeps the corners tight.

## 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;
}
```