# Design System of CzechAI

## 1. Visual Theme & Atmosphere

CzechAI's design language is rooted in **pure black minimalism** — a near-absolute black canvas (`#000000`) where content emerges through stark typographic contrast and a single accent color: signal red (`#ff3c14`). The aesthetic draws from the ChatGPT dark interface philosophy — zero gradients, zero glassmorphism, zero glow effects. Every element earns its place through information density, not decoration.

The atmosphere communicates **enterprise intelligence**: this is a platform that processes 363,000+ real estate listings, runs 18-module AML screening across 3.6 million sanctions records, and deploys 58 AI agents. The design reflects this: surgical precision, data-forward, zero visual noise.

**Key Characteristics:**
- Pure black-native: `#000000` body, `#1a1a1a` cards, `#0d0d0d` headers/footers
- Single accent color: signal red `#ff3c14` — used only for CTAs, alerts, active states, brand emphasis
- No gradients, no glassmorphism, no glow effects, no pulse animations
- System font stack for maximum rendering speed
- Monospace for data, code, and technical labels
- Ultra-thin borders (`#2f2f2f`) creating structure without visual weight
- High information density — tables, grids, metric cards preferred over prose
- Dark theme ONLY — no light mode variant

## 2. Color Palette & Roles

### Background Surfaces
- **Body Black** (`#000000`): The deepest background. Pure black. The default canvas for all pages.
- **Card Surface** (`#1a1a1a`): Card backgrounds, elevated panels, modal bodies.
- **Header/Footer** (`#0d0d0d`): Navigation bar, footer, fixed elements. Near-black with imperceptible warmth.
- **Input Surface** (`#2f2f2f`): Form input backgrounds, text areas, search fields.
- **Hover Surface** (`#252525`): Hover state for interactive card elements.

### Text & Content
- **Primary Text** (`#ffffff`): Pure white. Headlines, primary labels, emphasized content.
- **Secondary Text** (`#ececf1`): Warm off-white. Body text, descriptions, paragraph content.
- **Tertiary Text** (`#8e8ea0`): Muted gray. Metadata, timestamps, placeholders, de-emphasized labels.
- **Disabled Text** (`#4d4d4f`): Dark gray. Disabled states, inactive elements.

### Brand & Accent
- **Signal Red** (`#ff3c14`): THE brand color. Used for: primary CTA buttons, active states, alert indicators, brand marks, section accents. Never used for body text or backgrounds.
- **Red Dark** (`#cc2200`): Pressed/active state of Signal Red. Used for button :active states.
- **Red Hover** (`#ff5533`): Lighter variant for hover states on red elements.

### Status Colors
- **Success Green** (`#22c55e`): Completion, healthy, online status. Used sparingly.
- **Warning Amber** (`#f59e0b`): Caution, degraded, pending states.
- **Error Red** (`#ef4444`): Error messages, failed operations. Distinct from brand Signal Red.
- **Info Blue** (`#3b82f6`): Informational badges, links in body text.

### Border & Divider
- **Border Primary** (`#2f2f2f`): Default border for cards, inputs, containers.
- **Border Secondary** (`#4d4d4f`): Stronger border for focused/active inputs, hover states.
- **Border Subtle** (`#1f1f1f`): Ultra-subtle divider for list items, table rows.

### D-Tag Colors (Real Estate Specific)
- **D30** (`#ef4444`): Extremely undervalued (30%+ below market). Red badge.
- **D20** (`#f97316`): Significantly undervalued. Orange badge.
- **D15** (`#eab308`): Moderately undervalued. Yellow badge.
- **D10** (`#22c55e`): Slightly undervalued. Green badge.
- **FAIR** (`#8e8ea0`): Market price. Gray badge.
- **P20+** (`#6366f1`): Overvalued. Indigo badge.

### Risk Score Colors (AML)
- **Low Risk (0-30)** (`#22c55e`): Green background badge.
- **Medium Risk (31-50)** (`#f59e0b`): Amber background badge.
- **High Risk (51-70)** (`#f97316`): Orange background badge.
- **Critical Risk (71-100)** (`#ef4444`): Red background badge.

## 3. Typography Rules

