DESIGN.md

version	alpha
name	DockLiner
description	A self-hosted Docker deployment manager with a warm industrial slate-and-amber identity. Designed for both desktop web dashboards and installed PWA/native shell use.
colors	logo-text logo-accent primary primary-active primary-disabled on-primary ink body body-strong muted muted-soft canvas surface-soft surface-card surface-cream-strong surface-dark surface-dark-elevated surface-dark-soft hairline hairline-soft success warning error accent-teal accent-amber on-dark on-dark-soft danger-bg danger-bg-hover danger-border status-running-bg status-stopped-bg status-error-bg status-deploying-bg focus-glow toast-shadow modal-backdrop light-canvas light-surface-soft light-surface-card light-ink light-body light-hairline #f8fafc #f97316 #f97316 #fb923c #94a3b8 #0f172a #f8fafc #cbd5e1 #e2e8f0 #94a3b8 #64748b #0f172a #1e293b #334155 #475569 #0f172a #1e293b #1e293b #475569 #64748b #22c55e #f59e0b #ef4444 #2dd4bf #f97316 #f8fafc #94a3b8 rgba(239, 68, 68, 0.15) rgba(239, 68, 68, 0.25) rgba(239, 68, 68, 0.3) rgba(34, 197, 94, 0.12) rgba(148, 163, 184, 0.12) rgba(239, 68, 68, 0.12) rgba(245, 158, 11, 0.12) rgba(249, 115, 22, 0.2) rgba(0, 0, 0, 0.35) rgba(15, 23, 42, 0.6) #f8fafc #e2e8f0 #ffffff #0f172a #334155 #cbd5e1
typography	display h1 h2 body-md body-sm label-caps mono fontFamily fontWeight lineHeight "Cormorant Garamond", "Tiempos Headline", Garamond, "Times New Roman", serif 400 1.15 fontFamily fontSize fontWeight letterSpacing {typography.display.fontFamily} 48px 400 -1px fontFamily fontSize fontWeight letterSpacing {typography.display.fontFamily} 28px 400 -0.3px fontFamily fontSize fontWeight lineHeight "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif 14px 400 1.55 fontFamily fontSize fontWeight lineHeight {typography.body-md.fontFamily} 13px 400 1.5 fontFamily fontSize fontWeight letterSpacing textTransform {typography.body-md.fontFamily} 11px 500 0.8px uppercase fontFamily fontSize lineHeight "JetBrains Mono", ui-monospace, monospace 12px 1.6
rounded	xs sm md lg xl app full 4px 6px 8px 12px 16px 18px 9999px
spacing	xs sm md lg xl section 4px 8px 12px 16px 24px 32px
layout	max-width sidebar-width sidebar-expanded nav-height bottom-nav-height app-radius 1200px 64px 180px 64px 64px {rounded.app}
components	button-primary button-primary-hover button-secondary button-danger button-ghost card card-title metric-card status-pill status-running status-stopped status-error status-deploying sidebar sidebar-hover bottom-nav top-bar modal-overlay modal-box input tag toast backgroundColor textColor typography rounded padding {colors.primary} {colors.on-primary} {typography.body-md} {rounded.md} 10px 18px backgroundColor {colors.primary-active} backgroundColor textColor border rounded padding {colors.surface-card} {colors.ink} 1px solid {colors.hairline} {rounded.md} 10px 18px backgroundColor textColor border rounded padding {colors.danger-bg} {colors.error} 1px solid {colors.danger-border} {rounded.md} 10px 18px backgroundColor textColor rounded padding transparent {colors.muted} {rounded.md} 10px 18px backgroundColor textColor border rounded padding {colors.surface-card} {colors.body} 1px solid {colors.hairline} {rounded.lg} 24px typography textColor {typography.h2} {colors.ink} backgroundColor textColor border rounded padding {colors.surface-card} {colors.ink} 1px solid {colors.hairline} {rounded.lg} 20px typography rounded padding {typography.label-caps} {rounded.full} 3px 10px backgroundColor textColor {colors.status-running-bg} #16a34a backgroundColor textColor {colors.status-stopped-bg} {colors.muted} backgroundColor textColor {colors.status-error-bg} {colors.error} backgroundColor textColor {colors.status-deploying-bg} #d97706 backgroundColor border width rgba(15,23,42,0.98) 1px solid rgba(100,116,139,0.25) {layout.sidebar-width} width {layout.sidebar-expanded} backgroundColor borderTopColor height rgba(15,23,42,0.92) rgba(100,116,139,0.25) {layout.bottom-nav-height} backgroundColor borderBottomColor height rgba(15,23,42,0.92) rgba(100,116,139,0.25) {layout.nav-height} backgroundColor backdropFilter rgba(0,0,0,0.55) blur(4px) backgroundColor textColor border rounded padding max-width {colors.surface-card} {colors.body} 1px solid {colors.hairline} {rounded.xl} 24px 360px backgroundColor textColor border rounded padding focusGlow {colors.surface-soft} {colors.ink} 1px solid {colors.hairline} {rounded.md} 10px 14px {colors.focus-glow} backgroundColor textColor border rounded padding {colors.surface-soft} {colors.muted} 1px solid {colors.hairline} {rounded.full} 3px 10px backgroundColor textColor border rounded shadow {colors.surface-dark} {colors.on-dark} 1px solid {colors.surface-dark-elevated} {rounded.md} 0 4px 12px {colors.toast-shadow}

