diff --git a/.codex-input/stitch-dockdeck-canon-v1/stitch_dockdeck_premium_interface_system/core_modernist/DESIGN.md b/.codex-input/stitch-dockdeck-canon-v1/stitch_dockdeck_premium_interface_system/core_modernist/DESIGN.md deleted file mode 100644 index 7080587b..00000000 --- a/.codex-input/stitch-dockdeck-canon-v1/stitch_dockdeck_premium_interface_system/core_modernist/DESIGN.md +++ /dev/null @@ -1,180 +0,0 @@ ---- -name: DockDeck Cyber-Utility -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: '#c7c4d7' - inverse-surface: '#dbe2fd' - inverse-on-surface: '#283044' - outline: '#908fa0' - outline-variant: rgba(30, 41, 59, 0.5) - surface-tint: '#c0c1ff' - primary: '#c0c1ff' - on-primary: '#292b5e' - primary-container: '#8a8cc6' - on-primary-container: '#222457' - inverse-primary: '#585990' - secondary: '#4edea3' - on-secondary: '#003824' - secondary-container: '#00b47d' - on-secondary-container: '#003e28' - tertiary: '#ffb783' - on-tertiary: '#4f2500' - tertiary-container: '#d97721' - on-tertiary-container: '#452000' - error: '#ffb4ab' - on-error: '#690005' - error-container: '#93000a' - on-error-container: '#ffdad6' - primary-fixed: '#e1e0ff' - primary-fixed-dim: '#c0c1ff' - on-primary-fixed: '#131449' - on-primary-fixed-variant: '#404176' - secondary-fixed: '#6ffbbe' - secondary-fixed-dim: '#4edea3' - on-secondary-fixed: '#002114' - on-secondary-fixed-variant: '#005236' - tertiary-fixed: '#ffdcc5' - tertiary-fixed-dim: '#ffb783' - on-tertiary-fixed: '#301400' - on-tertiary-fixed-variant: '#703700' - background: '#0b1326' - on-background: '#dbe2fd' - surface-variant: '#2d3449' - surface-glass: rgba(15, 23, 42, 0.6) - status-online: '#4edea3' - status-offline: '#ffb4ab' - status-degraded: '#ffb783' -typography: - display-lg: - fontFamily: Geist - fontSize: 48px - fontWeight: '600' - lineHeight: 56px - letterSpacing: -0.02em - headline-lg: - fontFamily: Geist - fontSize: 32px - fontWeight: '600' - lineHeight: 40px - letterSpacing: -0.01em - headline-lg-mobile: - fontFamily: Geist - fontSize: 24px - fontWeight: '600' - lineHeight: 32px - headline-md: - fontFamily: Geist - fontSize: 24px - fontWeight: '500' - lineHeight: 32px - body-lg: - fontFamily: Inter - fontSize: 18px - fontWeight: '400' - lineHeight: 28px - body-md: - fontFamily: Inter - fontSize: 16px - fontWeight: '400' - lineHeight: 24px - label-md: - fontFamily: Geist - fontSize: 14px - fontWeight: '500' - lineHeight: 20px - letterSpacing: 0.02em - code-sm: - fontFamily: Geist - fontSize: 13px - fontWeight: '400' - lineHeight: 18px -rounded: - sm: 0.25rem - DEFAULT: 0.5rem - md: 0.75rem - lg: 1rem - xl: 1.5rem - full: 9999px -spacing: - base: 8px - stack-sm: 12px - stack-md: 24px - stack-lg: 48px - gutter: 24px - margin-mobile: 16px - margin-desktop: 40px - container-max: 1440px ---- - -## Brand & Style - -DockDeck is a high-performance utility dashboard designed for developers and home-lab enthusiasts. The brand personality is technical, precise, and sophisticated, evoking the feeling of a futuristic mission control center. - -The design style is **Glassmorphism** mixed with **Corporate Modernism**. It utilizes deep indigo backgrounds, translucent surface layers with backdrop blurs, and vibrant "status" accents. The aesthetic relies on the interplay between dark navy tones and high-fidelity neon primary/secondary colors to create a clear visual hierarchy that feels both premium and functional. - -## Colors - -The palette is centered around a deep "Midnight Navy" base (`#0b1326`). Primary actions and branding use a high-fidelity "Periwinkle" (`#c0c1ff`), while system states are communicated through a semantic set of "Cyber Green" (Online), "Amber Glow" (Degraded), and "Soft Coral" (Offline). - -Surface colors are built using varying levels of transparency rather than flat hex codes to maintain the glass effect. Text uses high-contrast off-white (`#dae2fd`) for primary readability and muted lavender-grey (`#c7c4d7`) for secondary metadata. - -## Typography - -The system uses a duo-font pairing: **Geist** for technical precision and **Inter** for interface readability. - -- **Geist** is reserved for headlines, labels, and status indicators, emphasizing the "developer-tool" nature of the product. It uses tighter letter spacing at large scales to feel more modern. -- **Inter** is used for all body text and descriptive content to ensure maximum legibility across different densities. -- **Monospaced-style Geist** is used for "code-sm" roles, such as version numbers or technical metadata. - -## Layout & Spacing - -The layout follows a **Fixed Grid** approach for the central content canvas while the navigation bars are **Fluid (Full-Width)**. - -- **Breakpoints:** The layout transitions from a single column on mobile to a multi-column dashboard at 768px (MD) and introduces a fixed sidebar at 1280px (XL). -- **Rhythm:** An 8px base unit drives all spacing. Vertical "Stack" spacing is used to separate semantic sections (48px for major sections, 24px for interior groups). -- **Grid:** Card containers follow a flexible auto-grid that scales from 1 column to 4 columns depending on screen width, utilizing a consistent 24px gutter. - -## Elevation & Depth - -Depth is conveyed through **Glassmorphism** and **Tonal Layering** rather than traditional drop shadows. - -1. **Level 0 (Base):** Background color `#0b1326`. -2. **Level 1 (Panels):** Translucent surfaces (`rgba(15, 23, 42, 0.6)`) with a `12px` backdrop blur and a subtle `1px` border (`rgba(30, 41, 59, 0.5)`). -3. **Level 2 (Interaction):** On hover, panels shift to a brighter background (`rgba(45, 52, 73, 0.5)`) and translate `-2px` on the Y-axis. -4. **Level 3 (Pop-ups/Active):** Reserved for search inputs and active modal states, using a scale of `1.01` and high-intensity glows (e.g., `0 0 8px #4edea3` for active dots). - -## Shapes - -The shape language is consistently **Rounded**, using specific radii to differentiate between container types: -- **Tiles & Panels:** `12px` (xl) rounded corners provide a friendly but structured look. -- **Status Pills:** `9999px` (full) for high-contrast status chips. -- **Buttons:** `12px` (xl) to match the card containers. -- **Inputs:** `12px` (xl) for a cohesive form-factor. - -## Components - -### Buttons -- **Primary:** Solid `#c0c1ff` background with `#1000a9` text. High-contrast, no shadow, uses brightness shift on hover. -- **Ghost/Icon:** Unfilled, using `on-surface-variant` color. Rounded-full background appears on hover at 50% opacity. - -### App Tiles (Cards) -The core component. Built with the `glass-panel` style. They must contain a `48x48px` icon container (rounded-xl) and a top-right status indicator. - -### Status Chips -Ultra-compact badges with a 2px active pulse animation. -- **Online:** Bordered with 20% opacity secondary color, containing an `active-dot` with a glowing shadow. -- **Offline/Degraded:** Uses corresponding semantic colors with a lower opacity container border. - -### Search Bar -A full-width (max-xl) input field with a `surface-container-low` background and an inset search icon. Focus state includes a `primary-container` ring and a subtle scale-up animation. - -### Side Navigation -Fixed-position rail using `surface-container-low`. Active links use `secondary-container` background with `on-secondary-container` text to distinguish current location from the primary dashboard actions. \ No newline at end of file