### Font Family
- **Primary**: `-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif`
- **Monospace**: `'SF Mono', Monaco, 'Courier New', monospace`
- **Display** (optional, for reports/presentations): `'Rajdhani', sans-serif` (weight 700)
- **Report Body** (optional): `'DM Sans', sans-serif`
- **Report Code** (optional): `'DM Mono', monospace`

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Usage |
|------|------|------|--------|-------------|----------------|-------|
| Display Hero | System | 48px (3rem) | 700 | 1.1 | -0.02em | Landing page hero, one per page max |
| Heading 1 | System | 32px (2rem) | 700 | 1.2 | -0.01em | Page titles, section headers |
| Heading 2 | System | 24px (1.5rem) | 600 | 1.3 | 0 | Card titles, subsection headers |
| Heading 3 | System | 18px (1.125rem) | 600 | 1.4 | 0 | Widget titles, metric labels |
| Body Large | System | 16px (1rem) | 400 | 1.6 | 0 | Primary body text, descriptions |
| Body | System | 14px (0.875rem) | 400 | 1.5 | 0 | Secondary body text, table cells |
| Caption | System | 12px (0.75rem) | 400 | 1.4 | 0.02em | Metadata, timestamps, footnotes |
| Mono Data | Monospace | 14px | 500 | 1.4 | 0 | Numbers, codes, IDs, prices, API responses |
| Mono Small | Monospace | 12px | 400 | 1.3 | 0 | Code snippets, technical labels |

### Typography Rules
- Headlines: NEVER use `text-transform: uppercase` for multi-word headlines
- Numbers and prices: ALWAYS use monospace font
- Czech characters (ěščřžýáíé): must render correctly — test with "Přílišný žluťoučký kůň"
- No italic body text. Use weight 600 (semibold) for emphasis instead.
- Line length: max 75 characters for body text readability

## 4. Component Patterns

### Buttons

**Primary (Signal Red):**
```css
.btn-primary {
  background: #ff3c14;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn-primary:hover { background: #ff5533; }
.btn-primary:active { background: #cc2200; }
```

**Secondary (Outline White):**
```css
.btn-secondary {
  background: transparent;
  color: #ffffff;
  border: 1px solid #4d4d4f;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-secondary:hover { background: rgba(255,255,255,0.05); border-color: #8e8ea0; }
```

**Ghost (Text Only):**
```css
.btn-ghost {
  background: transparent;
  color: #8e8ea0;
  border: none;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.btn-ghost:hover { color: #ffffff; }
```

### Cards
```css
.card {
  background: #1a1a1a;
  border: 1px solid #2f2f2f;
  border-radius: 12px;
  padding: 24px;
  transition: border-color 0.15s ease;
}
.card:hover { border-color: #4d4d4f; }
```

### Metric Cards (KPI)
```css
.metric-card {
  background: #1a1a1a;
  border: 1px solid #2f2f2f;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}
.metric-card .value {
  font-family: 'SF Mono', Monaco, monospace;
  font-size: 32px;
  font-weight: 700;
  color: #ffffff;
}
.metric-card .label {
  font-size: 12px;
  color: #8e8ea0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 8px;
}
```

### Tables
```css
table { width: 100%; border-collapse: collapse; }
th {
  background: #0d0d0d;
  color: #8e8ea0;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #2f2f2f;
}
td {
  padding: 12px 16px;
  border-bottom: 1px solid #1f1f1f;
  color: #ececf1;
  font-size: 14px;
}
tr:hover td { background: #252525; }
```

### Form Inputs
```css
input, textarea, select {
  background: #2f2f2f;
  border: 1px solid #4d4d4f;
  border-radius: 8px;
  padding: 12px 16px;
  color: #ffffff;
  font-size: 14px;
  transition: border-color 0.15s ease;
}
input:focus, textarea:focus {
  border-color: #ff3c14;
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,60,20,0.15);
}
input::placeholder { color: #8e8ea0; }
```

### Badges / Tags
```css
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: monospace;
}
.badge-red { background: rgba(239,68,68,0.15); color: #ef4444; }
.badge-green { background: rgba(34,197,94,0.15); color: #22c55e; }
.badge-amber { background: rgba(245,158,11,0.15); color: #f59e0b; }
.badge-gray { background: rgba(142,142,160,0.15); color: #8e8ea0; }
```

### Navigation
```css
nav {
  background: #0d0d0d;
  border-bottom: 1px solid #2f2f2f;
  padding: 0 24px;
  height: 56px;
  display: flex;
  align-items: center;
}
nav a {
  color: #8e8ea0;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
  transition: color 0.15s ease;
}
nav a:hover { color: #ffffff; }
nav a.active { color: #ff3c14; }
```