Overview

DockLiner is a self-hosted deployment manager for personal Docker projects. Its visual identity — Slate Ember — pairs deep slate surfaces with a warm amber accent, evoking a control room that is serious, trustworthy, and quietly energetic. The UI must feel equally at home in a browser tab and as an installed PWA/native shell: dense information should be readable, actions should be thumb-friendly on mobile, and navigation should never scroll away.

Brand

• Logo: container-rack SVG (/static/img/logo_dark.svg / logo_light.svg)
• Wordmark: “DockLiner” set in Cormorant Garamond (display serif)
• Tone: industrial, calm, confident, no gradients unless for depth in frosted overlays.

Colors

The palette is intentionally narrow. All interactive energy comes from amber; everything else is slate neutrals.

• Primary / {colors.primary} (#f97316): CTA buttons, active nav states, status indicators, focus rings.
• Ink / {colors.ink} (#f8fafc): Headlines, card titles, primary text.
• Body / {colors.body} (#cbd5e1): Body copy and secondary text.
• Muted / {colors.muted} (#94a3b8): Labels, placeholders, idle icons.
• Canvas / {colors.canvas} (#0f172a): Page background (dark).
• Surface Soft / {colors.surface-soft} (#1e293b): Sidebars, top/bottom bars, input backgrounds.
• Surface Card / {colors.surface-card} (#334155): Cards, panels, modals.
• Hairline / {colors.hairline} (#475569): Dividers, borders, outlines.
• Error / {colors.error} (#ef4444): Destructive actions and error states.
• Success / {colors.success} (#22c55e): Running/completed states.

Light mode inverts the surface stack while preserving the amber accent and logo geometry.

Typography

• Display: Cormorant Garamond for all headings (H1, H2, section titles).
• Body / UI: Inter for labels, buttons, tables, forms, nav labels.
• Mono: JetBrains Mono for hashes, IDs, logs, build output.
• Hierarchy is carried by size and weight, not by mixing multiple font families.

Layout

• Desktop: a fixed left sidebar (64 px, expands to 180 px on hover) carries the four primary routes (Dashboard, Projects, Downloads, Settings). The content area is inset by the sidebar width and capped at 1200 px.
• Mobile: a fixed top bar (logo + theme toggle) and a fixed bottom nav bar replace the sidebar. Content is inset for both safe areas and nav heights.
• Spacing scale: 4 px baseline. md (12 px) for intra-component gaps, lg (16 px) for card gutters, section (32 px) for page sections.

Shapes

• Cards and panels use lg (12 px) radius.
• Interactive elements use md (8 px).
• Pills, status badges, and avatars use full.
• On mobile, cards and buttons are promoted to app (18 px) for a native feel.

Elevation & Depth

• No drop shadows on desktop cards; borders separate surfaces.
• Frosted-glass bars on mobile use backdrop-filter: blur(12px) and translucent dark/light backgrounds to avoid harsh edges against scrollable content.
• Modal overlays use a dark translucent scrim with a small blur.

Components

• button-primary is the single high-emphasis action. Use it for Deploy, Create project, Add Project.
• button-secondary is for neutral actions: Cancel, Back, Edit.
• button-danger is for destructive actions: Delete, Remove.
• card is the default surface for grouped content.
• metric-card is the compact stat tile used in the dashboard summary.
• status-pill communicates state at a glance; always include the colored dot.
• sidebar and bottom-nav use the same four routes and the same active treatment (amber icon + pill background).
• modal-box replaces browser-native alert() / confirm() for destructive or blocking confirmations.
• input uses the surface-soft background and amber focus glow.

Responsiveness

• Below 768 px: sidebar hides, mobile top/bottom bars appear, touch targets enlarge to at least 40 px, cards use the app radius.
• Above 768 px: sidebar is visible; top bar and bottom nav are hidden.
• Above 1024 px: content area centers at the 1200 px max width.

Accessibility

• Focus rings use a 3 px amber glow (--focus-glow).
• Active states in nav and bottom nav combine both color and background change.
• Destructive modals are keyboard dismissible (Esc) and have explicit Cancel / Delete actions.

Do's and Don'ts

• Do mutate only fill/stroke colors of the logo SVG, never its path geometry.
• Do use token references ({colors.primary}) instead of literal hex in component definitions.
• Do update both desktop sidebar and mobile bottom nav when the theme changes.
• Don't use browser confirm() / alert() for user-facing confirmations; use modal-box instead.
• Don't introduce colors outside the palette; extend the palette first.
• Don't nest component variants. button-primary-hover is a sibling, not a child.