UI DeployDesign languages Themes For agents llms.txt

Warm Editorial — navigation

Floating Pill Nav

The signature element of the Warm Editorial language. Circle badge and two-line brand on the left, links in the middle, pill CTA on the right. On mobile the links drop into a panel that keeps the same corners and blur.

Open preview
Theme
Warm Editorial
Category
navigation
JavaScript
12 lines, no dependencies
Breakpoint
860px
Min width
320px

Paste this into Claude, Cursor or Copilot — or point the agent at https://ui-deploy.com/r/warm-editorial/nav-floating/prompt.md 

# Floating Pill Nav — Warm Editorial

Paste this whole file into Claude, Cursor or Copilot. It is self-contained:
the agent gets the tokens, the rules, and the reference implementation.

---

## What to build

A primary site navigation that **floats over the content** rather than sticking to
the top edge of the viewport. Fully rounded (999px), translucent with a backdrop
blur, sitting 16px down from the top with its own breathing room on the sides.

Left to right:

1. A circle badge holding a small stroke icon
2. A two-line brand block — name on top, an uppercase, wide-tracked eyebrow below
3. Navigation links, centred
4. A pill CTA button on the right

Below 860px the links move into a panel that drops beneath the bar and keeps the
same corners, border and blur. The CTA hides; a round menu button appears.

---

## Tokens this component needs

Warm Editorial is a warm palette: no pure black, no pure white, no cold grey.
Light is the default; dark is opted into with `data-theme="dark"` on `<html>`.

```css
:root{
  --bg2:#F6F3ED; --bg3:#E4DED2; --border:#DAD3C6;
  --text:#22201D; --text2:#5C574F;
  --accent:#A38A6A; --accent-text:#7D6644;
  --accent-s:rgba(163,138,106,.12); --accent-b:rgba(163,138,106,.30);
  --radius-lg:24px; --radius-pill:999px;
  --shadow-md:0 18px 48px -24px rgba(34,32,29,.22);
  --font-display:'Inter Tight',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
[data-theme="dark"]{
  --bg2:#1E1A17; --bg3:#262119; --border:#2E2822;
  --text:#EDE7DD; --text2:#A79E92;
  --accent:#B39B7C; --accent-text:#C0A888;
  --accent-s:rgba(179,155,124,.13); --accent-b:rgba(179,155,124,.28);
  --shadow-md:0 18px 48px -24px rgba(0,0,0,.7);
}
```

Never write a raw hex in the component. Every colour comes from a token.

---

## Rules — these are not preferences

1. **It floats.** `position:sticky; top:16px` with horizontal padding on the wrapper.
   Pinning it flush to the top edge kills the entire effect.
2. **A gap under the bar is a hover trap.** If a dropdown or panel sits below the bar
   with empty space between them, the pointer crossing that gap fires `mouseleave`
   and the menu escapes. Either open on click (as here) or bridge the gap with an
   invisible `::before`.
3. **The closed mobile panel must be `visibility:hidden`**, not just `opacity:0`.
   Opacity alone leaves every link in the tab order, so keyboard users tab into
   an invisible menu.
4. **`:focus-visible` sets `outline` only.** Do not set `border-radius` in a focus
   rule — it deforms the shape of the focused pill.
5. **Icons are inline SVG**, `stroke="currentColor"`, `fill="none"`. No emoji, no
   icon font, no icon library.
6. **Leaving mobile width with the panel open must close it**, or the panel is
   stranded visible on desktop.
7. **No horizontal scroll at 320px.**
8. Transitions are `.2s`. Nothing in this language animates longer than `.7s`.

---

## Reference implementation

See `code.html` in this component folder — HTML, scoped CSS and 12 lines of
dependency-free JS. Copy it verbatim, then change the brand name, links and CTA.

---

## Adapting it

- **React / Vue / Svelte** — the markup maps one to one. Replace the `aria-expanded`
  toggle with local state; keep the class names so the CSS is untouched.
