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
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:
-196
@@ -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).
|
|
||||||
Reference in New Issue
Block a user