| name | design-system |
|---|---|
| description | Use when building or changing proxmox-web UI, React components, Tailwind classes, page layouts, dialogs, tables, forms, icons, visual hierarchy, or any UX/design decision. Defines the Linear-inspired dark infrastructure console style for the Proxmox Web app. |
Use this skill whenever creating or editing UI in proxmox-web. It translates the app's product direction into concrete React/Tailwind component patterns.
Proxmox Web is an infrastructure control plane for OpenClaw, NanoClaw, and cloud-dev VM/template workflows on Proxmox. It is used by technical operators during focused operational sessions where VM state, destructive actions, long-running rebuild jobs, and errors must be immediately legible.
This app should feel:
- Dense, calm, and fast to scan.
- Technical and precise without looking like a raw admin panel.
- Trustworthy: never hide lifecycle state, task progress, warnings, or destructive consequences.
- Linear-inspired: quiet surfaces, compact rows, sharp hierarchy, muted contrast, and one restrained accent.
This app should not feel:
- Consumer-app cute, playful, or marketing-heavy.
- Neumorphic, glassy, gradient-heavy, or glossy.
- Like generic shadcn with colors swapped in.
- Like a bright dashboard full of oversized cards and decorative whitespace.
Brand energy lives in the primary action, active navigation, status dots, and focused progress moments. Data-dense areas stay quiet.
Default to dark mode. This is an operations console and should be comfortable for long focused sessions.
Use the canonical tokens from src/styles/globals.css:
| Token | Value | Usage |
|---|---|---|
--color-app-bg |
#0F1012 |
Root shell, sidebar canvas |
--color-page-bg |
#141517 |
Main page regions |
--color-surface |
#1A1B1E |
Cards, panels, table containers |
--color-elevated |
#25262A |
Dialogs, popovers, raised panels |
--color-hover |
#2D2F34 |
Row/action hover states |
--color-pressed |
#34363C |
Pressed controls |
--color-border-subtle |
rgba(255,255,255,0.06) |
Hairlines and quiet dividers |
--color-border-visible |
rgba(255,255,255,0.10) |
Inputs, buttons, cards |
--color-border-strong |
rgba(255,255,255,0.16) |
Dialogs and high-emphasis edges |
--color-text-primary |
#F2F3F5 |
Primary labels and body |
--color-text-secondary |
#B4B7BE |
Secondary labels |
--color-text-tertiary |
#858993 |
Metadata, table values, icons |
--color-text-muted |
#5F636D |
Low-emphasis IDs and placeholders |
--color-link |
#8EA2FF |
Links |
--color-primary |
#6E6BFF |
Primary action and active brand accent |
--color-primary-hover |
#7C79FF |
Primary hover |
--color-focus-ring |
rgba(142,162,255,0.42) |
Keyboard focus |
--color-success |
#4CB782 |
Running/healthy/success |
--color-warning |
#D9963A |
Warnings and pending caution |
--color-error |
#F45D5D |
Destructive/error state |
--color-info |
#8EA2FF |
Informational status |
Do not introduce new global color systems. If a new semantic is needed, add it to globals.css first and use it through CSS variables.
Purple #6E6BFF belongs on:
- Primary CTAs such as Rebuild, Create, Save.
- Active brand mark or active state when only one element needs emphasis.
- Focus rings and key progress affordances.
- Rare informational highlights that need actionability.
Purple does not belong on:
- Every hover state.
- Dense table rows.
- Dividers, borders, or large backgrounds.
- Secondary actions.
- Multiple unrelated elements in the same viewport.
Semantic colors are for state labels, dots, icons, and concise messages only. Do not theme whole panels red, yellow, green, or blue.
The app is compact by default.
| Shape | Radius | Use for |
|---|---|---|
circle |
50% |
Status dots, icon-only buttons, compact brand mark |
capsule |
999px |
Primary/secondary buttons, filters, segmented controls |
square-tight |
6-12px |
Nav items, rows, inputs, small cards |
square-soft |
12-16px |
Larger cards, dialogs, elevated modules |
Density rules:
- VM rows: approximately
42pxhigh. - Nav rows: approximately
32pxhigh. - Buttons: approximately
28pxhigh. - Use
12-16pxpage/module padding for dense operational areas. - Avoid roomy dashboard spacing unless the page is an empty state or overview hero.
Use quiet structural depth.
- Border first, shadow second.
- Use subtle borders for cards and rows.
- Use larger shadows only for modal dialogs and blocking overlays.
- Avoid glassmorphism, blur, inset bevels, glossy cards, and ambient glow.
- Prefer
bg-[var(--color-surface)]plusborder-[var(--color-border-subtle)]for default panels. - Prefer
bg-[var(--color-elevated)]plusborder-[var(--color-border-visible)]for dialogs/popovers.
Typeface: Inter if available, then system sans-serif. Use the token from globals.css:
--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;Scale:
| Role | Size | Weight | Notes |
|---|---|---|---|
| App/sidebar title | 13px |
600 |
Compact, not brand-heavy |
| Page title | 20-24px |
600 |
Use sparingly |
| Section title | 14-16px |
600 |
Operational labels |
| Table/row primary | 13px |
500 |
VM names, template names |
| Body/help text | 13px |
400 |
Dialog copy, descriptions |
| Metadata | 11-12px |
400-500 |
IDs, timestamps, hints |
| Buttons | 12px |
500-600 |
Compact capsule controls |
Use tabular figures for VMIDs, CPU/RAM/disk values, durations, and timestamps. Do not mix fonts.
Primary:
- Capsule,
h-7 px-3,text-xs font-semibold. - Background
--color-primary, hover--color-primary-hover, white text. - Use for the single primary action in a local area.
Secondary:
- Capsule,
h-7 px-3,text-xs. - Background
rgba(255,255,255,0.06), border--color-border-visible, text--color-text-secondary. - Hover uses slightly brighter neutral background, not purple.
Danger:
- Transparent or very low-fill red treatment.
- Border
rgba(244,93,93,0.30), text--color-error, hoverrgba(244,93,93,0.10). - Always pair with explicit confirmation for destructive operations.
Ghost/icon:
h-7, quiet text/icon color, neutral hover.- Use in rows and toolbars. Avoid persistent action chrome in dense tables; reveal row actions on hover where appropriate.
- Rows are compact, border-separated, and hover-highlighted with neutral tint.
- Header chrome should be minimal or absent.
- Primary text first, metadata second, status/action controls last.
- Use status dots and badges instead of large colored cells.
- Keep row actions visually quiet until hover or focus.
- Empty states should be direct and operational: explain what is absent and provide one next action.
- Use rounded
12-16px, subtle border, surface background. - Avoid large marketing cards.
- Cards should group workflow state or actions, not decorate.
- For template cards, make lane, golden VMID, rollback availability, base/staging IDs, and actions visible without expanding.
- Use solid elevated backgrounds, never translucent glass.
- Dialog width should match content complexity. Confirmation dialogs stay narrow; log/progress dialogs can be wide.
- Long-running jobs must show current step, full log stream, terminal success/failure, and disabled close until terminal state when needed.
- Errors stay visible. Do not auto-dismiss failure dialogs.
- Inputs/selects are compact, dark, bordered, and direct.
- Labels should be short and technical where appropriate:
VMID,Cores,Memory MB,Disk Size. - Validate destructive or irreversible actions with explicit confirmation copy.
- Do not hide advanced fields behind decorative accordions if they are necessary to understand the operation.
- Badges are small, low-fill, and text-forward.
- Use semantic colors for lane/status identity, but keep fill opacity low.
- Running/stopped should be represented by dot + text where possible.
Use minimal operational motion:
- Hover/focus transitions:
100-150ms ease-out. - Dialog appearance may fade in quickly; avoid spring/bounce.
- Loading spinners only for active work.
- Skeleton pulse is acceptable, but subtle.
- Always respect
prefers-reduced-motion.
Avoid:
- Infinite ambient animations.
- Shimmer-heavy loading states.
- Large slide/scale transitions.
- Decorative parallax or background motion.
- Preserve visible keyboard focus using
--color-focus-ring. - Every icon-only button needs a title or accessible label.
- Color must not be the only state indicator; pair status color with text or icon shape.
- Destructive actions need explicit confirmation.
- Log/progress regions should use readable monospace sizing and preserve whitespace.
- Use existing shared components in
src/components/sharedbefore creating new primitives. - Use CSS variables from
globals.cssin Tailwind arbitrary values. - Keep React components small, direct, and aligned with existing patterns.
- Prefer dense layout and high signal-to-noise over decorative whitespace.
- Avoid adding new dependencies for basic UI primitives.
- For frontend work, verify desktop and mobile where practical, but preserve the desktop-first operations-console character.
- If a design decision conflicts with an existing implementation pattern, preserve consistency unless the user explicitly asks for a redesign.
Do not introduce:
- Bright orange/Replit brand styling.
- Pastel gradients or full-page gradient backgrounds.
- Glass cards, backdrop blur, or translucent popovers.
- Oversized marketing typography.
- Rounded everything into pills.
- Generic SaaS dashboard cards with huge whitespace.
- Alert panels that hide precise error details.