Position tooltips, popovers, and dropdowns with Floating UI

Floating UI is a design-style child skill ('defying gravity - elements that hover effortlessly above the surface'), part of the design-it family and not meant to be triggered directly. Three core principles: Detachment (UI elements like nav bars, sidebars, or content cards never touch the screen edges - they float with margins on all sides), Soft Diffuse Shadows (large, highly blurred shadows directly beneath elements to sell the hovering illusion), and Pill Shapes & Rounds (fully rounded corners enhance the floating, bubble-like feel).

Use it when the user's request matches this weightless, hovering aesthetic - modern mobile apps with floating bottom navigation, or any interface that wants content to feel lifted off a tinted background rather than flush with the page edges. As a design sub-style, it's selected by the parent design-it skill's routing rather than invoked on its own.

Visual DNA uses Earth-Grounded Elegance or Minimalist Slate palettes with a slightly tinted background (off-white or very light gray) so floating white elements visually pop against it, clean airy sans-serifs with generous line height, and the signature "floating island" navigation pattern - a pill-shaped nav bar centered at the bottom or top of the screen. The web implementation applies generous body padding so nothing touches the viewport edge, fixes a pill-shaped nav bar (border-radius: 50px) centered at the bottom with a large soft shadow, and gives content cards a large border-radius (24px) with their own diffuse shadow and bottom margin separating them.

.floating-nav {
  position: fixed;
  bottom: 32px;
  border-radius: 50px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
}

SwiftUI reproduces the exact same pattern: a light tinted background ZStack, content cards with a very large cornerRadius(32) and a heavily blurred, low-opacity shadow, horizontal padding to keep cards detached from screen edges, and a floating pill navigation bar built with .clipShape(Capsule()) plus its own large shadow, pinned near the bottom with padding to keep it detached from the safe area edge - icon-based nav items (house, search, bell, profile) sit inside the capsule with the active item highlighted in the accent color.

Designers and developers building a modern mobile-first app that wants its navigation and content to feel weightless and detached from the screen edges - the floating pill nav bar pattern popularized by contemporary iOS and Android apps - rather than edge-to-edge, flush-mounted UI chrome.