name: HTML Editor Design System
description: Desktop visual-editor UI with slate chrome, pale side panels, centered canvas, and compact editing controls.
colors:
ink: "#0f172a"
toolbar: "#1e293b"
toolbarButton: "#334155"
panelBg: "#f8fafc"
panelLine: "#e2e8f0"
canvasBg: "#475569"
active: "#6366f1"
activeSoft: "#eef2ff"
hint: "#64748b"
disabled: "#94a3b8"
insert: "#0ea5e9"
selection: "#2563eb"
guide: "#ef4444"
typography:
body-md: { fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, sans-serif", fontSize: 13px, fontWeight: 400, lineHeight: 1.45, letterSpacing: 0 }
panel-title: { fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, sans-serif", fontSize: 11px, fontWeight: 700, lineHeight: 1.2, letterSpacing: 0.04em }
control-sm: { fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, sans-serif", fontSize: 12px, fontWeight: 500, lineHeight: 1.2, letterSpacing: 0 }
rounded: { xs: 2px, sm: 4px, md: 6px }
spacing: { xs: 4px, sm: 6px, md: 8px, lg: 12px, xl: 32px }
components:
appBody: "Three-column editor layout: layers, canvas, properties."
toolbar: "Dark slate top bar with compact 12px controls."
sidePanel: "Pale panel with borders and scrollable dense controls."
canvas: "Centered editing surface on slate gray workspace."
selection: "Blue selection outline, handles, and red alignment guides."Overview
HTML Editor is a desktop visual editor. The design should feel like an editing tool: dense, predictable, and spatially stable. The canvas is the primary work area; side panels and toolbars support direct manipulation.
Colors
Slate chrome anchors the toolbar and canvas workspace. Pale blue-gray panels keep layer and property controls quiet. Indigo marks active pages, while blue marks selections and handles. Red is reserved for alignment guides, not general errors.
Typography
The system UI stack keeps controls native-feeling. Panel titles are 11px uppercase with tracking. Most controls are 12px or 13px to preserve editor density.
Layout
The main body is a fixed three-column grid: layer panel, canvas, property panel. The canvas area centers a frame with absolute-positioned overlays. Preserve min-height and overflow behavior so panels scroll independently.
Elevation & Depth
The editor uses borders and background contrast instead of shadows. Toolbars sit above the canvas with z-index, not drop-shadow decoration.
Shapes
Use small radii: 6px for page items, toolbar buttons, badges, and panels; 4px for insertion and alignment mini-buttons; 2px for resize handles.
Components
Layer items need active state, page number, kind, and delete affordance. Canvas toolbar buttons should stay compact. Selection overlays require blue border, white handles, and directional cursors.
Do's and Don'ts
Do prioritize editing precision over decorative styling. Do keep selection colors distinct from page active state. Don't add large rounded cards or gradients to the editor chrome. Don't let side-panel controls resize the canvas.