diff --git a/.codex-input/stitch-dockdeck-canon-v1/stitch_dockdeck_premium_interface_system/dockdeck_canon_v1/DESIGN.md b/.codex-input/stitch-dockdeck-canon-v1/stitch_dockdeck_premium_interface_system/dockdeck_canon_v1/DESIGN.md deleted file mode 100644 index 89804fad..00000000 --- a/.codex-input/stitch-dockdeck-canon-v1/stitch_dockdeck_premium_interface_system/dockdeck_canon_v1/DESIGN.md +++ /dev/null @@ -1,196 +0,0 @@ ---- -name: DockDeck Canon v1 -colors: - surface: '#0b1326' - surface-dim: '#0b1326' - surface-bright: '#31394e' - surface-container-lowest: '#060d20' - surface-container-low: '#131b2e' - surface-container: '#171f33' - surface-container-high: '#222a3e' - surface-container-highest: '#2d3449' - on-surface: '#dbe2fd' - on-surface-variant: '#c6c5d5' - inverse-surface: '#dbe2fd' - inverse-on-surface: '#283044' - outline: '#908f9e' - outline-variant: '#454653' - surface-tint: '#bdc2ff' - primary: '#bdc2ff' - on-primary: '#131e8c' - primary-container: '#818cf8' - on-primary-container: '#101b8a' - inverse-primary: '#4953bc' - secondary: '#4edea3' - on-secondary: '#003824' - secondary-container: '#00a572' - on-secondary-container: '#00311f' - tertiary: '#c0c1ff' - on-tertiary: '#1000a9' - tertiary-container: '#8689ff' - on-tertiary-container: '#0f00a2' - error: '#ffb4ab' - on-error: '#690005' - error-container: '#93000a' - on-error-container: '#ffdad6' - primary-fixed: '#e0e0ff' - primary-fixed-dim: '#bdc2ff' - on-primary-fixed: '#000767' - on-primary-fixed-variant: '#2f3aa3' - 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: '#dbe2fd' - surface-variant: '#2d3449' -typography: - headline-lg: - fontFamily: Geist - fontSize: 32px - fontWeight: '600' - lineHeight: 40px - letterSpacing: -0.02em - headline-lg-mobile: - fontFamily: Geist - fontSize: 24px - fontWeight: '600' - lineHeight: 32px - letterSpacing: -0.01em - headline-md: - fontFamily: Geist - fontSize: 20px - fontWeight: '500' - lineHeight: 28px - body-md: - fontFamily: Geist - fontSize: 16px - fontWeight: '400' - lineHeight: 24px - body-sm: - fontFamily: Geist - fontSize: 14px - fontWeight: '400' - lineHeight: 20px - label-caps: - fontFamily: Geist - fontSize: 12px - fontWeight: '600' - lineHeight: 16px - letterSpacing: 0.05em - status-label: - fontFamily: Geist - fontSize: 13px - fontWeight: '500' - lineHeight: 18px -rounded: - sm: 0.25rem - DEFAULT: 0.5rem - md: 0.75rem - lg: 1rem - xl: 1.5rem - full: 9999px -spacing: - container-max: 1280px - gutter: 1.5rem - margin-mobile: 1rem - stack-sm: 0.5rem - stack-md: 1rem - stack-lg: 2rem ---- - -## Brand & Style - -The design system is engineered for a premium, calm, and professional digital home base. It focuses on clarity and purposeful utility, acting as a serene entry point for a user's digital environment. The aesthetic moves away from the cluttered, metric-heavy dashboards of traditional DevOps tools, opting instead for a **Minimalist / Modern** style that prioritizes content visibility and ease of access. - -The interface evokes a sense of "digital zen"—an organized, quiet space where the user feels in total control of their navigation. There are no distractions like avatars or management controls; the focus is entirely on the "bridge" between the user and their services. - -**Key Identity Guidelines:** -- **Language:** All copy must be in Dutch. Use an informal but professional tone ("je/jouw", never "uw"). -- **Logo:** A minimalist, geometric bridge or dock icon. It must be legible at small scales (16px to 24px) and should avoid complex gradients, favoring solid strokes or simple geometric fills. -- **Mood:** Professional, reliable, and unobtrusive. - -## Colors - -The palette is optimized for a high-end dark mode experience. The primary background uses a deep navy to reduce eye strain and provide a sophisticated canvas for vibrant accents. - -- **Background:** Deep Navy (`#0b1326`) serves as the foundation. -- **Primary Accent:** Refined Lavender/Purple (`#818cf8`) is used for primary actions, active states, and branding elements. -- **Success/Positive:** Green (`#10b981`) is reserved strictly for "Online" status and positive indicators. -- **Muted/Neutral:** For secondary text and borders, use varying shades of slate and navy to maintain low visual noise. -- **Status Colors:** - - `Online`: #10b981 - - `Offline`: #ef4444 (Softened red) - - `Status onbekend`: #94a3b8 (Muted slate) - -## Typography - -This design system utilizes **Geist** for its technical precision and modern, clean aesthetic. The typography scale is designed to be highly legible with generous line heights to enhance the calm, airy feel of the interface. - -**Usage Notes:** -- **Headlines:** Use `headline-lg` for main section titles. In mobile views, drop to `headline-lg-mobile`. -- **Labels:** `label-caps` is used for category headers or small metadata tags. -- **Dutch Terminology:** Always use the following exact strings: - - *Online* - - *Offline* - - *Status onbekend* - - *Zichtbaar* - - *Verborgen* - - *Nieuw ontdekt* - -## Layout & Spacing - -The layout follows a **Fluid Grid** approach with a maximum container width to prevent line lengths from becoming unreadable on ultra-wide monitors. - -- **Grid:** 12-column layout on desktop, 4-column on mobile. -- **Rhythm:** Use an 8px base unit for all spacing (padding, margins, gaps). -- **Safe Areas:** Maintain a minimum 24px (1.5rem) margin on the sides of the viewport on desktop and 16px (1rem) on mobile. -- **Alignment:** Content should be center-aligned within the main container to reinforce the "home base" feel. - -## Elevation & Depth - -Depth in the design system is achieved through **Tonal Layers** and **Low-Contrast Outlines** rather than heavy shadows. This keeps the interface feeling light and digital. - -- **Base Layer:** The deepest navy (`#0b1326`). -- **Surface Layer:** Cards and containers use a slightly lighter navy (`#161f35`) with a 1px border (`#2d3748`). -- **Interactive Depth:** On hover, cards should subtly lift using a very soft, high-diffusion shadow with a 4% opacity indigo tint. -- **Borders:** Use subtle borders to define structure. Avoid high-contrast white borders; instead, use semi-transparent overlays (e.g., `rgba(255, 255, 255, 0.05)`) for a refined look. - -## Shapes - -The shape language is consistently **Rounded**, striking a balance between approachable and professional. - -- **Standard Elements:** Buttons, input fields, and small cards use a **8px** (`0.5rem`) radius. -- **Large Containers:** Dashboard cards or featured sections use a **16px** (`1rem`) radius. -- **Interactive States:** Focus states should mirror the element's corner radius with a 2px offset. - -## Components - -### Buttons -- **Primary:** Background `#818cf8`, text `#0b1326`. No shadow, 8px radius. -- **Secondary:** Transparent background with a 1px border of `#818cf8`. -- **Text Style:** Medium weight, Geist Sans. - -### Cards (Service Items) -- The core component of the system. -- **Header:** Title of the service (Zichtbaar/Verborgen status). -- **Footer:** Status label (Online/Offline) with a small colored dot indicator. -- **Constraint:** No management buttons (No start/stop/delete). The card is a portal, not a controller. - -### Chips / Tags -- Used for `Nieuw ontdekt` or service categories. -- Subtle background tint (10% opacity of the accent color) with matching 1px border. - -### Status Indicators -- A simple 8px circle. -- Colors: Green (`#10b981`), Red (`#ef4444`), or Slate (`#94a3b8`). -- Always accompanied by the Dutch text label. - -### Input Fields -- Used only for search/filtering. -- Darker background than the card surface. -- Subtle lavender focus ring (2px). \ No newline at end of file