Floating UI

Floating UI

"Defying gravity. Elements that hover effortlessly above the surface."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

1. Detachment: UI elements (like nav bars, sidebars, or main content cards) do not touch the edges of the screen. They float with margins on all sides.
2. Soft, Diffuse Shadows: Large, highly blurred shadows directly beneath elements.
3. Pill Shapes & Rounds: Fully rounded corners (pill shapes) enhance the floating, bubble-like aesthetic.

Visual DNA

• Colors: Earth-Grounded Elegance or Minimalist Slate. Use a slightly tinted background (off-white or very light gray) so the floating white elements pop.
• Typography: Clean, airy sans-serifs with generous line height.
• Layout: The "floating island" pattern for navigation (a pill-shaped nav bar centered at the bottom or top of the screen).

Web Implementation

• Focus on large margins and specific shadow styles.
• CSS Example:

body {
  background-color: var(--bg-primary); /* e.g., #F4F4F9 */
  padding: 24px; /* Ensure nothing touches the edge */
}

.floating-nav {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border-radius: 50px; /* Pill shape */
  padding: 12px 32px;
  
  /* Large, soft shadow */
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
  
  display: flex;