repo: remove cross-project DockDeck Stitch input
GeoIntel release gates / Compile, test, contracts and builds (push) Canceled after 6s
GeoIntel release gates / Python and npm vulnerability policy (push) Canceled after 0s
GeoIntel release gates / GIS image, SBOM and container scan (push) Canceled after 0s
GeoIntel release gates / AI image, SBOM and container scan (push) Canceled after 0s

This commit is contained in:
2026-08-26 22:39:17 +02:00
parent 422873d719
commit 4a097512ba
@@ -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).