{
  "site": "https://ui-deploy.com",
  "generated": "2026-08-30T18:58:35.042Z",
  "themes": [
    {
      "id": "warm-editorial",
      "name": "Warm Editorial",
      "tagline": "Calm, warm, magazine-grade. Cream and warm black, bronze accent, floating pill nav.",
      "description": "A design language for work that needs to feel calm and expensive: spas, clinics, boutique hotels, architecture studios, wellness and recovery brands. No pure black, no pure white, no cold grey.",
      "fonts": {
        "display": "Inter Tight",
        "body": "Inter"
      },
      "radius": "large",
      "mood": [
        "warm",
        "editorial",
        "calm",
        "luxury"
      ],
      "stack": [
        "html",
        "css"
      ],
      "themes": [
        "light",
        "dark"
      ],
      "license": "MIT",
      "version": "0.1.0",
      "componentCount": 10,
      "components": [
        {
          "id": "nav-floating",
          "theme": "warm-editorial",
          "name": "Floating Pill Nav",
          "category": "navigation",
          "order": 10,
          "tagline": "A rounded bar that floats over the content instead of sticking to the top edge.",
          "description": "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.",
          "signature": true,
          "stack": [
            "html",
            "css",
            "js"
          ],
          "js": "12 lines, no dependencies",
          "a11y": [
            "aria-expanded",
            "aria-controls",
            "Escape to close",
            "focus-visible outline",
            "no tab-trap when closed"
          ],
          "responsive": {
            "breakpoint": "860px",
            "min": "320px"
          },
          "tokens": [
            "--bg2",
            "--bg3",
            "--border",
            "--text",
            "--text2",
            "--accent",
            "--accent-text",
            "--accent-s",
            "--accent-b",
            "--radius-pill",
            "--radius-lg",
            "--shadow-md",
            "--font-display",
            "--font-body",
            "--ease"
          ],
          "tags": [
            "nav",
            "header",
            "sticky",
            "glass",
            "pill",
            "mobile-menu"
          ],
          "urls": {
            "preview": "https://ui-deploy.com/r/warm-editorial/nav-floating/preview.html",
            "code": "https://ui-deploy.com/r/warm-editorial/nav-floating/code.html",
            "prompt": "https://ui-deploy.com/r/warm-editorial/nav-floating/prompt.md"
          }
        },
        {
          "id": "hero-anchored",
          "theme": "warm-editorial",
          "name": "Anchored Hero",
          "category": "sections",
          "order": 15,
          "tagline": "A photo hero whose gradient starts where the text sits, so the image keeps its own light.",
          "description": "The gradient is anchored to the copy in the lower left instead of darkening the whole frame. The photograph keeps its brightness, the text still clears contrast, and the buttons use the fixed photo variants rather than theme tokens.",
          "signature": true,
          "stack": [
            "html",
            "css"
          ],
          "js": "none",
          "a11y": [
            "h1 present",
            "alt text",
            "focus-visible on photo buttons",
            "reduced-motion safe"
          ],
          "responsive": {
            "breakpoint": "768px",
            "min": "320px"
          },
          "tokens": [
            "--radius",
            "--radius-pill",
            "--font-display",
            "--font-body",
            "--accent"
          ],
          "tags": [
            "hero",
            "photo",
            "gradient",
            "landing",
            "header"
          ],
          "urls": {
            "preview": "https://ui-deploy.com/r/warm-editorial/hero-anchored/preview.html",
            "code": "https://ui-deploy.com/r/warm-editorial/hero-anchored/code.html",
            "prompt": "https://ui-deploy.com/r/warm-editorial/hero-anchored/prompt.md"
          }
        },
        {
          "id": "button-set",
          "theme": "warm-editorial",
          "name": "Button Set",
          "category": "primitives",
          "order": 20,
          "tagline": "Five pill buttons, including the two that survive sitting on a photograph.",
          "description": "Every button in this language is a pill. Primary, accent, outline and solid follow the theme; the two photo variants deliberately do not, because a button on an image must stay light-on-dark in both themes.",
          "signature": false,
          "stack": [
            "html",
            "css"
          ],
          "js": "none",
          "a11y": [
            "focus-visible outline",
            "real button elements",
            "44px minimum height"
          ],
          "responsive": {
            "breakpoint": "none",
            "min": "320px"
          },
          "tokens": [
            "--text",
            "--bg",
            "--bg2",
            "--accent",
            "--accent-h",
            "--on-accent",
            "--border2",
            "--font-body",
            "--ease"
          ],
          "tags": [
            "button",
            "cta",
            "pill",
            "primitives"
          ],
          "urls": {
            "preview": "https://ui-deploy.com/r/warm-editorial/button-set/preview.html",
            "code": "https://ui-deploy.com/r/warm-editorial/button-set/code.html",
            "prompt": "https://ui-deploy.com/r/warm-editorial/button-set/prompt.md"
          }
        },
        {
          "id": "card",
          "theme": "warm-editorial",
          "name": "Editorial Card",
          "category": "surfaces",
          "order": 30,
          "tagline": "A soft, wide-cornered surface with an image that sits inside its own padding.",
          "description": "The workhorse surface of this language. 28px corners, a hairline border, near-invisible shadow, and an image that keeps a margin from the card edge rather than bleeding to it.",
          "signature": false,
          "stack": [
            "html",
            "css"
          ],
          "js": "none",
          "a11y": [
            "whole-card link via ::after",
            "focus-visible outline",
            "alt text required"
          ],
          "responsive": {
            "breakpoint": "auto-fit grid",
            "min": "320px"
          },
          "tokens": [
            "--bg2",
            "--border",
            "--accent-b",
            "--accent-text",
            "--text",
            "--text2",
            "--radius",
            "--radius-md",
            "--shadow-sm",
            "--shadow-md"
          ],
          "tags": [
            "card",
            "surface",
            "grid",
            "image"
          ],
          "urls": {
            "preview": "https://ui-deploy.com/r/warm-editorial/card/preview.html",
            "code": "https://ui-deploy.com/r/warm-editorial/card/code.html",
            "prompt": "https://ui-deploy.com/r/warm-editorial/card/prompt.md"
          }
        },
        {
          "id": "accordion",
          "theme": "warm-editorial",
          "name": "FAQ Accordion",
          "category": "disclosure",
          "order": 60,
          "tagline": "Separate 24px cards with a plus that rotates 45 degrees, not a stack of divider lines.",
          "description": "Each item is its own rounded card with a 12px gap, rather than rows sharing hairline dividers. Built on real buttons with aria-expanded and aria-controls, and animated with grid-template-rows so the panel height is never hard-coded.",
          "signature": false,
          "stack": [
            "html",
            "css",
            "js"
          ],
          "js": "16 lines, no dependencies",
          "a11y": [
            "real button",
            "aria-expanded",
            "aria-controls",
            "hidden panel not focusable",
            "focus-visible outline"
          ],
          "responsive": {
            "breakpoint": "none",
            "min": "320px"
          },
          "tokens": [
            "--bg2",
            "--bg3",
            "--border",
            "--accent",
            "--accent-b",
            "--accent-text",
            "--text",
            "--text2",
            "--radius-lg",
            "--ease"
          ],
          "tags": [
            "accordion",
            "faq",
            "disclosure",
            "collapse"
          ],
          "urls": {
            "preview": "https://ui-deploy.com/r/warm-editorial/accordion/preview.html",
            "code": "https://ui-deploy.com/r/warm-editorial/accordion/code.html",
            "prompt": "https://ui-deploy.com/r/warm-editorial/accordion/prompt.md"
          }
        },
        {
          "id": "pricing-cards",
          "theme": "warm-editorial",
          "name": "Pricing Cards",
          "category": "sections",
          "order": 70,
          "tagline": "Service packages with a two-state pill switch, where the featured card is marked by weight rather than a loud colour.",
          "description": "Three package cards plus a pill toggle for single session versus course pricing. The recommended card is distinguished with an inverted surface and a small marker, not with a saturated accent band.",
          "signature": false,
          "stack": [
            "html",
            "css",
            "js"
          ],
          "js": "14 lines, no dependencies",
          "a11y": [
            "radio-group semantics",
            "aria-checked",
            "keyboard arrow support not required for two options",
            "focus-visible outline"
          ],
          "responsive": {
            "breakpoint": "900px",
            "min": "320px"
          },
          "tokens": [
            "--bg2",
            "--bg3",
            "--border",
            "--text",
            "--text2",
            "--text3",
            "--accent",
            "--accent-text",
            "--invert-bg",
            "--invert-text",
            "--radius",
            "--radius-pill"
          ],
          "tags": [
            "pricing",
            "packages",
            "toggle",
            "cards"
          ],
          "urls": {
            "preview": "https://ui-deploy.com/r/warm-editorial/pricing-cards/preview.html",
            "code": "https://ui-deploy.com/r/warm-editorial/pricing-cards/code.html",
            "prompt": "https://ui-deploy.com/r/warm-editorial/pricing-cards/prompt.md"
          }
        },
        {
          "id": "form-panel",
          "theme": "warm-editorial",
          "name": "Booking Form Panel",
          "category": "forms",
          "order": 80,
          "tagline": "A booking form beside a live summary panel that stays put while the form scrolls.",
          "description": "Asymmetric two-column layout: fields on the left, a sticky summary on the right that updates as the form is filled. Inputs are soft-cornered rather than pills, because a pill text field is unreadable at length.",
          "signature": false,
          "stack": [
            "html",
            "css",
            "js"
          ],
          "js": "18 lines, no dependencies",
          "a11y": [
            "label for every field",
            "required marked in text not colour",
            "fieldset and legend",
            "focus ring with offset"
          ],
          "responsive": {
            "breakpoint": "900px",
            "min": "320px"
          },
          "tokens": [
            "--bg2",
            "--bg3",
            "--border",
            "--border2",
            "--text",
            "--text2",
            "--text3",
            "--accent",
            "--accent-s",
            "--accent-text",
            "--radius",
            "--radius-md",
            "--radius-sm"
          ],
          "tags": [
            "form",
            "booking",
            "input",
            "summary",
            "sticky"
          ],
          "urls": {
            "preview": "https://ui-deploy.com/r/warm-editorial/form-panel/preview.html",
            "code": "https://ui-deploy.com/r/warm-editorial/form-panel/code.html",
            "prompt": "https://ui-deploy.com/r/warm-editorial/form-panel/prompt.md"
          }
        },
        {
          "id": "data-table",
          "theme": "warm-editorial",
          "name": "Schedule Table",
          "category": "data",
          "order": 90,
          "tagline": "A quiet table that becomes a stack of labelled cards on a phone, instead of scrolling sideways.",
          "description": "Warm hairline rules, an uppercase header, sage and bronze status pills. Below 720px each row turns into a card and every cell carries its own label, so nothing is lost to a horizontal scrollbar.",
          "signature": false,
          "stack": [
            "html",
            "css"
          ],
          "js": "none",
          "a11y": [
            "scope on headers",
            "caption",
            "status stated in text not colour"
          ],
          "responsive": {
            "breakpoint": "720px",
            "min": "320px"
          },
          "tokens": [
            "--bg2",
            "--bg3",
            "--border",
            "--text",
            "--text2",
            "--text3",
            "--accent-s",
            "--accent-b",
            "--accent-text",
            "--sage",
            "--sage-s",
            "--radius",
            "--radius-pill"
          ],
          "tags": [
            "table",
            "schedule",
            "data",
            "responsive",
            "status"
          ],
          "urls": {
            "preview": "https://ui-deploy.com/r/warm-editorial/data-table/preview.html",
            "code": "https://ui-deploy.com/r/warm-editorial/data-table/code.html",
            "prompt": "https://ui-deploy.com/r/warm-editorial/data-table/prompt.md"
          }
        },
        {
          "id": "footer",
          "theme": "warm-editorial",
          "name": "Editorial Footer",
          "category": "sections",
          "order": 95,
          "tagline": "An inverted closing block with a large sign-off, link columns and a quiet legal line.",
          "description": "The last chapter of the page, inverted so it reads as an ending. A display-size sign-off, three link columns, and a bottom rule carrying the legal text.",
          "signature": false,
          "stack": [
            "html",
            "css"
          ],
          "js": "none",
          "a11y": [
            "nav landmarks with labels",
            "focus-visible outline",
            "contact links are real mailto/tel"
          ],
          "responsive": {
            "breakpoint": "760px",
            "min": "320px"
          },
          "tokens": [
            "--invert-bg",
            "--invert-bg2",
            "--invert-border",
            "--invert-text",
            "--invert-text2",
            "--invert-text3",
            "--accent",
            "--radius",
            "--radius-pill"
          ],
          "tags": [
            "footer",
            "invert",
            "links",
            "closing"
          ],
          "urls": {
            "preview": "https://ui-deploy.com/r/warm-editorial/footer/preview.html",
            "code": "https://ui-deploy.com/r/warm-editorial/footer/code.html",
            "prompt": "https://ui-deploy.com/r/warm-editorial/footer/prompt.md"
          }
        },
        {
          "id": "modal",
          "theme": "warm-editorial",
          "name": "Dialog Modal",
          "category": "overlay",
          "order": 100,
          "tagline": "A soft-cornered dialog that traps focus, closes on Escape, and gives focus back where it came from.",
          "description": "Built on the native dialog element so focus trapping and the top layer come from the platform. Warm scrim, 28px corners, scroll lock, and focus restored to the trigger on close.",
          "signature": false,
          "stack": [
            "html",
            "css",
            "js"
          ],
          "js": "22 lines, no dependencies",
          "a11y": [
            "native dialog",
            "focus trap",
            "Escape closes",
            "focus restored to trigger",
            "aria-labelledby",
            "scroll lock"
          ],
          "responsive": {
            "breakpoint": "560px",
            "min": "320px"
          },
          "tokens": [
            "--bg2",
            "--bg3",
            "--border",
            "--border2",
            "--text",
            "--text2",
            "--text3",
            "--accent",
            "--radius",
            "--radius-sm",
            "--radius-pill"
          ],
          "tags": [
            "modal",
            "dialog",
            "overlay",
            "focus-trap"
          ],
          "urls": {
            "preview": "https://ui-deploy.com/r/warm-editorial/modal/preview.html",
            "code": "https://ui-deploy.com/r/warm-editorial/modal/code.html",
            "prompt": "https://ui-deploy.com/r/warm-editorial/modal/prompt.md"
          }
        }
      ]
    }
  ]
}