Headless UI

Difficulty:
Framework
Headless UI Effect Preview

Effect Preview

Design Tokens

Key tokens derived from official brand references and this style's prompt. Copy them or pair with the DESIGN.md below.

Colors

  • primaryCurated

    Primary actions & highlights

  • on-primaryDerived

    Text on primary

  • secondaryDerived

    Chips, badges & soft emphasis

  • on-secondaryDerived

    Text on secondary

  • neutralPrompt

    Page canvas

  • on-neutralDerived

    Text on canvas

  • surfaceDerived

    Cards, panels & elevated containers

  • on-surfaceDerived

    Text on surface

  • borderDerived

    Borders & dividers

Radius & Shapes

Derived
sm · 4px
md · 8px
lg · 12px
full

Spacing

Derived
  • sm8px
  • md12px
  • lg24px

Elevation

Derived

Depth is expressed through hairline borders and tonal layering.

Typography

Prompt
  • Ag

    Headings 32px · bold

    Inter

  • Ag

    Body 16px · regular

    Inter

  • Ag

    Labels 13px · medium

    Inter

Headless UI comes from Tailwind Labs: completely unstyled components with accessibility fully solved — Menu, Listbox, Combobox, and Switch package the behavior and transitions while Tailwind owns the skin. Sky (#38BDF8) accents the neutral scale, enter/leave transitions and data-state styling stay in your hands, and controls render with rounded-md, 14–16px Inter. Made for Tailwind projects that skin their own components.

Headless UIFramework

Prompt Template

Base Template
Design a Headless UI-inspired interface. - Unstyled accessible components from Tailwind Labs: Menu, Listbox, Combobox, Switch; - Sky #38BDF8 accent over a neutral gray scale; - Smooth enter/leave transitions and data-state styling; - Inter with 14-16px sizes, rounded-md controls; - Pairs natively with Tailwind utility styling. Colors: #38BDF8, #0F172A, #F8FAFC, #E2E8F0 with #38BDF8 accent. Typography: Inter.

Variant Prompts

📱 Mobile
Design a mobile app with Headless UI aesthetics. Use Headless UI color identity with #38BDF8 accents. Clean, touch-friendly, native feel.
💻 Web
Design a web application with Headless UI style. Use Headless UI color identity with #38BDF8 accents. Professional, responsive layout.
📊 Dashboard
Design a dashboard with Headless UI design language. Use Headless UI color identity with #38BDF8 accents. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with Headless UI visual identity. Use Headless UI color identity with #38BDF8 accents. Compelling, conversion-focused.

Usage Examples

Headless UI Settings Panel

Web
Build a settings panel with Headless UI components: switches, listboxes, and transition effects styled with Tailwind and #38BDF8 accents.

Headless UI Marketing Page

Landing
Create a marketing page with Headless UI design language: dropdown navigation, modal dialogs, and smooth enter/leave animations.

✅ Best For

  • Tailwind CSS
  • Accessible components
  • React and Vue

❌ Avoid For

  • Fast builds needing pre-styled components
  • Complex data table scenarios

DESIGN.md File

A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.

Download