repo: remove cross-project DockDeck Stitch input
GeoIntel release gates / Compile, test, contracts and builds (push) Canceled after 0s
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 0s
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:
-180
@@ -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.
|
||||
Reference in New Issue
Block a user