## 5. Layout Principles

### Spacing Scale
- **4px**: Inline spacing, icon padding
- **8px**: Tight spacing between related elements
- **12px**: Default gap between list items
- **16px**: Standard card padding (horizontal), form field gaps
- **24px**: Card padding, section gaps within a card
- **32px**: Section spacing, card-to-card gaps
- **48px**: Major section breaks
- **64px**: Page section dividers

### Grid System
- **Max content width**: 1200px centered
- **Dashboard grids**: CSS Grid with `gap: 24px`
- **Metric cards**: `grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))`
- **Two-column layout**: 60/40 or 50/50 split with 24px gap
- **Sidebar**: Fixed 260px width, collapsible to 60px (icon-only)

### Responsive Breakpoints
- **Desktop**: >= 1024px (full grid, sidebar visible)
- **Tablet**: 768px - 1023px (collapsed sidebar, 2-column grids become 1-column)
- **Mobile**: < 768px (no sidebar, single column, stacked cards)

## 6. Depth & Elevation

### Elevation Levels
CzechAI uses minimal elevation. Depth is communicated through background color steps, not shadows.

| Level | Background | Border | Shadow | Usage |
|-------|-----------|--------|--------|-------|
| 0 (Base) | `#000000` | none | none | Page background |
| 1 (Surface) | `#0d0d0d` | none | none | Nav, footer, sidebar |
| 2 (Card) | `#1a1a1a` | `#2f2f2f` | none | Cards, panels, modals body |
| 3 (Elevated) | `#252525` | `#4d4d4f` | none | Dropdowns, popovers, tooltips |
| 4 (Overlay) | `rgba(0,0,0,0.8)` | none | none | Modal backdrop |

**Rule: NO box-shadow on cards or panels.** Depth is conveyed through background color differentiation only. The only permitted shadow is on focus rings: `box-shadow: 0 0 0 2px rgba(255,60,20,0.15)`.

## 7. Iconography & Imagery

### Icons
- Use emoji for category indicators (🏠 reality, 🛡️ AML, 💰 finance, ⚖️ legal)
- For UI icons: simple SVG line icons, 20x20px default, stroke-width 1.5px, color inherits from text
- No filled/solid icons. Line style only.
- No icon libraries required — inline SVG preferred

### Data Visualization
- Chart colors: Signal Red (`#ff3c14`) as primary, then `#3b82f6`, `#22c55e`, `#f59e0b`, `#8b5cf6`
- Chart background: transparent (inherits card `#1a1a1a`)
- Grid lines: `#1f1f1f` (barely visible)
- Axis labels: `#8e8ea0`, 12px monospace
- No 3D charts. Flat 2D only.

### Images
- Real estate photos: 16:9 aspect ratio, `border-radius: 8px`, `object-fit: cover`
- Map tiles: Dark style (Mapbox dark-v11 or similar)
- No decorative images. Every image must carry information.

## 8. Motion & Animation

### Permitted Animations
- **Transitions**: `0.15s ease` for color, background, border, opacity changes
- **Page transitions**: `0.2s ease` fade-in for route changes
- **Skeleton loading**: Subtle shimmer on `#1a1a1a` → `#252525` → `#1a1a1a`

### Forbidden Animations
- ❌ No pulse/breathing effects
- ❌ No glow effects
- ❌ No bouncing or elastic easing
- ❌ No parallax scrolling
- ❌ No gradient animations
- ❌ No particle effects
- ❌ No confetti or celebration animations

## 9. Agent Prompt

When generating CzechAI UI, follow these rules:
1. Background is ALWAYS `#000000`. Cards are `#1a1a1a` with `#2f2f2f` border.
2. The ONLY accent color is `#ff3c14` (Signal Red). No purple, no blue gradients, no teal.
3. Text hierarchy: `#ffffff` → `#ececf1` → `#8e8ea0` → `#4d4d4f`
4. All numbers, prices, and IDs use monospace font.
5. Tables have `#0d0d0d` header, `#1f1f1f` row borders, hover `#252525`.
6. No box-shadows on cards. Depth = background color steps.
7. Buttons: Red filled (primary), White outlined (secondary), Text-only (ghost).
8. Border radius: 8px for inputs/buttons, 12px for cards, 6px for badges.
9. Czech language support required. Test: "Přílišný žluťoučký kůň úpěl ďábelské ódy."
10. Data-first: prefer tables, metric grids, and structured layouts over paragraphs.