- **Tailwind** — keep this CSS as-is in a stylesheet. The values here are a design
  language, not utilities; rewriting them as classes loses the tokens.
- **Fewer links** — the centred `margin:0 auto` on the list holds the layout. With
  two or fewer links, consider `justify-content:flex-end` instead.
- **Logo image instead of the badge** — keep the 36px circle footprint so the 60px
  bar height still reads correctly.

Floating Pill Nav — Warm Editorial

Paste this whole file into Claude, Cursor or Copilot. It is self-contained: the agent gets the tokens, the rules, and the reference implementation.

What to build

A primary site navigation that floats over the content rather than sticking to the top edge of the viewport. Fully rounded (999px), translucent with a backdrop blur, sitting 16px down from the top with its own breathing room on the sides.

Left to right:

  1. A circle badge holding a small stroke icon
  2. A two-line brand block — name on top, an uppercase, wide-tracked eyebrow below
  3. Navigation links, centred
  4. A pill CTA button on the right

Below 860px the links move into a panel that drops beneath the bar and keeps the same corners, border and blur. The CTA hides; a round menu button appears.

Tokens this component needs

Warm Editorial is a warm palette: no pure black, no pure white, no cold grey. Light is the default; dark is opted into with data-theme="dark" on <html>.

:root{
  --bg2:#F6F3ED; --bg3:#E4DED2; --border:#DAD3C6;
  --text:#22201D; --text2:#5C574F;
  --accent:#A38A6A; --accent-text:#7D6644;
  --accent-s:rgba(163,138,106,.12); --accent-b:rgba(163,138,106,.30);
  --radius-lg:24px; --radius-pill:999px;
  --shadow-md:0 18px 48px -24px rgba(34,32,29,.22);
  --font-display:'Inter Tight',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}
[data-theme="dark"]{
  --bg2:#1E1A17; --bg3:#262119; --border:#2E2822;
  --text:#EDE7DD; --text2:#A79E92;
  --accent:#B39B7C; --accent-text:#C0A888;
  --accent-s:rgba(179,155,124,.13); --accent-b:rgba(179,155,124,.28);
  --shadow-md:0 18px 48px -24px rgba(0,0,0,.7);
}

Never write a raw hex in the component. Every colour comes from a token.

Rules — these are not preferences

  1. It floats. position:sticky; top:16px with horizontal padding on the wrapper. Pinning it flush to the top edge kills the entire effect.
  2. A gap under the bar is a hover trap. If a dropdown or panel sits below the bar with empty space between them, the pointer crossing that gap fires mouseleave and the menu escapes. Either open on click (as here) or bridge the gap with an invisible ::before.
  3. The closed mobile panel must be visibility:hidden, not just opacity:0. Opacity alone leaves every link in the tab order, so keyboard users tab into an invisible menu.
  4. :focus-visible sets outline only. Do not set border-radius in a focus rule — it deforms the shape of the focused pill.
  5. Icons are inline SVG, stroke="currentColor", fill="none". No emoji, no icon font, no icon library.
  6. Leaving mobile width with the panel open must close it, or the panel is stranded visible on desktop.
  7. No horizontal scroll at 320px.
  8. Transitions are .2s. Nothing in this language animates longer than .7s.

Reference implementation

See code.html in this component folder — HTML, scoped CSS and 12 lines of dependency-free JS. Copy it verbatim, then change the brand name, links and CTA.

Adapting it

  • React / Vue / Svelte — the markup maps one to one. Replace the aria-expanded

toggle with local state; keep the class names so the CSS is untouched.

  • Tailwind — keep this CSS as-is in a stylesheet. The values here are a design

language, not utilities; rewriting them as classes loses the tokens.

  • Fewer links — the centred margin:0 auto on the list holds the layout. With

two or fewer links, consider justify-content:flex-end instead.

  • Logo image instead of the badge — keep the 36px circle footprint so the 60px

bar height still reads correctly.