desktop-principles

# Desktop Principles > Desktop UX context. Loaded when desktop is detected (macOS, Windows, Linux desktop, web desktop). > Concise rules here. Deep-dive in `references/`. --- ## Hover States Are Mandatory Hover is the primary affordance signal on desktop, the inverse of mobile. A pointer hovering over a target without immediate visual feedback feels broken: users rely on `:hover` to confirm an element is interactive before committing to a click. Every clickable surface must have a distinct hover style, ideally with a 100-200ms transition so the change is perceptible without feeling sluggish. **CSS - hover styles for interactive elements:** ```css .button { background: var(--surface); transition: background 120ms ease-out, transform 120ms ease-out; } .button:hover { background: var(--surface-hover); transform: translateY(-1px); } .button:active { transform: translateY(0); } ``` **SwiftUI - .onHover for macOS, .hoverEffect for iPadOS:** ```swift struct ToolbarButton: View { @State private var hovering = false var body: some View { Image(systemName: "square.and.arrow.up") .padding(8) .background(hovering ? Color.gray.opacity(0.15) : .clear) .onHover { hovering = $0 } .animation(.easeOut(duration: 0.12), value: hovering) .hoverEffect(.highlight) // iPadOS pointer support, no-op on macOS } } ``` **Compose Desktop - onPointerEvent or hoverable + interactionSource:** ```kotlin @OptIn(ExperimentalComposeUiApi::class) @Compos...