=docs-stitch-integration-baseline

2026-07-21 22:25:01 +02:00
parent 213bdb60a5
commit 4505e47d36
21 changed files with 4656 additions and 0 deletions
@@ -0,0 +1,181 @@
+---
+name: Intelligence Cockpit
+colors:
+  surface: '#0b1326'
+  surface-dim: '#0b1326'
+  surface-bright: '#31394d'
+  surface-container-lowest: '#060e20'
+  surface-container-low: '#131b2e'
+  surface-container: '#171f33'
+  surface-container-high: '#222a3d'
+  surface-container-highest: '#2d3449'
+  on-surface: '#dae2fd'
+  on-surface-variant: '#b9caca'
+  inverse-surface: '#dae2fd'
+  inverse-on-surface: '#283044'
+  outline: '#849495'
+  outline-variant: '#3a494a'
+  surface-tint: '#00dce5'
+  primary: '#e9feff'
+  on-primary: '#003739'
+  primary-container: '#00f5ff'
+  on-primary-container: '#006c71'
+  inverse-primary: '#00696e'
+  secondary: '#4edea3'
+  on-secondary: '#003824'
+  secondary-container: '#00a572'
+  on-secondary-container: '#00311f'
+  tertiary: '#fcf8ff'
+  on-tertiary: '#1000a9'
+  tertiary-container: '#dbdaff'
+  on-tertiary-container: '#4c4ed9'
+  error: '#ffb4ab'
+  on-error: '#690005'
+  error-container: '#93000a'
+  on-error-container: '#ffdad6'
+  primary-fixed: '#63f7ff'
+  primary-fixed-dim: '#00dce5'
+  on-primary-fixed: '#002021'
+  on-primary-fixed-variant: '#004f53'
+  secondary-fixed: '#6ffbbe'
+  secondary-fixed-dim: '#4edea3'
+  on-secondary-fixed: '#002113'
+  on-secondary-fixed-variant: '#005236'
+  tertiary-fixed: '#e1e0ff'
+  tertiary-fixed-dim: '#c0c1ff'
+  on-tertiary-fixed: '#07006c'
+  on-tertiary-fixed-variant: '#2f2ebe'
+  background: '#0b1326'
+  on-background: '#dae2fd'
+  surface-variant: '#2d3449'
+typography:
+  headline-lg:
+    fontFamily: Geist
+    fontSize: 32px
+    fontWeight: '600'
+    lineHeight: '1.2'
+    letterSpacing: -0.02em
+  headline-lg-mobile:
+    fontFamily: Geist
+    fontSize: 24px
+    fontWeight: '600'
+    lineHeight: '1.2'
+  headline-md:
+    fontFamily: Geist
+    fontSize: 20px
+    fontWeight: '500'
+    lineHeight: '1.4'
+  body-md:
+    fontFamily: Inter
+    fontSize: 16px
+    fontWeight: '400'
+    lineHeight: '1.6'
+  body-sm:
+    fontFamily: Inter
+    fontSize: 14px
+    fontWeight: '400'
+    lineHeight: '1.5'
+  metadata-caps:
+    fontFamily: JetBrains Mono
+    fontSize: 12px
+    fontWeight: '500'
+    lineHeight: '1.0'
+    letterSpacing: 0.05em
+  label-mono:
+    fontFamily: JetBrains Mono
+    fontSize: 13px
+    fontWeight: '400'
+    lineHeight: '1.0'
+rounded:
+  sm: 0.125rem
+  DEFAULT: 0.25rem
+  md: 0.375rem
+  lg: 0.5rem
+  xl: 0.75rem
+  full: 9999px
+spacing:
+  container-max: 1280px
+  gutter: 24px
+  margin-mobile: 16px
+  stack-sm: 8px
+  stack-md: 16px
+  stack-lg: 32px
+---
+
+## Brand & Style
+
+The design system is anchored in the concept of "Intelligent Discovery." It positions the product not just as a job board, but as a sophisticated radar system for career growth. The aesthetic is a refined blend of **Modern Corporate** and **Technical Minimalist**, evoking the feeling of a high-end data cockpit.
+
+The target audience consists of professionals who value efficiency, precision, and a calm user experience. The UI should feel like a trusted advisor: quiet until it finds something significant, then clear and authoritative in its presentation. We avoid literal military metaphors in favor of abstract "signal" patterns, subtle data visualizations, and high-quality finishes that suggest a premium, automated service.
+
+## Colors
+
+The palette is centered on a "Professional Dark" foundation to reduce cognitive load and emphasize the intelligence-gathering nature of the platform.
+
+*   **Primary (Signal Cyan):** `#00F5FF`. Used for active radar pulses, high-confidence matches, and primary calls to action. It represents the "discovery" aspect.
+*   **Secondary (Success Emerald):** `#10B981`. Reserved for "Healthy" system statuses and finalized matches.
+*   **Tertiary (Intelligence Indigo):** `#6366F1`. Used for automation indicators and background accents to provide depth.
+*   **Neutrals:** A range of Slate and Navy tones (from `#0F172A` to `#94A3B8`) form the structural layers.
+
+In Light Mode, the deep navies are replaced with crisp whites and soft slates, but the Primary Cyan remains the focal point for interaction.
+
+## Typography
+
+This design system utilizes a tiered typographic approach to balance human readability with a technical edge.
+
+*   **Headlines:** Using **Geist**, these are sharp and modern, providing a clear hierarchy for job titles and section headers.
+*   **Body:** **Inter** is used for all descriptive text, ensuring maximum legibility during long reading sessions of job descriptions.
+*   **Data & Metadata:** **JetBrains Mono** is employed for small labels, status indicators, and automation logs. This reinforces the "Radar" and "Automated" personality of the brand.
+
+Dutch language nuances (long compound words) are handled through generous line-heights and flexible container widths.
+
+## Layout & Spacing
+
+The layout follows a **Fixed Grid** model on desktop to maintain a controlled "Cockpit" feel, centered within the viewport. 
+
+*   **Desktop:** 12-column grid with 24px gutters. Content is often organized into a narrow sidebar for navigation/filters and a wide main area for the "Radar Feed."
+*   **Mobile:** A single-column fluid layout with 16px side margins. 
+*   **Spacing Rhythm:** An 8px base unit drives all padding and margins. Vertical stacking uses "stack-md" (16px) for related elements and "stack-lg" (32px) for distinct sections.
+
+## Elevation & Depth
+
+Hierarchy is established through **Tonal Layers** and **Subtle Glows** rather than heavy shadows.
+
+*   **Background:** The base layer uses the darkest neutral.
+*   **Surface-Low:** Cards and containers use a slightly lighter slate with a 1px low-opacity border.
+*   **Surface-High:** Elements in focus or "Strong Matches" utilize a "Signal Glow"—a faint, primary-colored outer shadow (`0 0 15px rgba(0, 245, 255, 0.15)`) and a subtle inner gradient.
+*   **Backdrop Blur:** Modals and navigation overlays use a 12px blur to maintain the glass-like cockpit aesthetic without sacrificing legibility.
+
+## Shapes
+
+The shape language is **Soft (0.25rem)**. This provides a professional, geometric look that feels precise and modern. 
+
+*   **Standard Elements:** Buttons and inputs use a 4px (0.25rem) radius.
+*   **Large Containers:** Main cards and sections use an 8px (0.5rem) radius.
+*   **Status Indicators:** Chips and small badges use a fully rounded (pill) shape to contrast against the structured grid of the cards.
+
+## Components
+
+### Cards (Vacaturekaarten)
+Cards are the primary data vessel. They feature a 1px border (`#334155`). For "Sterke Matches" (Strong Matches), the border color transitions to the Primary Cyan, and a subtle glow is applied.
+
+### Score Indicators (Match-score)
+A combination of a bold numeric percentage in `Geist` and a qualitative label in `JetBrains Mono`.
+*   *Example:* **94%** [STERKE MATCH]
+*   Color reflects the score: Cyan for >80%, Indigo for 50-80%, Slate for <50%.
+
+### Status Chips (Automatisering)
+Small, pill-shaped indicators for system health:
+*   **Scanning:** Primary Cyan text with a pulsing dot icon.
+*   **Healthy:** Secondary Emerald background (low opacity) with dark text.
+*   **Degraded:** Amber/Orange for system warnings.
+
+### Buttons (Actieknoppen)
+*   **Primary:** Solid Cyan with dark text for high contrast.
+*   **Ghost:** Transparent with a Slate-400 border, used for secondary actions like "Bewaar" (Save).
+
+### Input Fields
+Dark backgrounds with a 1px border. On focus, the border glows with the Primary Cyan signal. Labels use the mono font for a technical feel.
+
+### Navigation
+Compact, icon-driven sidebar on desktop to maximize the workspace for the Radar Feed. Icons are stroke-based (2px weight) for a clean, technical look.