diff --git a/.codex-input/stitch-dockdeck-canon-v1/stitch_dockdeck_premium_interface_system/obsidian_control/DESIGN.md b/.codex-input/stitch-dockdeck-canon-v1/stitch_dockdeck_premium_interface_system/obsidian_control/DESIGN.md deleted file mode 100644 index 307f98d8..00000000 --- a/.codex-input/stitch-dockdeck-canon-v1/stitch_dockdeck_premium_interface_system/obsidian_control/DESIGN.md +++ /dev/null @@ -1,179 +0,0 @@ ---- -name: Obsidian Control -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: '#bbcabf' - inverse-surface: '#dae2fd' - inverse-on-surface: '#283044' - outline: '#86948a' - outline-variant: '#3c4a42' - surface-tint: '#4edea3' - primary: '#4edea3' - on-primary: '#003824' - primary-container: '#10b981' - on-primary-container: '#00422b' - inverse-primary: '#006c49' - secondary: '#b7c8e1' - on-secondary: '#213145' - secondary-container: '#3a4a5f' - on-secondary-container: '#a9bad3' - tertiary: '#ffb95f' - on-tertiary: '#472a00' - tertiary-container: '#e29100' - on-tertiary-container: '#523200' - error: '#ffb4ab' - on-error: '#690005' - error-container: '#93000a' - on-error-container: '#ffdad6' - primary-fixed: '#6ffbbe' - primary-fixed-dim: '#4edea3' - on-primary-fixed: '#002113' - on-primary-fixed-variant: '#005236' - secondary-fixed: '#d3e4fe' - secondary-fixed-dim: '#b7c8e1' - on-secondary-fixed: '#0b1c30' - on-secondary-fixed-variant: '#38485d' - tertiary-fixed: '#ffddb8' - tertiary-fixed-dim: '#ffb95f' - on-tertiary-fixed: '#2a1700' - on-tertiary-fixed-variant: '#653e00' - background: '#0b1326' - on-background: '#dae2fd' - surface-variant: '#2d3449' -typography: - display-lg: - fontFamily: Geist - fontSize: 32px - fontWeight: '600' - lineHeight: 40px - letterSpacing: -0.02em - headline-md: - fontFamily: Geist - fontSize: 24px - fontWeight: '600' - lineHeight: 32px - letterSpacing: -0.01em - headline-sm: - fontFamily: Geist - fontSize: 18px - fontWeight: '600' - lineHeight: 24px - body-md: - fontFamily: Geist - fontSize: 14px - fontWeight: '400' - lineHeight: 20px - body-sm: - fontFamily: Geist - fontSize: 13px - fontWeight: '400' - lineHeight: 18px - data-mono: - fontFamily: JetBrains Mono - fontSize: 12px - fontWeight: '500' - lineHeight: 16px - label-caps: - fontFamily: Geist - fontSize: 11px - fontWeight: '700' - lineHeight: 16px - letterSpacing: 0.05em -rounded: - sm: 0.125rem - DEFAULT: 0.25rem - md: 0.375rem - lg: 0.5rem - xl: 0.75rem - full: 9999px -spacing: - density-standard: 1rem - density-compact: 0.5rem - gutter: 1.5rem - edge-margin: 2rem - sidebar-width: 260px - header-height: 64px ---- - -## Brand & Style -The design system is engineered for Managed Cloud Operations Platforms (MCOP), where the core brand personality is defined by **calm control, high precision, and technical credibility**. The aesthetic follows a **Modernist Technical** approach, blending the utility of developer tools with the refinement of enterprise SaaS. - -The interface prioritizes reduced cognitive load through a dark-mode-first environment that emphasizes "dark operational surfaces." It evokes an emotional response of professional reliability—giving operators the confidence to manage complex cloud infrastructures without visual distraction. The style utilizes subtle glassmorphism for overlays to maintain spatial context and high-contrast typography for critical data. - -## Colors -The palette shifts from generic corporate tones to a specialized **Operational Slate & Emerald** scheme. - -- **Primary (Emerald):** Used for `Wijzigingsmodus` (Action/Change mode) and successful states. -- **Secondary (Slate):** Used for structural elements, borders, and `Alleen-lezen` (Read-only) states. -- **Tertiary (Amber):** Dedicated to `Planningsmodus` (Planning mode) and cautionary notices. -- **System Health vs. Security Risk:** These are semantically separated. Health uses a vibrant green-to-yellow spectrum, while Security Risk utilizes a high-chroma red and violet spectrum to differentiate "functional failure" from "active threat." - -All color combinations are calibrated to meet **WCAG AA** standards. Status indicators must always be accompanied by icons or textural labels to ensure accessibility beyond color alone. - -## Typography -This design system utilizes **Geist** for its exceptional legibility and neutral, technical character. For tabular data and technical identifiers (e.g., Resource IDs, IP addresses), **JetBrains Mono** is employed to ensure character distinction and alignment. - -- **Headings:** Use Geist with tight letter-spacing for a modern, controlled look. -- **Tabular Data:** Always use the `data-mono` token for alignment and readability in dense grids. -- **Dutch Localization:** Ensure line heights accommodate Dutch compound words which can be significantly longer than English counterparts. - -## Layout & Spacing -The layout uses a **fluid-to-fixed hybrid grid**. The global shell features a fixed left-hand navigation and a persistent top status bar. - -**Density Modes:** -1. **Standard:** Used for dashboards and configuration screens. 16px (1rem) base spacing. -2. **Compact:** Used for log viewers and advanced data tables. 8px (0.5rem) base spacing to maximize information density. - -**Breakpoints:** -- **Mobile (<768px):** Navigation collapses to a bottom bar; margins reduce to 16px. -- **Tablet (768px - 1280px):** Sidebar collapses to icons only. -- **Desktop (>1280px):** Full sidebar and multi-pane layouts enabled. - -## Elevation & Depth -Depth is communicated through **Tonal Layering** rather than traditional shadows. In a dark operational environment, higher elevation is represented by lighter surface colors. - -- **Base Layer:** Darkest slate (#020617) for the application background. -- **Surface Layer:** One step lighter (#0F172A) for primary content cards and panels. -- **Overlay Layer:** Semi-transparent glassmorphism (15% opacity tint with 20px backdrop blur) for modals and dropdowns to keep the underlying system state visible. -- **Borders:** Subtle 1px strokes (#1E293B) replace shadows for a cleaner, "flat-tech" appearance. - -## Shapes -The design system uses a **Soft (0.25rem)** rounding strategy. This maintains a crisp, professional edge suitable for technical software while avoiding the harshness of 90-degree corners. - -- **Input Fields & Buttons:** 4px radius. -- **Cards & Modals:** 8px (rounded-lg) for clear container separation. -- **Environment Badges:** Fully pill-shaped to differentiate status metadata from interactive components. - -## Components - -### Global App Shell -A persistent top bar displays the **Tenant Switcher** (dropdown) and **Environment Badges** (e.g., `Productie`, `Staging`). The right side of the bar hosts the global system health pulse. - -### Specialized Badges -- **Versheid (Freshness):** Indicators for data latency (e.g., "Live", "5m geleden"). -- **Bron van Gezag (Source-of-Authority):** A distinctive icon-prefix badge showing if data is from `Cloud Provider` or `On-Premise`. -- **Beveiligd Object (Protected-Object):** A lock-themed badge for resources requiring MFA to modify. - -### Safety-first Action Previews -Before executing any `Wijziging` (Change), a modal must present an **Impact-analyse**: -- **Risico:** Low/Medium/High/Critical. -- **Omkeerbaarheid:** Clear label stating if the action is `Herstelbaar` (Reversible) or `Permanent`. -- **Impact Radius:** A list of affected downstream resources. - -### Advanced Data Tables -- **Bulk Selection:** A dedicated action bar appears at the bottom of the screen when items are selected. -- **Filter States:** Visible "Chips" in the header to allow quick removal of active filters. -- **Compact Toggle:** A dedicated UI switch to toggle between Standard and Compact row heights. - -### Operational Modes (UI State) -- **Alleen-lezen:** Header is Neutral Gray; primary actions are disabled. -- **Planningsmodus:** Header features a subtle Amber stripe; actions are "Stage" instead of "Execute". -- **Wijzigingsmodus:** Header features a subtle Emerald glow; all destructive actions are unlocked. \ No newline at end of file