{"colors":{"accent":"#ff3c14","accent_dark":"#cc2200","accent_hover":"#ff5533","body":"#000000","border":"#2f2f2f","border_strong":"#4d4d4f","border_subtle":"#1f1f1f","card":"#1a1a1a","error":"#ef4444","header":"#0d0d0d","hover":"#252525","info":"#3b82f6","input":"#2f2f2f","success":"#22c55e","text_disabled":"#4d4d4f","text_primary":"#ffffff","text_secondary":"#ececf1","text_tertiary":"#8e8ea0","warning":"#f59e0b"},"markdown":"# Design System of CzechAI\n\n## 1. Visual Theme & Atmosphere\n\nCzechAI's design language is rooted in **pure black minimalism** \u2014 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 \u2014 zero gradients, zero glassmorphism, zero glow effects. Every element earns its place through information density, not decoration.\n\nThe 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.\n\n**Key Characteristics:**\n- Pure black-native: `#000000` body, `#1a1a1a` cards, `#0d0d0d` headers/footers\n- Single accent color: signal red `#ff3c14` \u2014 used only for CTAs, alerts, active states, brand emphasis\n- No gradients, no glassmorphism, no glow effects, no pulse animations\n- System font stack for maximum rendering speed\n- Monospace for data, code, and technical labels\n- Ultra-thin borders (`#2f2f2f`) creating structure without visual weight\n- High information density \u2014 tables, grids, metric cards preferred over prose\n- Dark theme ONLY \u2014 no light mode variant\n\n## 2. Color Palette & Roles\n\n### Background Surfaces\n- **Body Black** (`#000000`): The deepest background. Pure black. The default canvas for all pages.\n- **Card Surface** (`#1a1a1a`): Card backgrounds, elevated panels, modal bodies.\n- **Header/Footer** (`#0d0d0d`): Navigation bar, footer, fixed elements. Near-black with imperceptible warmth.\n- **Input Surface** (`#2f2f2f`): Form input backgrounds, text areas, search fields.\n- **Hover Surface** (`#252525`): Hover state for interactive card elements.\n\n### Text & Content\n- **Primary Text** (`#ffffff`): Pure white. Headlines, primary labels, emphasized content.\n- **Secondary Text** (`#ececf1`): Warm off-white. Body text, descriptions, paragraph content.\n- **Tertiary Text** (`#8e8ea0`): Muted gray. Metadata, timestamps, placeholders, de-emphasized labels.\n- **Disabled Text** (`#4d4d4f`): Dark gray. Disabled states, inactive elements.\n\n### Brand & Accent\n- **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.\n- **Red Dark** (`#cc2200`): Pressed/active state of Signal Red. Used for button :active states.\n- **Red Hover** (`#ff5533`): Lighter variant for hover states on red elements.\n\n### Status Colors\n- **Success Green** (`#22c55e`): Completion, healthy, online status. Used sparingly.\n- **Warning Amber** (`#f59e0b`): Caution, degraded, pending states.\n- **Error Red** (`#ef4444`): Error messages, failed operations. Distinct from brand Signal Red.\n- **Info Blue** (`#3b82f6`): Informational badges, links in body text.\n\n### Border & Divider\n- **Border Primary** (`#2f2f2f`): Default border for cards, inputs, containers.\n- **Border Secondary** (`#4d4d4f`): Stronger border for focused/active inputs, hover states.\n- **Border Subtle** (`#1f1f1f`): Ultra-subtle divider for list items, table rows.\n\n### D-Tag Colors (Real Estate Specific)\n- **D30** (`#ef4444`): Extremely undervalued (30%+ below market). Red badge.\n- **D20** (`#f97316`): Significantly undervalued. Orange badge.\n- **D15** (`#eab308`): Moderately undervalued. Yellow badge.\n- **D10** (`#22c55e`): Slightly undervalued. Green badge.\n- **FAIR** (`#8e8ea0`): Market price. Gray badge.\n- **P20+** (`#6366f1`): Overvalued. Indigo badge.\n\n### Risk Score Colors (AML)\n- **Low Risk (0-30)** (`#22c55e`): Green background badge.\n- **Medium Risk (31-50)** (`#f59e0b`): Amber background badge.\n- **High Risk (51-70)** (`#f97316`): Orange background badge.\n- **Critical Risk (71-100)** (`#ef4444`): Red background badge.\n\n## 3. Typography Rules\n\n### Font Family\n- **Primary**: `-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif`\n- **Monospace**: `'SF Mono', Monaco, 'Courier New', monospace`\n- **Display** (optional, for reports/presentations): `'Rajdhani', sans-serif` (weight 700)\n- **Report Body** (optional): `'DM Sans', sans-serif`\n- **Report Code** (optional): `'DM Mono', monospace`\n\n### Hierarchy\n\n| Role | Font | Size | Weight | Line Height | Letter Spacing | Usage |\n|------|------|------|--------|-------------|----------------|-------|\n| Display Hero | System | 48px (3rem) | 700 | 1.1 | -0.02em | Landing page hero, one per page max |\n| Heading 1 | System | 32px (2rem) | 700 | 1.2 | -0.01em | Page titles, section headers |\n| Heading 2 | System | 24px (1.5rem) | 600 | 1.3 | 0 | Card titles, subsection headers |\n| Heading 3 | System | 18px (1.125rem) | 600 | 1.4 | 0 | Widget titles, metric labels |\n| Body Large | System | 16px (1rem) | 400 | 1.6 | 0 | Primary body text, descriptions |\n| Body | System | 14px (0.875rem) | 400 | 1.5 | 0 | Secondary body text, table cells |\n| Caption | System | 12px (0.75rem) | 400 | 1.4 | 0.02em | Metadata, timestamps, footnotes |\n| Mono Data | Monospace | 14px | 500 | 1.4 | 0 | Numbers, codes, IDs, prices, API responses |\n| Mono Small | Monospace | 12px | 400 | 1.3 | 0 | Code snippets, technical labels |\n\n### Typography Rules\n- Headlines: NEVER use `text-transform: uppercase` for multi-word headlines\n- Numbers and prices: ALWAYS use monospace font\n- Czech characters (\u011b\u0161\u010d\u0159\u017e\u00fd\u00e1\u00ed\u00e9): must render correctly \u2014 test with \"P\u0159\u00edli\u0161n\u00fd \u017elu\u0165ou\u010dk\u00fd k\u016f\u0148\"\n- No italic body text. Use weight 600 (semibold) for emphasis instead.\n- Line length: max 75 characters for body text readability\n\n## 4. Component Patterns\n\n### Buttons\n\n**Primary (Signal Red):**\n```css\n.btn-primary {\n  background: #ff3c14;\n  color: #ffffff;\n  border: none;\n  border-radius: 8px;\n  padding: 12px 24px;\n  font-size: 14px;\n  font-weight: 600;\n  cursor: pointer;\n  transition: background 0.15s ease;\n}\n.btn-primary:hover { background: #ff5533; }\n.btn-primary:active { background: #cc2200; }\n```\n\n**Secondary (Outline White):**\n```css\n.btn-secondary {\n  background: transparent;\n  color: #ffffff;\n  border: 1px solid #4d4d4f;\n  border-radius: 8px;\n  padding: 12px 24px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n.btn-secondary:hover { background: rgba(255,255,255,0.05); border-color: #8e8ea0; }\n```\n\n**Ghost (Text Only):**\n```css\n.btn-ghost {\n  background: transparent;\n  color: #8e8ea0;\n  border: none;\n  padding: 8px 16px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n}\n.btn-ghost:hover { color: #ffffff; }\n```\n\n### Cards\n```css\n.card {\n  background: #1a1a1a;\n  border: 1px solid #2f2f2f;\n  border-radius: 12px;\n  padding: 24px;\n  transition: border-color 0.15s ease;\n}\n.card:hover { border-color: #4d4d4f; }\n```\n\n### Metric Cards (KPI)\n```css\n.metric-card {\n  background: #1a1a1a;\n  border: 1px solid #2f2f2f;\n  border-radius: 12px;\n  padding: 20px;\n  text-align: center;\n}\n.metric-card .value {\n  font-family: 'SF Mono', Monaco, monospace;\n  font-size: 32px;\n  font-weight: 700;\n  color: #ffffff;\n}\n.metric-card .label {\n  font-size: 12px;\n  color: #8e8ea0;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  margin-top: 8px;\n}\n```\n\n### Tables\n```css\ntable { width: 100%; border-collapse: collapse; }\nth {\n  background: #0d0d0d;\n  color: #8e8ea0;\n  font-size: 12px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  padding: 12px 16px;\n  text-align: left;\n  border-bottom: 1px solid #2f2f2f;\n}\ntd {\n  padding: 12px 16px;\n  border-bottom: 1px solid #1f1f1f;\n  color: #ececf1;\n  font-size: 14px;\n}\ntr:hover td { background: #252525; }\n```\n\n### Form Inputs\n```css\ninput, textarea, select {\n  background: #2f2f2f;\n  border: 1px solid #4d4d4f;\n  border-radius: 8px;\n  padding: 12px 16px;\n  color: #ffffff;\n  font-size: 14px;\n  transition: border-color 0.15s ease;\n}\ninput:focus, textarea:focus {\n  border-color: #ff3c14;\n  outline: none;\n  box-shadow: 0 0 0 2px rgba(255,60,20,0.15);\n}\ninput::placeholder { color: #8e8ea0; }\n```\n\n### Badges / Tags\n```css\n.badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 4px 10px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 600;\n  font-family: monospace;\n}\n.badge-red { background: rgba(239,68,68,0.15); color: #ef4444; }\n.badge-green { background: rgba(34,197,94,0.15); color: #22c55e; }\n.badge-amber { background: rgba(245,158,11,0.15); color: #f59e0b; }\n.badge-gray { background: rgba(142,142,160,0.15); color: #8e8ea0; }\n```\n\n### Navigation\n```css\nnav {\n  background: #0d0d0d;\n  border-bottom: 1px solid #2f2f2f;\n  padding: 0 24px;\n  height: 56px;\n  display: flex;\n  align-items: center;\n}\nnav a {\n  color: #8e8ea0;\n  text-decoration: none;\n  font-size: 14px;\n  font-weight: 500;\n  padding: 8px 16px;\n  transition: color 0.15s ease;\n}\nnav a:hover { color: #ffffff; }\nnav a.active { color: #ff3c14; }\n```\n\n## 5. Layout Principles\n\n### Spacing Scale\n- **4px**: Inline spacing, icon padding\n- **8px**: Tight spacing between related elements\n- **12px**: Default gap between list items\n- **16px**: Standard card padding (horizontal), form field gaps\n- **24px**: Card padding, section gaps within a card\n- **32px**: Section spacing, card-to-card gaps\n- **48px**: Major section breaks\n- **64px**: Page section dividers\n\n### Grid System\n- **Max content width**: 1200px centered\n- **Dashboard grids**: CSS Grid with `gap: 24px`\n- **Metric cards**: `grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))`\n- **Two-column layout**: 60/40 or 50/50 split with 24px gap\n- **Sidebar**: Fixed 260px width, collapsible to 60px (icon-only)\n\n### Responsive Breakpoints\n- **Desktop**: >= 1024px (full grid, sidebar visible)\n- **Tablet**: 768px - 1023px (collapsed sidebar, 2-column grids become 1-column)\n- **Mobile**: < 768px (no sidebar, single column, stacked cards)\n\n## 6. Depth & Elevation\n\n### Elevation Levels\nCzechAI uses minimal elevation. Depth is communicated through background color steps, not shadows.\n\n| Level | Background | Border | Shadow | Usage |\n|-------|-----------|--------|--------|-------|\n| 0 (Base) | `#000000` | none | none | Page background |\n| 1 (Surface) | `#0d0d0d` | none | none | Nav, footer, sidebar |\n| 2 (Card) | `#1a1a1a` | `#2f2f2f` | none | Cards, panels, modals body |\n| 3 (Elevated) | `#252525` | `#4d4d4f` | none | Dropdowns, popovers, tooltips |\n| 4 (Overlay) | `rgba(0,0,0,0.8)` | none | none | Modal backdrop |\n\n**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)`.\n\n## 7. Iconography & Imagery\n\n### Icons\n- Use emoji for category indicators (\ud83c\udfe0 reality, \ud83d\udee1\ufe0f AML, \ud83d\udcb0 finance, \u2696\ufe0f legal)\n- For UI icons: simple SVG line icons, 20x20px default, stroke-width 1.5px, color inherits from text\n- No filled/solid icons. Line style only.\n- No icon libraries required \u2014 inline SVG preferred\n\n### Data Visualization\n- Chart colors: Signal Red (`#ff3c14`) as primary, then `#3b82f6`, `#22c55e`, `#f59e0b`, `#8b5cf6`\n- Chart background: transparent (inherits card `#1a1a1a`)\n- Grid lines: `#1f1f1f` (barely visible)\n- Axis labels: `#8e8ea0`, 12px monospace\n- No 3D charts. Flat 2D only.\n\n### Images\n- Real estate photos: 16:9 aspect ratio, `border-radius: 8px`, `object-fit: cover`\n- Map tiles: Dark style (Mapbox dark-v11 or similar)\n- No decorative images. Every image must carry information.\n\n## 8. Motion & Animation\n\n### Permitted Animations\n- **Transitions**: `0.15s ease` for color, background, border, opacity changes\n- **Page transitions**: `0.2s ease` fade-in for route changes\n- **Skeleton loading**: Subtle shimmer on `#1a1a1a` \u2192 `#252525` \u2192 `#1a1a1a`\n\n### Forbidden Animations\n- \u274c No pulse/breathing effects\n- \u274c No glow effects\n- \u274c No bouncing or elastic easing\n- \u274c No parallax scrolling\n- \u274c No gradient animations\n- \u274c No particle effects\n- \u274c No confetti or celebration animations\n\n## 9. Agent Prompt\n\nWhen generating CzechAI UI, follow these rules:\n1. Background is ALWAYS `#000000`. Cards are `#1a1a1a` with `#2f2f2f` border.\n2. The ONLY accent color is `#ff3c14` (Signal Red). No purple, no blue gradients, no teal.\n3. Text hierarchy: `#ffffff` \u2192 `#ececf1` \u2192 `#8e8ea0` \u2192 `#4d4d4f`\n4. All numbers, prices, and IDs use monospace font.\n5. Tables have `#0d0d0d` header, `#1f1f1f` row borders, hover `#252525`.\n6. No box-shadows on cards. Depth = background color steps.\n7. Buttons: Red filled (primary), White outlined (secondary), Text-only (ghost).\n8. Border radius: 8px for inputs/buttons, 12px for cards, 6px for badges.\n9. Czech language support required. Test: \"P\u0159\u00edli\u0161n\u00fd \u017elu\u0165ou\u010dk\u00fd k\u016f\u0148 \u00fap\u011bl \u010f\u00e1belsk\u00e9 \u00f3dy.\"\n10. Data-first: prefer tables, metric grids, and structured layouts over paragraphs.\n","name":"CzechAI Design System","radius":{"badge":6,"button":8,"card":12,"input":8},"rules":["Background ALWAYS #000000","Cards #1a1a1a with #2f2f2f border","ONLY accent color is #ff3c14 Signal Red","NO gradients, NO glassmorphism, NO glow","NO box-shadow on cards","Numbers and prices ALWAYS monospace","Czech language support required"],"spacing":{"lg":24,"md":16,"sm":8,"xl":32,"xs":4,"xxl":48},"typography":{"mono":"SF Mono, Monaco, Courier New, monospace","primary":"-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica Neue, Arial, sans-serif"},"version":"1.0"}