{
  "name": "Design Lounge",
  "author": {
    "name": "Susan Acharya",
    "short": "S. Acharya",
    "role": "Product lead, designer and builder",
    "city": "Kathmandu",
    "site": "https://acharyasusan.com.np",
    "siteLabel": "acharyasusan.com.np",
    "email": "iamsusanacharya@gmail.com",
    "links": [
      {
        "label": "Portfolio",
        "href": "https://acharyasusan.com.np"
      },
      {
        "label": "Dribbble",
        "href": "https://dribbble.com/SusanAcharya"
      },
      {
        "label": "GitHub",
        "href": "https://github.com/SusanAcharya"
      },
      {
        "label": "LinkedIn",
        "href": "https://www.linkedin.com/in/AcharyaSusan"
      },
      {
        "label": "X",
        "href": "https://x.com/n00dlehead"
      }
    ]
  },
  "credit": "Designed using Design Lounge · https://designlounge.vercel.app",
  "license": "Free to use in products. Credit appreciated. Do not republish as a catalogue.",
  "endpoints": {
    "llms": "https://designlounge.vercel.app/llms.txt",
    "pieces": "https://designlounge.vercel.app/api/pieces.json",
    "search": "https://designlounge.vercel.app/search.json",
    "agents": "https://designlounge.vercel.app/agents",
    "system": "https://designlounge.vercel.app/system",
    "start": "https://designlounge.vercel.app/start",
    "kit": "https://designlounge.vercel.app/kit",
    "kitBrief": "https://designlounge.vercel.app/kit/brief/{kind}/{theme}/{pairing}/{family}.md"
  },
  "kit": {
    "kinds": [
      {
        "id": "website",
        "title": "A public website",
        "palettes": [
          "paper-ink",
          "linen-shop",
          "atelier-noir",
          "kiln",
          "press-room",
          "sakura-desk",
          "marble-hall",
          "loam",
          "night-desk",
          "neon-alley",
          "festival",
          "alpine-clinic"
        ],
        "pairings": [
          "the-lounge",
          "gallery-wall",
          "maison",
          "newsroom",
          "lettera",
          "garden-journal",
          "brutal-grotesk",
          "y2k-chrome",
          "poster-condensed",
          "indie-maker",
          "studio-display",
          "neo-grotesk-mono"
        ],
        "families": [
          "editorial",
          "quiet",
          "soft",
          "sharp"
        ],
        "pieces": [
          "hero-asymmetric-type-lockup",
          "navbar-island-morph",
          "testimonials-quote-carousel",
          "footer-giant-wordmark-reveal",
          "contact-giant-email-copy"
        ]
      },
      {
        "id": "product",
        "title": "A product or service",
        "palettes": [
          "fog-city",
          "alpine-clinic",
          "glacier",
          "harbour-ledger",
          "night-desk",
          "ice-station",
          "circuit",
          "playroom",
          "kiln",
          "neon-alley",
          "press-room"
        ],
        "pairings": [
          "friendly-saas",
          "geometric-modern",
          "swiss-precision",
          "developer-docs",
          "signal-mono",
          "indie-maker",
          "atelier",
          "y2k-chrome",
          "newsroom"
        ],
        "families": [
          "quiet",
          "soft",
          "sharp",
          "glass"
        ],
        "pieces": [
          "landing-fintech-light",
          "pricing-annual-toggle-roll",
          "features-tabbed-preview",
          "charts-kpi-spark-row",
          "faq-two-column-search"
        ]
      },
      {
        "id": "platform",
        "title": "A company platform",
        "palettes": [
          "harbour-ledger",
          "fog-city",
          "signal-green",
          "circuit",
          "cinder",
          "hud-teal",
          "courtroom",
          "night-desk"
        ],
        "pairings": [
          "developer-docs",
          "swiss-precision",
          "slab-ledger",
          "red-hat",
          "neo-grotesk-mono",
          "academic"
        ],
        "families": [
          "sharp",
          "quiet",
          "industrial",
          "glass"
        ],
        "pieces": [
          "analytics-dashboard-overview",
          "dense-data-table",
          "collapsing-sidebar-rail",
          "charts-kpi-spark-row",
          "chart-bar-week",
          "chart-line-range",
          "chart-rank-spend",
          "kpi-delta",
          "budget-meter",
          "kanban-board",
          "audit-activity-log",
          "upload-file-queue",
          "account-menu-panel",
          "record-detail-header",
          "people-role-list",
          "billing-plan-summary",
          "list-empty-plain",
          "load-failed-retry",
          "saved-banner"
        ]
      },
      {
        "id": "personal",
        "title": "A personal app",
        "palettes": [
          "lokta",
          "harbour-ledger",
          "alpine-clinic",
          "kiln",
          "loam",
          "fog-city"
        ],
        "pairings": [
          "devanagari",
          "friendly-saas",
          "bookish",
          "garden-journal"
        ],
        "families": [
          "quiet",
          "soft",
          "editorial"
        ],
        "pieces": [
          "spend-list",
          "chart-rank-spend",
          "budget-meter",
          "saved-banner",
          "phone-tab-plain",
          "mobile-list-empty",
          "mobile-load-failed"
        ]
      }
    ],
    "families": [
      {
        "id": "quiet",
        "name": "Quiet",
        "radius": "6px",
        "button": "solid",
        "density": "regular",
        "pieces": [
          "collapsing-sidebar-rail",
          "tabs-morphing-underline",
          "modal-dialog-focus-trap",
          "inline-form-validation"
        ],
        "rules": [
          "Radius 6px on controls, 8px on cards. Never more.",
          "One solid primary. Secondary is outline, same height (40px web / 44px phone).",
          "Hairline borders at 1px. No drop shadows on tables.",
          "Focus ring 2px accent, 3px offset."
        ]
      },
      {
        "id": "soft",
        "name": "Soft",
        "radius": "14px",
        "button": "soft",
        "density": "air",
        "pieces": [
          "toggle-switch-set",
          "ios-onboarding-carousel",
          "pwa-install-sheet",
          "cta-sticky-mobile-bar"
        ],
        "rules": [
          "Radius 14px on cards, 999px on chips and the primary button.",
          "Primary is a soft accent wash, not a hard fill, unless contrast needs it.",
          "Plenty of air: 24px gaps, 20px card pad.",
          "Phone targets 44px. No hairlines thinner than 1px."
        ]
      },
      {
        "id": "sharp",
        "name": "Sharp",
        "radius": "0px",
        "button": "outline",
        "density": "dense",
        "pieces": [
          "hero-swiss-grid-wordmark",
          "swiss-grid-pricing",
          "dense-data-table",
          "magazine-editorial-grid"
        ],
        "rules": [
          "Radius 0 everywhere. If you round a button you have left the family.",
          "1px ink rules. No shadows. Alignment is the decoration.",
          "Primary can be a solid ink block; hover inverts.",
          "Uppercase 11px labels, 0.12em tracking, on data and nav."
        ]
      },
      {
        "id": "editorial",
        "name": "Editorial",
        "radius": "2px",
        "button": "outline",
        "density": "air",
        "pieces": [
          "editorial-landing-hero",
          "paper-article-reader",
          "hero-editorial-name-rotator",
          "footer-centered-colophon"
        ],
        "rules": [
          "Measure 58–66ch on reading. Headlines can break the grid.",
          "Buttons are outlined, 40px, no fill until hover.",
          "Paper grain or warm off-white is allowed; stock photos are not.",
          "Italic is a voice, used once per viewport."
        ]
      },
      {
        "id": "glass",
        "name": "Glass",
        "radius": "16px",
        "button": "soft",
        "density": "regular",
        "pieces": [
          "ios-glass-tab-bar",
          "ios-weather-hourly-scrub",
          "m3-expressive-home",
          "ios-bottom-sheet-detents"
        ],
        "rules": [
          "Bars use backdrop-filter: blur(16px) at ~72% opacity. Always give a solid fallback.",
          "Radius 16px on sheets, 999px on tab pills.",
          "Phone chrome: 44px tab bar, home indicator clearance 10px.",
          "Do not glass a whole page. One floating layer is enough."
        ]
      },
      {
        "id": "industrial",
        "name": "Industrial",
        "radius": "2px",
        "button": "solid",
        "density": "dense",
        "pieces": [
          "analytics-dashboard-overview",
          "dense-data-table",
          "kanban-board",
          "tablet-dashboard-grid"
        ],
        "rules": [
          "Radius 2px. Dense padding (12px). Tables are first-class.",
          "Primary is a committed fill (accent or ink). 36px on web, 44px on phone.",
          "Mono for numbers. Tabular nums. No ornament.",
          "Status colour is reserved for live state, never decoration."
        ]
      }
    ]
  },
  "map": [
    {
      "href": "/kit",
      "kicker": "Kit",
      "title": "Compose",
      "blurb": "Pick a kind, a palette, a pairing, a family. Get a brief."
    },
    {
      "href": "/system",
      "kicker": "System",
      "title": "Ingredients",
      "blurb": "Type, themes, icons, motion. Pick these first."
    },
    {
      "href": "/c",
      "kicker": "Index",
      "title": "By name",
      "blurb": "Hero, footer, portfolio, loader — what a designer would call it."
    },
    {
      "href": "/collections",
      "kicker": "Shelves",
      "title": "By problem",
      "blurb": "Curated reading lists: navigation, first impressions, languages."
    }
  ],
  "starts": [
    {
      "id": "real-estate",
      "surface": "web",
      "title": "Real estate",
      "kicker": "Live",
      "blurb": "One home, its plan, a viewing, the monthly cost.",
      "when": "A property listing, an agent, or a rental site. Marble Hall for a high price, Fog City for city rentals.",
      "theme": "marble-hall",
      "pairing": "gallery-wall",
      "shelf": "website-in-parts",
      "categories": [
        "ecommerce",
        "contact",
        "gallery"
      ],
      "pieces": [
        "realestate-listing-detail",
        "hero-search-marketplace",
        "phone-map-listings",
        "contact-split-map-form",
        "faq-category-accordion",
        "navbar-split-centered-logo",
        "editorial-landing-hero",
        "hero-video-loop",
        "portfolio-architect-index",
        "gallery-photo-album",
        "hero-product-window-tilt"
      ],
      "directions": [
        {
          "id": "stone-listing",
          "name": "Stone listing",
          "mood": "One house, white stone, the plan and the price",
          "theme": "marble-hall",
          "pairing": "gallery-wall",
          "family": "editorial",
          "hero": "realestate-listing-detail",
          "effect": "parallax-layered-hero"
        },
        {
          "id": "harbour-homes",
          "name": "Harbour homes",
          "mood": "A trusted agent, navy and brass, the story of the street",
          "theme": "harbour-ledger",
          "pairing": "magazine-contrast",
          "family": "quiet",
          "hero": "editorial-landing-hero",
          "effect": "scroll-word-highlight"
        },
        {
          "id": "fog-flats",
          "name": "Fog flats",
          "mood": "City rentals, cool and plain, search first",
          "theme": "fog-city",
          "pairing": "neo-grotesk-mono",
          "family": "sharp",
          "hero": "hero-search-marketplace",
          "effect": "staggered-list-reveal"
        },
        {
          "id": "night-viewing",
          "name": "Night viewing",
          "mood": "A house after dark, one film of the rooms",
          "theme": "basalt-hall",
          "pairing": "maison",
          "family": "editorial",
          "hero": "hero-video-loop",
          "effect": "page-transition-curtain"
        },
        {
          "id": "plan-room",
          "name": "Plan room",
          "mood": "The drawing is the listing, a strict grid",
          "theme": "ice-station",
          "pairing": "swiss-precision",
          "family": "sharp",
          "hero": "portfolio-architect-index",
          "effect": "scroll-split"
        },
        {
          "id": "garden-plot",
          "name": "Garden plot",
          "mood": "A house and its land, olive and cream, rooms you turn",
          "theme": "loam",
          "pairing": "garden-journal",
          "family": "soft",
          "hero": "gallery-photo-album",
          "effect": "overlap-slider"
        },
        {
          "id": "pin-map",
          "name": "Pin map",
          "mood": "A map of prices, the sheet under the pin",
          "theme": "press-room",
          "pairing": "newsroom",
          "family": "editorial",
          "hero": "phone-map-listings",
          "effect": "text-mask-line-reveal"
        },
        {
          "id": "new-block",
          "name": "New block",
          "mood": "One new building, a window you can tilt, the unit",
          "theme": "y2k-chrome",
          "pairing": "y2k-chrome",
          "family": "glass",
          "hero": "hero-product-window-tilt",
          "effect": "scroll-scrub-product-sequence"
        }
      ]
    },
    {
      "id": "restaurant",
      "surface": "web",
      "title": "A restaurant",
      "kicker": "Eat",
      "blurb": "Hours today, the menu with prices, a table.",
      "when": "A restaurant, a cafe, or a bar people visit. Not a food shop that ships; that is food.",
      "theme": "velvet-club",
      "pairing": "riso-zine",
      "shelf": "website-in-parts",
      "categories": [
        "landing",
        "contact",
        "pickers"
      ],
      "pieces": [
        "restaurant-menu-page",
        "contact-booking-hours",
        "navbar-split-centered-logo",
        "mobile-web-bottom-nav",
        "hero-video-loop",
        "testimonials-masonry-wall",
        "tablet-pos-register",
        "hero-silk-ribbon-ticker",
        "editorial-landing-hero",
        "hero-engraved-moonrise-plate",
        "hero-flashlight-reveal",
        "handwritten-homepage",
        "hero-chaptered-scenes",
        "hero-asymmetric-type-lockup"
      ],
      "directions": [
        {
          "id": "bistro-riso",
          "name": "Bistro riso",
          "mood": "A printed menu, oxblood, a corner bistro",
          "theme": "velvet-club",
          "pairing": "riso-zine",
          "family": "editorial",
          "hero": "restaurant-menu-page",
          "effect": "text-marker-highlight-draw"
        },
        {
          "id": "market-kitchen",
          "name": "Market kitchen",
          "mood": "A stall window, turmeric and tomato, what is left today",
          "theme": "market-stall",
          "pairing": "poster-condensed",
          "family": "industrial",
          "hero": "hero-silk-ribbon-ticker",
          "effect": "kinetic-type-marquee"
        },
        {
          "id": "garden-supper",
          "name": "Garden supper",
          "mood": "A table outside, olive and cream, the garden is the room",
          "theme": "loam",
          "pairing": "garden-journal",
          "family": "soft",
          "hero": "editorial-landing-hero",
          "effect": "hero-video-loop"
        },
        {
          "id": "wine-list",
          "name": "Wine list",
          "mood": "A bar in the afternoon, burgundy plaster, bottles by the glass",
          "theme": "matinee",
          "pairing": "deco-hotel",
          "family": "editorial",
          "hero": "hero-engraved-moonrise-plate",
          "effect": "page-transition-curtain"
        },
        {
          "id": "night-bar",
          "name": "Night bar",
          "mood": "After dark, a neon sign, the board of what is pouring",
          "theme": "neon-alley",
          "pairing": "neon-marquee",
          "family": "glass",
          "hero": "hero-flashlight-reveal",
          "effect": "split-flap-board"
        },
        {
          "id": "corner-cafe",
          "name": "Corner cafe",
          "mood": "A short menu in a hand, one room, come by on Thursday",
          "theme": "inkwell",
          "pairing": "letter-hand",
          "family": "soft",
          "hero": "handwritten-homepage",
          "effect": "text-annotated-underlines"
        },
        {
          "id": "tasting-menu",
          "name": "Tasting menu",
          "mood": "A dark room, courses as scenes, the film of the meal",
          "theme": "atelier-noir",
          "pairing": "cinema",
          "family": "editorial",
          "hero": "hero-chaptered-scenes",
          "effect": "scroll-velocity-type"
        },
        {
          "id": "tea-house",
          "name": "Tea house",
          "mood": "A quiet table, blush paper, a short list and a long pour",
          "theme": "sakura-desk",
          "pairing": "literary",
          "family": "editorial",
          "hero": "hero-asymmetric-type-lockup",
          "effect": "text-mask-line-reveal"
        }
      ]
    },
    {
      "id": "education",
      "surface": "web",
      "title": "A school or course",
      "kicker": "Learn",
      "blurb": "What you learn, the lessons, the dates, how to apply.",
      "when": "An online course, a school, a college, or a bootcamp.",
      "theme": "paper-ink",
      "pairing": "academic",
      "shelf": "website-in-parts",
      "categories": [
        "landing",
        "faq",
        "inputs"
      ],
      "pieces": [
        "course-landing-curriculum",
        "school-admissions-home",
        "faq-category-accordion",
        "pricing-annual-toggle-roll",
        "testimonials-metric-tabs",
        "phone-lesson-quiz",
        "hero-chaptered-scenes",
        "handwritten-homepage",
        "spring-deck",
        "tablet-cook-mode",
        "card-progress-goals",
        "features-sticky-scroll-steps",
        "profile-creator-masthead",
        "hero-split-ui-stack",
        "hero-layered-letter-swap"
      ],
      "directions": [
        {
          "id": "lecture-hall",
          "name": "Lecture hall",
          "mood": "Academic, calm, one green",
          "theme": "paper-ink",
          "pairing": "academic",
          "family": "editorial",
          "hero": "course-landing-curriculum",
          "effect": "scroll-reading-progress"
        },
        {
          "id": "bauhaus-campus",
          "name": "Bauhaus campus",
          "mood": "Cream, navy, shapes, a school",
          "theme": "archive",
          "pairing": "bauhaus-school",
          "family": "soft",
          "hero": "school-admissions-home",
          "effect": "staggered-list-reveal"
        },
        {
          "id": "play-lesson",
          "name": "Play lesson",
          "mood": "Kids and first-timers, butter and coral, bouncy",
          "theme": "playroom",
          "pairing": "playground",
          "family": "soft",
          "hero": "course-landing-curriculum",
          "effect": "spring-deck"
        },
        {
          "id": "stage-lights",
          "name": "Stage lights",
          "mood": "Music lessons, a dark stage, warm spotlights, a setlist",
          "theme": "velvet-club",
          "pairing": "cinema",
          "family": "editorial",
          "hero": "hero-chaptered-scenes",
          "effect": "scroll-velocity-type"
        },
        {
          "id": "workshop-bench",
          "name": "Workshop bench",
          "mood": "Hands and tools: wood, strings, clay, a build you finish",
          "theme": "oxide",
          "pairing": "industrial-label",
          "family": "industrial",
          "hero": "hero-asymmetric-type-lockup",
          "effect": "stacking-cards-scroll"
        },
        {
          "id": "open-studio",
          "name": "Open studio",
          "mood": "Drawing and sketching, paper, a pencil line, a hand",
          "theme": "inkwell",
          "pairing": "letter-hand",
          "family": "soft",
          "hero": "handwritten-homepage",
          "effect": "text-annotated-underlines"
        },
        {
          "id": "gallery-class",
          "name": "Gallery class",
          "mood": "Painting and colour, white walls, a framed piece",
          "theme": "marble-hall",
          "pairing": "gallery-wall",
          "family": "editorial",
          "hero": "editorial-landing-hero",
          "effect": "scroll-zoom-portal"
        },
        {
          "id": "code-dojo",
          "name": "Code dojo",
          "mood": "Coding and tech, a terminal, short drills",
          "theme": "night-desk",
          "pairing": "terminal-native",
          "family": "sharp",
          "hero": "hero-split-ui-stack",
          "effect": "text-scramble-reveal"
        },
        {
          "id": "language-cafe",
          "name": "Language cafe",
          "mood": "Languages and words, two scripts, a cafe table",
          "theme": "sakura-desk",
          "pairing": "literary",
          "family": "editorial",
          "hero": "hero-layered-letter-swap",
          "effect": "text-mask-line-reveal"
        },
        {
          "id": "field-school",
          "name": "Field school",
          "mood": "Outdoors, cooking, gardening, slow and practical",
          "theme": "loam",
          "pairing": "garden-journal",
          "family": "soft",
          "hero": "editorial-landing-hero",
          "effect": "parallax-layered-hero"
        }
      ]
    },
    {
      "id": "jobs",
      "surface": "web",
      "title": "A job board",
      "kicker": "Work",
      "blurb": "Search, filters, one job beside the list.",
      "when": "A job board, a careers page with many roles, or a hiring marketplace.",
      "theme": "fog-city",
      "pairing": "swiss-precision",
      "shelf": "website-in-parts",
      "categories": [
        "utility",
        "inputs",
        "data"
      ],
      "pieces": [
        "job-board-search",
        "careers-role-list",
        "search-results-filters",
        "file-upload-manager",
        "phone-search-results",
        "hero-split-ui-stack",
        "team-hover-portrait-grid",
        "week-schedule",
        "hero-swiss-grid-wordmark",
        "hero-bauhaus-composition",
        "law-firm-home"
      ],
      "directions": [
        {
          "id": "swiss-board",
          "name": "Swiss board",
          "mood": "A board you scan, white and one green, search first",
          "theme": "fog-city",
          "pairing": "swiss-precision",
          "family": "quiet",
          "hero": "job-board-search",
          "effect": null
        },
        {
          "id": "night-roles",
          "name": "Night roles",
          "mood": "Engineering roles, a dark desk, the stack beside the list",
          "theme": "night-desk",
          "pairing": "developer-docs",
          "family": "sharp",
          "hero": "hero-split-ui-stack",
          "effect": "text-scramble-reveal"
        },
        {
          "id": "press-hiring",
          "name": "Press hiring",
          "mood": "A newspaper of open roles, one red, read down the page",
          "theme": "press-room",
          "pairing": "newsroom",
          "family": "editorial",
          "hero": "careers-role-list",
          "effect": "text-mask-line-reveal"
        },
        {
          "id": "studio-roles",
          "name": "Studio roles",
          "mood": "A small studio, the people on the wall, warm clay",
          "theme": "kiln",
          "pairing": "indie-maker",
          "family": "soft",
          "hero": "team-hover-portrait-grid",
          "effect": "scroll-word-highlight"
        },
        {
          "id": "yard-shifts",
          "name": "Yard shifts",
          "mood": "Shifts on a board, safety orange, what is on this week",
          "theme": "cinder",
          "pairing": "industrial-label",
          "family": "industrial",
          "hero": "week-schedule",
          "effect": "split-flap-board"
        },
        {
          "id": "civic-posts",
          "name": "Civic posts",
          "mood": "A city hiring page, stone and a brass line, quiet",
          "theme": "marble-hall",
          "pairing": "academic",
          "family": "quiet",
          "hero": "hero-swiss-grid-wordmark",
          "effect": null
        },
        {
          "id": "poster-call",
          "name": "Poster call",
          "mood": "A campaign hire, a loud poster, one role",
          "theme": "festival",
          "pairing": "poster-condensed",
          "family": "sharp",
          "hero": "hero-bauhaus-composition",
          "effect": "kinetic-type-marquee"
        },
        {
          "id": "quiet-practice",
          "name": "Quiet practice",
          "mood": "A firm hiring, the practice first, then the seat",
          "theme": "courtroom",
          "pairing": "classic-garamond",
          "family": "editorial",
          "hero": "law-firm-home",
          "effect": "scroll-reading-progress"
        }
      ]
    },
    {
      "id": "nonprofit",
      "surface": "web",
      "title": "A nonprofit",
      "kicker": "Give",
      "blurb": "The story, what each amount does, the goal.",
      "when": "A charity, a fundraiser, or a community group asking for money or time.",
      "theme": "kiln",
      "pairing": "garden-journal",
      "shelf": "website-in-parts",
      "categories": [
        "landing",
        "stats",
        "cta"
      ],
      "pieces": [
        "donation-page-impact",
        "stats-count-up-band",
        "scroll-word-highlight",
        "testimonials-masonry-wall",
        "newsletter-fold-inline",
        "sticky-split-story",
        "hero-asymmetric-type-lockup",
        "editorial-landing-hero",
        "paper-article-reader",
        "hero-bauhaus-composition",
        "hero-engraved-moonrise-plate",
        "hero-swiss-grid-wordmark"
      ],
      "directions": [
        {
          "id": "warm-lunch",
          "name": "Warm lunch",
          "mood": "A kitchen, terracotta, what one amount buys",
          "theme": "kiln",
          "pairing": "garden-journal",
          "family": "soft",
          "hero": "donation-page-impact",
          "effect": "scroll-word-highlight"
        },
        {
          "id": "greenhouse-fund",
          "name": "Greenhouse fund",
          "mood": "A garden growing, the story beside the picture",
          "theme": "greenhouse",
          "pairing": "the-lounge",
          "family": "soft",
          "hero": "sticky-split-story",
          "effect": "parallax-layered-hero"
        },
        {
          "id": "lokta-seva",
          "name": "Lokta seva",
          "mood": "Lokta paper, crimson, a community letter",
          "theme": "lokta",
          "pairing": "devanagari",
          "family": "editorial",
          "hero": "hero-asymmetric-type-lockup",
          "effect": "text-marker-highlight-draw"
        },
        {
          "id": "night-letter",
          "name": "Night letter",
          "mood": "A long letter after dark, one cause, no countdown",
          "theme": "night-desk",
          "pairing": "classic-garamond",
          "family": "editorial",
          "hero": "editorial-landing-hero",
          "effect": "text-mask-line-reveal"
        },
        {
          "id": "field-report",
          "name": "Field report",
          "mood": "A report you read, olive paper, the work in the field",
          "theme": "loam",
          "pairing": "academic",
          "family": "quiet",
          "hero": "paper-article-reader",
          "effect": "scroll-reading-progress"
        },
        {
          "id": "march",
          "name": "March",
          "mood": "A poster, two inks, a day people show up",
          "theme": "festival",
          "pairing": "brutal-grotesk",
          "family": "sharp",
          "hero": "hero-bauhaus-composition",
          "effect": "kinetic-type-marquee"
        },
        {
          "id": "marble-trust",
          "name": "Marble trust",
          "mood": "A foundation, a brass plaque, the number on the wall",
          "theme": "marble-hall",
          "pairing": "monumental",
          "family": "editorial",
          "hero": "hero-engraved-moonrise-plate",
          "effect": "stats-count-up-band"
        },
        {
          "id": "mutual-aid",
          "name": "Mutual aid",
          "mood": "A board of what is needed this week, stamped paper",
          "theme": "archive",
          "pairing": "slab-ledger",
          "family": "editorial",
          "hero": "hero-swiss-grid-wordmark",
          "effect": "split-flap-board"
        }
      ]
    },
    {
      "id": "clinic",
      "surface": "web",
      "title": "A clinic",
      "kicker": "Care",
      "blurb": "The next free slot, the doctors, the hours, the map.",
      "when": "A dental, physio, vet, or doctor clinic people book. A retreat is wellness.",
      "theme": "alpine-clinic",
      "pairing": "friendly-saas",
      "shelf": "website-in-parts",
      "categories": [
        "landing",
        "contact",
        "pickers"
      ],
      "pieces": [
        "clinic-home-booking",
        "calendar-week-planner",
        "phone-booking-slots",
        "faq-category-accordion",
        "tablet-kiosk-checkin",
        "profile-creator-masthead",
        "hero-asymmetric-type-lockup",
        "hero-split-ui-stack",
        "editorial-landing-hero",
        "hero-swiss-grid-wordmark"
      ],
      "directions": [
        {
          "id": "aqua-care",
          "name": "Aqua care",
          "mood": "A dental chair, mint air, the next free slot",
          "theme": "alpine-clinic",
          "pairing": "friendly-saas",
          "family": "soft",
          "hero": "clinic-home-booking",
          "effect": "staggered-list-reveal"
        },
        {
          "id": "glacier-physio",
          "name": "Glacier physio",
          "mood": "A treatment week, pale and precise, sports care",
          "theme": "glacier",
          "pairing": "geometric-modern",
          "family": "quiet",
          "hero": "calendar-week-planner",
          "effect": "features-sticky-scroll-steps"
        },
        {
          "id": "linen-practice",
          "name": "Linen practice",
          "mood": "A small room, one doctor, warm and slow",
          "theme": "linen-shop",
          "pairing": "bookish",
          "family": "soft",
          "hero": "profile-creator-masthead",
          "effect": "scroll-word-highlight"
        },
        {
          "id": "after-hours",
          "name": "After hours",
          "mood": "The clinic at night, book a slot on the phone",
          "theme": "alpine-night",
          "pairing": "geometric-modern",
          "family": "glass",
          "hero": "phone-booking-slots",
          "effect": "ios-large-title-collapse"
        },
        {
          "id": "vet-barn",
          "name": "Vet barn",
          "mood": "A shed clinic, rust and bone, animals one by one",
          "theme": "oxide",
          "pairing": "industrial-label",
          "family": "industrial",
          "hero": "hero-asymmetric-type-lockup",
          "effect": "stacking-cards-scroll"
        },
        {
          "id": "city-dental",
          "name": "City dental",
          "mood": "A cool office, the next chair, a grid of slots",
          "theme": "fog-city",
          "pairing": "neo-grotesk-mono",
          "family": "sharp",
          "hero": "hero-split-ui-stack",
          "effect": "spotlight-hover-grid"
        },
        {
          "id": "waiting-room",
          "name": "Waiting room",
          "mood": "A family practice, clay and cream, the people you see",
          "theme": "kiln",
          "pairing": "garden-journal",
          "family": "soft",
          "hero": "editorial-landing-hero",
          "effect": "text-marker-highlight-draw"
        },
        {
          "id": "sports-lab",
          "name": "Sports lab",
          "mood": "Ice and numbers, a lab, what the body measured",
          "theme": "ice-station",
          "pairing": "swiss-precision",
          "family": "quiet",
          "hero": "hero-swiss-grid-wordmark",
          "effect": "stats-count-up-band"
        }
      ]
    },
    {
      "id": "gym",
      "surface": "web",
      "title": "A gym",
      "kicker": "Train",
      "blurb": "A loud poster, the timetable, the price, a free class.",
      "when": "A gym, a boxing club, a yoga or spin studio with a timetable.",
      "theme": "cinder",
      "pairing": "poster-condensed",
      "shelf": "website-in-parts",
      "categories": [
        "landing",
        "pricing",
        "utility"
      ],
      "pieces": [
        "gym-membership-home",
        "mobile-web-bottom-nav",
        "phone-workout-timer",
        "pricing-annual-toggle-roll",
        "phone-booking-slots",
        "hero-flashlight-reveal",
        "hero-asymmetric-type-lockup",
        "landing-wellness-retreat",
        "week-schedule",
        "hero-bauhaus-composition",
        "hero-swiss-grid-wordmark",
        "bento-feature-grid"
      ],
      "directions": [
        {
          "id": "blood-orange",
          "name": "Blood orange",
          "mood": "A fight gym, black and safety orange, a poster",
          "theme": "cinder",
          "pairing": "poster-condensed",
          "family": "industrial",
          "hero": "gym-membership-home",
          "effect": "kinetic-type-marquee"
        },
        {
          "id": "volt-studio",
          "name": "Volt studio",
          "mood": "A dark room, neon, a spin or HIIT hour",
          "theme": "neon-alley",
          "pairing": "wide-tech",
          "family": "sharp",
          "hero": "hero-flashlight-reveal",
          "effect": "preloader-counter-intro"
        },
        {
          "id": "oxide-yard",
          "name": "Oxide yard",
          "mood": "A strength barn, rust and bone, the bar on the wall",
          "theme": "oxide",
          "pairing": "industrial-label",
          "family": "industrial",
          "hero": "hero-asymmetric-type-lockup",
          "effect": "scroll-velocity-type"
        },
        {
          "id": "dawn-mat",
          "name": "Dawn mat",
          "mood": "Yoga at dawn, linen and sage, the week of classes",
          "theme": "linen-shop",
          "pairing": "garden-journal",
          "family": "soft",
          "hero": "landing-wellness-retreat",
          "effect": "parallax-layered-hero"
        },
        {
          "id": "class-board",
          "name": "Class board",
          "mood": "The timetable is the site, newsprint, what is on tonight",
          "theme": "press-room",
          "pairing": "newsroom",
          "family": "editorial",
          "hero": "week-schedule",
          "effect": "split-flap-board"
        },
        {
          "id": "fight-night",
          "name": "Fight night",
          "mood": "Floodlights, a club card, condensed type that moves",
          "theme": "night-shift",
          "pairing": "poster-condensed",
          "family": "industrial",
          "hero": "hero-bauhaus-composition",
          "effect": "variable-font-proximity"
        },
        {
          "id": "pool-lane",
          "name": "Pool lane",
          "mood": "A lane, pale water, quiet numbers, laps",
          "theme": "glacier",
          "pairing": "swiss-precision",
          "family": "quiet",
          "hero": "hero-swiss-grid-wordmark",
          "effect": "scroll-reading-progress"
        },
        {
          "id": "kids-class",
          "name": "Kids class",
          "mood": "A bright hall, butter and coral, small goals",
          "theme": "playroom",
          "pairing": "playground",
          "family": "soft",
          "hero": "bento-feature-grid",
          "effect": "spring-deck"
        }
      ]
    },
    {
      "id": "professional",
      "surface": "web",
      "title": "A firm",
      "kicker": "Advise",
      "blurb": "One serious sentence, the practice areas, a private form.",
      "when": "A law firm, an accountant, a consultant, or an advisory practice.",
      "theme": "courtroom",
      "pairing": "maison",
      "shelf": "website-in-parts",
      "categories": [
        "landing",
        "team",
        "contact"
      ],
      "pieces": [
        "law-firm-home",
        "people-role-list",
        "stats-count-up-band",
        "contact-project-brief-steps",
        "card-article-mix",
        "hero-asymmetric-type-lockup",
        "hero-swiss-grid-wordmark",
        "paper-article-reader",
        "profile-creator-masthead",
        "hero-split-ui-stack",
        "editorial-landing-hero",
        "architecture-studio-index"
      ],
      "directions": [
        {
          "id": "courtroom",
          "name": "Courtroom",
          "mood": "Green leather, one serious sentence, a practice",
          "theme": "courtroom",
          "pairing": "maison",
          "family": "editorial",
          "hero": "law-firm-home",
          "effect": "scroll-word-highlight"
        },
        {
          "id": "ivory-counsel",
          "name": "Ivory counsel",
          "mood": "White stone, a quiet opinion, the sentence is the page",
          "theme": "marble-hall",
          "pairing": "lettera",
          "family": "editorial",
          "hero": "hero-asymmetric-type-lockup",
          "effect": "text-mask-line-reveal"
        },
        {
          "id": "harbour-advisors",
          "name": "Harbour advisors",
          "mood": "Navy and brass, a ledger, the figures first",
          "theme": "harbour-ledger",
          "pairing": "slab-ledger",
          "family": "quiet",
          "hero": "hero-swiss-grid-wordmark",
          "effect": "stats-count-up-band"
        },
        {
          "id": "chambers",
          "name": "Chambers",
          "mood": "After hours, a written opinion you sit with",
          "theme": "chambers",
          "pairing": "classic-garamond",
          "family": "editorial",
          "hero": "paper-article-reader",
          "effect": "scroll-reading-progress"
        },
        {
          "id": "studio-counsel",
          "name": "Studio counsel",
          "mood": "One advisor, clay and cream, a person not a tower",
          "theme": "kiln",
          "pairing": "bookish",
          "family": "soft",
          "hero": "profile-creator-masthead",
          "effect": "text-marker-highlight-draw"
        },
        {
          "id": "glass-office",
          "name": "Glass office",
          "mood": "A method in steps, cool gray, a modern consultancy",
          "theme": "fog-city",
          "pairing": "neo-grotesk-mono",
          "family": "sharp",
          "hero": "hero-split-ui-stack",
          "effect": "features-sticky-scroll-steps"
        },
        {
          "id": "press-brief",
          "name": "Press brief",
          "mood": "A firm that publishes, newsprint, the argument first",
          "theme": "press-room",
          "pairing": "newsroom",
          "family": "editorial",
          "hero": "editorial-landing-hero",
          "effect": "text-rise-underline-whisper"
        },
        {
          "id": "survey-desk",
          "name": "Survey desk",
          "mood": "Engineers and surveyors, drawings on the wall",
          "theme": "oxide",
          "pairing": "industrial-label",
          "family": "industrial",
          "hero": "architecture-studio-index",
          "effect": "scroll-split"
        }
      ]
    },
    {
      "id": "marketing-site",
      "surface": "web",
      "title": "A marketing site",
      "kicker": "Website",
      "blurb": "Hero, nav, proof, pricing, FAQ, contact, footer. Assemble a public site from pieces that already agree.",
      "when": "A company, studio or product needs a public website with a point of view — not a template.",
      "theme": "paper-ink",
      "pairing": "the-lounge",
      "shelf": "website-in-parts",
      "categories": [
        "hero",
        "navbar",
        "features",
        "pricing",
        "testimonials",
        "faq",
        "contact",
        "footer"
      ],
      "pieces": [
        "hero-asymmetric-type-lockup",
        "navbar-island-morph",
        "features-tabbed-preview",
        "testimonials-quote-carousel",
        "pricing-annual-toggle-roll",
        "faq-two-column-search",
        "contact-giant-email-copy",
        "footer-giant-wordmark-reveal",
        "navbar-hide-on-scroll",
        "hamburger-circle-reveal",
        "features-alternating-rows",
        "testimonials-masonry-wall",
        "stats-count-up-band",
        "cta-giant-email-band",
        "footer-sitemap-columns",
        "error-404-editorial"
      ],
      "directions": [
        {
          "id": "paper-press",
          "name": "Paper press",
          "mood": "Calm, literate, warm paper",
          "theme": "paper-ink",
          "pairing": "the-lounge",
          "family": "editorial",
          "hero": "hero-asymmetric-type-lockup",
          "effect": "text-mask-line-reveal"
        },
        {
          "id": "swiss-office",
          "name": "Swiss office",
          "mood": "Precise, cool, a visible grid",
          "theme": "ice-station",
          "pairing": "swiss-precision",
          "family": "sharp",
          "hero": "hero-swiss-grid-wordmark",
          "effect": "scroll-velocity-type"
        },
        {
          "id": "loud-poster",
          "name": "Loud poster",
          "mood": "Playful, loud, primary shapes",
          "theme": "festival",
          "pairing": "brutal-grotesk",
          "family": "sharp",
          "hero": "hero-bauhaus-composition",
          "effect": "kinetic-type-marquee"
        },
        {
          "id": "warm-studio",
          "name": "Warm studio",
          "mood": "Friendly, crafted, clay and sand",
          "theme": "kiln",
          "pairing": "studio-display",
          "family": "soft",
          "hero": "editorial-landing-hero",
          "effect": "scroll-word-highlight"
        }
      ]
    },
    {
      "id": "saas",
      "surface": "web",
      "title": "A SaaS site",
      "kicker": "Product",
      "blurb": "A tool people subscribe to. One product window, the price, the questions.",
      "when": "A software product needs a public page. Fog City, because this is SaaS. Atelier Noir is a fashion room, so it loses.",
      "theme": "fog-city",
      "pairing": "friendly-saas",
      "shelf": "website-in-parts",
      "categories": [
        "landing",
        "hero",
        "features",
        "pricing",
        "faq"
      ],
      "pieces": [
        "landing-devtool-dark",
        "hero-product-window-tilt",
        "features-tabbed-preview",
        "pricing-annual-toggle-roll",
        "faq-two-column-search",
        "integrations-connect",
        "mega-menu-product-grid",
        "navbar-hide-on-scroll",
        "hamburger-circle-reveal",
        "hero-split-ui-stack",
        "testimonials-metric-tabs",
        "logos-grid-case-hover",
        "pricing-usage-slider",
        "faq-category-accordion",
        "footer-sitemap-columns"
      ],
      "directions": [
        {
          "id": "calm-cobalt",
          "name": "Calm cobalt",
          "mood": "Trustworthy, clear, enterprise-friendly",
          "theme": "fog-city",
          "pairing": "friendly-saas",
          "family": "quiet",
          "hero": "hero-product-window-tilt",
          "effect": "features-sticky-scroll-steps"
        },
        {
          "id": "dev-night",
          "name": "Dev night",
          "mood": "Technical, dark, for developers",
          "theme": "night-desk",
          "pairing": "developer-docs",
          "family": "sharp",
          "hero": "landing-devtool-dark",
          "effect": "webgl-shader-hero"
        },
        {
          "id": "lime-engine",
          "name": "Lime engine",
          "mood": "AI, infrastructure, fast and expensive",
          "theme": "circuit",
          "pairing": "signal-mono",
          "family": "sharp",
          "hero": "hero-ai-prompt-cycle",
          "effect": "spotlight-hover-grid"
        },
        {
          "id": "butter-tool",
          "name": "Butter tool",
          "mood": "Playful, consumer, small teams",
          "theme": "playroom",
          "pairing": "indie-maker",
          "family": "soft",
          "hero": "hero-product-window-tilt",
          "effect": "stacking-cards-scroll"
        },
        {
          "id": "printed-saas",
          "name": "Printed SaaS",
          "mood": "Editorial, opinionated, founder-led",
          "theme": "paper-ink",
          "pairing": "neo-grotesk-mono",
          "family": "editorial",
          "hero": "hero-asymmetric-type-lockup",
          "effect": "text-marker-highlight-draw"
        }
      ]
    },
    {
      "id": "portfolio",
      "surface": "web",
      "title": "A portfolio",
      "kicker": "Personal",
      "blurb": "Index, case study, a horizontal rail, a masthead. Steal a structure, keep your personality.",
      "when": "A visual designer, photographer, architect, or studio whose work is images. Someone who ships software takes portfolio-builder instead.",
      "theme": "atelier-noir",
      "pairing": "gallery-wall",
      "shelf": "portfolio-sites",
      "categories": [
        "portfolio",
        "profile",
        "gallery",
        "hero"
      ],
      "pieces": [
        "portfolio-architect-index",
        "portfolio-index-hover-preview",
        "portfolio-photographer-horizontal",
        "portfolio-case-study-long",
        "portfolio-motion-showreel",
        "profile-creator-masthead",
        "navbar-vertical-rail",
        "hamburger-circle-reveal",
        "architecture-studio-index"
      ],
      "directions": [
        {
          "id": "noir-index",
          "name": "Noir index",
          "mood": "Luxury, dark, art direction",
          "theme": "atelier-noir",
          "pairing": "gallery-wall",
          "family": "editorial",
          "hero": "portfolio-index-hover-preview",
          "effect": "hover-image-trail"
        },
        {
          "id": "stone-architect",
          "name": "Stone architect",
          "mood": "Architecture, white stone, a strict grid",
          "theme": "marble-hall",
          "pairing": "swiss-precision",
          "family": "sharp",
          "hero": "portfolio-architect-index",
          "effect": "scroll-split"
        },
        {
          "id": "brutal-studio",
          "name": "Brutal studio",
          "mood": "Loud, black on white, a studio with opinions",
          "theme": "paper-ink",
          "pairing": "brutal-grotesk",
          "family": "sharp",
          "hero": "brutalist-studio-home",
          "effect": "text-mask-scroll-reveal"
        },
        {
          "id": "linen-series",
          "name": "Linen series",
          "mood": "Photography, soft light, a long series",
          "theme": "linen-shop",
          "pairing": "maison",
          "family": "editorial",
          "hero": "portfolio-photographer-horizontal",
          "effect": "text-mask-line-reveal"
        },
        {
          "id": "reel-night",
          "name": "Reel night",
          "mood": "Motion and film, a dark room, the reel plays first",
          "theme": "observatory",
          "pairing": "cinema",
          "family": "editorial",
          "hero": "portfolio-motion-showreel",
          "effect": "page-transition-curtain"
        },
        {
          "id": "darkroom-sheet",
          "name": "Darkroom sheet",
          "mood": "A photographer who shoots many frames, a contact sheet",
          "theme": "press-room",
          "pairing": "newsroom",
          "family": "editorial",
          "hero": "gallery-contact-sheet",
          "effect": "grow-grid"
        },
        {
          "id": "riso-wall",
          "name": "Riso wall",
          "mood": "Illustrator, two inks, printed and loud",
          "theme": "festival",
          "pairing": "riso-zine",
          "family": "sharp",
          "hero": "masonry-gallery-captions",
          "effect": "kinetic-type-marquee"
        },
        {
          "id": "maker-wall",
          "name": "Maker wall",
          "mood": "Objects and craft, a workshop wall, things you can turn",
          "theme": "oxide",
          "pairing": "industrial-label",
          "family": "industrial",
          "hero": "gallery-wall-frames",
          "effect": "object-3d-turntable"
        }
      ]
    },
    {
      "id": "portfolio-builder",
      "surface": "web",
      "title": "A builder’s portfolio",
      "kicker": "Personal",
      "blurb": "For people who ship software. The projects are small working screens, not a list of names.",
      "when": "A developer, product manager, product designer, or founder. Kiln, warm and light, because the work is the colour. Atelier Noir is a fashion room, so it loses.",
      "theme": "kiln",
      "pairing": "indie-maker",
      "shelf": "portfolio-sites",
      "categories": [
        "portfolio",
        "features",
        "hero",
        "scroll"
      ],
      "pieces": [
        "hero-product-window-tilt",
        "bento-feature-grid",
        "stacking-cards-scroll",
        "portfolio-case-study-long",
        "contact-giant-email-copy",
        "footer-giant-wordmark-reveal",
        "navbar-vertical-rail",
        "hamburger-circle-reveal",
        "card-article-mix",
        "contact-project-brief-steps",
        "error-404-editorial"
      ],
      "directions": [
        {
          "id": "kiln-workbench",
          "name": "Kiln workbench",
          "mood": "Warm, human, product screens as the art",
          "theme": "kiln",
          "pairing": "indie-maker",
          "family": "soft",
          "hero": "hero-product-window-tilt",
          "effect": "stacking-cards-scroll"
        },
        {
          "id": "cobalt-desk",
          "name": "Cobalt desk",
          "mood": "Precise, systems thinker, a visible grid",
          "theme": "fog-city",
          "pairing": "neo-grotesk-mono",
          "family": "sharp",
          "hero": "hero-swiss-grid-wordmark",
          "effect": "features-sticky-scroll-steps"
        },
        {
          "id": "night-terminal",
          "name": "Night terminal",
          "mood": "Developer, dark, code as craft",
          "theme": "night-desk",
          "pairing": "terminal-native",
          "family": "editorial",
          "hero": "hero-flashlight-reveal",
          "effect": "text-scramble-reveal"
        },
        {
          "id": "sakura-notes",
          "name": "Sakura notes",
          "mood": "Designer, soft, personal and bright",
          "theme": "sakura-desk",
          "pairing": "studio-display",
          "family": "soft",
          "hero": "hero-editorial-name-rotator",
          "effect": "scroll-word-highlight"
        },
        {
          "id": "paper-ledger",
          "name": "Paper ledger",
          "mood": "Product manager, writing first, decisions as documents",
          "theme": "archive",
          "pairing": "academic",
          "family": "editorial",
          "hero": "portfolio-case-study-long",
          "effect": "scroll-reading-progress"
        },
        {
          "id": "lime-lab",
          "name": "Lime lab",
          "mood": "AI or infra engineer, fast, lime on black, live demos",
          "theme": "circuit",
          "pairing": "signal-mono",
          "family": "sharp",
          "hero": "hero-live-browser-card",
          "effect": "spotlight-hover-grid"
        },
        {
          "id": "toy-shelf",
          "name": "Toy shelf",
          "mood": "Indie maker, many small apps, a shelf you can tap",
          "theme": "playroom",
          "pairing": "indie-maker",
          "family": "soft",
          "hero": "app-icon-shelf-gallery",
          "effect": "spring-deck"
        }
      ]
    },
    {
      "id": "fintech",
      "surface": "web",
      "title": "Fintech",
      "kicker": "Finance",
      "blurb": "A card, a price, one number. The page stays light.",
      "when": "Banking, payments, or a ledger someone is deciding to trust.",
      "theme": "harbour-ledger",
      "pairing": "friendly-saas",
      "shelf": "landing-pages",
      "categories": [
        "landing",
        "pricing",
        "charts",
        "auth"
      ],
      "pieces": [
        "landing-fintech-light",
        "swiss-grid-pricing",
        "pricing-comparison-sticky",
        "charts-kpi-spark-row",
        "kpi-delta",
        "split-sign-in",
        "mega-menu-product-grid",
        "navbar-hide-on-scroll",
        "stats-count-up-band",
        "testimonials-metric-tabs",
        "faq-category-accordion",
        "crypto-exchange-trade"
      ],
      "directions": [
        {
          "id": "harbour",
          "name": "Harbour",
          "mood": "Trust, cream and navy, a bank you can call",
          "theme": "harbour-ledger",
          "pairing": "friendly-saas",
          "family": "quiet",
          "hero": "landing-fintech-light",
          "effect": "staggered-list-reveal"
        },
        {
          "id": "lime-card",
          "name": "Lime card",
          "mood": "A card for young people, dark and fast",
          "theme": "circuit",
          "pairing": "wide-tech",
          "family": "sharp",
          "hero": "hero-product-window-tilt",
          "effect": "scroll-velocity-type"
        },
        {
          "id": "lokta",
          "name": "Lokta",
          "mood": "Nepali money, crimson on lokta paper",
          "theme": "lokta",
          "pairing": "devanagari",
          "family": "quiet",
          "hero": "landing-fintech-light",
          "effect": "text-marker-highlight-draw"
        },
        {
          "id": "co-op-ledger",
          "name": "Co-op ledger",
          "mood": "Old-fashioned trust, stamped paper",
          "theme": "archive",
          "pairing": "slab-ledger",
          "family": "editorial",
          "hero": "hero-asymmetric-type-lockup",
          "effect": "split-flap-board"
        }
      ]
    },
    {
      "id": "fashion",
      "surface": "web",
      "title": "Fashion",
      "kicker": "Look",
      "blurb": "A lookbook and one garment. The name is the largest type.",
      "when": "Clothes, fragrance, or a luxury good. Linen and a Didone, not a product sans.",
      "theme": "linen-shop",
      "pairing": "maison",
      "shelf": "landing-pages",
      "categories": [
        "landing",
        "ecommerce",
        "gallery"
      ],
      "pieces": [
        "landing-fashion-atelier",
        "luxe-product-detail",
        "shop-product",
        "gallery-contact-sheet",
        "masonry-gallery-captions",
        "navbar-split-centered-logo",
        "card-product-quick-add",
        "hamburger-drawer-accordion"
      ],
      "directions": [
        {
          "id": "washed-linen",
          "name": "Washed linen",
          "mood": "Soft, natural, slow fashion",
          "theme": "linen-shop",
          "pairing": "maison",
          "family": "editorial",
          "hero": "landing-fashion-atelier",
          "effect": "text-mask-line-reveal"
        },
        {
          "id": "noir-house",
          "name": "Noir house",
          "mood": "Luxury, black, a fragrance or a house",
          "theme": "atelier-noir",
          "pairing": "maison",
          "family": "editorial",
          "hero": "landing-fashion-atelier",
          "effect": "page-transition-tile-wipe"
        },
        {
          "id": "chrome-drop",
          "name": "Chrome drop",
          "mood": "Streetwear, a drop, Y2K",
          "theme": "y2k-chrome",
          "pairing": "y2k-chrome",
          "family": "glass",
          "hero": "hero-editorial-name-rotator",
          "effect": "scroll-scrub-product-sequence"
        },
        {
          "id": "blush-letter",
          "name": "Blush letter",
          "mood": "Romantic, bright, bridal or beauty",
          "theme": "sakura-desk",
          "pairing": "lettera",
          "family": "soft",
          "hero": "editorial-landing-hero",
          "effect": "overlap-slider"
        }
      ]
    },
    {
      "id": "food",
      "surface": "web",
      "title": "A food shop",
      "kicker": "Food",
      "blurb": "What is for sale, then the hours. A local shop, not a craft catalogue.",
      "when": "A kitchen, a stall, or a menu people order from.",
      "theme": "loam",
      "pairing": "garden-journal",
      "shelf": "first-impressions",
      "categories": [
        "ecommerce",
        "contact",
        "utility"
      ],
      "pieces": [
        "shop-collection",
        "shop-product",
        "shop-cart",
        "week-schedule",
        "contact-booking-hours",
        "card-product-quick-add",
        "mobile-web-bottom-nav",
        "navbar-split-centered-logo",
        "testimonials-masonry-wall",
        "tablet-pos-register",
        "tablet-cook-mode",
        "editorial-landing-hero",
        "hero-bauhaus-composition",
        "hero-asymmetric-type-lockup",
        "hero-silk-ribbon-ticker",
        "handwritten-homepage",
        "hero-swiss-grid-wordmark",
        "luxe-product-detail"
      ],
      "directions": [
        {
          "id": "garden-table",
          "name": "Garden table",
          "mood": "A farm kitchen, olive and cream, the season on the table",
          "theme": "loam",
          "pairing": "garden-journal",
          "family": "soft",
          "hero": "editorial-landing-hero",
          "effect": "hero-video-loop"
        },
        {
          "id": "market-zine",
          "name": "Market zine",
          "mood": "A stall, turmeric and tomato, a loud printed list",
          "theme": "market-stall",
          "pairing": "riso-zine",
          "family": "sharp",
          "hero": "hero-bauhaus-composition",
          "effect": "kinetic-type-marquee"
        },
        {
          "id": "clay-menu",
          "name": "Clay menu",
          "mood": "A kitchen with a point of view, clay and sand",
          "theme": "kiln",
          "pairing": "magazine-contrast",
          "family": "editorial",
          "hero": "hero-asymmetric-type-lockup",
          "effect": "stacking-cards-scroll"
        },
        {
          "id": "night-stall",
          "name": "Night stall",
          "mood": "The market after sunset, bulbs, what is left",
          "theme": "night-market",
          "pairing": "poster-condensed",
          "family": "sharp",
          "hero": "hero-silk-ribbon-ticker",
          "effect": "split-flap-board"
        },
        {
          "id": "pantry-letter",
          "name": "Pantry letter",
          "mood": "A small producer, a list in a hand, come by Thursday",
          "theme": "inkwell",
          "pairing": "letter-hand",
          "family": "soft",
          "hero": "handwritten-homepage",
          "effect": "text-annotated-underlines"
        },
        {
          "id": "cold-counter",
          "name": "Cold counter",
          "mood": "A precise grocer, ice and a grid, weights and prices",
          "theme": "ice-station",
          "pairing": "swiss-precision",
          "family": "quiet",
          "hero": "hero-swiss-grid-wordmark",
          "effect": null
        },
        {
          "id": "larder",
          "name": "Larder",
          "mood": "A dark pantry, one jar you can turn",
          "theme": "copper-works",
          "pairing": "atelier",
          "family": "editorial",
          "hero": "luxe-product-detail",
          "effect": "object-3d-turntable"
        }
      ]
    },
    {
      "id": "wellness",
      "surface": "web",
      "title": "Wellness",
      "kicker": "Stay",
      "blurb": "One retreat, the dates, a way to write.",
      "when": "A retreat, a studio class, or a clinic people book. Alpine Clinic, because this is a body. Loam is the food shop, so it loses.",
      "theme": "alpine-clinic",
      "pairing": "garden-journal",
      "shelf": "landing-pages",
      "categories": [
        "landing",
        "contact",
        "newsletter"
      ],
      "pieces": [
        "landing-wellness-retreat",
        "contact-booking-hours",
        "calendar-month",
        "newsletter-fold-inline",
        "navbar-split-centered-logo",
        "mobile-web-bottom-nav",
        "testimonials-masonry-wall",
        "faq-category-accordion",
        "tablet-kiosk-checkin",
        "calendar-week-planner",
        "editorial-landing-hero",
        "features-tabbed-preview",
        "hero-engraved-moonrise-plate",
        "week-schedule",
        "hero-asymmetric-type-lockup",
        "hero-chaptered-scenes",
        "bento-feature-grid"
      ],
      "directions": [
        {
          "id": "mint-air",
          "name": "Mint air",
          "mood": "A retreat, mint and teal, dates you can book",
          "theme": "alpine-clinic",
          "pairing": "garden-journal",
          "family": "soft",
          "hero": "landing-wellness-retreat",
          "effect": "parallax-layered-hero"
        },
        {
          "id": "glacier",
          "name": "Glacier",
          "mood": "Almost white, a quiet stay, the sentence carries it",
          "theme": "glacier",
          "pairing": "academic",
          "family": "quiet",
          "hero": "editorial-landing-hero",
          "effect": "scroll-word-highlight"
        },
        {
          "id": "greenhouse",
          "name": "Greenhouse",
          "mood": "Habits, soft green, a thing you log",
          "theme": "greenhouse",
          "pairing": "indie-maker",
          "family": "soft",
          "hero": "features-tabbed-preview",
          "effect": "stacking-cards-scroll"
        },
        {
          "id": "night-bath",
          "name": "Night bath",
          "mood": "A bathhouse after dark, engraved type, warm water",
          "theme": "alpine-night",
          "pairing": "literary",
          "family": "editorial",
          "hero": "hero-engraved-moonrise-plate",
          "effect": "hero-video-loop"
        },
        {
          "id": "studio-mat",
          "name": "Studio mat",
          "mood": "A class studio, linen, the week of sessions",
          "theme": "linen-shop",
          "pairing": "bookish",
          "family": "soft",
          "hero": "week-schedule",
          "effect": "text-mask-line-reveal"
        },
        {
          "id": "trail-day",
          "name": "Trail day",
          "mood": "A walk outside, rust and bone, the path is the page",
          "theme": "oxide",
          "pairing": "industrial-label",
          "family": "industrial",
          "hero": "hero-asymmetric-type-lockup",
          "effect": "scroll-velocity-type"
        },
        {
          "id": "sound-room",
          "name": "Sound room",
          "mood": "A dark room, navy and gold, chapters of quiet",
          "theme": "observatory",
          "pairing": "cinema",
          "family": "glass",
          "hero": "hero-chaptered-scenes",
          "effect": "webgl-shader-hero"
        },
        {
          "id": "small-movers",
          "name": "Small movers",
          "mood": "Kids moving, butter walls, a bright hall",
          "theme": "playroom",
          "pairing": "playground",
          "family": "soft",
          "hero": "bento-feature-grid",
          "effect": "spring-deck"
        }
      ]
    },
    {
      "id": "hotel",
      "surface": "web",
      "title": "A hotel",
      "kicker": "Stay",
      "blurb": "The room, the hours, a map. Bone type on black.",
      "when": "A hotel, a house, or a night people reserve.",
      "theme": "atelier-noir",
      "pairing": "maison",
      "shelf": "landing-pages",
      "categories": [
        "contact",
        "gallery",
        "pickers"
      ],
      "pieces": [
        "contact-booking-hours",
        "contact-split-map-form",
        "gallery-contact-sheet",
        "calendar-month",
        "masonry-gallery-captions",
        "navbar-split-centered-logo",
        "hamburger-drawer-accordion",
        "hero-search-marketplace",
        "landing-fashion-atelier",
        "hero-editorial-name-rotator",
        "editorial-landing-hero",
        "handwritten-homepage",
        "hero-engraved-moonrise-plate",
        "gallery-photo-album",
        "paper-article-reader"
      ],
      "directions": [
        {
          "id": "noir-maison",
          "name": "Noir maison",
          "mood": "Bone type on black, a city hotel, the room at night",
          "theme": "atelier-noir",
          "pairing": "maison",
          "family": "editorial",
          "hero": "landing-fashion-atelier",
          "effect": "hero-video-loop"
        },
        {
          "id": "velvet-bar",
          "name": "Velvet bar",
          "mood": "Burgundy and gold, a house with a bar",
          "theme": "velvet-club",
          "pairing": "deco-hotel",
          "family": "editorial",
          "hero": "hero-editorial-name-rotator",
          "effect": "page-transition-curtain"
        },
        {
          "id": "marble-stay",
          "name": "Marble stay",
          "mood": "White stone, a grand hotel, the hall first",
          "theme": "marble-hall",
          "pairing": "monumental",
          "family": "editorial",
          "hero": "editorial-landing-hero",
          "effect": "overlap-slider"
        },
        {
          "id": "inn-book",
          "name": "Inn book",
          "mood": "A small inn, a letter, the room written by hand",
          "theme": "inkwell",
          "pairing": "letter-hand",
          "family": "soft",
          "hero": "handwritten-homepage",
          "effect": "text-annotated-underlines"
        },
        {
          "id": "deco-afternoon",
          "name": "Deco afternoon",
          "mood": "Rose plaster, a gold rail, the afternoon sitting",
          "theme": "matinee",
          "pairing": "literary",
          "family": "editorial",
          "hero": "hero-engraved-moonrise-plate",
          "effect": "page-transition-tile-wipe"
        },
        {
          "id": "coast-house",
          "name": "Coast house",
          "mood": "Pale air, a house by the water, rooms you turn",
          "theme": "glacier",
          "pairing": "maison",
          "family": "quiet",
          "hero": "gallery-photo-album",
          "effect": "parallax-layered-hero"
        },
        {
          "id": "guest-book",
          "name": "Guest book",
          "mood": "Manila and a stamp, who stayed, a long quiet note",
          "theme": "archive",
          "pairing": "classic-garamond",
          "family": "editorial",
          "hero": "paper-article-reader",
          "effect": "scroll-reading-progress"
        }
      ]
    },
    {
      "id": "agency",
      "surface": "web",
      "title": "An agency",
      "kicker": "Studio",
      "blurb": "The work on the wall, the people, the open roles.",
      "when": "A studio selling the work, after dark.",
      "theme": "night-desk",
      "pairing": "brutal-grotesk",
      "shelf": "portfolio-sites",
      "categories": [
        "landing",
        "portfolio",
        "team"
      ],
      "pieces": [
        "landing-agency-case-wall",
        "brutalist-studio-home",
        "team-hover-portrait-grid",
        "portfolio-case-study-long",
        "careers-role-list",
        "navbar-vertical-rail",
        "hamburger-circle-reveal",
        "contact-project-brief-steps",
        "logos-grid-case-hover",
        "testimonials-masonry-wall",
        "architecture-studio-index"
      ],
      "directions": [
        {
          "id": "night-wall",
          "name": "Night wall",
          "mood": "Dark, confident, a case wall",
          "theme": "night-desk",
          "pairing": "brutal-grotesk",
          "family": "sharp",
          "hero": "landing-agency-case-wall",
          "effect": "smooth-scroll-inertia"
        },
        {
          "id": "paper-brutal",
          "name": "Paper brutal",
          "mood": "Black on white, uppercase, opinionated",
          "theme": "paper-ink",
          "pairing": "brutal-grotesk",
          "family": "sharp",
          "hero": "brutalist-studio-home",
          "effect": "kinetic-type-marquee"
        },
        {
          "id": "festival-studio",
          "name": "Festival studio",
          "mood": "Colourful, playful, a creative studio",
          "theme": "festival",
          "pairing": "studio-display",
          "family": "soft",
          "hero": "hero-bauhaus-composition",
          "effect": "preloader-counter-intro"
        },
        {
          "id": "copper-works",
          "name": "Copper works",
          "mood": "Industrial, warm dark, a product studio",
          "theme": "copper-works",
          "pairing": "neo-grotesk-mono",
          "family": "sharp",
          "hero": "hero-swiss-grid-wordmark",
          "effect": "page-transition-tile-wipe"
        }
      ]
    },
    {
      "id": "docs",
      "surface": "web",
      "title": "Documentation",
      "kicker": "Docs",
      "blurb": "Three columns, a snippet, a way to search the tree.",
      "when": "A guide, an API, or a changelog people keep open.",
      "theme": "fog-city",
      "pairing": "developer-docs",
      "shelf": "typography-first",
      "categories": [
        "reading",
        "navigation",
        "utility"
      ],
      "pieces": [
        "docs-three-column",
        "code-snippet-tabs",
        "command-palette",
        "search-results-filters",
        "tree-nav",
        "sidebar-docs-toc",
        "navbar-hide-on-scroll",
        "faq-category-accordion",
        "terminal-ui-style",
        "paper-article-reader",
        "docs-hatched-gutter-shell",
        "docs-install-steps",
        "blog-issue-index",
        "book-page-flip"
      ],
      "directions": [
        {
          "id": "cobalt-docs",
          "name": "Cobalt docs",
          "mood": "A clear reader, three columns, civic gray",
          "theme": "fog-city",
          "pairing": "developer-docs",
          "family": "quiet",
          "hero": "docs-three-column",
          "effect": null
        },
        {
          "id": "phosphor-docs",
          "name": "Phosphor docs",
          "mood": "A terminal, phosphor on soot, a CLI",
          "theme": "signal-green",
          "pairing": "terminal-native",
          "family": "sharp",
          "hero": "terminal-ui-style",
          "effect": null
        },
        {
          "id": "paper-docs",
          "name": "Paper docs",
          "mood": "A long page, warm paper, research you read",
          "theme": "paper-ink",
          "pairing": "academic",
          "family": "editorial",
          "hero": "paper-article-reader",
          "effect": "scroll-reading-progress"
        },
        {
          "id": "hatched-api",
          "name": "Hatched API",
          "mood": "A dark reference, hatched gutters, an API you keep open",
          "theme": "night-desk",
          "pairing": "signal-mono",
          "family": "sharp",
          "hero": "docs-hatched-gutter-shell",
          "effect": null
        },
        {
          "id": "install-first",
          "name": "Install first",
          "mood": "The first screen is the install, lime on charcoal",
          "theme": "circuit",
          "pairing": "wide-tech",
          "family": "sharp",
          "hero": "docs-install-steps",
          "effect": "text-scramble-reveal"
        },
        {
          "id": "civic-manual",
          "name": "Civic manual",
          "mood": "A public guide, pale and severe, the contents on the left",
          "theme": "ice-station",
          "pairing": "red-hat",
          "family": "quiet",
          "hero": "sidebar-docs-toc",
          "effect": null
        },
        {
          "id": "changelog",
          "name": "Changelog",
          "mood": "Shipped notes, newsprint, an issue at a time",
          "theme": "press-room",
          "pairing": "newsroom",
          "family": "editorial",
          "hero": "blog-issue-index",
          "effect": null
        },
        {
          "id": "research-note",
          "name": "Research note",
          "mood": "A paper you turn, manila, the source in the margin",
          "theme": "archive",
          "pairing": "classic-garamond",
          "family": "editorial",
          "hero": "book-page-flip",
          "effect": "text-marker-highlight-draw"
        }
      ]
    },
    {
      "id": "music",
      "surface": "web",
      "title": "A music site",
      "kicker": "Music",
      "blurb": "The showreel, a moving line, a player in the corner.",
      "when": "A label, a release, or a night. Neon, not a paper magazine.",
      "theme": "neon-alley",
      "pairing": "y2k-chrome",
      "shelf": "portfolio-sites",
      "categories": [
        "portfolio",
        "text-motion",
        "media"
      ],
      "pieces": [
        "portfolio-motion-showreel",
        "kinetic-type-marquee",
        "corner-player",
        "coverflow-strip",
        "logos-mono-marquee",
        "event-ticket-checkout",
        "hero-editorial-name-rotator",
        "hero-bauhaus-composition",
        "luxe-product-detail",
        "week-schedule",
        "handwritten-homepage",
        "paper-article-reader",
        "hero-silk-ribbon-ticker"
      ],
      "directions": [
        {
          "id": "neon-tube",
          "name": "Neon tube",
          "mood": "A wet street, magenta and cyan, the name in lights",
          "theme": "neon-alley",
          "pairing": "y2k-chrome",
          "family": "glass",
          "hero": "hero-editorial-name-rotator",
          "effect": "kinetic-type-marquee"
        },
        {
          "id": "gig-poster",
          "name": "Gig poster",
          "mood": "A tour, condensed type, one loud poster",
          "theme": "festival",
          "pairing": "poster-condensed",
          "family": "sharp",
          "hero": "hero-bauhaus-composition",
          "effect": "variable-font-proximity"
        },
        {
          "id": "observatory",
          "name": "Observatory",
          "mood": "A record label, navy and gold, the reel first",
          "theme": "observatory",
          "pairing": "cinema",
          "family": "editorial",
          "hero": "portfolio-motion-showreel",
          "effect": "webgl-shader-hero"
        },
        {
          "id": "vinyl-day",
          "name": "Vinyl day",
          "mood": "Linen, one record, the sleeve is the page",
          "theme": "linen-shop",
          "pairing": "maison",
          "family": "editorial",
          "hero": "luxe-product-detail",
          "effect": "overlap-slider"
        },
        {
          "id": "tour-dates",
          "name": "Tour dates",
          "mood": "A run of dates, the board of where they play",
          "theme": "press-room",
          "pairing": "newsroom",
          "family": "editorial",
          "hero": "week-schedule",
          "effect": "split-flap-board"
        },
        {
          "id": "bedroom-label",
          "name": "Bedroom label",
          "mood": "A small label, a letter, blush paper",
          "theme": "sakura-desk",
          "pairing": "indie-maker",
          "family": "soft",
          "hero": "handwritten-homepage",
          "effect": "text-annotated-underlines"
        },
        {
          "id": "score-desk",
          "name": "Score desk",
          "mood": "A composer, warm paper, the work is something you read",
          "theme": "paper-ink",
          "pairing": "classic-garamond",
          "family": "editorial",
          "hero": "paper-article-reader",
          "effect": "scroll-reading-progress"
        },
        {
          "id": "chrome-mixtape",
          "name": "Chrome mixtape",
          "mood": "Ice silver, a drop, covers you can flip",
          "theme": "y2k-chrome",
          "pairing": "wide-tech",
          "family": "glass",
          "hero": "hero-silk-ribbon-ticker",
          "effect": "coverflow-strip"
        }
      ]
    },
    {
      "id": "personal-site",
      "surface": "web",
      "title": "A personal site",
      "kicker": "Personal",
      "blurb": "A name, a journal, one essay. Not a showreel.",
      "when": "A person, not a studio. The writing is the work.",
      "theme": "sakura-desk",
      "pairing": "the-lounge",
      "shelf": "typography-first",
      "categories": [
        "profile",
        "blog",
        "reading",
        "newsletter"
      ],
      "pieces": [
        "profile-creator-masthead",
        "blog-issue-index",
        "paper-article-reader",
        "newsletter-close-band",
        "hero-editorial-name-rotator",
        "card-article-mix",
        "navbar-vertical-rail",
        "error-404-editorial"
      ],
      "directions": [
        {
          "id": "sakura-essay",
          "name": "Sakura essay",
          "mood": "A writer, blush paper",
          "theme": "sakura-desk",
          "pairing": "the-lounge",
          "family": "editorial",
          "hero": "hero-editorial-name-rotator",
          "effect": "scroll-word-highlight"
        },
        {
          "id": "margin-notes",
          "name": "Margin notes",
          "mood": "Handwritten, warm, a notebook",
          "theme": "paper-ink",
          "pairing": "handwritten-notes",
          "family": "soft",
          "hero": "profile-creator-masthead",
          "effect": "text-marker-highlight-draw"
        },
        {
          "id": "greenhouse-journal",
          "name": "Greenhouse journal",
          "mood": "Soft green, a slow blog",
          "theme": "greenhouse",
          "pairing": "bookish",
          "family": "quiet",
          "hero": "editorial-landing-hero",
          "effect": "scroll-reading-progress"
        },
        {
          "id": "inkwell-letter",
          "name": "Inkwell letter",
          "mood": "The whole site is a letter in their hand",
          "theme": "inkwell",
          "pairing": "letter-hand",
          "family": "soft",
          "hero": "handwritten-homepage",
          "effect": "text-annotated-underlines"
        },
        {
          "id": "night-reader",
          "name": "Night reader",
          "mood": "A late writer, warm dark, long reads",
          "theme": "reading-room",
          "pairing": "classic-garamond",
          "family": "editorial",
          "hero": "paper-article-reader",
          "effect": "text-rise-underline-whisper"
        },
        {
          "id": "poster-self",
          "name": "Poster self",
          "mood": "Loud, a person as a gig poster",
          "theme": "festival-night",
          "pairing": "poster-condensed",
          "family": "sharp",
          "hero": "hero-silk-ribbon-ticker",
          "effect": "kinetic-type-marquee"
        }
      ]
    },
    {
      "id": "event",
      "surface": "web",
      "title": "An event",
      "kicker": "Night",
      "blurb": "The date, the board, one ask.",
      "when": "A festival, a launch night, or a programme with hours.",
      "theme": "festival",
      "pairing": "poster-condensed",
      "shelf": "first-impressions",
      "categories": [
        "utility",
        "text-motion",
        "stats",
        "cta"
      ],
      "pieces": [
        "week-schedule",
        "split-flap-board",
        "kinetic-type-marquee",
        "stats-ticker-band",
        "cta-split-dark-band",
        "card-holo-foil",
        "mobile-web-bottom-nav",
        "stats-count-up-band",
        "faq-category-accordion",
        "event-ticket-checkout",
        "hero-bauhaus-composition",
        "hero-flashlight-reveal",
        "hero-swiss-grid-wordmark",
        "editorial-landing-hero",
        "hero-editorial-name-rotator",
        "hero-chaptered-scenes",
        "bento-feature-grid"
      ],
      "directions": [
        {
          "id": "festival",
          "name": "Festival",
          "mood": "Fluoro pink, a drum, a weekend on a poster",
          "theme": "festival",
          "pairing": "poster-condensed",
          "family": "sharp",
          "hero": "hero-bauhaus-composition",
          "effect": "split-flap-board"
        },
        {
          "id": "night-marquee",
          "name": "Night marquee",
          "mood": "A club night, neon, the sign in the dark",
          "theme": "neon-alley",
          "pairing": "neon-marquee",
          "family": "glass",
          "hero": "hero-flashlight-reveal",
          "effect": "kinetic-type-marquee"
        },
        {
          "id": "film-week",
          "name": "Film week",
          "mood": "A programme, newsprint and one red, the film",
          "theme": "press-room",
          "pairing": "cinema",
          "family": "editorial",
          "hero": "hero-swiss-grid-wordmark",
          "effect": "hero-video-loop"
        },
        {
          "id": "garden-fete",
          "name": "Garden fete",
          "mood": "A day outside, olive and cream, the field is the room",
          "theme": "loam",
          "pairing": "garden-journal",
          "family": "soft",
          "hero": "editorial-landing-hero",
          "effect": "parallax-layered-hero"
        },
        {
          "id": "ticket-hall",
          "name": "Ticket hall",
          "mood": "A formal night, burgundy and gold, the name on the door",
          "theme": "velvet-club",
          "pairing": "deco-hotel",
          "family": "editorial",
          "hero": "hero-editorial-name-rotator",
          "effect": "page-transition-curtain"
        },
        {
          "id": "workshop-day",
          "name": "Workshop day",
          "mood": "A day of sessions, clay, one thing then the next",
          "theme": "kiln",
          "pairing": "industrial-label",
          "family": "industrial",
          "hero": "week-schedule",
          "effect": "stacking-cards-scroll"
        },
        {
          "id": "listening-night",
          "name": "Listening night",
          "mood": "A dark room, chapters, records in a row",
          "theme": "observatory",
          "pairing": "cinema",
          "family": "editorial",
          "hero": "hero-chaptered-scenes",
          "effect": "coverflow-strip"
        },
        {
          "id": "school-fair",
          "name": "School fair",
          "mood": "A bright weekend, butter and coral, many small stalls",
          "theme": "playroom",
          "pairing": "playground",
          "family": "soft",
          "hero": "bento-feature-grid",
          "effect": "spring-deck"
        }
      ]
    },
    {
      "id": "museum",
      "surface": "web",
      "title": "A museum",
      "kicker": "Rooms",
      "blurb": "The works, a caption, a long note.",
      "when": "A gallery, a collection, or a room people walk.",
      "theme": "marble-hall",
      "pairing": "the-lounge",
      "shelf": "portfolio-sites",
      "categories": [
        "gallery",
        "reading",
        "hero"
      ],
      "pieces": [
        "masonry-gallery-captions",
        "gallery-contact-sheet",
        "pan-canvas",
        "editorial-landing-hero",
        "paper-article-reader",
        "hero-asymmetric-type-lockup",
        "hero-bauhaus-composition",
        "gallery-museum-placard",
        "gallery-film-strip",
        "hero-engraved-moonrise-plate",
        "hero-layered-letter-swap"
      ],
      "directions": [
        {
          "id": "marble-hall",
          "name": "Marble hall",
          "mood": "White stone, a brass plaque, the hall",
          "theme": "marble-hall",
          "pairing": "the-lounge",
          "family": "editorial",
          "hero": "editorial-landing-hero",
          "effect": "pan-canvas"
        },
        {
          "id": "archive-room",
          "name": "Archive room",
          "mood": "Heritage, a collection, the long note",
          "theme": "archive",
          "pairing": "monumental",
          "family": "editorial",
          "hero": "hero-asymmetric-type-lockup",
          "effect": "text-mask-line-reveal"
        },
        {
          "id": "night-gallery",
          "name": "Night gallery",
          "mood": "Modern art, navy, Bauhaus shapes",
          "theme": "observatory",
          "pairing": "bauhaus-school",
          "family": "sharp",
          "hero": "hero-bauhaus-composition",
          "effect": "scroll-zoom-portal"
        },
        {
          "id": "placard-wall",
          "name": "Placard wall",
          "mood": "After closing, dark stone, a work and its plaque",
          "theme": "basalt-hall",
          "pairing": "monumental",
          "family": "editorial",
          "hero": "gallery-museum-placard",
          "effect": "scroll-word-highlight"
        },
        {
          "id": "contact-study",
          "name": "Contact study",
          "mood": "Many frames, newsprint, a sheet you scan",
          "theme": "press-room",
          "pairing": "newsroom",
          "family": "editorial",
          "hero": "gallery-contact-sheet",
          "effect": "grow-grid"
        },
        {
          "id": "film-room",
          "name": "Film room",
          "mood": "A dark gallery, a strip of film, one loop",
          "theme": "night-desk",
          "pairing": "cinema",
          "family": "editorial",
          "hero": "gallery-film-strip",
          "effect": "hero-video-loop"
        },
        {
          "id": "reading-room",
          "name": "Reading room",
          "mood": "A library room, manila, a long note beside the object",
          "theme": "reading-room",
          "pairing": "classic-garamond",
          "family": "editorial",
          "hero": "paper-article-reader",
          "effect": "scroll-reading-progress"
        },
        {
          "id": "courtyard",
          "name": "Courtyard",
          "mood": "A garden court, olive and cream, you move through it",
          "theme": "loam",
          "pairing": "garden-journal",
          "family": "soft",
          "hero": "hero-engraved-moonrise-plate",
          "effect": "parallax-layered-hero"
        },
        {
          "id": "kids-hall",
          "name": "Kids hall",
          "mood": "A bright room, shapes, a thing to touch",
          "theme": "playroom",
          "pairing": "playground",
          "family": "soft",
          "hero": "hero-layered-letter-swap",
          "effect": "spring-deck"
        }
      ]
    },
    {
      "id": "landing",
      "surface": "web",
      "title": "A landing page",
      "kicker": "Launch",
      "blurb": "One argument, one sitting. Fashion, wellness, fintech, a tool, an agency — each a complete first page.",
      "when": "A launch, a waitlist, or one product page, including a tilt, a sticky scroll, or a hover on the product.",
      "theme": "atelier-noir",
      "pairing": "maison",
      "shelf": "landing-pages",
      "categories": [
        "landing",
        "hero",
        "cta"
      ],
      "pieces": [
        "landing-fashion-atelier",
        "landing-wellness-retreat",
        "landing-fintech-light",
        "landing-devtool-dark",
        "landing-agency-case-wall",
        "editorial-landing-hero",
        "hero-split-ui-stack",
        "cta-giant-email-band",
        "stats-count-up-band"
      ],
      "directions": [
        {
          "id": "noir-launch",
          "name": "Noir launch",
          "mood": "Luxury, dark, one product",
          "theme": "atelier-noir",
          "pairing": "maison",
          "family": "editorial",
          "hero": "landing-fashion-atelier",
          "effect": "scroll-scrub-product-sequence"
        },
        {
          "id": "clay-launch",
          "name": "Clay launch",
          "mood": "Warm, crafted, a maker",
          "theme": "kiln",
          "pairing": "studio-display",
          "family": "soft",
          "hero": "editorial-landing-hero",
          "effect": "stacking-cards-scroll"
        },
        {
          "id": "grid-launch",
          "name": "Grid launch",
          "mood": "Precise, cool, a hardware launch",
          "theme": "ice-station",
          "pairing": "swiss-precision",
          "family": "sharp",
          "hero": "hero-swiss-grid-wordmark",
          "effect": "scroll-velocity-type"
        },
        {
          "id": "toy-launch",
          "name": "Toy launch",
          "mood": "Playful, butter and coral",
          "theme": "playroom",
          "pairing": "candy-clay",
          "family": "soft",
          "hero": "hero-bauhaus-composition",
          "effect": "scroll-zoom-portal"
        }
      ]
    },
    {
      "id": "mobile-app",
      "surface": "app",
      "title": "A mobile app",
      "kicker": "App",
      "blurb": "iOS 26 glass and Material 3 Expressive, plus the PWA moments in between. Native feel, web materials.",
      "when": "A phone product that should feel shipped, not like a website squeezed into 390px. Motion on a phone is a native piece, not a cursor.",
      "theme": "alpine-clinic",
      "pairing": "geometric-modern",
      "shelf": "native-feel",
      "categories": [
        "navigation",
        "overlays",
        "media",
        "onboarding",
        "settings"
      ],
      "pieces": [
        "ios-weather-hourly-scrub",
        "ios-glass-tab-bar",
        "mobile-inbox-list",
        "mobile-run-detail",
        "mobile-list-empty",
        "mobile-load-failed",
        "m3-expressive-home",
        "ios-onboarding-carousel",
        "pwa-install-sheet",
        "phone-splash-launch",
        "phone-sign-in",
        "phone-sign-up-steps",
        "phone-profile-header",
        "phone-notifications-list",
        "phone-permission-prompt",
        "m3-navigation-bar",
        "phone-form-fields",
        "phone-search-results",
        "phone-feed-posts",
        "phone-calendar-agenda",
        "phone-booking-slots",
        "phone-account-edit",
        "phone-notification-settings",
        "phone-large-text-layout",
        "m3-sign-in",
        "m3-settings-list",
        "phone-forgot-password",
        "phone-code-entry",
        "phone-skeleton-list",
        "m3-dialog",
        "m3-snackbar",
        "m3-search-results",
        "bento-feature-grid",
        "ai-chat-workspace",
        "pwa-app-shell"
      ],
      "directions": [
        {
          "id": "mint-app",
          "name": "Mint app",
          "mood": "Calm and clinical, a warm home you tap through",
          "theme": "alpine-clinic",
          "pairing": "geometric-modern",
          "family": "soft",
          "hero": "m3-expressive-home",
          "effect": "m3-container-transform"
        },
        {
          "id": "cobalt-glass",
          "name": "Cobalt glass",
          "mood": "iOS, glass bars, a shell you live in",
          "theme": "fog-city",
          "pairing": "friendly-saas",
          "family": "glass",
          "hero": "pwa-app-shell",
          "effect": "ios-large-title-collapse"
        },
        {
          "id": "toy-app",
          "name": "Toy app",
          "mood": "Butter and coral, many small things on one shelf",
          "theme": "playroom",
          "pairing": "candy-clay",
          "family": "soft",
          "hero": "bento-feature-grid",
          "effect": "spring-deck"
        },
        {
          "id": "night-tool",
          "name": "Night tool",
          "mood": "A desk after dark, a conversation with the work",
          "theme": "night-desk",
          "pairing": "signal-mono",
          "family": "sharp",
          "hero": "ai-chat-workspace",
          "effect": "text-scramble-reveal"
        },
        {
          "id": "paper-days",
          "name": "Paper days",
          "mood": "A paper week, the agenda, warm and quiet",
          "theme": "paper-ink",
          "pairing": "the-lounge",
          "family": "editorial",
          "hero": "phone-calendar-agenda",
          "effect": "text-marker-highlight-draw"
        },
        {
          "id": "yard-hand",
          "name": "Yard hand",
          "mood": "A job in the hand, concrete and orange, the next stop",
          "theme": "cinder",
          "pairing": "industrial-label",
          "family": "industrial",
          "hero": "mobile-run-detail",
          "effect": null
        }
      ]
    },
    {
      "id": "design-system",
      "surface": "web",
      "title": "A design system",
      "kicker": "System",
      "blurb": "Start with a language kit, then lock type, colour, icons and motion before drawing a single screen.",
      "when": "A new product needs a grammar — tokens and taste — before components.",
      "theme": "paper-ink",
      "pairing": "the-lounge",
      "shelf": "design-languages",
      "categories": [
        "design-language"
      ],
      "pieces": [
        "paper-ink-style",
        "luxe-serif-style",
        "terminal-ui-style",
        "clay-soft-style",
        "y2k-chrome-style",
        "bauhaus-style",
        "sidebar-docs-toc"
      ],
      "directions": [
        {
          "id": "paper-system",
          "name": "Paper system",
          "mood": "Editorial, warm",
          "theme": "paper-ink",
          "pairing": "the-lounge",
          "family": "editorial",
          "effect": null
        },
        {
          "id": "cobalt-system",
          "name": "Cobalt system",
          "mood": "Neutral, product",
          "theme": "fog-city",
          "pairing": "geometric-modern",
          "family": "quiet",
          "effect": null
        },
        {
          "id": "night-system",
          "name": "Night system",
          "mood": "Dark, technical",
          "theme": "night-desk",
          "pairing": "signal-mono",
          "family": "sharp",
          "effect": null
        }
      ]
    },
    {
      "id": "dashboard",
      "surface": "web",
      "title": "A dashboard",
      "kicker": "Product",
      "blurb": "Dense tables, one metric, a collapsing rail, a board. A finance palette with a dashboard face, not a docs face.",
      "when": "An internal tool, analytics home, or ops screen people will live in all day.",
      "theme": "harbour-ledger",
      "pairing": "swiss-precision",
      "shelf": "dashboards-and-data",
      "categories": [
        "dashboard",
        "data",
        "charts",
        "navigation"
      ],
      "pieces": [
        "analytics-dashboard-overview",
        "dense-data-table",
        "charts-kpi-spark-row",
        "chart-bar-week",
        "chart-line-range",
        "chart-rank-spend",
        "kpi-delta",
        "collapsing-sidebar-rail",
        "audit-activity-log",
        "upload-file-queue",
        "account-menu-panel",
        "record-detail-header",
        "people-role-list",
        "billing-plan-summary",
        "list-empty-plain",
        "load-failed-retry",
        "saved-banner",
        "kanban-board",
        "sidebar-workspace-switcher",
        "ai-chat-workspace",
        "settings-team-members",
        "file-upload-manager",
        "calendar-week-planner",
        "onboarding-workspace-setup",
        "crypto-exchange-trade",
        "card-terminal-log"
      ],
      "directions": [
        {
          "id": "harbour-desk",
          "name": "Harbour desk",
          "mood": "Finance ops, navy and brass, the numbers first",
          "theme": "harbour-ledger",
          "pairing": "swiss-precision",
          "family": "sharp",
          "hero": "analytics-dashboard-overview",
          "effect": null
        },
        {
          "id": "night-ops",
          "name": "Night ops",
          "mood": "Engineers, a dark desk, the log of what changed",
          "theme": "night-desk",
          "pairing": "developer-docs",
          "family": "sharp",
          "hero": "audit-activity-log",
          "effect": null
        },
        {
          "id": "yard",
          "name": "Yard",
          "mood": "Logistics, safety orange, the jobs on a board",
          "theme": "cinder",
          "pairing": "industrial-label",
          "family": "industrial",
          "hero": "kanban-board",
          "effect": null
        },
        {
          "id": "civic",
          "name": "Civic",
          "mood": "An admin that lasts, cool gray, the records",
          "theme": "fog-city",
          "pairing": "red-hat",
          "family": "quiet",
          "hero": "dense-data-table",
          "effect": null
        },
        {
          "id": "paper-office",
          "name": "Paper office",
          "mood": "A quiet office, warm paper, the people and their roles",
          "theme": "paper-ink",
          "pairing": "academic",
          "family": "editorial",
          "hero": "people-role-list",
          "effect": null
        },
        {
          "id": "signal-ops",
          "name": "Signal ops",
          "mood": "A terminal, phosphor on soot, the log is the screen",
          "theme": "signal-green",
          "pairing": "terminal-native",
          "family": "sharp",
          "hero": "card-terminal-log",
          "effect": null
        }
      ]
    },
    {
      "id": "web-app",
      "surface": "web",
      "title": "A web app",
      "kicker": "Product",
      "blurb": "The product people log into. A sidebar, the work, an empty state, the account.",
      "when": "The app itself, in a browser. Not the marketing site (that is saas) and not a staff dashboard.",
      "theme": "fog-city",
      "pairing": "friendly-saas",
      "shelf": "dashboards-and-data",
      "categories": [
        "navigation",
        "dashboard",
        "settings",
        "utility"
      ],
      "pieces": [
        "sidebar-workspace-switcher",
        "collapsing-sidebar-rail",
        "command-palette",
        "kanban-board",
        "ai-chat-workspace",
        "tablet-notes-three-pane",
        "dense-data-table",
        "list-empty-plain",
        "load-failed-retry",
        "saved-banner",
        "account-menu-panel",
        "settings-page-sticky-nav",
        "onboarding-workspace-setup",
        "file-upload-manager"
      ],
      "directions": [
        {
          "id": "cobalt-app",
          "name": "Cobalt app",
          "mood": "A calm tool people keep open, a sidebar and the work",
          "theme": "fog-city",
          "pairing": "friendly-saas",
          "family": "quiet",
          "hero": "sidebar-workspace-switcher",
          "effect": null
        },
        {
          "id": "night-console",
          "name": "Night console",
          "mood": "A dark desk, the command palette is the front door",
          "theme": "night-desk",
          "pairing": "developer-docs",
          "family": "sharp",
          "hero": "command-palette",
          "effect": null
        },
        {
          "id": "paper-notes",
          "name": "Paper notes",
          "mood": "Writing first, warm paper, the page is the product",
          "theme": "paper-ink",
          "pairing": "bookish",
          "family": "editorial",
          "hero": "tablet-notes-three-pane",
          "effect": "scroll-reading-progress"
        },
        {
          "id": "kanban-room",
          "name": "Kanban room",
          "mood": "A small team, clay, the work is cards on a wall",
          "theme": "kiln",
          "pairing": "indie-maker",
          "family": "soft",
          "hero": "kanban-board",
          "effect": null
        },
        {
          "id": "chat-work",
          "name": "Chat work",
          "mood": "The product is a conversation with the work, lime on charcoal",
          "theme": "circuit",
          "pairing": "signal-mono",
          "family": "sharp",
          "hero": "ai-chat-workspace",
          "effect": null
        },
        {
          "id": "records",
          "name": "Records",
          "mood": "A public tool, pale and plain, one table people finish",
          "theme": "ice-station",
          "pairing": "academic",
          "family": "quiet",
          "hero": "dense-data-table",
          "effect": null
        }
      ]
    },
    {
      "id": "commerce",
      "surface": "web",
      "title": "A shop",
      "kicker": "Commerce",
      "blurb": "Collection, one product, the bag, then checkout. The name is the largest type. The total is the largest type on the bag.",
      "when": "A product, a bowl, a kit — something people buy without a carnival.",
      "theme": "kiln",
      "pairing": "atelier",
      "shelf": "first-impressions",
      "categories": [
        "ecommerce",
        "pricing",
        "cta"
      ],
      "pieces": [
        "shop-collection",
        "shop-product",
        "shop-cart",
        "qty-stepper",
        "mobile-one-page-checkout",
        "order-confirmed",
        "luxe-product-detail",
        "select-field",
        "card-product-quick-add",
        "hamburger-drawer-accordion",
        "mega-menu-product-grid",
        "faq-category-accordion",
        "footer-sitemap-columns"
      ],
      "directions": [
        {
          "id": "clay-shop",
          "name": "Clay shop",
          "mood": "Handmade, warm, a studio shop",
          "theme": "kiln",
          "pairing": "atelier",
          "family": "soft",
          "hero": "shop-collection",
          "effect": "staggered-list-reveal"
        },
        {
          "id": "linen-boutique",
          "name": "Linen boutique",
          "mood": "Soft luxury, fashion and home",
          "theme": "linen-shop",
          "pairing": "maison",
          "family": "editorial",
          "hero": "luxe-product-detail",
          "effect": "overlap-slider"
        },
        {
          "id": "market-stall",
          "name": "Market stall",
          "mood": "Loud, local, groceries and merch",
          "theme": "market-stall",
          "pairing": "riso-zine",
          "family": "sharp",
          "hero": "shop-collection",
          "effect": "kinetic-type-marquee"
        },
        {
          "id": "noir-counter",
          "name": "Noir counter",
          "mood": "Watches, fragrance, a dark counter",
          "theme": "atelier-noir",
          "pairing": "gallery-wall",
          "family": "editorial",
          "hero": "luxe-product-detail",
          "effect": "object-3d-turntable"
        }
      ]
    },
    {
      "id": "tablet",
      "surface": "app",
      "title": "A tablet",
      "kicker": "Tablet",
      "blurb": "Landscape. A split, a sidebar, a reader, a tool palette, an ops grid. Not a phone layout pulled wide.",
      "when": "Someone holds the product in two hands. The frame is 1180 wide, and a phone list does not belong there.",
      "theme": "press-room",
      "pairing": "newsroom",
      "shelf": "navigation-sorted",
      "categories": [
        "reading",
        "messaging",
        "navigation",
        "dashboard"
      ],
      "pieces": [
        "tablet-two-column-reader",
        "tablet-split-view-mail",
        "tablet-sidebar-overlay-pin",
        "tablet-floating-tool-palette",
        "tablet-dashboard-grid",
        "tablet-pos-register",
        "tablet-notes-three-pane",
        "tablet-cook-mode",
        "tablet-kiosk-checkin"
      ],
      "directions": [
        {
          "id": "press-tablet",
          "name": "Press tablet",
          "mood": "Reading, newsprint, two columns",
          "theme": "press-room",
          "pairing": "newsroom",
          "family": "editorial",
          "hero": "tablet-two-column-reader",
          "effect": null
        },
        {
          "id": "cobalt-tablet",
          "name": "Cobalt tablet",
          "mood": "Work mail, a list and the letter beside it",
          "theme": "fog-city",
          "pairing": "geometric-modern",
          "family": "quiet",
          "hero": "tablet-split-view-mail",
          "effect": null
        },
        {
          "id": "night-tablet",
          "name": "Night tablet",
          "mood": "A dark ops grid, numbers you live in",
          "theme": "night-desk",
          "pairing": "developer-docs",
          "family": "sharp",
          "hero": "tablet-dashboard-grid",
          "effect": null
        },
        {
          "id": "kitchen",
          "name": "Kitchen",
          "mood": "A recipe in two hands, clay, the step is huge",
          "theme": "kiln",
          "pairing": "garden-journal",
          "family": "soft",
          "hero": "tablet-cook-mode",
          "effect": null
        },
        {
          "id": "counter",
          "name": "Counter",
          "mood": "A stall, the register, turmeric and tomato",
          "theme": "market-stall",
          "pairing": "poster-condensed",
          "family": "industrial",
          "hero": "tablet-pos-register",
          "effect": null
        },
        {
          "id": "studio-tools",
          "name": "Studio tools",
          "mood": "A drawing desk, linen, tools that float",
          "theme": "linen-shop",
          "pairing": "atelier",
          "family": "editorial",
          "hero": "tablet-floating-tool-palette",
          "effect": null
        },
        {
          "id": "notes",
          "name": "Notes",
          "mood": "A notebook in three panes, warm paper",
          "theme": "paper-ink",
          "pairing": "bookish",
          "family": "quiet",
          "hero": "tablet-notes-three-pane",
          "effect": "scroll-reading-progress"
        },
        {
          "id": "lobby",
          "name": "Lobby",
          "mood": "A stone desk, check in, a name and a time",
          "theme": "marble-hall",
          "pairing": "maison",
          "family": "editorial",
          "hero": "tablet-kiosk-checkin",
          "effect": null
        }
      ]
    },
    {
      "id": "editorial",
      "surface": "web",
      "title": "An editorial product",
      "kicker": "Reading",
      "blurb": "Type does the work: magazine grids, kinetic headlines, a reader with a proper measure.",
      "when": "A magazine, a journal, a long-read product where the type is the design.",
      "theme": "press-room",
      "pairing": "newsroom",
      "shelf": "typography-first",
      "categories": [
        "blog",
        "reading",
        "hero",
        "text-motion"
      ],
      "pieces": [
        "editorial-landing-hero",
        "paper-article-reader",
        "magazine-editorial-grid",
        "blog-issue-index",
        "kinetic-type-marquee",
        "text-scramble-reveal",
        "hero-editorial-name-rotator",
        "pwa-offline-library",
        "error-404-editorial",
        "book-page-flip",
        "card-magazine-cover",
        "card-journal-page",
        "hero-asymmetric-type-lockup",
        "hero-bauhaus-composition"
      ],
      "directions": [
        {
          "id": "press-room",
          "name": "Press room",
          "mood": "Newsprint and one red, the late story",
          "theme": "press-room",
          "pairing": "newsroom",
          "family": "editorial",
          "hero": "editorial-landing-hero",
          "effect": "scroll-reading-progress"
        },
        {
          "id": "archive",
          "name": "Archive",
          "mood": "Manila and Garamond, a piece you sit with",
          "theme": "archive",
          "pairing": "classic-garamond",
          "family": "editorial",
          "hero": "hero-asymmetric-type-lockup",
          "effect": "text-marker-highlight-draw"
        },
        {
          "id": "riso-zine",
          "name": "Riso zine",
          "mood": "Two inks, a loud issue, photocopied",
          "theme": "festival",
          "pairing": "riso-zine",
          "family": "sharp",
          "hero": "hero-bauhaus-composition",
          "effect": "kinetic-type-marquee"
        },
        {
          "id": "late-edition",
          "name": "Late edition",
          "mood": "Press black, the same red, a page you turn",
          "theme": "night-edition",
          "pairing": "magazine-contrast",
          "family": "editorial",
          "hero": "book-page-flip",
          "effect": "text-mask-line-reveal"
        },
        {
          "id": "sunday-cover",
          "name": "Sunday cover",
          "mood": "One issue, blush paper, the cover is the page",
          "theme": "sakura-desk",
          "pairing": "literary",
          "family": "editorial",
          "hero": "card-magazine-cover",
          "effect": "overlap-slider"
        },
        {
          "id": "field-journal",
          "name": "Field journal",
          "mood": "Olive paper, notes from outside, a hand in the margin",
          "theme": "loam",
          "pairing": "garden-journal",
          "family": "soft",
          "hero": "card-journal-page",
          "effect": "text-annotated-underlines"
        },
        {
          "id": "quarterly",
          "name": "Quarterly",
          "mood": "A strict grid, one essay, the measure is the design",
          "theme": "fog-city",
          "pairing": "academic",
          "family": "quiet",
          "hero": "magazine-editorial-grid",
          "effect": "scroll-word-highlight"
        }
      ]
    },
    {
      "id": "bank",
      "surface": "app",
      "title": "A bank app",
      "kicker": "Finance",
      "blurb": "The balance first. Tabs, settings, a passkey.",
      "when": "A phone someone opens to see their money. Not the staff ledger.",
      "theme": "harbour-ledger",
      "pairing": "friendly-saas",
      "shelf": "native-feel",
      "categories": [
        "dashboard",
        "navigation",
        "settings",
        "auth"
      ],
      "pieces": [
        "ios-fintech-home",
        "phone-tab-plain",
        "ios-grouped-settings",
        "auth-passkey-setup",
        "ios-large-title-collapse",
        "mobile-list-empty",
        "phone-sign-in",
        "phone-notifications-list",
        "phone-wallet-cards",
        "phone-qr-scanner",
        "phone-delete-account",
        "phone-privacy-data",
        "phone-account-edit",
        "phone-code-entry",
        "phone-app-lock",
        "crypto-exchange-trade",
        "table-transactions-ledger",
        "spend-list"
      ],
      "directions": [
        {
          "id": "harbour-bank",
          "name": "Harbour bank",
          "mood": "Navy and brass, the balance first",
          "theme": "harbour-ledger",
          "pairing": "friendly-saas",
          "family": "quiet",
          "hero": "ios-fintech-home",
          "effect": "ios-pull-to-refresh"
        },
        {
          "id": "harbour-night",
          "name": "Harbour night",
          "mood": "The same bank after dark, the cards",
          "theme": "harbour-night",
          "pairing": "friendly-saas",
          "family": "glass",
          "hero": "phone-wallet-cards",
          "effect": "shared-element-expand"
        },
        {
          "id": "lime-bank",
          "name": "Lime bank",
          "mood": "A young card, lime on charcoal, the trade",
          "theme": "circuit",
          "pairing": "wide-tech",
          "family": "sharp",
          "hero": "crypto-exchange-trade",
          "effect": "staggered-list-reveal"
        },
        {
          "id": "passbook",
          "name": "Passbook",
          "mood": "An old book of lines, stamped paper, every transfer",
          "theme": "archive",
          "pairing": "slab-ledger",
          "family": "editorial",
          "hero": "table-transactions-ledger",
          "effect": null
        },
        {
          "id": "village-bank",
          "name": "Village bank",
          "mood": "A Nepali counter, lokta and crimson, the household number",
          "theme": "lokta",
          "pairing": "devanagari",
          "family": "quiet",
          "hero": "spend-list",
          "effect": "text-marker-highlight-draw"
        },
        {
          "id": "pay-code",
          "name": "Pay code",
          "mood": "A cool city bank, pay by a code on the glass",
          "theme": "fog-city",
          "pairing": "geometric-modern",
          "family": "glass",
          "hero": "phone-qr-scanner",
          "effect": "ios-large-title-collapse"
        }
      ]
    },
    {
      "id": "health",
      "surface": "app",
      "title": "A health app",
      "kicker": "Health",
      "blurb": "The rings, the week, a quiet settings list.",
      "when": "Fitness, a clinic, or a body people check daily.",
      "theme": "alpine-clinic",
      "pairing": "geometric-modern",
      "shelf": "native-feel",
      "categories": [
        "dashboard",
        "navigation",
        "settings",
        "onboarding"
      ],
      "pieces": [
        "ios-health-activity-rings",
        "phone-tab-plain",
        "ios-grouped-settings",
        "ios-onboarding-carousel",
        "ios-pull-to-refresh",
        "phone-paywall-plans",
        "phone-permission-prompt",
        "phone-workout-timer",
        "phone-booking-slots",
        "phone-subscription-manage",
        "phone-notification-settings",
        "phone-rating-prompt",
        "phone-app-lock",
        "mobile-run-detail",
        "card-progress-goals",
        "phone-calendar-agenda"
      ],
      "directions": [
        {
          "id": "mint-rings",
          "name": "Mint rings",
          "mood": "Clinic calm, the rings, a day in the body",
          "theme": "alpine-clinic",
          "pairing": "geometric-modern",
          "family": "soft",
          "hero": "ios-health-activity-rings",
          "effect": "ios-large-title-collapse"
        },
        {
          "id": "glacier-run",
          "name": "Glacier run",
          "mood": "A quiet run, one outing, the map of it",
          "theme": "glacier",
          "pairing": "academic",
          "family": "quiet",
          "hero": "mobile-run-detail",
          "effect": "staggered-list-reveal"
        },
        {
          "id": "greenhouse-habit",
          "name": "Greenhouse habit",
          "mood": "Soft green, a habit you keep, small goals",
          "theme": "greenhouse",
          "pairing": "playground",
          "family": "soft",
          "hero": "card-progress-goals",
          "effect": "shared-element-expand"
        },
        {
          "id": "book-clinic",
          "name": "Book clinic",
          "mood": "A city clinic, the next free chair",
          "theme": "fog-city",
          "pairing": "friendly-saas",
          "family": "quiet",
          "hero": "phone-booking-slots",
          "effect": null
        },
        {
          "id": "night-session",
          "name": "Night session",
          "mood": "Training after dark, the timer big enough to see",
          "theme": "alpine-night",
          "pairing": "geometric-modern",
          "family": "glass",
          "hero": "phone-workout-timer",
          "effect": "m3-container-transform"
        },
        {
          "id": "week-body",
          "name": "Week body",
          "mood": "A pale week, what the body did each day",
          "theme": "ice-station",
          "pairing": "swiss-precision",
          "family": "quiet",
          "hero": "phone-calendar-agenda",
          "effect": "ios-pull-to-refresh"
        }
      ]
    },
    {
      "id": "messages",
      "surface": "app",
      "title": "Messages",
      "kicker": "Mail",
      "blurb": "The inbox, then one thread. A row can swipe.",
      "when": "Chat, mail, or a list of conversations.",
      "theme": "fog-city",
      "pairing": "geometric-modern",
      "shelf": "native-feel",
      "categories": [
        "messaging",
        "navigation",
        "overlays"
      ],
      "pieces": [
        "mobile-inbox-list",
        "chat-thread",
        "ios-swipe-row-actions",
        "phone-tab-plain",
        "ios-bottom-sheet-detents",
        "phone-photo-picker",
        "phone-notifications-list",
        "phone-search-results",
        "phone-notification-settings",
        "m3-list-detail",
        "phone-composer",
        "phone-skeleton-list",
        "phone-feed-posts",
        "handheld-talk-player"
      ],
      "directions": [
        {
          "id": "cobalt-inbox",
          "name": "Cobalt inbox",
          "mood": "Work mail, a list you can swipe",
          "theme": "fog-city",
          "pairing": "geometric-modern",
          "family": "quiet",
          "hero": "mobile-inbox-list",
          "effect": "ios-swipe-row-actions"
        },
        {
          "id": "night-chat",
          "name": "Night chat",
          "mood": "A private thread, dark glass, one conversation",
          "theme": "night-desk",
          "pairing": "signal-mono",
          "family": "glass",
          "hero": "chat-thread",
          "effect": "ios-pull-to-refresh"
        },
        {
          "id": "sakura-letters",
          "name": "Sakura letters",
          "mood": "Friends, blush paper, you are writing",
          "theme": "sakura-desk",
          "pairing": "indie-maker",
          "family": "soft",
          "hero": "phone-composer",
          "effect": "shared-element-expand"
        },
        {
          "id": "desk-mail",
          "name": "Desk mail",
          "mood": "Android work mail, a row that becomes the letter",
          "theme": "fog-night",
          "pairing": "developer-docs",
          "family": "sharp",
          "hero": "m3-list-detail",
          "effect": "staggered-list-reveal"
        },
        {
          "id": "broadcast",
          "name": "Broadcast",
          "mood": "A newsroom thread, posts and replies",
          "theme": "press-room",
          "pairing": "newsroom",
          "family": "editorial",
          "hero": "phone-feed-posts",
          "effect": "ios-large-title-collapse"
        },
        {
          "id": "voice-notes",
          "name": "Voice notes",
          "mood": "A talk you hold, clay, the recording is the message",
          "theme": "kiln",
          "pairing": "bookish",
          "family": "soft",
          "hero": "handheld-talk-player",
          "effect": null
        }
      ]
    },
    {
      "id": "music-app",
      "surface": "app",
      "title": "A music app",
      "kicker": "Music",
      "blurb": "Now playing, and a player that takes the screen.",
      "when": "A song, a queue, a night. The player is the product.",
      "theme": "neon-alley",
      "pairing": "y2k-chrome",
      "shelf": "native-feel",
      "categories": [
        "media",
        "navigation",
        "buttons"
      ],
      "pieces": [
        "ios-now-playing",
        "m3-music-player-expressive",
        "ios-glass-tab-bar",
        "m3-fab-menu",
        "m3-navigation-bar",
        "phone-paywall-plans",
        "phone-video-player",
        "phone-search-results",
        "phone-subscription-manage",
        "m3-modal-bottom-sheet",
        "coverflow-strip",
        "luxe-product-detail",
        "widget-now-playing",
        "handheld-talk-player"
      ],
      "directions": [
        {
          "id": "neon-player",
          "name": "Neon player",
          "mood": "Night, magenta, the song fills the glass",
          "theme": "neon-alley",
          "pairing": "y2k-chrome",
          "family": "glass",
          "hero": "ios-now-playing",
          "effect": "shared-element-expand"
        },
        {
          "id": "festival-player",
          "name": "Festival player",
          "mood": "Loud, expressive, Android, the player takes the screen",
          "theme": "festival",
          "pairing": "variable-expressive",
          "family": "soft",
          "hero": "m3-music-player-expressive",
          "effect": "m3-container-transform"
        },
        {
          "id": "observatory-player",
          "name": "Observatory player",
          "mood": "Ambient, navy and gold, covers in a row",
          "theme": "observatory",
          "pairing": "cinema",
          "family": "glass",
          "hero": "coverflow-strip",
          "effect": "overlap-slider"
        },
        {
          "id": "vinyl-hand",
          "name": "Vinyl hand",
          "mood": "Linen, one record, the sleeve",
          "theme": "linen-shop",
          "pairing": "maison",
          "family": "editorial",
          "hero": "luxe-product-detail",
          "effect": "object-3d-turntable"
        },
        {
          "id": "bedroom",
          "name": "Bedroom",
          "mood": "A lamp, a small player, night writing",
          "theme": "sakura-night",
          "pairing": "indie-maker",
          "family": "soft",
          "hero": "widget-now-playing",
          "effect": "text-marker-highlight-draw"
        },
        {
          "id": "podcast-walk",
          "name": "Podcast walk",
          "mood": "A talk in the hand, ice, a long episode",
          "theme": "ice-station",
          "pairing": "academic",
          "family": "quiet",
          "hero": "handheld-talk-player",
          "effect": "ios-large-title-collapse"
        }
      ]
    },
    {
      "id": "news",
      "surface": "app",
      "title": "A news app",
      "kicker": "News",
      "blurb": "The issue, then the piece. A title that collapses as you read.",
      "when": "News or a magazine someone reads on a phone.",
      "theme": "press-room",
      "pairing": "newsroom",
      "shelf": "typography-first",
      "categories": [
        "reading",
        "scroll",
        "loaders"
      ],
      "pieces": [
        "pwa-news-reader",
        "ios-large-title-collapse",
        "pwa-app-shell",
        "pwa-update-toast",
        "phone-tab-plain",
        "phone-comments-sheet",
        "phone-paywall-plans",
        "pwa-offline-library",
        "phone-video-player",
        "phone-search-results",
        "phone-subscription-manage",
        "m3-top-app-bar-scroll",
        "phone-skeleton-list",
        "paper-article-reader",
        "book-page-flip",
        "card-journal-page",
        "phone-feed-posts",
        "card-magazine-cover"
      ],
      "directions": [
        {
          "id": "press-room",
          "name": "Press room",
          "mood": "Newsprint and one red, the issue in the hand",
          "theme": "press-room",
          "pairing": "newsroom",
          "family": "editorial",
          "hero": "pwa-news-reader",
          "effect": "ios-large-title-collapse"
        },
        {
          "id": "archive-reader",
          "name": "Archive reader",
          "mood": "A long read, manila, you sit with the piece",
          "theme": "archive",
          "pairing": "classic-garamond",
          "family": "editorial",
          "hero": "paper-article-reader",
          "effect": "ios-pull-to-refresh"
        },
        {
          "id": "night-edition",
          "name": "Night edition",
          "mood": "The late edition, press black, a page you turn",
          "theme": "night-edition",
          "pairing": "magazine-contrast",
          "family": "editorial",
          "hero": "book-page-flip",
          "effect": "staggered-list-reveal"
        },
        {
          "id": "field-notes",
          "name": "Field notes",
          "mood": "A notebook, olive, one page from outside",
          "theme": "loam",
          "pairing": "garden-journal",
          "family": "soft",
          "hero": "card-journal-page",
          "effect": "text-marker-highlight-draw"
        },
        {
          "id": "live-desk",
          "name": "Live desk",
          "mood": "A city desk, the feed, what just happened",
          "theme": "fog-city",
          "pairing": "swiss-precision",
          "family": "sharp",
          "hero": "phone-feed-posts",
          "effect": "shared-element-expand"
        },
        {
          "id": "sunday-issue",
          "name": "Sunday issue",
          "mood": "A magazine cover, blush, one issue",
          "theme": "sakura-desk",
          "pairing": "literary",
          "family": "editorial",
          "hero": "card-magazine-cover",
          "effect": "text-mask-line-reveal"
        }
      ]
    },
    {
      "id": "shop-app",
      "surface": "app",
      "title": "A shop app",
      "kicker": "Commerce",
      "blurb": "The list, the piece, then one page to pay.",
      "when": "Buying on a phone. The bag is the next screen, not a carnival.",
      "theme": "kiln",
      "pairing": "atelier",
      "shelf": "first-impressions",
      "categories": [
        "ecommerce",
        "inputs"
      ],
      "pieces": [
        "mobile-filter-chips-list",
        "shop-product",
        "qty-stepper",
        "mobile-one-page-checkout",
        "order-confirmed",
        "phone-product-detail",
        "phone-sign-in",
        "phone-order-tracking",
        "phone-wallet-cards",
        "phone-search-results",
        "phone-rating-prompt",
        "m3-modal-bottom-sheet",
        "phone-cart",
        "phone-checkout",
        "phone-orders",
        "shop-collection",
        "luxe-product-detail"
      ],
      "directions": [
        {
          "id": "clay-bag",
          "name": "Clay bag",
          "mood": "Handmade, warm, the shelf you filter",
          "theme": "kiln",
          "pairing": "atelier",
          "family": "soft",
          "hero": "mobile-filter-chips-list",
          "effect": "shared-element-expand"
        },
        {
          "id": "linen-bag",
          "name": "Linen bag",
          "mood": "Soft luxury, one piece, then the bag",
          "theme": "linen-shop",
          "pairing": "maison",
          "family": "editorial",
          "hero": "phone-product-detail",
          "effect": "ios-bottom-sheet-detents"
        },
        {
          "id": "candy-bag",
          "name": "Candy bag",
          "mood": "Snacks and toys, loud, the whole stall",
          "theme": "market-stall",
          "pairing": "candy-clay",
          "family": "soft",
          "hero": "shop-collection",
          "effect": "spring-deck"
        },
        {
          "id": "night-counter",
          "name": "Night counter",
          "mood": "A dark counter, one object you can turn",
          "theme": "atelier-noir",
          "pairing": "gallery-wall",
          "family": "editorial",
          "hero": "luxe-product-detail",
          "effect": "object-3d-turntable"
        },
        {
          "id": "market-run",
          "name": "Market run",
          "mood": "A loud stall, the bag is already open",
          "theme": "night-market",
          "pairing": "riso-zine",
          "family": "sharp",
          "hero": "phone-cart",
          "effect": "staggered-list-reveal"
        },
        {
          "id": "past-orders",
          "name": "Past orders",
          "mood": "Stamped paper, what you bought, a quiet list",
          "theme": "archive",
          "pairing": "slab-ledger",
          "family": "quiet",
          "hero": "phone-orders",
          "effect": null
        }
      ]
    },
    {
      "id": "social",
      "surface": "app",
      "title": "A social app",
      "kicker": "Feed",
      "blurb": "A feed, a story you hold, a tab bar.",
      "when": "People, posts, or stories. One feed, not a dashboard.",
      "theme": "playroom",
      "pairing": "geometric-modern",
      "shelf": "native-feel",
      "categories": [
        "dashboard",
        "media",
        "navigation"
      ],
      "pieces": [
        "m3-expressive-home",
        "mobile-story-viewer",
        "ios-glass-tab-bar",
        "m3-fab-menu",
        "ios-context-menu-lift",
        "phone-profile-header",
        "phone-comments-sheet",
        "phone-photo-picker",
        "phone-notifications-list",
        "phone-feed-posts",
        "phone-search-results",
        "phone-account-edit",
        "phone-privacy-data",
        "phone-delete-account",
        "phone-composer",
        "phone-photo-viewer",
        "coverflow-strip"
      ],
      "directions": [
        {
          "id": "playroom",
          "name": "Playroom",
          "mood": "Friends, coral, a story you hold",
          "theme": "playroom",
          "pairing": "geometric-modern",
          "family": "soft",
          "hero": "mobile-story-viewer",
          "effect": "optimistic-like-button"
        },
        {
          "id": "neon-feed",
          "name": "Neon feed",
          "mood": "Night, glass, the posts",
          "theme": "neon-alley",
          "pairing": "indie-maker",
          "family": "glass",
          "hero": "phone-feed-posts",
          "effect": "shared-element-expand"
        },
        {
          "id": "sketchbook",
          "name": "Sketchbook",
          "mood": "A small group, photos full screen, notes in a hand",
          "theme": "sakura-desk",
          "pairing": "handwritten-notes",
          "family": "soft",
          "hero": "phone-photo-viewer",
          "effect": "text-annotated-underlines"
        },
        {
          "id": "town-square",
          "name": "Town square",
          "mood": "A neighbourhood, clay, the replies are the place",
          "theme": "kiln",
          "pairing": "garden-journal",
          "family": "soft",
          "hero": "phone-comments-sheet",
          "effect": "ios-pull-to-refresh"
        },
        {
          "id": "desk-club",
          "name": "Desk club",
          "mood": "A calm club, cool gray, the home is the people",
          "theme": "fog-city",
          "pairing": "geometric-modern",
          "family": "quiet",
          "hero": "m3-expressive-home",
          "effect": "m3-container-transform"
        },
        {
          "id": "night-photos",
          "name": "Night photos",
          "mood": "A dark room of pictures, navy, you move through them",
          "theme": "observatory",
          "pairing": "cinema",
          "family": "glass",
          "hero": "coverflow-strip",
          "effect": "page-transition-curtain"
        }
      ]
    },
    {
      "id": "weather",
      "surface": "app",
      "title": "Weather",
      "kicker": "Sky",
      "blurb": "The hour under your thumb. The title gets out of the way.",
      "when": "A forecast. One place, the next hours, nothing else.",
      "theme": "ice-station",
      "pairing": "geometric-modern",
      "shelf": "native-feel",
      "categories": [
        "utility",
        "scroll",
        "navigation"
      ],
      "pieces": [
        "ios-weather-hourly-scrub",
        "ios-large-title-collapse",
        "phone-tab-plain",
        "ios-pull-to-refresh",
        "phone-permission-prompt",
        "phone-map-listings",
        "hero-engraved-moonrise-plate",
        "week-schedule",
        "mobile-run-detail",
        "bento-feature-grid"
      ],
      "directions": [
        {
          "id": "ice-glass",
          "name": "Ice glass",
          "mood": "Pale northern air, the next hours under your thumb",
          "theme": "ice-station",
          "pairing": "geometric-modern",
          "family": "glass",
          "hero": "ios-weather-hourly-scrub",
          "effect": "ios-large-title-collapse"
        },
        {
          "id": "night-sky",
          "name": "Night sky",
          "mood": "Navy and star gold, the sky is the screen",
          "theme": "observatory",
          "pairing": "wide-tech",
          "family": "glass",
          "hero": "hero-engraved-moonrise-plate",
          "effect": "webgl-shader-hero"
        },
        {
          "id": "garden-forecast",
          "name": "Garden forecast",
          "mood": "A grower, soft green, the week of weather",
          "theme": "greenhouse",
          "pairing": "garden-journal",
          "family": "soft",
          "hero": "week-schedule",
          "effect": "staggered-list-reveal"
        },
        {
          "id": "marine-glass",
          "name": "Marine glass",
          "mood": "A coast, cockpit teal, the map of the water",
          "theme": "hud-teal",
          "pairing": "hud",
          "family": "sharp",
          "hero": "phone-map-listings",
          "effect": null
        },
        {
          "id": "storm-yard",
          "name": "Storm yard",
          "mood": "A crew outdoors, floodlights, the next hour of the job",
          "theme": "night-shift",
          "pairing": "industrial-label",
          "family": "industrial",
          "hero": "mobile-run-detail",
          "effect": "ios-pull-to-refresh"
        },
        {
          "id": "classroom-sky",
          "name": "Classroom sky",
          "mood": "Kids, butter walls, the sky as a bright shape",
          "theme": "playroom",
          "pairing": "playground",
          "family": "soft",
          "hero": "bento-feature-grid",
          "effect": "spring-deck"
        }
      ]
    },
    {
      "id": "field",
      "surface": "app",
      "title": "A field app",
      "kicker": "Ops",
      "blurb": "Today’s run, an empty list, a failed load.",
      "when": "Staff on a phone, outside. A yard, a route, a job.",
      "theme": "cinder",
      "pairing": "swiss-precision",
      "shelf": "native-feel",
      "categories": [
        "utility",
        "navigation",
        "feedback",
        "error"
      ],
      "pieces": [
        "mobile-run-detail",
        "phone-tab-plain",
        "mobile-list-empty",
        "mobile-load-failed",
        "ios-pull-to-refresh",
        "phone-form-fields",
        "phone-permission-prompt",
        "pwa-outbox-sync",
        "phone-map-listings",
        "phone-qr-scanner",
        "phone-calendar-agenda",
        "game-hud",
        "week-schedule",
        "tablet-kiosk-checkin"
      ],
      "directions": [
        {
          "id": "yard",
          "name": "Yard",
          "mood": "Safety orange, today's run, the next stop already open",
          "theme": "cinder",
          "pairing": "swiss-precision",
          "family": "industrial",
          "hero": "mobile-run-detail",
          "effect": null
        },
        {
          "id": "shed",
          "name": "Shed",
          "mood": "Rust and olive, a code on a box, outdoor work",
          "theme": "oxide",
          "pairing": "industrial-label",
          "family": "industrial",
          "hero": "phone-qr-scanner",
          "effect": null
        },
        {
          "id": "cockpit",
          "name": "Cockpit",
          "mood": "Night shift, teal glass, a live status",
          "theme": "hud-teal",
          "pairing": "hud",
          "family": "sharp",
          "hero": "game-hud",
          "effect": null
        },
        {
          "id": "night-bay",
          "name": "Night bay",
          "mood": "Floodlights, the week's bays, what loads when",
          "theme": "night-shift",
          "pairing": "poster-condensed",
          "family": "industrial",
          "hero": "week-schedule",
          "effect": "split-flap-board"
        },
        {
          "id": "route-map",
          "name": "Route map",
          "mood": "A city route, cool gray, the pins",
          "theme": "fog-city",
          "pairing": "swiss-precision",
          "family": "quiet",
          "hero": "phone-map-listings",
          "effect": "ios-pull-to-refresh"
        },
        {
          "id": "gate",
          "name": "Gate",
          "mood": "A check-in desk, stamped paper, names and times",
          "theme": "archive",
          "pairing": "slab-ledger",
          "family": "editorial",
          "hero": "tablet-kiosk-checkin",
          "effect": null
        }
      ]
    },
    {
      "id": "personal",
      "surface": "app",
      "title": "A personal app",
      "kicker": "Personal",
      "blurb": "One person and their number. Lokta and Devanagari when the product is Nepali. Not a staff dashboard.",
      "when": "Money, health, or home for the person using it. A Nepali finance app starts here.",
      "theme": "lokta",
      "pairing": "devanagari",
      "shelf": "dashboards-and-data",
      "categories": [
        "dashboard",
        "charts",
        "feedback",
        "navigation"
      ],
      "pieces": [
        "spend-list",
        "chart-rank-spend",
        "budget-meter",
        "saved-banner",
        "phone-tab-plain",
        "mobile-list-empty",
        "mobile-load-failed",
        "phone-wallet-cards",
        "phone-calendar-agenda",
        "table-transactions-ledger",
        "chart-bar-week"
      ],
      "directions": [
        {
          "id": "lokta-day",
          "name": "Lokta day",
          "mood": "Nepali, crimson on lokta, what went out today",
          "theme": "lokta",
          "pairing": "devanagari",
          "family": "quiet",
          "hero": "spend-list",
          "effect": "staggered-list-reveal"
        },
        {
          "id": "lokta-night",
          "name": "Lokta night",
          "mood": "The same book after dark, cards in the hand",
          "theme": "lokta-night",
          "pairing": "devanagari",
          "family": "quiet",
          "hero": "phone-wallet-cards",
          "effect": "ios-pull-to-refresh"
        },
        {
          "id": "garden-ledger",
          "name": "Garden ledger",
          "mood": "A household, olive, where the money went",
          "theme": "loam",
          "pairing": "garden-journal",
          "family": "soft",
          "hero": "chart-rank-spend",
          "effect": "ios-large-title-collapse"
        },
        {
          "id": "receipt-desk",
          "name": "Receipt desk",
          "mood": "Stamped paper, every line, a quiet book",
          "theme": "archive",
          "pairing": "slab-ledger",
          "family": "editorial",
          "hero": "table-transactions-ledger",
          "effect": null
        },
        {
          "id": "budget-night",
          "name": "Budget night",
          "mood": "Navy after dark, the meter, what is left",
          "theme": "harbour-night",
          "pairing": "friendly-saas",
          "family": "glass",
          "hero": "budget-meter",
          "effect": "shared-element-expand"
        },
        {
          "id": "week-money",
          "name": "Week money",
          "mood": "A cool week, the days and what they cost",
          "theme": "fog-city",
          "pairing": "swiss-precision",
          "family": "quiet",
          "hero": "chart-bar-week",
          "effect": null
        }
      ]
    },
    {
      "id": "game",
      "surface": "web",
      "title": "A game",
      "kicker": "Play",
      "blurb": "A title screen, a game you can play, a score list, and a room for friends. Three.js when the world is a scene.",
      "when": "A game site: arcade, a small web game, a card table, a lobby, or a 3D scene. Not a marketing page with a Play button that goes nowhere.",
      "theme": "coin-op",
      "pairing": "arcade",
      "shelf": "first-impressions",
      "categories": [
        "landing",
        "media",
        "data",
        "social"
      ],
      "pieces": [
        "game-title-screen",
        "game-playfield",
        "game-hud",
        "game-card-table",
        "game-lobby",
        "game-leaderboard",
        "pixel-arcade-style",
        "three-orbit-object",
        "three-scroll-world",
        "three-room-look",
        "webgl-shader-hero",
        "object-3d-turntable"
      ],
      "directions": [
        {
          "id": "coin-op",
          "name": "Coin-op",
          "mood": "Dark cabinet, amber and CRT green, insert coin",
          "theme": "coin-op",
          "pairing": "arcade",
          "family": "sharp",
          "hero": "game-title-screen",
          "effect": "game-playfield"
        },
        {
          "id": "ticket-booth",
          "name": "Ticket booth",
          "mood": "Daylight arcade, family scores, a card table",
          "theme": "ticket-booth",
          "pairing": "pixel-soft",
          "family": "soft",
          "hero": "game-card-table",
          "effect": "game-leaderboard"
        },
        {
          "id": "cockpit-run",
          "name": "Cockpit run",
          "mood": "A mission HUD over a live view",
          "theme": "hud-teal",
          "pairing": "hud",
          "family": "sharp",
          "hero": "game-hud",
          "effect": "webgl-shader-hero"
        },
        {
          "id": "orbit",
          "name": "Orbit",
          "mood": "A lit object you turn, then a world you scroll through",
          "theme": "night-desk",
          "pairing": "wide-tech",
          "family": "quiet",
          "hero": "three-orbit-object",
          "effect": "three-scroll-world"
        }
      ]
    },
    {
      "id": "notebook",
      "surface": "web",
      "title": "A handwritten site",
      "kicker": "Hand",
      "blurb": "The page is a letter. Titles in a loose script, the reading in a clear hand.",
      "when": "A personal site, a cafe, a workshop, or a letter. Notes in the margin of a normal site use Handwritten Notes instead.",
      "theme": "inkwell",
      "pairing": "letter-hand",
      "shelf": "typography-first",
      "categories": [
        "landing",
        "reading",
        "design-language"
      ],
      "pieces": [
        "handwritten-homepage",
        "handwritten-letter",
        "handwritten-style",
        "card-journal-page",
        "text-annotated-underlines",
        "graph-paper-homepage",
        "card-sticky-notepad"
      ],
      "directions": [
        {
          "id": "inkwell",
          "name": "Inkwell",
          "mood": "A letter on warm paper, the whole site in a hand",
          "theme": "inkwell",
          "pairing": "letter-hand",
          "family": "soft",
          "hero": "handwritten-homepage",
          "effect": "text-annotated-underlines"
        },
        {
          "id": "lamp-desk",
          "name": "Lamp desk",
          "mood": "The same letter after dark",
          "theme": "lamp-desk",
          "pairing": "letter-hand",
          "family": "editorial",
          "hero": "handwritten-letter",
          "effect": "text-marker-highlight-draw"
        },
        {
          "id": "margin",
          "name": "Margin",
          "mood": "A normal page, with notes in a real hand",
          "theme": "paper-ink",
          "pairing": "handwritten-notes",
          "family": "editorial",
          "hero": "graph-paper-homepage",
          "effect": "text-annotated-underlines"
        }
      ]
    }
  ],
  "shelfGroups": [
    {
      "id": "site",
      "label": "Build a site",
      "blurb": "The pages a visitor meets first, then the blocks you assemble them from.",
      "slugs": [
        "first-impressions",
        "website-in-parts",
        "portfolio-sites",
        "landing-pages",
        "proof-and-close"
      ]
    },
    {
      "id": "product",
      "label": "Ship a product",
      "blurb": "Navigation, waiting, forms, native feel, and the screens people live in.",
      "slugs": [
        "navigation-sorted",
        "loading-states",
        "sheets-and-overlays",
        "forms-people-finish",
        "control-set",
        "native-feel",
        "dashboards-and-data"
      ]
    },
    {
      "id": "craft",
      "label": "Taste and craft",
      "blurb": "Motion, type, whole design languages, and the pointer as a material.",
      "slugs": [
        "motion-with-a-reason",
        "typography-first",
        "design-languages",
        "cursor-play",
        "scroll-driven",
        "widgets-and-faces",
        "social-cards",
        "paper-and-objects",
        "grounds-and-presses"
      ]
    }
  ],
  "counts": {
    "pieces": 520,
    "pairings": 44,
    "themes": 60,
    "icons": 99,
    "recipes": 16,
    "starts": 43,
    "sources": 26
  },
  "sources": [
    {
      "id": "abel",
      "name": "Abel",
      "url": "https://abelfragrance.com/",
      "line": "A perfume shop. The range, the scent types, a quiz, a journal.",
      "take": "A catalogue. One product at a time.",
      "studied": true,
      "page": "https://designlounge.vercel.app/sources#abel"
    },
    {
      "id": "igloo",
      "name": "Igloo",
      "url": "https://www.igloo.inc/",
      "line": "An onchain community. The public HTML is a shell, so the lesson is the mission they publish, not a layout.",
      "take": "A product with one job. Do not invent a homepage they did not ship.",
      "studied": true,
      "page": "https://designlounge.vercel.app/sources#igloo"
    },
    {
      "id": "dontboardme",
      "name": "Don't Board Me",
      "url": "https://dontboardme.com/",
      "line": "In-home pet care. A loud line, then the services, then book.",
      "take": "A service with a next step. The headline can shout. The booking stays plain.",
      "studied": true,
      "page": "https://designlounge.vercel.app/sources#dontboardme"
    },
    {
      "id": "noomo",
      "name": "Noomo",
      "url": "https://noomoagency.com/",
      "line": "A Los Angeles studio. 3D stories and sites that stop a scroll.",
      "take": "One scroll, one story. Motion carries the page.",
      "studied": true,
      "page": "https://designlounge.vercel.app/sources#noomo"
    },
    {
      "id": "synchronized",
      "name": "Synchronized",
      "url": "https://synchronized.studio/",
      "line": "A digital studio. The word archive repeats until the work is the page.",
      "take": "Lead with the work. Say the name until it holds.",
      "studied": true,
      "page": "https://designlounge.vercel.app/sources#synchronized"
    },
    {
      "id": "mendo",
      "name": "Mendo",
      "url": "https://mendo.nl/",
      "line": "A bookshop in Amsterdam. Books as objects, and a journal beside the shop.",
      "take": "Paper, type, and the object. The shop stays quiet.",
      "studied": true,
      "page": "https://designlounge.vercel.app/sources#mendo"
    },
    {
      "id": "nixon",
      "name": "Nixon",
      "url": "https://www.nixon.com/",
      "line": "Watches. The page could not be read from here, so no screen claims it yet.",
      "take": "Open the site before a screen borrows from it.",
      "studied": false,
      "page": "https://designlounge.vercel.app/sources#nixon"
    },
    {
      "id": "dragone",
      "name": "Dragone",
      "url": "https://dragone.com/",
      "line": "Live shows. A dark front, then the shows, the news, and a way to partner.",
      "take": "A show with a way in. Spectacle, then the ask.",
      "studied": true,
      "page": "https://designlounge.vercel.app/sources#dragone"
    },
    {
      "id": "nothin",
      "name": "Nothin'",
      "url": "https://www.noth.in/",
      "line": "A Paris studio. Ideas, not a pile of content. One line does the work.",
      "take": "A short sentence, large. The rest of the page waits.",
      "studied": true,
      "page": "https://designlounge.vercel.app/sources#nothin"
    },
    {
      "id": "stripe",
      "name": "Stripe",
      "url": "https://stripe.com/",
      "line": "A payments company. One bright ribbon, a light headline, and the product shown working in every card.",
      "take": "Let one big moving thing carry the colour. Keep the words light and the cards real.",
      "studied": true,
      "page": "https://designlounge.vercel.app/sources#stripe"
    },
    {
      "id": "usearticle",
      "name": "UseArticle",
      "url": "https://www.usearticle.com/",
      "line": "A tool that writes and posts articles on a schedule. The page shows the product running, not a picture of it.",
      "take": "Let the visitor press the controls and watch the card change. Thick black edges and hard shadows keep it friendly.",
      "studied": true,
      "page": "https://designlounge.vercel.app/sources#usearticle"
    },
    {
      "id": "linear",
      "name": "Linear",
      "url": "https://linear.app/",
      "line": "A tool for building software. A dark page where the real app is the picture.",
      "take": "Show the product doing the work. Fade it at the edges and keep one colour for what matters.",
      "studied": true,
      "page": "https://designlounge.vercel.app/sources#linear"
    },
    {
      "id": "tailwind",
      "name": "Tailwind CSS docs",
      "url": "https://tailwindcss.com/docs/installation/using-vite",
      "line": "The install page for a CSS framework. Numbered steps, each with its own small code box.",
      "take": "Put each instruction next to its code. Draw the grid with thin lines and let the empty sides carry a faint hatch.",
      "studied": true,
      "page": "https://designlounge.vercel.app/sources#tailwind"
    },
    {
      "id": "wickret",
      "name": "Wickret",
      "url": "https://wickret.cuberto.com/",
      "line": "A concept bank app page by a studio. One huge headline, toys floating around it, then a phone.",
      "take": "Let the big words move. Letters can break apart and come back as new words.",
      "studied": true,
      "page": "https://designlounge.vercel.app/sources#wickret"
    },
    {
      "id": "lamalama",
      "name": "Lama Lama",
      "url": "https://lamalama.com/",
      "line": "An Amsterdam agency. A dark page with a dot screen hero and a small bar that talks back.",
      "take": "A tiny nav bar can carry the voice. Change its one line for each section.",
      "studied": true,
      "page": "https://designlounge.vercel.app/sources#lamalama"
    },
    {
      "id": "mindmarket",
      "name": "MindMarket",
      "url": "https://mindmarket.com/",
      "line": "A research agency. Big friendly type on bright green, cartoon people, white cards along a winding path.",
      "take": "One path ties the page together. Cards sit beside it, and the numbers pile up as you scroll.",
      "studied": true,
      "page": "https://designlounge.vercel.app/sources#mindmarket"
    },
    {
      "id": "flist",
      "name": "The F-List",
      "url": "https://f-list.cleancreatives.org/",
      "line": "A watchdog report on ad agencies. Black and yellow, tall narrow type, lines hidden under black bars.",
      "take": "Make the reveal the message. Bars lift off the text, and badges explain the list.",
      "studied": true,
      "page": "https://designlounge.vercel.app/sources#flist"
    },
    {
      "id": "bermawy",
      "name": "Bermawy",
      "url": "https://bermawy.com/",
      "line": "A personal site typed on graph paper. A torn photo, clipped cards, a notebook of articles. A toy console plays the talks.",
      "take": "Let one toy be the real control. Keep the rest plain and on paper.",
      "studied": true,
      "page": "https://designlounge.vercel.app/sources#bermawy"
    },
    {
      "id": "haunted",
      "name": "Haunted Boulder City",
      "url": "https://www.hauntedbouldercity.com/",
      "line": "A ghost walking tour. Fog, night photos and huge narrow type. The story slides sideways as you scroll.",
      "take": "Pin the screen and let scroll turn the pages. Only the line you are on gets to shout.",
      "studied": true,
      "page": "https://designlounge.vercel.app/sources#haunted"
    },
    {
      "id": "gmx",
      "name": "GMX Digital",
      "url": "https://gmxdigital.com/en/",
      "line": "A film studio for buildings that are not built yet. Dark, slow, and it plays like a film.",
      "take": "Keep the headline still and let the scenes change behind it. A thin line counts down each one.",
      "studied": true,
      "page": "https://designlounge.vercel.app/sources#gmx"
    },
    {
      "id": "sibal",
      "name": "Sibal Design",
      "url": "https://sibaldesign.com/",
      "line": "One designer, shown like a ship screen. You press Enter, it loads, then the work opens in frames.",
      "take": "Make the entrance a choice and keep it short. Then let each project show its steps, one at a time.",
      "studied": true,
      "page": "https://designlounge.vercel.app/sources#sibal"
    },
    {
      "id": "mwdt",
      "name": "MWDT",
      "url": "https://mwdtinc.com/",
      "line": "A machine shop. A dark hero card, a steel part, and a button to ask for a quote.",
      "take": "Let the product break out of the box. One light line, one heavy line, one button.",
      "studied": true,
      "page": "https://designlounge.vercel.app/sources#mwdt"
    },
    {
      "id": "moremedia",
      "name": "Moremedia",
      "url": "https://www.moremedia.at/",
      "line": "An agency in Austria. Big tight type, real work, and services you open one at a time.",
      "take": "Set the services as tall labels. Open one, and keep the rest as type.",
      "studied": true,
      "page": "https://designlounge.vercel.app/sources#moremedia"
    },
    {
      "id": "susan",
      "name": "Susan Acharya",
      "url": "https://acharyasusan.com.np/",
      "line": "A product lead's portfolio. A night valley drawn by hand. Small people play in it while you read.",
      "take": "Draw one scene and let it move a little. The words stay calm on top.",
      "studied": true,
      "page": "https://designlounge.vercel.app/sources#susan"
    },
    {
      "id": "60fps",
      "name": "60fps",
      "url": "https://60fps.design/",
      "line": "A big library of short clips. Small moments from phone apps, tagged by gesture, pattern and effect.",
      "take": "Show one small moment at a time, and let the tags do the sorting.",
      "studied": true,
      "page": "https://designlounge.vercel.app/sources#60fps"
    },
    {
      "id": "icm",
      "name": "Icon Museum",
      "url": "http://icon.museum/",
      "line": "A gallery of app icons. Each one sits on a glass shelf. Click one to see it big with its colours.",
      "take": "Let the icons be the only colour. Give each one a shelf, a lift on hover, and a quiet label.",
      "studied": true,
      "page": "https://designlounge.vercel.app/sources#icm"
    }
  ],
  "pieces": [
    {
      "id": "analytics-dashboard-overview",
      "n": "001",
      "title": "Analytics dashboard overview",
      "summary": "Light analytics overview: four KPI tiles, a single-series area chart drawn as inline SVG with an animated stroke, a crosshair tooltip, a recent-events table and a sliding date-range segmented control.",
      "platform": "web",
      "type": "screen",
      "category": "dashboard",
      "tags": [
        "dashboard",
        "analytics",
        "chart",
        "svg",
        "table"
      ],
      "styles": [
        "minimal",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#F4F6F9",
        "#FFFFFF",
        "#161A21",
        "#2A78D6",
        "#DBE8FA"
      ],
      "fonts": [
        "Hanken Grotesk",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/analytics-dashboard-overview",
      "brief": "https://designlounge.vercel.app/p/analytics-dashboard-overview.md",
      "demo": "https://designlounge.vercel.app/demo/analytics-dashboard-overview.html",
      "source": "dontboardme"
    },
    {
      "id": "avatar-stack-presence",
      "n": "002",
      "title": "Avatar stack with presence",
      "summary": "Overlapping initials avatars with a +N overflow chip, hover fans them apart, pulsing green presence dots, name/status tooltips, and a simulated join or leave every 4s.",
      "platform": "web",
      "type": "component",
      "category": "micro",
      "tags": [
        "avatars",
        "presence",
        "collaboration",
        "tooltip",
        "realtime"
      ],
      "styles": [
        "dark",
        "minimal",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#17131D",
        "#201A29",
        "#F1ECF7",
        "#3DDC84"
      ],
      "fonts": [
        "Syne",
        "Manrope"
      ],
      "url": "https://designlounge.vercel.app/p/avatar-stack-presence",
      "brief": "https://designlounge.vercel.app/p/avatar-stack-presence.md",
      "demo": "https://designlounge.vercel.app/demo/avatar-stack-presence.html",
      "source": "60fps"
    },
    {
      "id": "bento-feature-grid",
      "n": "003",
      "title": "Bento feature grid",
      "summary": "Six feature cells of varied spans on a 4-column grid, each with a small live CSS illustration; hover lifts a cell 2px and brightens its hairline.",
      "platform": "web",
      "type": "layout",
      "category": "features",
      "tags": [
        "marketing",
        "grid",
        "features",
        "landing"
      ],
      "styles": [
        "minimal",
        "soft",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#F5F3EE",
        "#FFFDF9",
        "#1C1B18",
        "#2F6B4F",
        "#DCEBE1"
      ],
      "fonts": [
        "Fraunces",
        "Instrument Sans"
      ],
      "url": "https://designlounge.vercel.app/p/bento-feature-grid",
      "brief": "https://designlounge.vercel.app/p/bento-feature-grid.md",
      "demo": "https://designlounge.vercel.app/demo/bento-feature-grid.html",
      "source": "stripe"
    },
    {
      "id": "ios-bottom-sheet-detents",
      "n": "004",
      "title": "Bottom sheet with three detents",
      "summary": "A draggable places sheet over a CSS-drawn map that snaps to 120px, 430px and full-height detents with spring easing, a progress-linked scrim and velocity flicks.",
      "platform": "mobile-app",
      "type": "component",
      "category": "overlays",
      "tags": [
        "bottom-sheet",
        "map",
        "gesture",
        "ios",
        "list"
      ],
      "styles": [
        "minimal",
        "soft"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#E9ECE4",
        "#FFFFFF",
        "#17191C",
        "#E2553B",
        "#C9DCE6"
      ],
      "fonts": [
        "Public Sans"
      ],
      "url": "https://designlounge.vercel.app/p/ios-bottom-sheet-detents",
      "brief": "https://designlounge.vercel.app/p/ios-bottom-sheet-detents.md",
      "demo": "https://designlounge.vercel.app/demo/ios-bottom-sheet-detents.html",
      "source": "dontboardme"
    },
    {
      "id": "brutalist-studio-home",
      "n": "005",
      "title": "Brutalist studio home",
      "summary": "Black-on-white studio homepage: 1px column grid, 96px uppercase Archivo Black statement, project rows that invert on hover and a 36-second marquee footer.",
      "platform": "web",
      "type": "screen",
      "category": "portfolio",
      "tags": [
        "homepage",
        "studio",
        "portfolio",
        "list",
        "marquee"
      ],
      "styles": [
        "brutalist",
        "swiss"
      ],
      "motion": "subtle",
      "difficulty": 1,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#FFFFFF",
        "#000000",
        "#555555"
      ],
      "fonts": [
        "Archivo Black",
        "Archivo"
      ],
      "url": "https://designlounge.vercel.app/p/brutalist-studio-home",
      "brief": "https://designlounge.vercel.app/p/brutalist-studio-home.md",
      "demo": "https://designlounge.vercel.app/demo/brutalist-studio-home.html",
      "source": "moremedia"
    },
    {
      "id": "button-state-morph",
      "n": "006",
      "title": "Button state morph",
      "summary": "A 220px 'Pay $48.00' button collapses to a 44px spinner in 200ms, draws a checkmark with stroke-dashoffset over 400ms, then expands to a green 140px 'Paid' pill; click again after 2s to replay.",
      "platform": "web",
      "type": "animation",
      "category": "buttons",
      "tags": [
        "button",
        "checkout",
        "loading",
        "success",
        "micro-interaction"
      ],
      "styles": [
        "minimal",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 1,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#EEF1EC",
        "#FFFFFF",
        "#14201A",
        "#1E8A5A"
      ],
      "fonts": [
        "Gabarito",
        "Onest"
      ],
      "url": "https://designlounge.vercel.app/p/button-state-morph",
      "brief": "https://designlounge.vercel.app/p/button-state-morph.md",
      "demo": "https://designlounge.vercel.app/demo/button-state-morph.html",
      "source": "wickret"
    },
    {
      "id": "collapsing-sidebar-rail",
      "n": "007",
      "title": "Collapsing sidebar rail",
      "summary": "A 240px app sidebar that collapses to a 64px icon rail with hover tooltips, an accent active-route bar and a ⌘B shortcut.",
      "platform": "web",
      "type": "component",
      "category": "navigation",
      "tags": [
        "navigation",
        "sidebar",
        "dashboard",
        "shell"
      ],
      "styles": [
        "minimal",
        "dark"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": true,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#0F0F0E",
        "#161615",
        "#F2F0EA",
        "#E0A34B"
      ],
      "fonts": [
        "Inter",
        "JetBrains Mono"
      ],
      "url": "https://designlounge.vercel.app/p/collapsing-sidebar-rail",
      "brief": "https://designlounge.vercel.app/p/collapsing-sidebar-rail.md",
      "demo": "https://designlounge.vercel.app/demo/collapsing-sidebar-rail.html",
      "source": "tailwind"
    },
    {
      "id": "command-palette",
      "n": "008",
      "title": "Command palette",
      "summary": "A ⌘K command palette that opens with a 200ms scale-and-fade, fuzzy-filters 20 grouped commands, and is fully driven from the keyboard with shortcut hints on the right.",
      "platform": "web",
      "type": "component",
      "category": "navigation",
      "tags": [
        "command-palette",
        "search",
        "keyboard",
        "navigation",
        "dialog"
      ],
      "styles": [
        "minimal",
        "dark"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#0B0D12",
        "#12151C",
        "#E8EAF0",
        "#6EE7B7"
      ],
      "fonts": [
        "Space Grotesk",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/command-palette",
      "brief": "https://designlounge.vercel.app/p/command-palette.md",
      "demo": "https://designlounge.vercel.app/demo/command-palette.html",
      "source": "tailwind"
    },
    {
      "id": "date-range-picker",
      "n": "009",
      "title": "Date range picker",
      "summary": "A two-month calendar popover with a presets column, start/end pills, hover-previewed ranges and full arrow-key navigation across month boundaries.",
      "platform": "web",
      "type": "component",
      "category": "pickers",
      "tags": [
        "date-picker",
        "calendar",
        "popover",
        "analytics",
        "keyboard"
      ],
      "styles": [
        "swiss",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 3,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#F6F7F9",
        "#FFFFFF",
        "#14171C",
        "#0F766E"
      ],
      "fonts": [
        "Schibsted Grotesk",
        "Instrument Serif"
      ],
      "url": "https://designlounge.vercel.app/p/date-range-picker",
      "brief": "https://designlounge.vercel.app/p/date-range-picker.md",
      "demo": "https://designlounge.vercel.app/demo/date-range-picker.html",
      "source": "linear"
    },
    {
      "id": "dense-data-table",
      "n": "010",
      "title": "Dense data table",
      "summary": "A 40px-row invoice table with a sticky header, tri-state select-all, shift-click ranges, sortable columns and a dark action bar that slides up when rows are selected.",
      "platform": "web",
      "type": "component",
      "category": "data",
      "tags": [
        "table",
        "data",
        "selection",
        "sorting",
        "billing"
      ],
      "styles": [
        "minimal",
        "swiss"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#F5F6F8",
        "#FFFFFF",
        "#12161D",
        "#1D5FD6"
      ],
      "fonts": [
        "Chivo",
        "Chivo Mono"
      ],
      "url": "https://designlounge.vercel.app/p/dense-data-table",
      "brief": "https://designlounge.vercel.app/p/dense-data-table.md",
      "demo": "https://designlounge.vercel.app/demo/dense-data-table.html",
      "source": "60fps"
    },
    {
      "id": "docs-three-column",
      "n": "011",
      "title": "Documentation three-column layout",
      "summary": "A docs shell: 256px collapsible nav tree, 72ch prose column, sticky 'On this page' TOC with scroll-spy, ⌘K search and a code block with a copy button.",
      "platform": "web",
      "type": "layout",
      "category": "reading",
      "tags": [
        "documentation",
        "navigation",
        "layout",
        "developer"
      ],
      "styles": [
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#FFFFFF",
        "#F7F8FA",
        "#17191C",
        "#2457D6",
        "#0F1419"
      ],
      "fonts": [
        "Public Sans",
        "Chivo Mono"
      ],
      "url": "https://designlounge.vercel.app/p/docs-three-column",
      "brief": "https://designlounge.vercel.app/p/docs-three-column.md",
      "demo": "https://designlounge.vercel.app/demo/docs-three-column.html",
      "source": "tailwind"
    },
    {
      "id": "editorial-landing-hero",
      "n": "012",
      "title": "Editorial landing hero",
      "summary": "A paper-toned magazine landing hero: 104px Fraunces headline rising word by word, hairline nav, one-line manifesto, a single outlined pill CTA and a mono issue index.",
      "platform": "web",
      "type": "screen",
      "category": "hero",
      "tags": [
        "landing",
        "hero",
        "editorial",
        "typography",
        "reveal"
      ],
      "styles": [
        "editorial",
        "paper"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#F3EFE6",
        "#1C1A17",
        "#8A2B1D",
        "#D9D3C7"
      ],
      "fonts": [
        "Fraunces",
        "Instrument Sans"
      ],
      "url": "https://designlounge.vercel.app/p/editorial-landing-hero",
      "brief": "https://designlounge.vercel.app/p/editorial-landing-hero.md",
      "demo": "https://designlounge.vercel.app/demo/editorial-landing-hero.html",
      "source": "susan"
    },
    {
      "id": "editorial-mega-menu",
      "n": "013",
      "title": "Editorial mega menu",
      "summary": "A newspaper-style top nav whose full-width panel animates its height between sections, with a 2px underline that slides between labels and a featured story card.",
      "platform": "web",
      "type": "component",
      "category": "navbar",
      "tags": [
        "navigation",
        "mega-menu",
        "editorial",
        "header",
        "hover"
      ],
      "styles": [
        "editorial",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#F7F3EC",
        "#FBF8F3",
        "#1A1714",
        "#8B2E2E"
      ],
      "fonts": [
        "Fraunces",
        "Instrument Sans"
      ],
      "url": "https://designlounge.vercel.app/p/editorial-mega-menu",
      "brief": "https://designlounge.vercel.app/p/editorial-mega-menu.md",
      "demo": "https://designlounge.vercel.app/demo/editorial-mega-menu.html",
      "source": "lamalama"
    },
    {
      "id": "empty-state-line-illustration",
      "n": "014",
      "title": "Empty state with line illustration",
      "summary": "An inbox empty state whose line-drawn SVG draws itself over 1.2s, with a heading, one line of guidance, two actions and a transition into a populated list.",
      "platform": "web",
      "type": "pattern",
      "category": "feedback",
      "tags": [
        "empty-state",
        "inbox",
        "illustration",
        "onboarding"
      ],
      "styles": [
        "minimal",
        "editorial",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#F6F7F9",
        "#FFFFFF",
        "#1B1F26",
        "#0F766E"
      ],
      "fonts": [
        "Fraunces",
        "Instrument Sans"
      ],
      "url": "https://designlounge.vercel.app/p/empty-state-line-illustration",
      "brief": "https://designlounge.vercel.app/p/empty-state-line-illustration.md",
      "demo": "https://designlounge.vercel.app/demo/empty-state-line-illustration.html",
      "source": "60fps"
    },
    {
      "id": "mobile-filter-chips-list",
      "n": "015",
      "title": "Filter chips product list",
      "summary": "A 390px product list with a horizontally scrolling chip row (selected chip grows a check), a sort bottom sheet, a 2-column grid with SVG wishlist hearts, and a shimmer skeleton on every filter change.",
      "platform": "mobile-web",
      "type": "layout",
      "category": "inputs",
      "tags": [
        "ecommerce",
        "filters",
        "chips",
        "bottom-sheet",
        "grid",
        "skeleton"
      ],
      "styles": [
        "minimal",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#F3F4F1",
        "#FFFFFF",
        "#16201A",
        "#E2523A"
      ],
      "fonts": [
        "Syne",
        "Manrope"
      ],
      "url": "https://designlounge.vercel.app/p/mobile-filter-chips-list",
      "brief": "https://designlounge.vercel.app/p/mobile-filter-chips-list.md",
      "demo": "https://designlounge.vercel.app/demo/mobile-filter-chips-list.html",
      "source": "stripe"
    },
    {
      "id": "ios-fintech-home",
      "n": "016",
      "title": "Fintech home",
      "summary": "A banking home screen: dark balance card with a 40px tabular amount and a blur-to-hide toggle, four circular quick actions, day-grouped transactions with initial avatars, under a glass top bar.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "dashboard",
      "tags": [
        "fintech",
        "banking",
        "list",
        "glass",
        "ios"
      ],
      "styles": [
        "minimal",
        "glass"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#F4F4F6",
        "#111318",
        "#FFFFFF",
        "#0A66FF",
        "#1D9A5B"
      ],
      "fonts": [
        "Onest"
      ],
      "url": "https://designlounge.vercel.app/p/ios-fintech-home",
      "brief": "https://designlounge.vercel.app/p/ios-fintech-home.md",
      "demo": "https://designlounge.vercel.app/demo/ios-fintech-home.html",
      "source": "mwdt"
    },
    {
      "id": "ios-glass-tab-bar",
      "n": "017",
      "title": "Floating glass tab bar",
      "summary": "An inset Liquid-glass tab capsule with four tabs and a separate round search island; a glass lens squashes and slides between tabs while content scrolls under it.",
      "platform": "mobile-app",
      "type": "component",
      "category": "navigation",
      "tags": [
        "navigation",
        "tab-bar",
        "glass",
        "ios"
      ],
      "styles": [
        "glass",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#F3F1EC",
        "#FFFFFF",
        "#1C1B18",
        "#2F6B3A"
      ],
      "fonts": [
        "Hanken Grotesk"
      ],
      "url": "https://designlounge.vercel.app/p/ios-glass-tab-bar",
      "brief": "https://designlounge.vercel.app/p/ios-glass-tab-bar.md",
      "demo": "https://designlounge.vercel.app/demo/ios-glass-tab-bar.html",
      "source": "60fps"
    },
    {
      "id": "tablet-floating-tool-palette",
      "n": "018",
      "title": "Floating tool palette",
      "summary": "A draggable 56px tool palette for a 1180×820 canvas app: five tools with a sliding active indicator, a colour-and-size popover, undo and clear, over a dot-grid canvas you draw on.",
      "platform": "tablet",
      "type": "component",
      "category": "utility",
      "tags": [
        "toolbar",
        "palette",
        "canvas",
        "drawing",
        "popover",
        "drag"
      ],
      "styles": [
        "dark",
        "industrial",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#E9EAEE",
        "#1F2126",
        "#F3F4F6",
        "#0EA5E9"
      ],
      "fonts": [
        "Space Grotesk",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/tablet-floating-tool-palette",
      "brief": "https://designlounge.vercel.app/p/tablet-floating-tool-palette.md",
      "demo": "https://designlounge.vercel.app/demo/tablet-floating-tool-palette.html",
      "source": "tailwind"
    },
    {
      "id": "mobile-fullscreen-menu",
      "n": "019",
      "title": "Full-screen mobile menu",
      "summary": "A hamburger that morphs into an X while the page fades, the background shifts from cream to navy and five 64px serif links rise in with a 55ms stagger, plus a small-links row and a language switch.",
      "platform": "mobile-web",
      "type": "component",
      "category": "navbar",
      "tags": [
        "navigation",
        "menu",
        "overlay",
        "hamburger",
        "editorial"
      ],
      "styles": [
        "editorial",
        "paper",
        "dark"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#EFE9DF",
        "#14213D",
        "#1C1A17",
        "#E4572E"
      ],
      "fonts": [
        "Instrument Serif",
        "Schibsted Grotesk"
      ],
      "url": "https://designlounge.vercel.app/p/mobile-fullscreen-menu",
      "brief": "https://designlounge.vercel.app/p/mobile-fullscreen-menu.md",
      "demo": "https://designlounge.vercel.app/demo/mobile-fullscreen-menu.html",
      "source": "lamalama"
    },
    {
      "id": "ios-grouped-settings",
      "n": "020",
      "title": "Grouped settings list",
      "summary": "An iOS-style settings screen: inset grouped sections with 44px rows, coloured icon squares, 51×31 spring toggles with a stretching knob, chevron rows with values, footers and a profile row.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "settings",
      "tags": [
        "settings",
        "list",
        "toggle",
        "forms",
        "ios"
      ],
      "styles": [
        "minimal",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 1,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#F2F2F7",
        "#FFFFFF",
        "#1C1C1E",
        "#34C759",
        "#0A7AFF"
      ],
      "fonts": [
        "Inter"
      ],
      "url": "https://designlounge.vercel.app/p/ios-grouped-settings",
      "brief": "https://designlounge.vercel.app/p/ios-grouped-settings.md",
      "demo": "https://designlounge.vercel.app/demo/ios-grouped-settings.html",
      "source": "tailwind"
    },
    {
      "id": "hover-tilt-cards",
      "n": "021",
      "title": "Hover tilt cards",
      "summary": "Three pricing cards tilt up to 8° toward the pointer with a cursor-following specular highlight and a lifted shadow, then spring back with an overshoot curve on leave.",
      "platform": "web",
      "type": "animation",
      "category": "cards",
      "tags": [
        "cards",
        "pricing",
        "hover",
        "3d",
        "tilt"
      ],
      "styles": [
        "dark",
        "minimal"
      ],
      "motion": "rich",
      "difficulty": 1,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#121316",
        "#1B1D22",
        "#EDEEF2",
        "#FF6A3D"
      ],
      "fonts": [
        "Syne",
        "Manrope"
      ],
      "url": "https://designlounge.vercel.app/p/hover-tilt-cards",
      "brief": "https://designlounge.vercel.app/p/hover-tilt-cards.md",
      "demo": "https://designlounge.vercel.app/demo/hover-tilt-cards.html",
      "source": "flist"
    },
    {
      "id": "ink-fill-progress",
      "n": "022",
      "title": "Ink-fill upload progress",
      "summary": "A full-screen upload state where a 168px outlined wordmark fills with ink from the bottom via clip-path as progress advances, with a mono percentage, ETA, speed and per-file checks; click replays.",
      "platform": "web",
      "type": "animation",
      "category": "loaders",
      "tags": [
        "progress",
        "upload",
        "loader",
        "typography"
      ],
      "styles": [
        "paper",
        "brutalist",
        "minimal"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#F4EFE6",
        "#101A2E",
        "#1F6F4A",
        "#D8D1C4"
      ],
      "fonts": [
        "Unbounded",
        "DM Mono"
      ],
      "url": "https://designlounge.vercel.app/p/ink-fill-progress",
      "brief": "https://designlounge.vercel.app/p/ink-fill-progress.md",
      "demo": "https://designlounge.vercel.app/demo/ink-fill-progress.html",
      "source": "60fps"
    },
    {
      "id": "inline-form-validation",
      "n": "023",
      "title": "Inline form validation",
      "summary": "A signup form that validates each field on blur with a 6px shake for errors, a stroke-drawn tick for success, a 4-segment password meter and a submit gated until everything passes.",
      "platform": "web",
      "type": "pattern",
      "category": "inputs",
      "tags": [
        "form",
        "validation",
        "signup",
        "password",
        "accessibility"
      ],
      "styles": [
        "editorial",
        "soft",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#FBFAF7",
        "#EFE7DA",
        "#221E1A",
        "#2F5D50",
        "#B4432A"
      ],
      "fonts": [
        "DM Serif Display",
        "DM Sans"
      ],
      "url": "https://designlounge.vercel.app/p/inline-form-validation",
      "brief": "https://designlounge.vercel.app/p/inline-form-validation.md",
      "demo": "https://designlounge.vercel.app/demo/inline-form-validation.html",
      "source": "mendo"
    },
    {
      "id": "kanban-board",
      "n": "024",
      "title": "Kanban board",
      "summary": "Four 292px columns with live counts, labelled cards with avatars, pointer-event drag-and-drop with a 3° tilted ghost and a dashed drop placeholder, plus [ ] keyboard moves.",
      "platform": "web",
      "type": "layout",
      "category": "dashboard",
      "tags": [
        "kanban",
        "board",
        "drag-and-drop",
        "project"
      ],
      "styles": [
        "minimal",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 3,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#F3F4F6",
        "#E9EBEE",
        "#FFFFFF",
        "#161A1F",
        "#0E7C7B"
      ],
      "fonts": [
        "Schibsted Grotesk"
      ],
      "url": "https://designlounge.vercel.app/p/kanban-board",
      "brief": "https://designlounge.vercel.app/p/kanban-board.md",
      "demo": "https://designlounge.vercel.app/demo/kanban-board.html",
      "source": "moremedia"
    },
    {
      "id": "kinetic-type-marquee",
      "n": "025",
      "title": "Kinetic type marquee",
      "summary": "Three rows of 136px variable-font text scroll at different speeds and directions; hovering a row eases it to quarter speed; the middle row is outlined and the weight breathes 300–720.",
      "platform": "web",
      "type": "animation",
      "category": "text-motion",
      "tags": [
        "typography",
        "marquee",
        "variable-font",
        "specimen",
        "hero"
      ],
      "styles": [
        "kinetic",
        "editorial",
        "paper"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#EFEBE3",
        "#15140F",
        "#D8432B",
        "#D4CEC2"
      ],
      "fonts": [
        "Bricolage Grotesque"
      ],
      "url": "https://designlounge.vercel.app/p/kinetic-type-marquee",
      "brief": "https://designlounge.vercel.app/p/kinetic-type-marquee.md",
      "demo": "https://designlounge.vercel.app/demo/kinetic-type-marquee.html",
      "source": "susan"
    },
    {
      "id": "lamp-theme-toggle",
      "n": "026",
      "title": "Lamp pull-cord theme toggle",
      "summary": "A hanging brass lamp with a pull cord that switches the whole page between day and night with a radial clip-path reveal starting at the bulb; reduced motion crossfades.",
      "platform": "web",
      "type": "component",
      "category": "micro",
      "tags": [
        "theme",
        "dark-mode",
        "toggle",
        "view-transition",
        "editorial"
      ],
      "styles": [
        "editorial",
        "paper",
        "dark"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#F3EBDD",
        "#14161E",
        "#2B2620",
        "#B4552D",
        "#F2B94F"
      ],
      "fonts": [
        "Libre Caslon Text",
        "Work Sans"
      ],
      "url": "https://designlounge.vercel.app/p/lamp-theme-toggle",
      "brief": "https://designlounge.vercel.app/p/lamp-theme-toggle.md",
      "demo": "https://designlounge.vercel.app/demo/lamp-theme-toggle.html",
      "source": "60fps"
    },
    {
      "id": "ios-large-title-collapse",
      "n": "027",
      "title": "Large title collapse on scroll",
      "summary": "A 34px serif large title shrinks and fades into a 17px centred toolbar title as the list scrolls; the glass toolbar's fill, blur and hairline scale with scroll and the search field collapses.",
      "platform": "mobile-app",
      "type": "animation",
      "category": "scroll",
      "tags": [
        "navigation",
        "toolbar",
        "scroll",
        "glass",
        "ios",
        "editorial"
      ],
      "styles": [
        "paper",
        "editorial",
        "glass"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#FBF8F3",
        "#FFFFFF",
        "#221F1B",
        "#B5442F"
      ],
      "fonts": [
        "Playfair Display",
        "Inter"
      ],
      "url": "https://designlounge.vercel.app/p/ios-large-title-collapse",
      "brief": "https://designlounge.vercel.app/p/ios-large-title-collapse.md",
      "demo": "https://designlounge.vercel.app/demo/ios-large-title-collapse.html",
      "source": "susan"
    },
    {
      "id": "luxe-product-detail",
      "n": "028",
      "title": "Luxe product detail",
      "summary": "Fragrance product page: CSS-only bottle with three glass variants, Cormorant serif name, a size radio with a sliding black indicator, and an Add to bag button that morphs to a gold Added state.",
      "platform": "web",
      "type": "screen",
      "category": "ecommerce",
      "tags": [
        "ecommerce",
        "product",
        "luxury",
        "selector",
        "button"
      ],
      "styles": [
        "luxe",
        "editorial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#F4EFE6",
        "#141210",
        "#B8945A",
        "#E9E2D4",
        "#8F7140"
      ],
      "fonts": [
        "Cormorant Garamond",
        "Karla"
      ],
      "url": "https://designlounge.vercel.app/p/luxe-product-detail",
      "brief": "https://designlounge.vercel.app/p/luxe-product-detail.md",
      "demo": "https://designlounge.vercel.app/demo/luxe-product-detail.html",
      "source": "abel"
    },
    {
      "id": "luxe-serif-style",
      "n": "029",
      "title": "Luxe serif design style",
      "summary": "High-contrast Cormorant Garamond with Karla small caps, hairline gold rules, cream and charcoal surfaces and centre-out underlines; a nav, four buttons, a newsletter input, a product card and a quote.",
      "platform": "web",
      "type": "style",
      "category": "design-language",
      "tags": [
        "style-guide",
        "luxe",
        "serif",
        "ecommerce",
        "typography"
      ],
      "styles": [
        "luxe",
        "editorial",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#F3EEE4",
        "#2A2724",
        "#B08D57",
        "#EAE3D6"
      ],
      "fonts": [
        "Cormorant Garamond",
        "Karla"
      ],
      "url": "https://designlounge.vercel.app/p/luxe-serif-style",
      "brief": "https://designlounge.vercel.app/p/luxe-serif-style.md",
      "demo": "https://designlounge.vercel.app/demo/luxe-serif-style.html",
      "source": "linear"
    },
    {
      "id": "m3-fab-menu",
      "n": "030",
      "title": "M3 expanding FAB menu",
      "summary": "A dark-tonal Material 3 Expressive FAB that rotates its plus 45°, rounds to a circle and unfurls three labelled pill actions with a 40ms stagger behind a scrim.",
      "platform": "mobile-app",
      "type": "component",
      "category": "buttons",
      "tags": [
        "material",
        "fab",
        "menu",
        "actions",
        "dark"
      ],
      "styles": [
        "material",
        "dark"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#101413",
        "#1C2120",
        "#7FD8C6",
        "#00504A",
        "#9FF3E1"
      ],
      "fonts": [
        "Manrope"
      ],
      "url": "https://designlounge.vercel.app/p/m3-fab-menu",
      "brief": "https://designlounge.vercel.app/p/m3-fab-menu.md",
      "demo": "https://designlounge.vercel.app/demo/m3-fab-menu.html",
      "source": "usearticle"
    },
    {
      "id": "m3-expressive-home",
      "n": "031",
      "title": "M3 Expressive home feed",
      "summary": "A warm-tonal Material 3 Expressive home: 36px greeting, morphing segmented group with a shape loader, 28px tonal cards, a floating 5-action toolbar and an extended FAB.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "dashboard",
      "tags": [
        "material",
        "home",
        "feed",
        "toolbar",
        "fab",
        "cards"
      ],
      "styles": [
        "material",
        "soft",
        "playful"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#FFF8F3",
        "#F1E2D3",
        "#8A4A1D",
        "#FFDBC8",
        "#DFE9C8"
      ],
      "fonts": [
        "Rubik"
      ],
      "url": "https://designlounge.vercel.app/p/m3-expressive-home",
      "brief": "https://designlounge.vercel.app/p/m3-expressive-home.md",
      "demo": "https://designlounge.vercel.app/demo/m3-expressive-home.html",
      "source": "dontboardme"
    },
    {
      "id": "m3-navigation-drawer",
      "n": "032",
      "title": "M3 modal navigation drawer",
      "summary": "A 360px Material 3 Expressive modal drawer that slides in under a scrim from a top-app-bar hamburger, with full-width tonal pill for the active item, section headers, dividers and badges.",
      "platform": "mobile-app",
      "type": "component",
      "category": "navigation",
      "tags": [
        "material",
        "navigation",
        "drawer",
        "menu",
        "app-bar"
      ],
      "styles": [
        "material",
        "minimal",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#FBF8FF",
        "#F4F1FB",
        "#4A4AB8",
        "#DFE1FF",
        "#7A4F7D"
      ],
      "fonts": [
        "Roboto Flex"
      ],
      "url": "https://designlounge.vercel.app/p/m3-navigation-drawer",
      "brief": "https://designlounge.vercel.app/p/m3-navigation-drawer.md",
      "demo": "https://designlounge.vercel.app/demo/m3-navigation-drawer.html",
      "source": "60fps"
    },
    {
      "id": "m3-search-bar-morph",
      "n": "033",
      "title": "M3 search bar morph",
      "summary": "A Material 3 Expressive container transform: a 56px pill search bar in a dark top app bar grows into a full-screen search view (radius 28→0) with suggestions fading in; the back arrow reverses it.",
      "platform": "mobile-app",
      "type": "animation",
      "category": "inputs",
      "tags": [
        "material",
        "search",
        "container-transform",
        "app-bar",
        "dark"
      ],
      "styles": [
        "material",
        "dark",
        "kinetic"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#0F1512",
        "#252E2A",
        "#9AD6A8",
        "#1F4D2F",
        "#B5F2C3"
      ],
      "fonts": [
        "Gabarito"
      ],
      "url": "https://designlounge.vercel.app/p/m3-search-bar-morph",
      "brief": "https://designlounge.vercel.app/p/m3-search-bar-morph.md",
      "demo": "https://designlounge.vercel.app/demo/m3-search-bar-morph.html",
      "source": "dontboardme"
    },
    {
      "id": "magazine-editorial-grid",
      "n": "034",
      "title": "Magazine editorial grid",
      "summary": "An asymmetric 12-column editorial front: a 7-column lead story, three sidebar stories, a numbered index that highlights its story on hover, and hairline rules throughout.",
      "platform": "web",
      "type": "layout",
      "category": "blog",
      "tags": [
        "editorial",
        "magazine",
        "grid",
        "typography"
      ],
      "styles": [
        "editorial",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#FBF8F2",
        "#141210",
        "#8A2A2B",
        "#D9D3C6"
      ],
      "fonts": [
        "Playfair Display",
        "Inter"
      ],
      "url": "https://designlounge.vercel.app/p/magazine-editorial-grid",
      "brief": "https://designlounge.vercel.app/p/magazine-editorial-grid.md",
      "demo": "https://designlounge.vercel.app/demo/magazine-editorial-grid.html",
      "source": "mendo"
    },
    {
      "id": "masonry-gallery-captions",
      "n": "035",
      "title": "Masonry gallery with captions",
      "summary": "A 4-column CSS-columns masonry of 14 CSS-painted tiles; hover slides a caption bar up from the bottom, and a chip row filters by series with a fade.",
      "platform": "web",
      "type": "layout",
      "category": "gallery",
      "tags": [
        "gallery",
        "masonry",
        "portfolio",
        "filter"
      ],
      "styles": [
        "dark",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#151517",
        "#1C1C1F",
        "#F1EFE9",
        "#F05D3B"
      ],
      "fonts": [
        "Syne",
        "Manrope"
      ],
      "url": "https://designlounge.vercel.app/p/masonry-gallery-captions",
      "brief": "https://designlounge.vercel.app/p/masonry-gallery-captions.md",
      "demo": "https://designlounge.vercel.app/demo/masonry-gallery-captions.html",
      "source": "60fps"
    },
    {
      "id": "mobile-landing-sticky-cta",
      "n": "036",
      "title": "Mobile landing with sticky CTA",
      "summary": "A 390px marketing landing page: Fraunces headline, scroll-snap feature carousel, social-proof block, FAQ accordion and a CTA bar that slides up once the hero scrolls away.",
      "platform": "mobile-web",
      "type": "screen",
      "category": "landing",
      "tags": [
        "landing",
        "marketing",
        "carousel",
        "accordion",
        "cta"
      ],
      "styles": [
        "editorial",
        "paper",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#F6F1E8",
        "#FFFDF8",
        "#1E1B16",
        "#2F6B3A"
      ],
      "fonts": [
        "Fraunces",
        "Instrument Sans"
      ],
      "url": "https://designlounge.vercel.app/p/mobile-landing-sticky-cta",
      "brief": "https://designlounge.vercel.app/p/mobile-landing-sticky-cta.md",
      "demo": "https://designlounge.vercel.app/demo/mobile-landing-sticky-cta.html",
      "source": "stripe"
    },
    {
      "id": "modal-dialog-focus-trap",
      "n": "037",
      "title": "Modal dialog with focus trap",
      "summary": "Native <dialog> modals that open with a 240ms scale .96→1 and scrim fade, trap focus, close on Esc or scrim click, plus a destructive variant gated by a type-to-confirm input.",
      "platform": "web",
      "type": "component",
      "category": "overlays",
      "tags": [
        "dialog",
        "modal",
        "confirm",
        "destructive",
        "focus"
      ],
      "styles": [
        "minimal",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 1,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#F4F4F2",
        "#FFFFFF",
        "#1B1B1A",
        "#2F5BEA",
        "#C62828"
      ],
      "fonts": [
        "Bricolage Grotesque"
      ],
      "url": "https://designlounge.vercel.app/p/modal-dialog-focus-trap",
      "brief": "https://designlounge.vercel.app/p/modal-dialog-focus-trap.md",
      "demo": "https://designlounge.vercel.app/demo/modal-dialog-focus-trap.html",
      "source": "icm"
    },
    {
      "id": "multi-step-form-stepper",
      "n": "038",
      "title": "Multi-step form stepper",
      "summary": "A three-step workspace setup with a horizontal stepper whose connectors fill on completion, direction-aware 40px slide transitions, validation on Continue and a review step with Edit links.",
      "platform": "web",
      "type": "component",
      "category": "inputs",
      "tags": [
        "form",
        "stepper",
        "onboarding",
        "validation",
        "wizard"
      ],
      "styles": [
        "soft",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#FBF8F4",
        "#FFFFFF",
        "#221E1B",
        "#D2603A"
      ],
      "fonts": [
        "Syne",
        "Manrope"
      ],
      "url": "https://designlounge.vercel.app/p/multi-step-form-stepper",
      "brief": "https://designlounge.vercel.app/p/multi-step-form-stepper.md",
      "demo": "https://designlounge.vercel.app/demo/multi-step-form-stepper.html",
      "source": "mindmarket"
    },
    {
      "id": "neo-brutalist-style",
      "n": "039",
      "title": "Neo-brutalist design style",
      "summary": "Thick 2.5px black borders, hard 4px 4px 0 offset shadows, flat yellow and blue fills, and hover that moves the element into its shadow; buttons, inputs, a card, toggles and tags.",
      "platform": "web",
      "type": "style",
      "category": "design-language",
      "tags": [
        "style-guide",
        "brutalist",
        "components",
        "buttons",
        "toggles"
      ],
      "styles": [
        "brutalist",
        "playful"
      ],
      "motion": "subtle",
      "difficulty": 1,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#F5F5F0",
        "#111111",
        "#FFD23F",
        "#3A86FF"
      ],
      "fonts": [
        "Archivo Black",
        "Archivo"
      ],
      "url": "https://designlounge.vercel.app/p/neo-brutalist-style",
      "brief": "https://designlounge.vercel.app/p/neo-brutalist-style.md",
      "demo": "https://designlounge.vercel.app/demo/neo-brutalist-style.html",
      "source": "icm"
    },
    {
      "id": "nested-dropdown-menu",
      "n": "040",
      "title": "Nested dropdown menu",
      "summary": "An application menubar with click-to-open menus, hover submenus guarded by a safe-triangle delay, check and radio items, a shortcuts column and complete keyboard support including typeahead.",
      "platform": "web",
      "type": "component",
      "category": "navigation",
      "tags": [
        "menu",
        "dropdown",
        "submenu",
        "menubar",
        "keyboard"
      ],
      "styles": [
        "industrial",
        "dark"
      ],
      "motion": "subtle",
      "difficulty": 3,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#1C1F24",
        "#262A31",
        "#E6E9EE",
        "#5AB0FF"
      ],
      "fonts": [
        "Archivo Black",
        "Archivo"
      ],
      "url": "https://designlounge.vercel.app/p/nested-dropdown-menu",
      "brief": "https://designlounge.vercel.app/p/nested-dropdown-menu.md",
      "demo": "https://designlounge.vercel.app/demo/nested-dropdown-menu.html",
      "source": "tailwind"
    },
    {
      "id": "notification-center-panel",
      "n": "041",
      "title": "Notification center panel",
      "summary": "A bell with an unread dot opens a 380px top-right panel with All/Mentions/Following tabs, Today/Yesterday groups, unread dots that scale away on Mark all read, and an empty tab state.",
      "platform": "web",
      "type": "component",
      "category": "overlays",
      "tags": [
        "notifications",
        "popover",
        "tabs",
        "dashboard",
        "dark"
      ],
      "styles": [
        "dark",
        "minimal",
        "industrial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#0E1116",
        "#161B22",
        "#E6EAF0",
        "#4C8DFF"
      ],
      "fonts": [
        "Space Grotesk",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/notification-center-panel",
      "brief": "https://designlounge.vercel.app/p/notification-center-panel.md",
      "demo": "https://designlounge.vercel.app/demo/notification-center-panel.html",
      "source": "mwdt"
    },
    {
      "id": "ios-now-playing",
      "n": "042",
      "title": "Now playing",
      "summary": "A full-screen player: CSS-gradient album art with SVG grain, the same art blurred as the backdrop, a scrubber with a fat drag thumb, a path-morphing play/pause and time-synced lyrics.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "media",
      "tags": [
        "music",
        "player",
        "scrubber",
        "lyrics",
        "ios",
        "dark"
      ],
      "styles": [
        "dark",
        "luxe",
        "glass"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#1A0F16",
        "#F2683B",
        "#8E1F4A",
        "#FFF5EE",
        "#FFB28A"
      ],
      "fonts": [
        "Familjen Grotesk"
      ],
      "url": "https://designlounge.vercel.app/p/ios-now-playing",
      "brief": "https://designlounge.vercel.app/p/ios-now-playing.md",
      "demo": "https://designlounge.vercel.app/demo/ios-now-playing.html",
      "source": "dragone"
    },
    {
      "id": "odometer-counter",
      "n": "043",
      "title": "Odometer counter",
      "summary": "A 112px revenue figure whose digits roll vertically on 0–9 strips (700ms expo-out, 24ms cascade from the right), with comma grouping, four add/refund buttons and a 3s auto-tick.",
      "platform": "web",
      "type": "animation",
      "category": "stats",
      "tags": [
        "counter",
        "odometer",
        "numbers",
        "dashboard",
        "revenue"
      ],
      "styles": [
        "paper",
        "editorial",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#F6F1E8",
        "#2B241B",
        "#2E7D5B",
        "#E4DCCF"
      ],
      "fonts": [
        "Fraunces",
        "Instrument Sans"
      ],
      "url": "https://designlounge.vercel.app/p/odometer-counter",
      "brief": "https://designlounge.vercel.app/p/odometer-counter.md",
      "demo": "https://designlounge.vercel.app/demo/odometer-counter.html",
      "source": "stripe"
    },
    {
      "id": "ios-onboarding-carousel",
      "n": "044",
      "title": "Onboarding carousel",
      "summary": "Three snap-scrolled onboarding slides with CSS-drawn illustrations, page dots that stretch into a 24px pill, and a Continue button that becomes Get started on the last slide.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "onboarding",
      "tags": [
        "onboarding",
        "carousel",
        "pagination",
        "ios",
        "dark"
      ],
      "styles": [
        "dark",
        "editorial",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#0E1220",
        "#161B2E",
        "#F3EFE6",
        "#F0C27B"
      ],
      "fonts": [
        "Instrument Serif",
        "Manrope"
      ],
      "url": "https://designlounge.vercel.app/p/ios-onboarding-carousel",
      "brief": "https://designlounge.vercel.app/p/ios-onboarding-carousel.md",
      "demo": "https://designlounge.vercel.app/demo/ios-onboarding-carousel.html",
      "source": "60fps"
    },
    {
      "id": "onboarding-checklist",
      "n": "045",
      "title": "Onboarding checklist card",
      "summary": "A 400px setup card with a 44px progress ring and five tasks; completing one draws a tick and collapses it, 100% dissolves into a calm 'You're set' state, and the card is dismissable.",
      "platform": "web",
      "type": "pattern",
      "category": "onboarding",
      "tags": [
        "onboarding",
        "checklist",
        "progress",
        "activation",
        "card"
      ],
      "styles": [
        "soft",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#F4F6F2",
        "#FFFFFF",
        "#1C231D",
        "#2E7D4F"
      ],
      "fonts": [
        "Bricolage Grotesque"
      ],
      "url": "https://designlounge.vercel.app/p/onboarding-checklist",
      "brief": "https://designlounge.vercel.app/p/onboarding-checklist.md",
      "demo": "https://designlounge.vercel.app/demo/onboarding-checklist.html",
      "source": "60fps"
    },
    {
      "id": "mobile-one-page-checkout",
      "n": "046",
      "title": "One-page mobile checkout",
      "summary": "A 390px single-page checkout: collapsible order summary, address form with correct input types and autocomplete, payment radio cards, inline validation and a sticky Pay button carrying the total.",
      "platform": "mobile-web",
      "type": "screen",
      "category": "ecommerce",
      "tags": [
        "checkout",
        "form",
        "ecommerce",
        "validation",
        "payment"
      ],
      "styles": [
        "minimal",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#FAFAF9",
        "#FFFFFF",
        "#18181B",
        "#C2410C",
        "#B42318"
      ],
      "fonts": [
        "Public Sans"
      ],
      "url": "https://designlounge.vercel.app/p/mobile-one-page-checkout",
      "brief": "https://designlounge.vercel.app/p/mobile-one-page-checkout.md",
      "demo": "https://designlounge.vercel.app/demo/mobile-one-page-checkout.html",
      "source": "abel"
    },
    {
      "id": "optimistic-like-button",
      "n": "047",
      "title": "Optimistic like button",
      "summary": "A heart that fills with a scale bounce and an 8-particle CSS burst, increments the count instantly, and shows an undo toast with a 5s rollback when the fake request fails.",
      "platform": "web",
      "type": "animation",
      "category": "micro",
      "tags": [
        "like",
        "optimistic-ui",
        "toast",
        "micro-interaction",
        "social"
      ],
      "styles": [
        "dark",
        "playful",
        "minimal"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#10141C",
        "#171C26",
        "#EEF1F6",
        "#FF4D6D"
      ],
      "fonts": [
        "Sora"
      ],
      "url": "https://designlounge.vercel.app/p/optimistic-like-button",
      "brief": "https://designlounge.vercel.app/p/optimistic-like-button.md",
      "demo": "https://designlounge.vercel.app/demo/optimistic-like-button.html",
      "source": "60fps"
    },
    {
      "id": "orbit-dots-loader",
      "n": "048",
      "title": "Orbit dots loader family",
      "summary": "Three pure-CSS loading indicators side by side (orbit dots, staggered bars, morphing ring), each ≤ 3 DOM elements, driven by two custom properties with live duration and size sliders.",
      "platform": "web",
      "type": "animation",
      "category": "loaders",
      "tags": [
        "loader",
        "spinner",
        "animation",
        "feedback"
      ],
      "styles": [
        "minimal",
        "kinetic"
      ],
      "motion": "rich",
      "difficulty": 1,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#F2F4F7",
        "#FFFFFF",
        "#0F172A",
        "#0055FF"
      ],
      "fonts": [
        "Space Grotesk",
        "JetBrains Mono"
      ],
      "url": "https://designlounge.vercel.app/p/orbit-dots-loader",
      "brief": "https://designlounge.vercel.app/p/orbit-dots-loader.md",
      "demo": "https://designlounge.vercel.app/demo/orbit-dots-loader.html",
      "source": "60fps"
    },
    {
      "id": "page-transition-curtain",
      "n": "049",
      "title": "Page transition curtain",
      "summary": "Clicking a nav link closes two 50%-wide panels over the page in 450ms, swaps the content behind them, reopens, then the 132px page title enters letter by letter with a 28ms stagger.",
      "platform": "web",
      "type": "animation",
      "category": "transitions",
      "tags": [
        "transition",
        "navigation",
        "curtain",
        "typography",
        "hotel"
      ],
      "styles": [
        "luxe",
        "editorial",
        "dark"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#0F1B17",
        "#17302A",
        "#EFE9DD",
        "#C58B4A"
      ],
      "fonts": [
        "Playfair Display",
        "Inter"
      ],
      "url": "https://designlounge.vercel.app/p/page-transition-curtain",
      "brief": "https://designlounge.vercel.app/p/page-transition-curtain.md",
      "demo": "https://designlounge.vercel.app/demo/page-transition-curtain.html",
      "source": "gmx"
    },
    {
      "id": "paper-ink-style",
      "n": "050",
      "title": "Paper and ink design style",
      "summary": "A warm off-white paper surface with SVG feTurbulence grain, ink-black type, Newsreader italics, a hand-drawn red underline, stamp-like tags and an approval stamp; buttons, inputs, a card and a table.",
      "platform": "web",
      "type": "style",
      "category": "design-language",
      "tags": [
        "style-guide",
        "paper",
        "editorial",
        "typography",
        "components"
      ],
      "styles": [
        "paper",
        "editorial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#F4EFE4",
        "#EDE6D8",
        "#1A1814",
        "#A63A2B"
      ],
      "fonts": [
        "Newsreader",
        "Inter"
      ],
      "url": "https://designlounge.vercel.app/p/paper-ink-style",
      "brief": "https://designlounge.vercel.app/p/paper-ink-style.md",
      "demo": "https://designlounge.vercel.app/demo/paper-ink-style.html",
      "source": "stripe"
    },
    {
      "id": "paper-article-reader",
      "n": "051",
      "title": "Paper article reader",
      "summary": "Long-form article page on warm paper: Newsreader body at 19px/1.6 on a 66ch measure, a four-line drop cap, a pull quote, floated margin notes at ≥1100px and a 2px sticky reading-progress hairline.",
      "platform": "web",
      "type": "screen",
      "category": "reading",
      "tags": [
        "article",
        "reading",
        "typography",
        "sidenotes",
        "progress"
      ],
      "styles": [
        "paper",
        "editorial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#F7F2E8",
        "#2A2420",
        "#4A6B45",
        "#DCD3C3"
      ],
      "fonts": [
        "Newsreader",
        "Public Sans"
      ],
      "url": "https://designlounge.vercel.app/p/paper-article-reader",
      "brief": "https://designlounge.vercel.app/p/paper-article-reader.md",
      "demo": "https://designlounge.vercel.app/demo/paper-article-reader.html",
      "source": "mendo"
    },
    {
      "id": "ios-pull-to-refresh",
      "n": "052",
      "title": "Pull to refresh with drawn ring",
      "summary": "Dragging a deployments feed down draws a mint ring in proportion to the pull, spins it while loading for 1.2s, then inserts a new row at the top with a highlight that fades.",
      "platform": "mobile-app",
      "type": "animation",
      "category": "loaders",
      "tags": [
        "pull-to-refresh",
        "list",
        "gesture",
        "loading",
        "dark"
      ],
      "styles": [
        "dark",
        "terminal",
        "minimal"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#14161A",
        "#1C1F25",
        "#ECEBE6",
        "#5EEAD4"
      ],
      "fonts": [
        "Sora"
      ],
      "url": "https://designlounge.vercel.app/p/ios-pull-to-refresh",
      "brief": "https://designlounge.vercel.app/p/ios-pull-to-refresh.md",
      "demo": "https://designlounge.vercel.app/demo/ios-pull-to-refresh.html",
      "source": "sibal"
    },
    {
      "id": "pwa-app-shell",
      "n": "053",
      "title": "PWA app shell hydration",
      "summary": "A cache-first app shell: fixed top bar and bottom nav render instantly, content cards show shimmering skeletons, then hydrate in with a 70ms stagger; a button replays the cold start.",
      "platform": "pwa",
      "type": "layout",
      "category": "loaders",
      "tags": [
        "pwa",
        "app-shell",
        "skeleton",
        "loading",
        "cache",
        "transit"
      ],
      "styles": [
        "dark",
        "industrial",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#141A21",
        "#1B232C",
        "#222C37",
        "#FF6A4D",
        "#7FE0B2"
      ],
      "fonts": [
        "Chivo",
        "Chivo Mono"
      ],
      "url": "https://designlounge.vercel.app/p/pwa-app-shell",
      "brief": "https://designlounge.vercel.app/p/pwa-app-shell.md",
      "demo": "https://designlounge.vercel.app/demo/pwa-app-shell.html",
      "source": "sibal"
    },
    {
      "id": "pwa-connectivity-banner",
      "n": "054",
      "title": "PWA connectivity banner",
      "summary": "A 40px offline banner with a pulsing dot slides under the status bar, cached rows get a tag while uncached rows grey out; reconnecting flips it green and retracts it after 2s.",
      "platform": "pwa",
      "type": "pattern",
      "category": "feedback",
      "tags": [
        "pwa",
        "offline",
        "banner",
        "status",
        "cache"
      ],
      "styles": [
        "minimal",
        "swiss",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 1,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#F3F5F7",
        "#FFFFFF",
        "#FFF1CF",
        "#8A5A00",
        "#25A35A"
      ],
      "fonts": [
        "Space Grotesk",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/pwa-connectivity-banner",
      "brief": "https://designlounge.vercel.app/p/pwa-connectivity-banner.md",
      "demo": "https://designlounge.vercel.app/demo/pwa-connectivity-banner.html",
      "source": "60fps"
    },
    {
      "id": "pwa-install-sheet",
      "n": "055",
      "title": "PWA install sheet",
      "summary": "A bottom sheet that springs up to pitch installing a PWA, with an icon, three benefits, Install and Not now. Then it shows an inline progress bar and an 'Added to Home Screen' chip.",
      "platform": "pwa",
      "type": "pattern",
      "category": "overlays",
      "tags": [
        "pwa",
        "install",
        "bottom-sheet",
        "onboarding",
        "dialog"
      ],
      "styles": [
        "paper",
        "editorial",
        "soft"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#F6F1E9",
        "#EFE7DB",
        "#5B2A4E",
        "#EADBE4",
        "#5F7A4B"
      ],
      "fonts": [
        "Fraunces",
        "Instrument Sans"
      ],
      "url": "https://designlounge.vercel.app/p/pwa-install-sheet",
      "brief": "https://designlounge.vercel.app/p/pwa-install-sheet.md",
      "demo": "https://designlounge.vercel.app/demo/pwa-install-sheet.html",
      "source": "stripe"
    },
    {
      "id": "pwa-news-reader",
      "n": "056",
      "title": "PWA news reader",
      "summary": "A paper-toned news front with serif headlines: scrolling section chips, a lead card with a CSS-illustrated landscape, a story list with reading times and saved-for-offline marks, and a bottom nav.",
      "platform": "pwa",
      "type": "screen",
      "category": "reading",
      "tags": [
        "pwa",
        "news",
        "reading",
        "offline",
        "chips",
        "list"
      ],
      "styles": [
        "editorial",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#FAF6EE",
        "#F1EBDF",
        "#1C1A17",
        "#A83A2A",
        "#2F6B4F"
      ],
      "fonts": [
        "Newsreader",
        "Inter"
      ],
      "url": "https://designlounge.vercel.app/p/pwa-news-reader",
      "brief": "https://designlounge.vercel.app/p/pwa-news-reader.md",
      "demo": "https://designlounge.vercel.app/demo/pwa-news-reader.html",
      "source": "mendo"
    },
    {
      "id": "pwa-update-toast",
      "n": "057",
      "title": "PWA update toast",
      "summary": "A 'New version available' toast rises above the bottom nav with a Reload action and a 10s countdown ring; Reload sweeps a lime panel over the screen showing v2.4.1, then reveals the updated app.",
      "platform": "pwa",
      "type": "component",
      "category": "feedback",
      "tags": [
        "pwa",
        "toast",
        "update",
        "service-worker",
        "countdown",
        "dark"
      ],
      "styles": [
        "dark",
        "kinetic",
        "minimal"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#191A1C",
        "#212326",
        "#F1F0EC",
        "#C8F04C",
        "#1B2400"
      ],
      "fonts": [
        "Bricolage Grotesque"
      ],
      "url": "https://designlounge.vercel.app/p/pwa-update-toast",
      "brief": "https://designlounge.vercel.app/p/pwa-update-toast.md",
      "demo": "https://designlounge.vercel.app/demo/pwa-update-toast.html",
      "source": "60fps"
    },
    {
      "id": "scroll-reading-progress",
      "n": "058",
      "title": "Scroll reading progress",
      "summary": "A long-form article with a 3px scroll-driven progress bar (CSS animation-timeline: scroll() with a JS fallback) and a sticky table of contents that marks the current section.",
      "platform": "web",
      "type": "animation",
      "category": "scroll",
      "tags": [
        "scroll",
        "article",
        "progress",
        "table-of-contents",
        "editorial"
      ],
      "styles": [
        "editorial",
        "dark"
      ],
      "motion": "subtle",
      "difficulty": 1,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#18171A",
        "#ECE6DA",
        "#8FC1A9",
        "#2C2B30"
      ],
      "fonts": [
        "Newsreader",
        "Inter"
      ],
      "url": "https://designlounge.vercel.app/p/scroll-reading-progress",
      "brief": "https://designlounge.vercel.app/p/scroll-reading-progress.md",
      "demo": "https://designlounge.vercel.app/demo/scroll-reading-progress.html",
      "source": "haunted"
    },
    {
      "id": "settings-page-sticky-nav",
      "n": "059",
      "title": "Settings page with sticky nav",
      "summary": "Account settings: a 220px sticky section nav with scroll-spy highlight beside a 720px column of grouped setting cards with switches, selects, text inputs and an armed danger zone.",
      "platform": "web",
      "type": "screen",
      "category": "settings",
      "tags": [
        "settings",
        "navigation",
        "forms",
        "scroll-spy",
        "toggle"
      ],
      "styles": [
        "minimal",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#F5F5F4",
        "#FFFFFF",
        "#1C1C1A",
        "#0F766E",
        "#B42318"
      ],
      "fonts": [
        "Onest"
      ],
      "url": "https://designlounge.vercel.app/p/settings-page-sticky-nav",
      "brief": "https://designlounge.vercel.app/p/settings-page-sticky-nav.md",
      "demo": "https://designlounge.vercel.app/demo/settings-page-sticky-nav.html",
      "source": "mindmarket"
    },
    {
      "id": "tablet-sidebar-overlay-pin",
      "n": "060",
      "title": "Sidebar with overlay and pin modes",
      "summary": "A 280px notes sidebar on a 1180×820 tablet that either overlays the page with a scrim and shadow or pins so the content reflows; a pin toggle switches modes with one 320ms transition.",
      "platform": "tablet",
      "type": "component",
      "category": "navigation",
      "tags": [
        "sidebar",
        "navigation",
        "notes",
        "overlay",
        "layout"
      ],
      "styles": [
        "minimal",
        "soft",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#FBFBF9",
        "#F1F0EC",
        "#1C1B19",
        "#5B4FCF",
        "#E3E0F7"
      ],
      "fonts": [
        "DM Serif Display",
        "DM Sans"
      ],
      "url": "https://designlounge.vercel.app/p/tablet-sidebar-overlay-pin",
      "brief": "https://designlounge.vercel.app/p/tablet-sidebar-overlay-pin.md",
      "demo": "https://designlounge.vercel.app/demo/tablet-sidebar-overlay-pin.html",
      "source": "60fps"
    },
    {
      "id": "skeleton-to-content-swap",
      "n": "061",
      "title": "Skeleton to content swap",
      "summary": "A six-card feed shows shimmering skeletons whose bars match the final content geometry exactly, then content fades and rises in with a 40ms stagger; Reload replays.",
      "platform": "web",
      "type": "animation",
      "category": "loaders",
      "tags": [
        "loading",
        "skeleton",
        "feed",
        "cards",
        "stagger"
      ],
      "styles": [
        "minimal",
        "soft",
        "editorial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#F3F5F7",
        "#FFFFFF",
        "#151A20",
        "#0F766E",
        "#E9EDF0"
      ],
      "fonts": [
        "DM Serif Display",
        "DM Sans"
      ],
      "url": "https://designlounge.vercel.app/p/skeleton-to-content-swap",
      "brief": "https://designlounge.vercel.app/p/skeleton-to-content-swap.md",
      "demo": "https://designlounge.vercel.app/demo/skeleton-to-content-swap.html",
      "source": "60fps"
    },
    {
      "id": "segmented-control-sliding",
      "n": "062",
      "title": "Sliding segmented control",
      "summary": "Segmented controls in 2, 3 and 5-segment variants: an ivory pill slides between options over 260ms with a mid-travel squash, arrow keys move selection, and each switches a content panel.",
      "platform": "web",
      "type": "component",
      "category": "navigation",
      "tags": [
        "segmented-control",
        "tabs",
        "toggle",
        "radio",
        "banking"
      ],
      "styles": [
        "luxe",
        "dark"
      ],
      "motion": "subtle",
      "difficulty": 1,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#151412",
        "#1C1A17",
        "#F2EDE4",
        "#EF6F5E"
      ],
      "fonts": [
        "Cormorant Garamond",
        "Karla"
      ],
      "url": "https://designlounge.vercel.app/p/segmented-control-sliding",
      "brief": "https://designlounge.vercel.app/p/segmented-control-sliding.md",
      "demo": "https://designlounge.vercel.app/demo/segmented-control-sliding.html",
      "source": "tailwind"
    },
    {
      "id": "split-sign-in",
      "n": "063",
      "title": "Split sign-in",
      "summary": "45/55 sign-in screen: floating-label fields, a password visibility toggle and a magic-link button, beside a deep-green panel with testimonials crossfading every 5 seconds.",
      "platform": "web",
      "type": "screen",
      "category": "auth",
      "tags": [
        "auth",
        "form",
        "sign-in",
        "testimonial",
        "split"
      ],
      "styles": [
        "editorial",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#FBFAF7",
        "#0F2E26",
        "#F1E9D6",
        "#1B1F1C",
        "#1F6B52"
      ],
      "fonts": [
        "DM Serif Display",
        "DM Sans"
      ],
      "url": "https://designlounge.vercel.app/p/split-sign-in",
      "brief": "https://designlounge.vercel.app/p/split-sign-in.md",
      "demo": "https://designlounge.vercel.app/demo/split-sign-in.html",
      "source": "igloo"
    },
    {
      "id": "spotlight-hover-grid",
      "n": "064",
      "title": "Spotlight hover grid",
      "summary": "A 4×3 grid of feature cards where a white radial light follows the pointer across card borders (1px mask-composited ring) and surfaces (6% wash); white-on-charcoal, no colour, no blur.",
      "platform": "web",
      "type": "animation",
      "category": "cursor",
      "tags": [
        "grid",
        "hover",
        "spotlight",
        "cards",
        "features"
      ],
      "styles": [
        "dark",
        "minimal",
        "industrial"
      ],
      "motion": "subtle",
      "difficulty": 1,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#1A1A1A",
        "#1F1F1F",
        "#F2F2F2",
        "#2C2C2C"
      ],
      "fonts": [
        "Schibsted Grotesk"
      ],
      "url": "https://designlounge.vercel.app/p/spotlight-hover-grid",
      "brief": "https://designlounge.vercel.app/p/spotlight-hover-grid.md",
      "demo": "https://designlounge.vercel.app/demo/spotlight-hover-grid.html",
      "source": "noomo"
    },
    {
      "id": "staggered-list-reveal",
      "n": "065",
      "title": "Staggered list reveal",
      "summary": "Twelve transaction rows slide up 14px and fade in with a 30ms stagger and expo-out easing on load; a filter input animates leaving rows out (180ms) before re-staggering the survivors.",
      "platform": "web",
      "type": "animation",
      "category": "scroll",
      "tags": [
        "list",
        "stagger",
        "filter",
        "table",
        "banking"
      ],
      "styles": [
        "minimal",
        "swiss"
      ],
      "motion": "subtle",
      "difficulty": 1,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#FAF9F6",
        "#FFFFFF",
        "#1A1917",
        "#2A5BD7",
        "#1F7A4D"
      ],
      "fonts": [
        "Space Grotesk",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/staggered-list-reveal",
      "brief": "https://designlounge.vercel.app/p/staggered-list-reveal.md",
      "demo": "https://designlounge.vercel.app/demo/staggered-list-reveal.html",
      "source": "noomo"
    },
    {
      "id": "sticky-split-story",
      "n": "066",
      "title": "Sticky split scroll story",
      "summary": "A two-column scrollytelling layout: four text chapters scroll on the left while a sticky sky illustration on the right crossfades and shifts colour as each chapter enters view.",
      "platform": "web",
      "type": "layout",
      "category": "scroll",
      "tags": [
        "storytelling",
        "scroll",
        "sticky",
        "editorial"
      ],
      "styles": [
        "editorial",
        "dark"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#14110F",
        "#EFE9DF",
        "#D9A441",
        "#8FA7C9",
        "#E28A5A"
      ],
      "fonts": [
        "Cormorant Garamond",
        "Karla"
      ],
      "url": "https://designlounge.vercel.app/p/sticky-split-story",
      "brief": "https://designlounge.vercel.app/p/sticky-split-story.md",
      "demo": "https://designlounge.vercel.app/demo/sticky-split-story.html",
      "source": "haunted"
    },
    {
      "id": "mobile-story-viewer",
      "n": "067",
      "title": "Story viewer with hold to pause",
      "summary": "A 390px story viewer: segmented 3px progress bars fill over 5s each, tap zones step forward and back, a 200ms hold pauses, and a pull-down of 120px closes the viewer over gradient scenes.",
      "platform": "mobile-web",
      "type": "animation",
      "category": "media",
      "tags": [
        "stories",
        "gestures",
        "progress",
        "media",
        "viewer"
      ],
      "styles": [
        "dark",
        "kinetic"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#0B0B0D",
        "#F4F2EE",
        "#FFB454",
        "#F2994A",
        "#2F6F9F"
      ],
      "fonts": [
        "Bricolage Grotesque"
      ],
      "url": "https://designlounge.vercel.app/p/mobile-story-viewer",
      "brief": "https://designlounge.vercel.app/p/mobile-story-viewer.md",
      "demo": "https://designlounge.vercel.app/demo/mobile-story-viewer.html",
      "source": "dragone"
    },
    {
      "id": "ios-swipe-row-actions",
      "n": "068",
      "title": "Swipe-to-reveal row actions",
      "summary": "Mail rows that swipe left to reveal 80px Archive and Delete buttons with rubber-band overshoot, commit on a 60% full swipe with a nudge, and swipe right to pin.",
      "platform": "mobile-app",
      "type": "pattern",
      "category": "micro",
      "tags": [
        "list",
        "gesture",
        "swipe",
        "mail",
        "ios"
      ],
      "styles": [
        "minimal",
        "paper"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#FBFAF7",
        "#FFFFFF",
        "#1A1916",
        "#D93B2B",
        "#2F8F5B"
      ],
      "fonts": [
        "Schibsted Grotesk"
      ],
      "url": "https://designlounge.vercel.app/p/ios-swipe-row-actions",
      "brief": "https://designlounge.vercel.app/p/ios-swipe-row-actions.md",
      "demo": "https://designlounge.vercel.app/demo/ios-swipe-row-actions.html",
      "source": "60fps"
    },
    {
      "id": "swiss-grid-pricing",
      "n": "069",
      "title": "Swiss grid pricing",
      "summary": "Pricing page on a visible 12-column hairline grid: three tiers in strict 4-column blocks, numbered features, red accent, and a monthly/yearly switch that tweens the prices.",
      "platform": "web",
      "type": "screen",
      "category": "pricing",
      "tags": [
        "pricing",
        "grid",
        "toggle",
        "marketing",
        "swiss"
      ],
      "styles": [
        "swiss",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#FAFAF8",
        "#111111",
        "#E2001A",
        "#DCDCD7"
      ],
      "fonts": [
        "Schibsted Grotesk"
      ],
      "url": "https://designlounge.vercel.app/p/swiss-grid-pricing",
      "brief": "https://designlounge.vercel.app/p/swiss-grid-pricing.md",
      "demo": "https://designlounge.vercel.app/demo/swiss-grid-pricing.html",
      "source": "abel"
    },
    {
      "id": "swiss-poster-style",
      "n": "070",
      "title": "Swiss poster style",
      "summary": "A Swiss-school exhibition poster: Archivo in red/black/off-white, a 130px word rotated −90°, a strict 12 × 8 grid with visible margins, and grid lines that reveal on hover.",
      "platform": "web",
      "type": "style",
      "category": "design-language",
      "tags": [
        "poster",
        "swiss",
        "typography",
        "grid"
      ],
      "styles": [
        "swiss",
        "brutalist"
      ],
      "motion": "subtle",
      "difficulty": 1,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#F4F3EF",
        "#121212",
        "#E1251B"
      ],
      "fonts": [
        "Archivo"
      ],
      "url": "https://designlounge.vercel.app/p/swiss-poster-style",
      "brief": "https://designlounge.vercel.app/p/swiss-poster-style.md",
      "demo": "https://designlounge.vercel.app/demo/swiss-poster-style.html",
      "source": "moremedia"
    },
    {
      "id": "tablet-split-view-mail",
      "n": "071",
      "title": "Tablet mail split view",
      "summary": "A 1180×820 three-pane mail client: a collapsible 72px folder rail, a 320px message list with a 3px accent selection bar, a reading pane with an action header and j/k keyboard navigation.",
      "platform": "tablet",
      "type": "layout",
      "category": "messaging",
      "tags": [
        "mail",
        "split-view",
        "three-pane",
        "list-detail",
        "keyboard"
      ],
      "styles": [
        "minimal",
        "swiss"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#F7F7F8",
        "#FFFFFF",
        "#1A1C1E",
        "#3B5BDB",
        "#E8ECFB"
      ],
      "fonts": [
        "Inter",
        "Newsreader"
      ],
      "url": "https://designlounge.vercel.app/p/tablet-split-view-mail",
      "brief": "https://designlounge.vercel.app/p/tablet-split-view-mail.md",
      "demo": "https://designlounge.vercel.app/demo/tablet-split-view-mail.html",
      "source": "igloo"
    },
    {
      "id": "tablet-dashboard-grid",
      "n": "072",
      "title": "Tablet ops dashboard grid",
      "summary": "A 1180×820 dark ops dashboard: 3×2 card grid with a crosshair-hover SVG line chart, a dash-offset gauge, a live event list that inserts a row every 4s, and a mono segmented time control.",
      "platform": "tablet",
      "type": "screen",
      "category": "dashboard",
      "tags": [
        "dashboard",
        "chart",
        "gauge",
        "live-data",
        "dark",
        "ops"
      ],
      "styles": [
        "dark",
        "terminal",
        "industrial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#0C1117",
        "#131A22",
        "#E8EDF2",
        "#5AD1B3",
        "#F0B429"
      ],
      "fonts": [
        "Chivo",
        "Chivo Mono"
      ],
      "url": "https://designlounge.vercel.app/p/tablet-dashboard-grid",
      "brief": "https://designlounge.vercel.app/p/tablet-dashboard-grid.md",
      "demo": "https://designlounge.vercel.app/demo/tablet-dashboard-grid.html",
      "source": "icm"
    },
    {
      "id": "tabs-morphing-underline",
      "n": "073",
      "title": "Tabs with morphing underline",
      "summary": "Nine scrollable tabs whose 2px underline stretches to span old and new tab, then settles (180ms + 200ms), with a panel crossfade and fade masks at the strip's overflow edges.",
      "platform": "web",
      "type": "component",
      "category": "navigation",
      "tags": [
        "tabs",
        "navigation",
        "underline",
        "overflow",
        "publishing"
      ],
      "styles": [
        "editorial",
        "dark"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#16130F",
        "#1E1A15",
        "#F3EDE3",
        "#B5C27A"
      ],
      "fonts": [
        "Libre Caslon Text",
        "Work Sans"
      ],
      "url": "https://designlounge.vercel.app/p/tabs-morphing-underline",
      "brief": "https://designlounge.vercel.app/p/tabs-morphing-underline.md",
      "demo": "https://designlounge.vercel.app/demo/tabs-morphing-underline.html",
      "source": "tailwind"
    },
    {
      "id": "terminal-404",
      "n": "074",
      "title": "Terminal 404",
      "summary": "A 404 page styled as a terminal session: typewriter output at 22ms per character, a blinking block cursor, and a prompt that accepts home, back, search, help, ls and clear. Green on near-black.",
      "platform": "web",
      "type": "screen",
      "category": "error",
      "tags": [
        "404",
        "error",
        "terminal",
        "typewriter",
        "command-line"
      ],
      "styles": [
        "terminal",
        "dark"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#0B0F0C",
        "#5EF08A",
        "#D7E3DA",
        "#8FA596",
        "#E3B04B"
      ],
      "fonts": [
        "Chivo Mono"
      ],
      "url": "https://designlounge.vercel.app/p/terminal-404",
      "brief": "https://designlounge.vercel.app/p/terminal-404.md",
      "demo": "https://designlounge.vercel.app/demo/terminal-404.html",
      "source": "mindmarket"
    },
    {
      "id": "terminal-ui-style",
      "n": "075",
      "title": "Terminal UI style sheet",
      "summary": "A monospace 1ch-grid style sheet for a terminal-style ops UI: box-drawing panel titles, bracketed buttons, key-value rows, an amber-highlighted list, a table, a status line and a : command input.",
      "platform": "web",
      "type": "style",
      "category": "design-language",
      "tags": [
        "terminal",
        "monospace",
        "style-guide",
        "ops"
      ],
      "styles": [
        "terminal",
        "dark"
      ],
      "motion": "none",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#0C1210",
        "#0F1614",
        "#D7E3D5",
        "#F0B429",
        "#7FD18A"
      ],
      "fonts": [
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/terminal-ui-style",
      "brief": "https://designlounge.vercel.app/p/terminal-ui-style.md",
      "demo": "https://designlounge.vercel.app/demo/terminal-ui-style.html",
      "source": "abel"
    },
    {
      "id": "text-scramble-reveal",
      "n": "076",
      "title": "Text scramble reveal",
      "summary": "A 64px monospace headline resolves from random glyphs to its final text left to right in 900ms; three headlines cycle every 4s with a progress dash per headline; click or Space skips.",
      "platform": "web",
      "type": "animation",
      "category": "text-motion",
      "tags": [
        "typography",
        "text-effect",
        "headline",
        "monospace",
        "hero"
      ],
      "styles": [
        "terminal",
        "minimal",
        "paper"
      ],
      "motion": "rich",
      "difficulty": 1,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#F2F0EB",
        "#141414",
        "#9B9891",
        "#E4572E"
      ],
      "fonts": [
        "Chivo Mono"
      ],
      "url": "https://designlounge.vercel.app/p/text-scramble-reveal",
      "brief": "https://designlounge.vercel.app/p/text-scramble-reveal.md",
      "demo": "https://designlounge.vercel.app/demo/text-scramble-reveal.html",
      "source": "susan"
    },
    {
      "id": "toast-stack",
      "n": "077",
      "title": "Toast stack",
      "summary": "Bottom-right toasts that stack like cards (scale .96/.92, 12px offsets), expand on hover, drain a 2px progress hairline over 5s and pause while you look at them.",
      "platform": "web",
      "type": "component",
      "category": "feedback",
      "tags": [
        "toast",
        "notification",
        "feedback",
        "stack",
        "hover"
      ],
      "styles": [
        "dark",
        "soft"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#0E1411",
        "#16201A",
        "#EDF3EE",
        "#9BE38C"
      ],
      "fonts": [
        "DM Serif Display",
        "DM Sans"
      ],
      "url": "https://designlounge.vercel.app/p/toast-stack",
      "brief": "https://designlounge.vercel.app/p/toast-stack.md",
      "demo": "https://designlounge.vercel.app/demo/toast-stack.html",
      "source": "60fps"
    },
    {
      "id": "tablet-two-column-reader",
      "n": "078",
      "title": "Two-column tablet reader",
      "summary": "A 1180×820 book reader that flows a chapter into two CSS columns, turns pages by sliding the column container, with a chapter overlay, a 16–22px size stepper and Libre Caslon body text.",
      "platform": "tablet",
      "type": "screen",
      "category": "reading",
      "tags": [
        "reader",
        "typography",
        "columns",
        "pagination",
        "editorial"
      ],
      "styles": [
        "paper",
        "editorial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-29T00:00:00.000Z",
      "palette": [
        "#F4EFE6",
        "#FAF6EE",
        "#2A2620",
        "#8B3A2F"
      ],
      "fonts": [
        "Libre Caslon Text",
        "Work Sans"
      ],
      "url": "https://designlounge.vercel.app/p/tablet-two-column-reader",
      "brief": "https://designlounge.vercel.app/p/tablet-two-column-reader.md",
      "demo": "https://designlounge.vercel.app/demo/tablet-two-column-reader.html",
      "source": "mendo"
    },
    {
      "id": "card-flip-3d",
      "n": "079",
      "title": "3D card flip trio",
      "summary": "Three wallet cards (debit card, ticket, advisor profile) that flip on click or Enter with 1200px perspective, a 600ms rotate and a 14px mid-flip lift; every back face carries real content.",
      "platform": "web",
      "type": "animation",
      "category": "cards",
      "tags": [
        "card",
        "flip",
        "3d",
        "wallet",
        "transform"
      ],
      "styles": [
        "luxe",
        "dark"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-30T00:00:00.000Z",
      "palette": [
        "#0B1F18",
        "#153428",
        "#EEF3EA",
        "#C9E26A",
        "#F2EFE4"
      ],
      "fonts": [
        "Fraunces",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/card-flip-3d",
      "brief": "https://designlounge.vercel.app/p/card-flip-3d.md",
      "demo": "https://designlounge.vercel.app/demo/card-flip-3d.html",
      "source": "flist"
    },
    {
      "id": "accordion-grid-rows",
      "n": "080",
      "title": "Grid-rows FAQ accordion",
      "summary": "A six-question FAQ whose answers animate open with grid-template-rows 0fr → 1fr over 320ms, one open at a time, chevron rotation and arrow-key movement between serif questions on a paper ground.",
      "platform": "web",
      "type": "component",
      "category": "faq",
      "tags": [
        "accordion",
        "faq",
        "disclosure",
        "keyboard",
        "grid"
      ],
      "styles": [
        "paper",
        "editorial",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 1,
      "featured": false,
      "published": "2026-09-30T00:00:00.000Z",
      "palette": [
        "#F4F0E8",
        "#221D17",
        "#B5472A",
        "#DDD5C6"
      ],
      "fonts": [
        "Newsreader",
        "Inter"
      ],
      "url": "https://designlounge.vercel.app/p/accordion-grid-rows",
      "brief": "https://designlounge.vercel.app/p/accordion-grid-rows.md",
      "demo": "https://designlounge.vercel.app/demo/accordion-grid-rows.html",
      "source": "haunted"
    },
    {
      "id": "hover-image-trail",
      "n": "081",
      "title": "Hover image trail",
      "summary": "An editorial index of 6 project rows; dragging the cursor across a row spawns 180×124px gradient thumbnails every 48px that pop in, drift up and fade, never more than 6 alive.",
      "platform": "web",
      "type": "animation",
      "category": "cursor",
      "tags": [
        "portfolio",
        "cursor",
        "trail",
        "list",
        "hover",
        "editorial"
      ],
      "styles": [
        "editorial",
        "paper",
        "minimal"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-30T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#17161A",
        "#6F6C66",
        "#2F4BD8"
      ],
      "fonts": [
        "Instrument Serif",
        "Hanken Grotesk"
      ],
      "url": "https://designlounge.vercel.app/p/hover-image-trail",
      "brief": "https://designlounge.vercel.app/p/hover-image-trail.md",
      "demo": "https://designlounge.vercel.app/demo/hover-image-trail.html",
      "source": "noomo"
    },
    {
      "id": "ios-app-switcher-stack",
      "n": "082",
      "title": "iOS app switcher stack",
      "summary": "Five app cards fanned in a perspective stack: drag to browse, swipe up to fling one away and reflow, tap to expand it to full screen in 420ms.",
      "platform": "mobile-app",
      "type": "animation",
      "category": "transitions",
      "tags": [
        "app-switcher",
        "cards",
        "gesture",
        "multitasking",
        "ios"
      ],
      "styles": [
        "dark",
        "kinetic"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-09-30T00:00:00.000Z",
      "palette": [
        "#0B0B10",
        "#F4F3F7",
        "#1F6F5A",
        "#E0632A",
        "#6C4FD3"
      ],
      "fonts": [
        "Syne",
        "Manrope"
      ],
      "url": "https://designlounge.vercel.app/p/ios-app-switcher-stack",
      "brief": "https://designlounge.vercel.app/p/ios-app-switcher-stack.md",
      "demo": "https://designlounge.vercel.app/demo/ios-app-switcher-stack.html",
      "source": "noomo"
    },
    {
      "id": "ios-context-menu-lift",
      "n": "083",
      "title": "iOS context menu lift",
      "summary": "Press-and-hold a chat bubble for 350ms: it lifts to 1.04 with a shadow, the thread blurs, and a four-item menu springs in with a 40ms stagger.",
      "platform": "mobile-app",
      "type": "animation",
      "category": "overlays",
      "tags": [
        "context-menu",
        "long-press",
        "messaging",
        "ios",
        "haptics"
      ],
      "styles": [
        "minimal",
        "soft"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-30T00:00:00.000Z",
      "palette": [
        "#F7F7F9",
        "#E9E9EE",
        "#0A7AFF",
        "#111114",
        "#E5352B"
      ],
      "fonts": [
        "Schibsted Grotesk"
      ],
      "url": "https://designlounge.vercel.app/p/ios-context-menu-lift",
      "brief": "https://designlounge.vercel.app/p/ios-context-menu-lift.md",
      "demo": "https://designlounge.vercel.app/demo/ios-context-menu-lift.html",
      "source": "mindmarket"
    },
    {
      "id": "logo-draw-intro",
      "n": "084",
      "title": "Logo draw site intro",
      "summary": "A black-and-white site intro: an SVG monogram strokes itself in over 900ms, fills red, then two panels split to reveal a 100px headline whose letters stagger up; a Replay control re-runs it.",
      "platform": "web",
      "type": "animation",
      "category": "transitions",
      "tags": [
        "intro",
        "preloader",
        "svg",
        "stagger",
        "hero",
        "reveal"
      ],
      "styles": [
        "swiss",
        "brutalist",
        "kinetic"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-30T00:00:00.000Z",
      "palette": [
        "#FFFFFF",
        "#000000",
        "#E0261A",
        "#5C5C5C"
      ],
      "fonts": [
        "Archivo Black",
        "Archivo"
      ],
      "url": "https://designlounge.vercel.app/p/logo-draw-intro",
      "brief": "https://designlounge.vercel.app/p/logo-draw-intro.md",
      "demo": "https://designlounge.vercel.app/demo/logo-draw-intro.html",
      "source": "noomo"
    },
    {
      "id": "magnetic-buttons",
      "n": "085",
      "title": "Magnetic buttons",
      "summary": "Three CTAs and a nav row whose outlines and labels are pulled toward the cursor inside an 80px radius (up to 10px) and spring back over 500ms; keyboard focus works without the effect.",
      "platform": "web",
      "type": "animation",
      "category": "cursor",
      "tags": [
        "buttons",
        "hover",
        "cursor",
        "navigation",
        "microinteraction"
      ],
      "styles": [
        "dark",
        "industrial",
        "kinetic"
      ],
      "motion": "rich",
      "difficulty": 1,
      "featured": false,
      "published": "2026-09-30T00:00:00.000Z",
      "palette": [
        "#0B0D10",
        "#12151A",
        "#E8EBF0",
        "#C8F04A"
      ],
      "fonts": [
        "Space Grotesk",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/magnetic-buttons",
      "brief": "https://designlounge.vercel.app/p/magnetic-buttons.md",
      "demo": "https://designlounge.vercel.app/demo/magnetic-buttons.html",
      "source": "noomo"
    },
    {
      "id": "shared-element-expand",
      "n": "086",
      "title": "Shared element expand",
      "summary": "Six project cards; clicking one FLIP-animates it (transform + border-radius, 420ms expo-out) into a full detail dialog while the rest fade, and Esc reverses it.",
      "platform": "web",
      "type": "animation",
      "category": "transitions",
      "tags": [
        "flip",
        "transition",
        "cards",
        "dialog",
        "gallery"
      ],
      "styles": [
        "editorial",
        "paper",
        "soft"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-30T00:00:00.000Z",
      "palette": [
        "#F6F1E8",
        "#FFFBF4",
        "#221D18",
        "#C4552D"
      ],
      "fonts": [
        "Fraunces",
        "Instrument Sans"
      ],
      "url": "https://designlounge.vercel.app/p/shared-element-expand",
      "brief": "https://designlounge.vercel.app/p/shared-element-expand.md",
      "demo": "https://designlounge.vercel.app/demo/shared-element-expand.html",
      "source": "60fps"
    },
    {
      "id": "variable-font-proximity",
      "n": "087",
      "title": "Variable font proximity headline",
      "summary": "A 148px Fraunces headline where every letter's weight (300–900) follows cursor distance within a 260px radius, easing back on leave; keyboard and reduced motion get a static 800.",
      "platform": "web",
      "type": "animation",
      "category": "text-motion",
      "tags": [
        "typography",
        "variable-font",
        "hero",
        "cursor",
        "specimen"
      ],
      "styles": [
        "editorial",
        "paper",
        "kinetic"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-09-30T00:00:00.000Z",
      "palette": [
        "#F4EFE4",
        "#1C1A16",
        "#6B655A",
        "#B4472B"
      ],
      "fonts": [
        "Fraunces",
        "Instrument Sans"
      ],
      "url": "https://designlounge.vercel.app/p/variable-font-proximity",
      "brief": "https://designlounge.vercel.app/p/variable-font-proximity.md",
      "demo": "https://designlounge.vercel.app/demo/variable-font-proximity.html",
      "source": "susan"
    },
    {
      "id": "account-menu-panel",
      "n": "088",
      "title": "Account menu panel",
      "summary": "A 280px account menu under the avatar: identity, three destinations, sign out, arrow keys, and Escape returning focus.",
      "platform": "web",
      "type": "component",
      "category": "overlays",
      "tags": [
        "account",
        "menu",
        "overlay",
        "focus"
      ],
      "styles": [
        "minimal"
      ],
      "motion": "none",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#EEF1F4",
        "#FFFFFF",
        "#12171C",
        "#0F4C81"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/account-menu-panel",
      "brief": "https://designlounge.vercel.app/p/account-menu-panel.md",
      "demo": "https://designlounge.vercel.app/demo/account-menu-panel.html",
      "source": "tailwind"
    },
    {
      "id": "ios-health-activity-rings",
      "n": "089",
      "title": "Activity rings with weekly picker",
      "summary": "A dark iOS 26 health summary: three concentric rings sweep closed with an overflow lap, counters tick up, and a seven-day bar chart switches the day.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "dashboard",
      "tags": [
        "health",
        "rings",
        "chart",
        "fitness",
        "ios"
      ],
      "styles": [
        "dark",
        "minimal"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#0B0B0C",
        "#161618",
        "#FF3B5C",
        "#A8F53A",
        "#34E3E0"
      ],
      "fonts": [
        "Geist",
        "Geist Mono"
      ],
      "url": "https://designlounge.vercel.app/p/ios-health-activity-rings",
      "brief": "https://designlounge.vercel.app/p/ios-health-activity-rings.md",
      "demo": "https://designlounge.vercel.app/demo/ios-health-activity-rings.html",
      "source": "mendo"
    },
    {
      "id": "landing-agency-case-wall",
      "n": "090",
      "title": "Agency landing with case wall",
      "summary": "North Yard: an 88px lockup, a hard-edged 2×2 case wall that inverts on hover, and a sticky 56px orange CTA bar.",
      "platform": "web",
      "type": "screen",
      "category": "landing",
      "tags": [
        "landing",
        "agency",
        "grid",
        "brutalist",
        "cta"
      ],
      "styles": [
        "brutalist",
        "swiss"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#FFFFFF",
        "#000000",
        "#FF4D00",
        "#555555"
      ],
      "fonts": [
        "Archivo Black",
        "Archivo"
      ],
      "url": "https://designlounge.vercel.app/p/landing-agency-case-wall",
      "brief": "https://designlounge.vercel.app/p/landing-agency-case-wall.md",
      "demo": "https://designlounge.vercel.app/demo/landing-agency-case-wall.html",
      "source": "moremedia"
    },
    {
      "id": "hero-ai-prompt-cycle",
      "n": "091",
      "title": "AI prompt cycle hero",
      "summary": "A Hollis product hero whose question box types four real company prompts, then streams a sourced answer; chips, Enter and New question all drive the same cycle.",
      "platform": "web",
      "type": "section",
      "category": "hero",
      "tags": [
        "hero",
        "prompt",
        "typewriter",
        "saas",
        "answer"
      ],
      "styles": [
        "minimal",
        "soft"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#EDF1EE",
        "#17201B",
        "#E8643C",
        "#FBFCFB"
      ],
      "fonts": [
        "Instrument Serif",
        "Instrument Sans"
      ],
      "url": "https://designlounge.vercel.app/p/hero-ai-prompt-cycle",
      "brief": "https://designlounge.vercel.app/p/hero-ai-prompt-cycle.md",
      "demo": "https://designlounge.vercel.app/demo/hero-ai-prompt-cycle.html",
      "source": "stripe"
    },
    {
      "id": "pricing-annual-toggle-roll",
      "n": "092",
      "title": "Annual toggle with rolling prices",
      "summary": "Pricing rows whose 96px prices roll digit by digit like an odometer when billing flips to annual, while a tilted savings badge springs in.",
      "platform": "web",
      "type": "section",
      "category": "pricing",
      "tags": [
        "pricing",
        "toggle",
        "odometer",
        "billing",
        "numbers"
      ],
      "styles": [
        "minimal",
        "soft"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#EDEFF2",
        "#F8F9FB",
        "#161B26",
        "#E2643A",
        "#FBE3D7"
      ],
      "fonts": [
        "Figtree",
        "Geist Mono"
      ],
      "url": "https://designlounge.vercel.app/p/pricing-annual-toggle-roll",
      "brief": "https://designlounge.vercel.app/p/pricing-annual-toggle-roll.md",
      "demo": "https://designlounge.vercel.app/demo/pricing-annual-toggle-roll.html",
      "source": "abel"
    },
    {
      "id": "portfolio-architect-index",
      "n": "093",
      "title": "Architect index with plan drawings",
      "summary": "A Swiss architect index: 120px wordmark, an 8-row 12-column project list, and a sticky right panel that crossfades a geometric plan on hover.",
      "platform": "web",
      "type": "screen",
      "category": "portfolio",
      "tags": [
        "portfolio",
        "index",
        "architecture",
        "grid",
        "hover"
      ],
      "styles": [
        "swiss",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": true,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#E6E2D8",
        "#161412",
        "#6A655C",
        "#C8102E"
      ],
      "fonts": [
        "Schibsted Grotesk",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/portfolio-architect-index",
      "brief": "https://designlounge.vercel.app/p/portfolio-architect-index.md",
      "demo": "https://designlounge.vercel.app/demo/portfolio-architect-index.html",
      "source": "moremedia"
    },
    {
      "id": "hero-asymmetric-type-lockup",
      "n": "094",
      "title": "Asymmetric type lockup hero",
      "summary": "A poetry-press hero: 160px italic QUARTO broken across an asymmetric 12-column grid, a 14px paragraph in the leftover cell, and one underline button.",
      "platform": "web",
      "type": "section",
      "category": "hero",
      "tags": [
        "hero",
        "typography",
        "editorial",
        "lockup"
      ],
      "styles": [
        "editorial",
        "kinetic"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#F3E4D2",
        "#27170F",
        "#A33A24",
        "#6A4E3E"
      ],
      "fonts": [
        "Playfair Display",
        "Karla"
      ],
      "url": "https://designlounge.vercel.app/p/hero-asymmetric-type-lockup",
      "brief": "https://designlounge.vercel.app/p/hero-asymmetric-type-lockup.md",
      "demo": "https://designlounge.vercel.app/demo/hero-asymmetric-type-lockup.html",
      "source": "haunted"
    },
    {
      "id": "audit-activity-log",
      "n": "095",
      "title": "Audit activity log",
      "summary": "A timestamped activity list with access, change, and denied filters. Mono times, a status dot, and a badge on each row.",
      "platform": "web",
      "type": "component",
      "category": "data",
      "tags": [
        "audit",
        "log",
        "activity",
        "filter"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#1F4D3A"
      ],
      "fonts": [
        "IBM Plex Sans",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/audit-activity-log",
      "brief": "https://designlounge.vercel.app/p/audit-activity-log.md",
      "demo": "https://designlounge.vercel.app/demo/audit-activity-log.html",
      "source": "60fps"
    },
    {
      "id": "hero-bauhaus-composition",
      "n": "096",
      "title": "Bauhaus composition hero",
      "summary": "A summer-school hero whose primary-colour circle, square, triangle and half-disc rearrange into three compositions on click, beside a 136px grotesk headline.",
      "platform": "web",
      "type": "section",
      "category": "hero",
      "tags": [
        "hero",
        "geometric",
        "composition",
        "school",
        "landing"
      ],
      "styles": [
        "bauhaus",
        "swiss"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#ECEBE6",
        "#141414",
        "#E1341E",
        "#1F4FBF",
        "#F2B705"
      ],
      "fonts": [
        "Archivo",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/hero-bauhaus-composition",
      "brief": "https://designlounge.vercel.app/p/hero-bauhaus-composition.md",
      "demo": "https://designlounge.vercel.app/demo/hero-bauhaus-composition.html",
      "source": "moremedia"
    },
    {
      "id": "bauhaus-style",
      "n": "097",
      "title": "Bauhaus design language kit",
      "summary": "A full Bauhaus UI dialect on one sheet: red, yellow, blue and ink on paper, circle/square/triangle grammar, Josefin Sans lowercase headlines, hard-shadow controls.",
      "platform": "web",
      "type": "style",
      "category": "design-language",
      "tags": [
        "bauhaus",
        "geometric",
        "kit",
        "typography",
        "primary"
      ],
      "styles": [
        "bauhaus",
        "swiss"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#F0EBE0",
        "#151412",
        "#D52B1E",
        "#F3B61F",
        "#1D4F9C"
      ],
      "fonts": [
        "Josefin Sans",
        "Work Sans"
      ],
      "url": "https://designlounge.vercel.app/p/bauhaus-style",
      "brief": "https://designlounge.vercel.app/p/bauhaus-style.md",
      "demo": "https://designlounge.vercel.app/demo/bauhaus-style.html",
      "source": "abel"
    },
    {
      "id": "billing-plan-summary",
      "n": "098",
      "title": "Billing plan summary",
      "summary": "The billing screen: current plan, a 72 percent usage bar, three invoices, and one primary action to change plan.",
      "platform": "web",
      "type": "screen",
      "category": "settings",
      "tags": [
        "billing",
        "plan",
        "usage",
        "invoices"
      ],
      "styles": [
        "minimal",
        "paper"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#F4EFE4",
        "#FFFAF0",
        "#152033",
        "#8A6230"
      ],
      "fonts": [
        "IBM Plex Sans",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/billing-plan-summary",
      "brief": "https://designlounge.vercel.app/p/billing-plan-summary.md",
      "demo": "https://designlounge.vercel.app/demo/billing-plan-summary.html",
      "source": "stripe"
    },
    {
      "id": "footer-centered-colophon",
      "n": "099",
      "title": "Centered colophon footer",
      "summary": "End of an essay: the last paragraph fades out, then a centered colophon (wordmark, three links, city, year) and a back-to-top that smoothly scrolls the article.",
      "platform": "web",
      "type": "section",
      "category": "footer",
      "tags": [
        "footer",
        "colophon",
        "editorial",
        "essay"
      ],
      "styles": [
        "minimal",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#E8E4D6",
        "#1C1B18",
        "#2F4A3C",
        "#5C574E"
      ],
      "fonts": [
        "EB Garamond",
        "Hanken Grotesk"
      ],
      "url": "https://designlounge.vercel.app/p/footer-centered-colophon",
      "brief": "https://designlounge.vercel.app/p/footer-centered-colophon.md",
      "demo": "https://designlounge.vercel.app/demo/footer-centered-colophon.html",
      "source": "susan"
    },
    {
      "id": "checkbox-draw-list",
      "n": "100",
      "title": "Checkbox draw list",
      "summary": "A ruled-paper to-do list where red-pencil checkmarks draw in, strike-throughs sweep across each task, and a 232px serif numeral counts progress.",
      "platform": "web",
      "type": "component",
      "category": "inputs",
      "tags": [
        "checkbox",
        "todo",
        "list",
        "progress",
        "form"
      ],
      "styles": [
        "minimal",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#ECE6D8",
        "#F8F4EA",
        "#1F2A26",
        "#C2412D",
        "#D98B7A"
      ],
      "fonts": [
        "Newsreader",
        "Work Sans"
      ],
      "url": "https://designlounge.vercel.app/p/checkbox-draw-list",
      "brief": "https://designlounge.vercel.app/p/checkbox-draw-list.md",
      "demo": "https://designlounge.vercel.app/demo/checkbox-draw-list.html",
      "source": "tailwind"
    },
    {
      "id": "clay-soft-style",
      "n": "101",
      "title": "Clay soft design language kit",
      "summary": "A puffy clay kit: cream surfaces with inner light and a deep colour shelf, Bagel Fat One titles, Fredoka UI, and a Pebble Days habit-app home.",
      "platform": "web",
      "type": "style",
      "category": "design-language",
      "tags": [
        "clay",
        "playful",
        "kit",
        "kids",
        "habit"
      ],
      "styles": [
        "clay",
        "playful"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#FFF1E4",
        "#FF7A59",
        "#8EC5E8",
        "#FFD56A",
        "#7BC47F"
      ],
      "fonts": [
        "Bagel Fat One",
        "Fredoka"
      ],
      "url": "https://designlounge.vercel.app/p/clay-soft-style",
      "brief": "https://designlounge.vercel.app/p/clay-soft-style.md",
      "demo": "https://designlounge.vercel.app/demo/clay-soft-style.html",
      "source": "abel"
    },
    {
      "id": "contact-conversational-form",
      "n": "102",
      "title": "Conversational contact form",
      "summary": "A one-question-at-a-time enquiry form on sunflower yellow: 64px serif questions, Enter to advance, A–D shortcuts, a progress bar and a review step.",
      "platform": "web",
      "type": "section",
      "category": "contact",
      "tags": [
        "contact",
        "form",
        "conversational",
        "multi-step",
        "keyboard"
      ],
      "styles": [
        "editorial",
        "playful"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#FFD84D",
        "#1B1A17",
        "#E5402A",
        "#F6CB2F"
      ],
      "fonts": [
        "Young Serif",
        "Figtree"
      ],
      "url": "https://designlounge.vercel.app/p/contact-conversational-form",
      "brief": "https://designlounge.vercel.app/p/contact-conversational-form.md",
      "demo": "https://designlounge.vercel.app/demo/contact-conversational-form.html",
      "source": "dontboardme"
    },
    {
      "id": "profile-creator-masthead",
      "n": "103",
      "title": "Creator profile with masthead",
      "summary": "Essayist Mira Joshi: a 104px Literata name, toggleable role chips, a 3-up work strip, and a Sunday-letter subscribe row.",
      "platform": "web",
      "type": "screen",
      "category": "profile",
      "tags": [
        "profile",
        "editorial",
        "masthead",
        "subscribe",
        "chips"
      ],
      "styles": [
        "editorial",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#F6F1E6",
        "#1C1914",
        "#3D4F3A",
        "#5C564C"
      ],
      "fonts": [
        "Literata",
        "Public Sans"
      ],
      "url": "https://designlounge.vercel.app/p/profile-creator-masthead",
      "brief": "https://designlounge.vercel.app/p/profile-creator-masthead.md",
      "demo": "https://designlounge.vercel.app/demo/profile-creator-masthead.html",
      "source": "icm"
    },
    {
      "id": "cta-split-dark-band",
      "n": "104",
      "title": "CTA split dark band",
      "summary": "A last-section Volta Range closer: 88px Unbounded headline left, work-email capture and oxide button right, on a #121512 band.",
      "platform": "web",
      "type": "section",
      "category": "cta",
      "tags": [
        "cta",
        "footer",
        "form",
        "hardware"
      ],
      "styles": [
        "dark",
        "industrial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#121512",
        "#ECE7DA",
        "#E24A1A",
        "#CFC8B8"
      ],
      "fonts": [
        "Unbounded",
        "Onest"
      ],
      "url": "https://designlounge.vercel.app/p/cta-split-dark-band",
      "brief": "https://designlounge.vercel.app/p/cta-split-dark-band.md",
      "demo": "https://designlounge.vercel.app/demo/cta-split-dark-band.html",
      "source": "mwdt"
    },
    {
      "id": "cyber-hud-style",
      "n": "105",
      "title": "Cyber HUD design language kit",
      "summary": "A near-black ops HUD kit: cut corners, scanlines, signal teal on void, Chakra Petch titles, Share Tech Mono readouts, and a Sector 7-K nav console.",
      "platform": "web",
      "type": "style",
      "category": "design-language",
      "tags": [
        "cyber",
        "hud",
        "kit",
        "dark",
        "console"
      ],
      "styles": [
        "cyber",
        "dark"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#070B0C",
        "#0E171A",
        "#2EE6C8",
        "#C8EDE6",
        "#E8B84A"
      ],
      "fonts": [
        "Chakra Petch",
        "Share Tech Mono"
      ],
      "url": "https://designlounge.vercel.app/p/cyber-hud-style",
      "brief": "https://designlounge.vercel.app/p/cyber-hud-style.md",
      "demo": "https://designlounge.vercel.app/demo/cyber-hud-style.html",
      "source": "mwdt"
    },
    {
      "id": "landing-devtool-dark",
      "n": "106",
      "title": "Dark devtool landing page",
      "summary": "A full landing page for an edge image API: lime-on-graphite, tabbed curl/Node/Python samples with copy, a hairline feature grid, giant latency numerals and pricing.",
      "platform": "web",
      "type": "screen",
      "category": "landing",
      "tags": [
        "landing",
        "api",
        "developer",
        "code",
        "pricing"
      ],
      "styles": [
        "dark",
        "terminal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#0A0B0D",
        "#111316",
        "#ECEEF1",
        "#C8F65A"
      ],
      "fonts": [
        "Geist",
        "Geist Mono"
      ],
      "url": "https://designlounge.vercel.app/p/landing-devtool-dark",
      "brief": "https://designlounge.vercel.app/p/landing-devtool-dark.md",
      "demo": "https://designlounge.vercel.app/demo/landing-devtool-dark.html",
      "source": "linear"
    },
    {
      "id": "deco-hotel-style",
      "n": "107",
      "title": "Deco hotel design language kit",
      "summary": "A 1920s hotel kit: ivory on lacquer, 1px gold hairlines, stepped ziggurats, Italiana display, Josefin Sans UI, and a Vesper reservation scene.",
      "platform": "web",
      "type": "style",
      "category": "design-language",
      "tags": [
        "deco",
        "hotel",
        "kit",
        "gold",
        "identity"
      ],
      "styles": [
        "deco",
        "luxe"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#F6EFE0",
        "#0F1C18",
        "#C4A35A",
        "#8B2A32",
        "#EBE1CC"
      ],
      "fonts": [
        "Italiana",
        "Josefin Sans"
      ],
      "url": "https://designlounge.vercel.app/p/deco-hotel-style",
      "brief": "https://designlounge.vercel.app/p/deco-hotel-style.md",
      "demo": "https://designlounge.vercel.app/demo/deco-hotel-style.html",
      "source": "linear"
    },
    {
      "id": "background-dot-wave",
      "n": "108",
      "title": "Dot wave background",
      "summary": "A canvas field of 24px-grid dots rolling in a slow diagonal sine wave behind a product hero, with a quiet zone under the copy and click-to-ripple.",
      "platform": "web",
      "type": "animation",
      "category": "backgrounds",
      "tags": [
        "background",
        "canvas",
        "dots",
        "hero",
        "wave"
      ],
      "styles": [
        "minimal",
        "dark"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#0A0C0B",
        "#CFE0D6",
        "#EEF2EF",
        "#8FE3B9"
      ],
      "fonts": [
        "Geist",
        "Geist Mono"
      ],
      "url": "https://designlounge.vercel.app/p/background-dot-wave",
      "brief": "https://designlounge.vercel.app/p/background-dot-wave.md",
      "demo": "https://designlounge.vercel.app/demo/background-dot-wave.html",
      "source": "lamalama"
    },
    {
      "id": "hero-editorial-name-rotator",
      "n": "109",
      "title": "Editorial name rotator hero",
      "summary": "A wine-dark portfolio hero: 212px italic 'Isaura Venn.' beside a cycling plate, while two slot-machine words in the deck rotate on a 2.6s clock.",
      "platform": "web",
      "type": "section",
      "category": "hero",
      "tags": [
        "hero",
        "portfolio",
        "rotator",
        "editorial",
        "slots"
      ],
      "styles": [
        "editorial",
        "luxe",
        "dark"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#1C0A0D",
        "#F2E7D8",
        "#C9A86A",
        "#26100F"
      ],
      "fonts": [
        "Bodoni Moda",
        "Tenor Sans"
      ],
      "url": "https://designlounge.vercel.app/p/hero-editorial-name-rotator",
      "brief": "https://designlounge.vercel.app/p/hero-editorial-name-rotator.md",
      "demo": "https://designlounge.vercel.app/demo/hero-editorial-name-rotator.html",
      "source": "gmx"
    },
    {
      "id": "footer-enterprise-sitemap",
      "n": "110",
      "title": "Enterprise sitemap footer",
      "summary": "A dense six-column Swiss sitemap footer with giant index numerals, a live status pill with a 90-day uptime card, and a region and language popover.",
      "platform": "web",
      "type": "section",
      "category": "footer",
      "tags": [
        "footer",
        "sitemap",
        "status",
        "locale",
        "enterprise",
        "saas"
      ],
      "styles": [
        "minimal",
        "swiss"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#F7F7F5",
        "#FFFFFF",
        "#121212",
        "#1F3BFF",
        "#12864A"
      ],
      "fonts": [
        "Hanken Grotesk",
        "JetBrains Mono"
      ],
      "url": "https://designlounge.vercel.app/p/footer-enterprise-sitemap",
      "brief": "https://designlounge.vercel.app/p/footer-enterprise-sitemap.md",
      "demo": "https://designlounge.vercel.app/demo/footer-enterprise-sitemap.html",
      "source": "tailwind"
    },
    {
      "id": "faq-two-column-search",
      "n": "111",
      "title": "FAQ two-column search",
      "summary": "A Kestrel docs FAQ: eight accordion rows in two columns, a 44px search field that filters them, and an empty state when nothing hits.",
      "platform": "web",
      "type": "section",
      "category": "faq",
      "tags": [
        "faq",
        "search",
        "accordion",
        "docs"
      ],
      "styles": [
        "minimal",
        "swiss"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#F6F6F4",
        "#111111",
        "#1F4E79",
        "#E2E2DC"
      ],
      "fonts": [
        "Geist",
        "Geist Mono"
      ],
      "url": "https://designlounge.vercel.app/p/faq-two-column-search",
      "brief": "https://designlounge.vercel.app/p/faq-two-column-search.md",
      "demo": "https://designlounge.vercel.app/demo/faq-two-column-search.html",
      "source": "dontboardme"
    },
    {
      "id": "landing-fashion-atelier",
      "n": "112",
      "title": "Fashion atelier landing page",
      "summary": "Atelier Lumen: Didone hero, a gradient garment plate, a four-look strip that swaps the plate, and one sitting CTA on bone, charcoal and wine.",
      "platform": "web",
      "type": "screen",
      "category": "landing",
      "tags": [
        "landing",
        "fashion",
        "hero",
        "editorial",
        "lookbook"
      ],
      "styles": [
        "luxe",
        "editorial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": true,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#EFE7DA",
        "#2A2420",
        "#7A2436",
        "#E4D9C8"
      ],
      "fonts": [
        "Bodoni Moda",
        "Tenor Sans"
      ],
      "url": "https://designlounge.vercel.app/p/landing-fashion-atelier",
      "brief": "https://designlounge.vercel.app/p/landing-fashion-atelier.md",
      "demo": "https://designlounge.vercel.app/demo/landing-fashion-atelier.html",
      "source": "gmx"
    },
    {
      "id": "hero-flashlight-reveal",
      "n": "113",
      "title": "Flashlight reveal hero",
      "summary": "A dark observability hero where the cursor is a hard-edged torch that cuts a light disc through the calm headline to expose a second, true one underneath.",
      "platform": "web",
      "type": "section",
      "category": "hero",
      "tags": [
        "hero",
        "cursor",
        "mask",
        "reveal",
        "saas"
      ],
      "styles": [
        "dark",
        "kinetic"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#0A0B0D",
        "#ECEAE4",
        "#EFECE4",
        "#FF3B2F",
        "#5FD38D"
      ],
      "fonts": [
        "Anton",
        "Geist Mono"
      ],
      "url": "https://designlounge.vercel.app/p/hero-flashlight-reveal",
      "brief": "https://designlounge.vercel.app/p/hero-flashlight-reveal.md",
      "demo": "https://designlounge.vercel.app/demo/hero-flashlight-reveal.html",
      "source": "lamalama"
    },
    {
      "id": "navbar-floating-pill-shrink",
      "n": "114",
      "title": "Floating pill navbar",
      "summary": "A full-width transparent nav over a dusk hero that shrinks into a 780px frosted pill on scroll, with a sliding active-section capsule.",
      "platform": "web",
      "type": "section",
      "category": "navbar",
      "tags": [
        "navbar",
        "scroll",
        "sticky",
        "landing",
        "scrollspy"
      ],
      "styles": [
        "glass",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#F3EEE6",
        "#13201A",
        "#FBF6EE",
        "#E8542A",
        "#24314A"
      ],
      "fonts": [
        "Bricolage Grotesque",
        "Geist Mono"
      ],
      "url": "https://designlounge.vercel.app/p/navbar-floating-pill-shrink",
      "brief": "https://designlounge.vercel.app/p/navbar-floating-pill-shrink.md",
      "demo": "https://designlounge.vercel.app/demo/navbar-floating-pill-shrink.html",
      "source": "lamalama"
    },
    {
      "id": "contact-giant-email-copy",
      "n": "115",
      "title": "Giant email, click to copy",
      "summary": "A 200px Anton address fills the contact page; click copies it, flashes the page black, and scrambles the type to COPIED TO CLIPBOARD.",
      "platform": "web",
      "type": "section",
      "category": "contact",
      "tags": [
        "contact",
        "copy",
        "email",
        "scramble",
        "cursor"
      ],
      "styles": [
        "brutalist",
        "kinetic"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#FF4F1A",
        "#0D0D0D",
        "#F2EFE6"
      ],
      "fonts": [
        "Anton",
        "Space Mono"
      ],
      "url": "https://designlounge.vercel.app/p/contact-giant-email-copy",
      "brief": "https://designlounge.vercel.app/p/contact-giant-email-copy.md",
      "demo": "https://designlounge.vercel.app/demo/contact-giant-email-copy.html",
      "source": "dontboardme"
    },
    {
      "id": "footer-giant-wordmark-reveal",
      "n": "116",
      "title": "Giant wordmark reveal footer",
      "summary": "A dark studio footer whose full-width wordmark rises letter by letter out of the bottom edge as you scroll in, with a sitemap and a live local clock.",
      "platform": "web",
      "type": "section",
      "category": "footer",
      "tags": [
        "footer",
        "wordmark",
        "scroll",
        "sitemap",
        "clock",
        "studio"
      ],
      "styles": [
        "minimal",
        "dark"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#0E0F12",
        "#15171B",
        "#ECEBE6",
        "#A3A39C",
        "#B8A6FF"
      ],
      "fonts": [
        "Familjen Grotesk",
        "Geist Mono"
      ],
      "url": "https://designlounge.vercel.app/p/footer-giant-wordmark-reveal",
      "brief": "https://designlounge.vercel.app/p/footer-giant-wordmark-reveal.md",
      "demo": "https://designlounge.vercel.app/demo/footer-giant-wordmark-reveal.html",
      "source": "linear"
    },
    {
      "id": "cursor-ink-blob",
      "n": "117",
      "title": "Ink blob cursor",
      "summary": "A gooey deep-green ink blob lags the pointer across six editorial cards; overlapping cards invert to ink and lift 8px. Replay recenters the blob.",
      "platform": "web",
      "type": "animation",
      "category": "cursor",
      "tags": [
        "cursor",
        "blob",
        "editorial",
        "hover"
      ],
      "styles": [
        "organic",
        "kinetic"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#EFE8D8",
        "#0F2E22",
        "#143D2C",
        "#3D5A45"
      ],
      "fonts": [
        "Instrument Serif",
        "Inter"
      ],
      "url": "https://designlounge.vercel.app/p/cursor-ink-blob",
      "brief": "https://designlounge.vercel.app/p/cursor-ink-blob.md",
      "demo": "https://designlounge.vercel.app/demo/cursor-ink-blob.html",
      "source": "noomo"
    },
    {
      "id": "navbar-island-morph",
      "n": "118",
      "title": "Island morph navbar",
      "summary": "A centred black island in the header morphs 184×44 to 392, 480 or 540px for now-playing, a co-host ping and search, on a 520ms spring.",
      "platform": "web",
      "type": "section",
      "category": "navbar",
      "tags": [
        "navbar",
        "island",
        "morph",
        "search",
        "radio"
      ],
      "styles": [
        "dark",
        "kinetic"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#0B0B0D",
        "#F4F2EE",
        "#D4FF3A",
        "#000000"
      ],
      "fonts": [
        "Sora",
        "JetBrains Mono"
      ],
      "url": "https://designlounge.vercel.app/p/navbar-island-morph",
      "brief": "https://designlounge.vercel.app/p/navbar-island-morph.md",
      "demo": "https://designlounge.vercel.app/demo/navbar-island-morph.html",
      "source": "lamalama"
    },
    {
      "id": "charts-kpi-spark-row",
      "n": "119",
      "title": "KPI row with sparklines",
      "summary": "Four Harbor Ops KPI cards: label, large number, signed delta, and an SVG sparkline that draws on load and highlights the nearest point on hover.",
      "platform": "web",
      "type": "component",
      "category": "charts",
      "tags": [
        "charts",
        "kpi",
        "sparkline",
        "dashboard"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#E6E8EC",
        "#16191E",
        "#1F4EBF",
        "#2A7A5A"
      ],
      "fonts": [
        "IBM Plex Sans",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/charts-kpi-spark-row",
      "brief": "https://designlounge.vercel.app/p/charts-kpi-spark-row.md",
      "demo": "https://designlounge.vercel.app/demo/charts-kpi-spark-row.html",
      "source": "dontboardme"
    },
    {
      "id": "landing-fintech-light",
      "n": "120",
      "title": "Light fintech landing with tilting card",
      "summary": "A warm-paper business banking landing page: serif headline, a CSS debit card that tilts toward the pointer with a moving glare, trust stats, feature rows and a cobalt CTA.",
      "platform": "web",
      "type": "screen",
      "category": "landing",
      "tags": [
        "landing",
        "fintech",
        "banking",
        "card",
        "tilt"
      ],
      "styles": [
        "minimal",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#F5F3EE",
        "#FFFDFA",
        "#15171C",
        "#2F4BFF"
      ],
      "fonts": [
        "Instrument Serif",
        "Hanken Grotesk"
      ],
      "url": "https://designlounge.vercel.app/p/landing-fintech-light",
      "brief": "https://designlounge.vercel.app/p/landing-fintech-light.md",
      "demo": "https://designlounge.vercel.app/demo/landing-fintech-light.html",
      "source": "stripe"
    },
    {
      "id": "logos-mono-marquee",
      "n": "121",
      "title": "Logos mono marquee",
      "summary": "A quiet two-row Tally customer marquee: monochrome type wordmarks, 42s/54s linear scroll, pause on hover, static under reduced motion.",
      "platform": "web",
      "type": "section",
      "category": "logos",
      "tags": [
        "logos",
        "marquee",
        "customers",
        "swiss"
      ],
      "styles": [
        "minimal",
        "swiss"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#F4F4F0",
        "#111111",
        "#6E6E6A",
        "#D8D8D2"
      ],
      "fonts": [
        "Schibsted Grotesk",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/logos-mono-marquee",
      "brief": "https://designlounge.vercel.app/p/logos-mono-marquee.md",
      "demo": "https://designlounge.vercel.app/demo/logos-mono-marquee.html",
      "source": "moremedia"
    },
    {
      "id": "portfolio-case-study-long",
      "n": "122",
      "title": "Long-form product case study",
      "summary": "A product designer's case study page: italic serif hero with a phone mockup, role and timeline facts, sketches that draw themselves, count-up outcome metrics, quote and next project.",
      "platform": "web",
      "type": "screen",
      "category": "portfolio",
      "tags": [
        "portfolio",
        "case-study",
        "editorial",
        "product-design",
        "scroll"
      ],
      "styles": [
        "editorial",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#E8EDE6",
        "#1C2A24",
        "#2F5A57",
        "#D9674F",
        "#F3D6CC"
      ],
      "fonts": [
        "Literata",
        "Figtree"
      ],
      "url": "https://designlounge.vercel.app/p/portfolio-case-study-long",
      "brief": "https://designlounge.vercel.app/p/portfolio-case-study-long.md",
      "demo": "https://designlounge.vercel.app/demo/portfolio-case-study-long.html",
      "source": "susan"
    },
    {
      "id": "m3-container-transform",
      "n": "123",
      "title": "M3 container transform",
      "summary": "A Material 3 Expressive trail list where a card grows into its full detail screen in 500ms emphasized easing, with fade-through content, and shrinks back on Back.",
      "platform": "mobile-app",
      "type": "animation",
      "category": "transitions",
      "tags": [
        "transition",
        "container-transform",
        "list",
        "detail",
        "material"
      ],
      "styles": [
        "material",
        "soft"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#F8F6EC",
        "#EEECDC",
        "#4B6A14",
        "#CDEB94",
        "#EE9560"
      ],
      "fonts": [
        "Figtree"
      ],
      "url": "https://designlounge.vercel.app/p/m3-container-transform",
      "brief": "https://designlounge.vercel.app/p/m3-container-transform.md",
      "demo": "https://designlounge.vercel.app/demo/m3-container-transform.html",
      "source": "60fps"
    },
    {
      "id": "m3-music-player-expressive",
      "n": "124",
      "title": "M3 expressive music player",
      "summary": "A Material 3 Expressive now-playing screen: 104px play morphs squircle to cookie, the waveform is the seek bar, and each track retints the scaffold.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "media",
      "tags": [
        "music",
        "player",
        "material",
        "waveform",
        "mobile"
      ],
      "styles": [
        "material",
        "dark"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#2B1418",
        "#FFDAD4",
        "#FFB59E",
        "#5C1A0B"
      ],
      "fonts": [
        "Unbounded",
        "Onest"
      ],
      "url": "https://designlounge.vercel.app/p/m3-music-player-expressive",
      "brief": "https://designlounge.vercel.app/p/m3-music-player-expressive.md",
      "demo": "https://designlounge.vercel.app/demo/m3-music-player-expressive.html",
      "source": "dragone"
    },
    {
      "id": "auth-magic-link-sent",
      "n": "125",
      "title": "Magic link sent",
      "summary": "A playful 'check your inbox' screen: an envelope seals itself, the address is editable inline, a ring counts down to resend, and mail apps are one tap away.",
      "platform": "web",
      "type": "screen",
      "category": "auth",
      "tags": [
        "auth",
        "sign-in",
        "email",
        "passwordless",
        "countdown"
      ],
      "styles": [
        "soft",
        "playful"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#FFF1E6",
        "#FFD9C2",
        "#2A1636",
        "#FF5A36",
        "#FFC94D"
      ],
      "fonts": [
        "Bricolage Grotesque",
        "Caveat"
      ],
      "url": "https://designlounge.vercel.app/p/auth-magic-link-sent",
      "brief": "https://designlounge.vercel.app/p/auth-magic-link-sent.md",
      "demo": "https://designlounge.vercel.app/demo/auth-magic-link-sent.html",
      "source": "igloo"
    },
    {
      "id": "text-marker-highlight-draw",
      "n": "126",
      "title": "Marker highlight draw",
      "summary": "A 58px Newsreader pull-quote where yellow marker and red pen strokes draw on over 2.5s; Replay and hover run the same stroke-dash animation again.",
      "platform": "web",
      "type": "animation",
      "category": "text-motion",
      "tags": [
        "text",
        "marker",
        "highlight",
        "handwriting",
        "editorial"
      ],
      "styles": [
        "editorial",
        "paper"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#F2F1EC",
        "#1B2333",
        "#FFD43B",
        "#D9402A"
      ],
      "fonts": [
        "Newsreader",
        "Caveat"
      ],
      "url": "https://designlounge.vercel.app/p/text-marker-highlight-draw",
      "brief": "https://designlounge.vercel.app/p/text-marker-highlight-draw.md",
      "demo": "https://designlounge.vercel.app/demo/text-marker-highlight-draw.html",
      "source": "susan"
    },
    {
      "id": "text-mask-line-reveal",
      "n": "127",
      "title": "Mask line reveal",
      "summary": "A four-line Bodoni manifesto where each line slides up from behind its own mask with a 110ms stagger, then a hairline draws and notes fade in.",
      "platform": "web",
      "type": "animation",
      "category": "text-motion",
      "tags": [
        "headline",
        "reveal",
        "stagger",
        "mask",
        "editorial"
      ],
      "styles": [
        "editorial",
        "luxe",
        "dark"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#2A0C10",
        "#EFE2CA",
        "#E39A86",
        "#BFA79A"
      ],
      "fonts": [
        "Bodoni Moda",
        "Manrope"
      ],
      "url": "https://designlounge.vercel.app/p/text-mask-line-reveal",
      "brief": "https://designlounge.vercel.app/p/text-mask-line-reveal.md",
      "demo": "https://designlounge.vercel.app/demo/text-mask-line-reveal.html",
      "source": "flist"
    },
    {
      "id": "mobile-inbox-list",
      "n": "128",
      "title": "Mobile inbox list",
      "summary": "A phone inbox: large title, search, unread rows, a thread sheet, and a four-item tab bar clear of the home indicator.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "messaging",
      "tags": [
        "inbox",
        "list",
        "mobile",
        "tabs"
      ],
      "styles": [
        "minimal",
        "paper"
      ],
      "motion": "none",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#F4F1EA",
        "#FFFDF8",
        "#1B1814",
        "#8A4B12"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/mobile-inbox-list",
      "brief": "https://designlounge.vercel.app/p/mobile-inbox-list.md",
      "demo": "https://designlounge.vercel.app/demo/mobile-inbox-list.html",
      "source": "igloo"
    },
    {
      "id": "mobile-run-detail",
      "n": "129",
      "title": "Mobile run detail",
      "summary": "A phone detail for one run: back control, status badge, five facts, and a full-width confirm button above the home indicator.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "utility",
      "tags": [
        "detail",
        "mobile",
        "confirm",
        "record"
      ],
      "styles": [
        "minimal",
        "paper"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#F4F1EA",
        "#FFFDF8",
        "#1B1814",
        "#8A4B12"
      ],
      "fonts": [
        "IBM Plex Sans",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/mobile-run-detail",
      "brief": "https://designlounge.vercel.app/p/mobile-run-detail.md",
      "demo": "https://designlounge.vercel.app/demo/mobile-run-detail.html",
      "source": "tailwind"
    },
    {
      "id": "portfolio-motion-showreel",
      "n": "130",
      "title": "Motion designer showreel index",
      "summary": "A dark motion-design index: 118px italic name, four case rows that height-morph from 88px to 328px on click, each with a CSS/SVG still.",
      "platform": "web",
      "type": "screen",
      "category": "portfolio",
      "tags": [
        "portfolio",
        "motion",
        "accordion",
        "showreel",
        "dark"
      ],
      "styles": [
        "dark",
        "kinetic"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#0B0B10",
        "#12121A",
        "#F3F0EA",
        "#FF4EC0"
      ],
      "fonts": [
        "Syne",
        "Manrope"
      ],
      "url": "https://designlounge.vercel.app/p/portfolio-motion-showreel",
      "brief": "https://designlounge.vercel.app/p/portfolio-motion-showreel.md",
      "demo": "https://designlounge.vercel.app/demo/portfolio-motion-showreel.html",
      "source": "lamalama"
    },
    {
      "id": "newsletter-fold-inline",
      "n": "131",
      "title": "Newsletter fold inline",
      "summary": "A mid-article Loam Letter fold: issue No. 41, one-sentence promise, hairline email row that morphs to “You’re on the list”.",
      "platform": "web",
      "type": "section",
      "category": "newsletter",
      "tags": [
        "newsletter",
        "article",
        "form",
        "editorial"
      ],
      "styles": [
        "paper",
        "editorial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#E7E2D4",
        "#242018",
        "#3D5340",
        "#F3EEE3"
      ],
      "fonts": [
        "Libre Caslon Text",
        "Karla"
      ],
      "url": "https://designlounge.vercel.app/p/newsletter-fold-inline",
      "brief": "https://designlounge.vercel.app/p/newsletter-fold-inline.md",
      "demo": "https://designlounge.vercel.app/demo/newsletter-fold-inline.html",
      "source": "mendo"
    },
    {
      "id": "footer-newsletter-split",
      "n": "132",
      "title": "Newsletter split footer",
      "summary": "Split footer for The Margin: underline email on the left, 84px italic wordmark and sitemap on the right, shown under the last essay paragraph.",
      "platform": "web",
      "type": "section",
      "category": "footer",
      "tags": [
        "footer",
        "newsletter",
        "subscribe",
        "magazine",
        "sitemap"
      ],
      "styles": [
        "editorial",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#F1EBDF",
        "#1E1B16",
        "#A3301C",
        "#F8F4EC"
      ],
      "fonts": [
        "Newsreader",
        "Instrument Sans"
      ],
      "url": "https://designlounge.vercel.app/p/footer-newsletter-split",
      "brief": "https://designlounge.vercel.app/p/footer-newsletter-split.md",
      "demo": "https://designlounge.vercel.app/demo/footer-newsletter-split.html",
      "source": "susan"
    },
    {
      "id": "organic-garden-style",
      "n": "133",
      "title": "Organic garden design language kit",
      "summary": "An earth-tone garden kit: irregular leaf blobs, moss pills, Young Serif display, Hanken Grotesk UI, and a Morrow Seed Co. packet card with a season toggle.",
      "platform": "web",
      "type": "style",
      "category": "design-language",
      "tags": [
        "organic",
        "garden",
        "kit",
        "typography",
        "seed"
      ],
      "styles": [
        "organic",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#F3EDE1",
        "#6B8F71",
        "#3D5C45",
        "#C4785B",
        "#3A2A22"
      ],
      "fonts": [
        "Young Serif",
        "Hanken Grotesk"
      ],
      "url": "https://designlounge.vercel.app/p/organic-garden-style",
      "brief": "https://designlounge.vercel.app/p/organic-garden-style.md",
      "demo": "https://designlounge.vercel.app/demo/organic-garden-style.html",
      "source": "stripe"
    },
    {
      "id": "background-paper-grain",
      "n": "134",
      "title": "Paper grain and ink blots",
      "summary": "Generative paper grain and two multiply ink blots behind a three-line poem, with a Grain slider that changes overlay opacity and turbulence frequency.",
      "platform": "web",
      "type": "animation",
      "category": "backgrounds",
      "tags": [
        "background",
        "grain",
        "paper",
        "poetry"
      ],
      "styles": [
        "paper",
        "editorial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#F3EBD8",
        "#2B1F18",
        "#6B2E1F",
        "#1A3352"
      ],
      "fonts": [
        "Literata",
        "Public Sans"
      ],
      "url": "https://designlounge.vercel.app/p/background-paper-grain",
      "brief": "https://designlounge.vercel.app/p/background-paper-grain.md",
      "demo": "https://designlounge.vercel.app/demo/background-paper-grain.html",
      "source": "susan"
    },
    {
      "id": "auth-passkey-setup",
      "n": "135",
      "title": "Passkey setup with face-scan ring",
      "summary": "An iOS 26 passkey creation screen: a 72-tick ring sweeps mint around a face glyph, resolves into a drawn check, and explains passkeys in a glass card.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "auth",
      "tags": [
        "auth",
        "passkey",
        "biometrics",
        "ios",
        "security"
      ],
      "styles": [
        "glass",
        "minimal"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#0B1315",
        "#1D4B47",
        "#EEF6F3",
        "#7DF0C8",
        "#3B2A1A"
      ],
      "fonts": [
        "Figtree"
      ],
      "url": "https://designlounge.vercel.app/p/auth-passkey-setup",
      "brief": "https://designlounge.vercel.app/p/auth-passkey-setup.md",
      "demo": "https://designlounge.vercel.app/demo/auth-passkey-setup.html",
      "source": "igloo"
    },
    {
      "id": "people-role-list",
      "n": "136",
      "title": "People by role",
      "summary": "A staff directory with name search, role pills, initials, and an empty line when the filter matches no one.",
      "platform": "web",
      "type": "screen",
      "category": "team",
      "tags": [
        "people",
        "directory",
        "roles",
        "list"
      ],
      "styles": [
        "minimal",
        "paper"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#F4F1EA",
        "#FFFDF8",
        "#1C1915",
        "#8A4B12"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/people-role-list",
      "brief": "https://designlounge.vercel.app/p/people-role-list.md",
      "demo": "https://designlounge.vercel.app/demo/people-role-list.html",
      "source": "synchronized"
    },
    {
      "id": "portfolio-photographer-horizontal",
      "n": "137",
      "title": "Photographer horizontal gallery",
      "summary": "A 10-plate Wadden-coast series that scrolls sideways: 500px CSS photographs, 9% lerp drag, a 10-tick scrub bar and a 01/10 index.",
      "platform": "web",
      "type": "screen",
      "category": "portfolio",
      "tags": [
        "portfolio",
        "gallery",
        "horizontal",
        "photography",
        "scroll"
      ],
      "styles": [
        "editorial",
        "dark",
        "luxe"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#0E0D0B",
        "#EDE6DA",
        "#C9A66B"
      ],
      "fonts": [
        "Bodoni Moda",
        "Tenor Sans"
      ],
      "url": "https://designlounge.vercel.app/p/portfolio-photographer-horizontal",
      "brief": "https://designlounge.vercel.app/p/portfolio-photographer-horizontal.md",
      "demo": "https://designlounge.vercel.app/demo/portfolio-photographer-horizontal.html",
      "source": "gmx"
    },
    {
      "id": "pixel-arcade-style",
      "n": "138",
      "title": "Pixel arcade design language kit",
      "summary": "An 8-bit pause-menu kit: 4px grid, Silkscreen display, Space Mono scores, hard NES-like colours, CSS box-shadow sprites, and a Stardrift start screen.",
      "platform": "web",
      "type": "style",
      "category": "design-language",
      "tags": [
        "pixel",
        "arcade",
        "kit",
        "retro",
        "game"
      ],
      "styles": [
        "pixel",
        "retro"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#12121A",
        "#E8E4D4",
        "#E04020",
        "#F0C820",
        "#40A848"
      ],
      "fonts": [
        "Silkscreen",
        "Space Mono"
      ],
      "url": "https://designlounge.vercel.app/p/pixel-arcade-style",
      "brief": "https://designlounge.vercel.app/p/pixel-arcade-style.md",
      "demo": "https://designlounge.vercel.app/demo/pixel-arcade-style.html",
      "source": "usearticle"
    },
    {
      "id": "portfolio-index-hover-preview",
      "n": "139",
      "title": "Portfolio index with hover preview",
      "summary": "An art director's project index: a 12-column table of work where hovering a row floats an art-directed plate that trails the cursor with lag and tilt.",
      "platform": "web",
      "type": "screen",
      "category": "portfolio",
      "tags": [
        "portfolio",
        "index",
        "hover",
        "list",
        "cursor"
      ],
      "styles": [
        "minimal",
        "editorial"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#ECE9E2",
        "#141414",
        "#5B574F",
        "#D9411E"
      ],
      "fonts": [
        "Gloock",
        "DM Mono"
      ],
      "url": "https://designlounge.vercel.app/p/portfolio-index-hover-preview",
      "brief": "https://designlounge.vercel.app/p/portfolio-index-hover-preview.md",
      "demo": "https://designlounge.vercel.app/demo/portfolio-index-hover-preview.html",
      "source": "susan"
    },
    {
      "id": "hero-product-window-tilt",
      "n": "140",
      "title": "Product window tilt hero",
      "summary": "A dark SaaS hero whose div-built app window tilts up to 8° toward the cursor, with sidebar, chart, chip and toast parallaxing at four translateZ depths.",
      "platform": "web",
      "type": "section",
      "category": "hero",
      "tags": [
        "hero",
        "saas",
        "3d",
        "parallax",
        "product"
      ],
      "styles": [
        "dark",
        "minimal"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#07080A",
        "#111418",
        "#EEF1F4",
        "#7CF2C4"
      ],
      "fonts": [
        "Onest",
        "Geist Mono"
      ],
      "url": "https://designlounge.vercel.app/p/hero-product-window-tilt",
      "brief": "https://designlounge.vercel.app/p/hero-product-window-tilt.md",
      "demo": "https://designlounge.vercel.app/demo/hero-product-window-tilt.html",
      "source": "linear"
    },
    {
      "id": "record-detail-header",
      "n": "141",
      "title": "Record detail header",
      "summary": "A record page for one run: breadcrumb, status, one primary action, overview and notes tabs, and a 300px next-step panel.",
      "platform": "web",
      "type": "screen",
      "category": "dashboard",
      "tags": [
        "detail",
        "record",
        "tabs",
        "admin"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#1F4D3A"
      ],
      "fonts": [
        "IBM Plex Sans",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/record-detail-header",
      "brief": "https://designlounge.vercel.app/p/record-detail-header.md",
      "demo": "https://designlounge.vercel.app/demo/record-detail-header.html",
      "source": "stripe"
    },
    {
      "id": "riso-print-style",
      "n": "142",
      "title": "Riso print design language kit",
      "summary": "A two-drum risograph kit: fluoro pink and indigo overprint, 3px misregistration, grain, Rubik Mono One display, and an Ink Fair 26 zine cover.",
      "platform": "web",
      "type": "style",
      "category": "design-language",
      "tags": [
        "riso",
        "print",
        "kit",
        "zine",
        "overprint"
      ],
      "styles": [
        "riso",
        "playful"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#F6F1E4",
        "#FF3D8A",
        "#1E2A6E",
        "#9A1858",
        "#1A1420"
      ],
      "fonts": [
        "Rubik Mono One",
        "Rubik"
      ],
      "url": "https://designlounge.vercel.app/p/riso-print-style",
      "brief": "https://designlounge.vercel.app/p/riso-print-style.md",
      "demo": "https://designlounge.vercel.app/demo/riso-print-style.html",
      "source": "mendo"
    },
    {
      "id": "search-results-filters",
      "n": "143",
      "title": "Search results with filters",
      "summary": "A catalogue search with a 240px filter column, live text match, cloth and price filters, and an empty state when nothing qualifies.",
      "platform": "web",
      "type": "screen",
      "category": "utility",
      "tags": [
        "search",
        "filters",
        "catalogue",
        "list"
      ],
      "styles": [
        "editorial",
        "paper"
      ],
      "motion": "none",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#F3EFE6",
        "#FFFDF8",
        "#171512",
        "#8A4B12"
      ],
      "fonts": [
        "Fraunces",
        "Instrument Sans"
      ],
      "url": "https://designlounge.vercel.app/p/search-results-filters",
      "brief": "https://designlounge.vercel.app/p/search-results-filters.md",
      "demo": "https://designlounge.vercel.app/demo/search-results-filters.html",
      "source": "icm"
    },
    {
      "id": "text-split-letter-wave",
      "n": "144",
      "title": "Split letter wave",
      "summary": "A 192px hero headline whose letters rise in a staggered wave with springy overshoot; hovering any word makes just that word hop again.",
      "platform": "web",
      "type": "animation",
      "category": "text-motion",
      "tags": [
        "headline",
        "letters",
        "stagger",
        "hover",
        "hero"
      ],
      "styles": [
        "kinetic",
        "playful"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#2336E6",
        "#FFF3D6",
        "#FF9EC4",
        "#3A0A22"
      ],
      "fonts": [
        "Bagel Fat One",
        "Figtree"
      ],
      "url": "https://designlounge.vercel.app/p/text-split-letter-wave",
      "brief": "https://designlounge.vercel.app/p/text-split-letter-wave.md",
      "demo": "https://designlounge.vercel.app/demo/text-split-letter-wave.html",
      "source": "wickret"
    },
    {
      "id": "contact-split-map-form",
      "n": "145",
      "title": "Split map contact form",
      "summary": "A two-column contact block: a stylised SVG city map whose studio switcher pans to each pin, beside a floating-label form with simulated send.",
      "platform": "web",
      "type": "section",
      "category": "contact",
      "tags": [
        "contact",
        "form",
        "map",
        "locations",
        "floating-labels"
      ],
      "styles": [
        "minimal",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#FAFAF7",
        "#E4E8E1",
        "#C3D5DA",
        "#1D2320",
        "#E2553B"
      ],
      "fonts": [
        "Hanken Grotesk",
        "DM Mono"
      ],
      "url": "https://designlounge.vercel.app/p/contact-split-map-form",
      "brief": "https://designlounge.vercel.app/p/contact-split-map-form.md",
      "demo": "https://designlounge.vercel.app/demo/contact-split-map-form.html",
      "source": "dontboardme"
    },
    {
      "id": "stacking-cards-scroll",
      "n": "146",
      "title": "Stacking cards on scroll",
      "summary": "Five pastel step cards stick to the top and pile up as you scroll, each earlier card scaling down 3.5% per layer and dimming under the next.",
      "platform": "web",
      "type": "animation",
      "category": "scroll",
      "tags": [
        "scroll",
        "sticky",
        "cards",
        "stack",
        "skincare"
      ],
      "styles": [
        "minimal",
        "soft"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#F3EEE7",
        "#2A2420",
        "#F1D9CF",
        "#DCE3D3",
        "#B4532A"
      ],
      "fonts": [
        "Onest",
        "Geist Mono"
      ],
      "url": "https://designlounge.vercel.app/p/stacking-cards-scroll",
      "brief": "https://designlounge.vercel.app/p/stacking-cards-scroll.md",
      "demo": "https://designlounge.vercel.app/demo/stacking-cards-scroll.html",
      "source": "mindmarket"
    },
    {
      "id": "stats-ticker-band",
      "n": "147",
      "title": "Stats ticker band",
      "summary": "A four-column climate stats band whose 112px figures count up in 1200ms, each with a mint hairline, a unit and a one-line label, plus Replay.",
      "platform": "web",
      "type": "section",
      "category": "stats",
      "tags": [
        "stats",
        "counter",
        "climate",
        "numbers",
        "band"
      ],
      "styles": [
        "kinetic",
        "dark"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#08110E",
        "#E6F3EC",
        "#3DCF9A",
        "#8AA396"
      ],
      "fonts": [
        "Big Shoulders Display",
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/stats-ticker-band",
      "brief": "https://designlounge.vercel.app/p/stats-ticker-band.md",
      "demo": "https://designlounge.vercel.app/demo/stats-ticker-band.html",
      "source": "flist"
    },
    {
      "id": "pricing-comparison-sticky",
      "n": "148",
      "title": "Sticky comparison table",
      "summary": "A 25-row plan comparison with a sticky plan header, numbered collapsible groups, check/dash/limit cells, tooltips and a differences-only switch.",
      "platform": "web",
      "type": "section",
      "category": "pricing",
      "tags": [
        "pricing",
        "table",
        "comparison",
        "sticky",
        "accordion"
      ],
      "styles": [
        "swiss",
        "industrial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#E4E3DE",
        "#121212",
        "#EFEEE9",
        "#FF5B14"
      ],
      "fonts": [
        "Archivo",
        "JetBrains Mono"
      ],
      "url": "https://designlounge.vercel.app/p/pricing-comparison-sticky",
      "brief": "https://designlounge.vercel.app/p/pricing-comparison-sticky.md",
      "demo": "https://designlounge.vercel.app/demo/pricing-comparison-sticky.html",
      "source": "abel"
    },
    {
      "id": "cta-sticky-mobile-bar",
      "n": "149",
      "title": "Sticky mobile CTA bar",
      "summary": "Sprout product page on a 390×844 phone: a sticky bottom bar keeps $48 and Add to bag, and hides the description once the page is scrolled 72px.",
      "platform": "mobile-web",
      "type": "section",
      "category": "cta",
      "tags": [
        "cta",
        "sticky",
        "mobile",
        "product"
      ],
      "styles": [
        "minimal",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#F4F5F2",
        "#171C18",
        "#D4533E",
        "#3F6B48"
      ],
      "fonts": [
        "Sora"
      ],
      "url": "https://designlounge.vercel.app/p/cta-sticky-mobile-bar",
      "brief": "https://designlounge.vercel.app/p/cta-sticky-mobile-bar.md",
      "demo": "https://designlounge.vercel.app/demo/cta-sticky-mobile-bar.html",
      "source": "stripe"
    },
    {
      "id": "features-sticky-scroll-steps",
      "n": "150",
      "title": "Sticky scroll feature steps",
      "summary": "Four Loam garden-planning steps scroll on the left while a 600px plot preview sticks on the right and morphs beds, crops, calendar and harvest tally.",
      "platform": "web",
      "type": "section",
      "category": "features",
      "tags": [
        "features",
        "sticky",
        "scroll",
        "steps",
        "product"
      ],
      "styles": [
        "organic",
        "paper"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#F4EFE6",
        "#23291F",
        "#C65D3B",
        "#A9B89A"
      ],
      "fonts": [
        "Young Serif",
        "Figtree"
      ],
      "url": "https://designlounge.vercel.app/p/features-sticky-scroll-steps",
      "brief": "https://designlounge.vercel.app/p/features-sticky-scroll-steps.md",
      "demo": "https://designlounge.vercel.app/demo/features-sticky-scroll-steps.html",
      "source": "linear"
    },
    {
      "id": "contact-booking-hours",
      "n": "151",
      "title": "Studio hours and booking",
      "summary": "Ceramics-studio contact: a two-line giant email, a seven-day hours table, a Lisbon timezone note, and a Book 30 min dialog with name, email, note and a focus trap.",
      "platform": "web",
      "type": "section",
      "category": "contact",
      "tags": [
        "contact",
        "dialog",
        "hours",
        "studio"
      ],
      "styles": [
        "organic",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#EBD8CC",
        "#2E2018",
        "#A34B38",
        "#3F6B4E"
      ],
      "fonts": [
        "Cormorant Garamond",
        "Work Sans"
      ],
      "url": "https://designlounge.vercel.app/p/contact-booking-hours",
      "brief": "https://designlounge.vercel.app/p/contact-booking-hours.md",
      "demo": "https://designlounge.vercel.app/demo/contact-booking-hours.html",
      "source": "dontboardme"
    },
    {
      "id": "hero-swiss-grid-wordmark",
      "n": "152",
      "title": "Swiss grid wordmark hero",
      "summary": "A design-office hero on a visible 12-column hairline grid: a 304px wordmark rises letter by letter into grid cells, and hovering any column tints it.",
      "platform": "web",
      "type": "section",
      "category": "hero",
      "tags": [
        "hero",
        "grid",
        "wordmark",
        "typography",
        "studio"
      ],
      "styles": [
        "swiss",
        "kinetic"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#EEEDE7",
        "#111110",
        "#1D33F0",
        "#85847D"
      ],
      "fonts": [
        "Familjen Grotesk",
        "JetBrains Mono"
      ],
      "url": "https://designlounge.vercel.app/p/hero-swiss-grid-wordmark",
      "brief": "https://designlounge.vercel.app/p/hero-swiss-grid-wordmark.md",
      "demo": "https://designlounge.vercel.app/demo/hero-swiss-grid-wordmark.html",
      "source": "lamalama"
    },
    {
      "id": "features-tabbed-preview",
      "n": "153",
      "title": "Tabbed feature preview",
      "summary": "Four vertical feature tabs with 6s autoplay progress hairlines; the preview pane crossfades between CSS-built product UIs, with a giant outlined step numeral.",
      "platform": "web",
      "type": "section",
      "category": "features",
      "tags": [
        "features",
        "tabs",
        "autoplay",
        "product-ui",
        "saas"
      ],
      "styles": [
        "dark",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#0A0B0D",
        "#111317",
        "#ECEEF1",
        "#9AA1AC",
        "#86E1B0"
      ],
      "fonts": [
        "Geist",
        "Geist Mono"
      ],
      "url": "https://designlounge.vercel.app/p/features-tabbed-preview",
      "brief": "https://designlounge.vercel.app/p/features-tabbed-preview.md",
      "demo": "https://designlounge.vercel.app/demo/features-tabbed-preview.html",
      "source": "linear"
    },
    {
      "id": "team-hover-portrait-grid",
      "n": "154",
      "title": "Team hover portrait grid",
      "summary": "A 3×2 Halden studio grid: six geometric SVG portraits, hover or focus unveils role, one-line bio, and a studio email.",
      "platform": "web",
      "type": "section",
      "category": "team",
      "tags": [
        "team",
        "portraits",
        "hover",
        "studio"
      ],
      "styles": [
        "editorial",
        "luxe"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#F3EBE3",
        "#1A1412",
        "#5C2430",
        "#B8954A"
      ],
      "fonts": [
        "Bodoni Moda",
        "Tenor Sans"
      ],
      "url": "https://designlounge.vercel.app/p/team-hover-portrait-grid",
      "brief": "https://designlounge.vercel.app/p/team-hover-portrait-grid.md",
      "demo": "https://designlounge.vercel.app/demo/team-hover-portrait-grid.html",
      "source": "dontboardme"
    },
    {
      "id": "testimonials-quote-carousel",
      "n": "155",
      "title": "Testimonials quote carousel",
      "summary": "A horizontal Fieldnote quote carousel: 48px Newsreader lines, author chip, prev/next, four dots, and a 420ms slide that wraps.",
      "platform": "web",
      "type": "section",
      "category": "testimonials",
      "tags": [
        "testimonials",
        "carousel",
        "quotes",
        "section"
      ],
      "styles": [
        "editorial",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#EFE6D4",
        "#1A241E",
        "#2C5A45",
        "#B5522A"
      ],
      "fonts": [
        "Newsreader",
        "Work Sans"
      ],
      "url": "https://designlounge.vercel.app/p/testimonials-quote-carousel",
      "brief": "https://designlounge.vercel.app/p/testimonials-quote-carousel.md",
      "demo": "https://designlounge.vercel.app/demo/testimonials-quote-carousel.html",
      "source": "dragone"
    },
    {
      "id": "testimonials-wall-grid",
      "n": "156",
      "title": "Testimonials wall grid",
      "summary": "A four-column Pebble quote wall: seven short cards, two spanning two columns, initials discs, and a 4px hover lift that reveals tenure.",
      "platform": "web",
      "type": "section",
      "category": "testimonials",
      "tags": [
        "testimonials",
        "masonry",
        "grid",
        "quotes"
      ],
      "styles": [
        "minimal",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#EEF1F3",
        "#1C2328",
        "#4A7C74",
        "#FFFCFA"
      ],
      "fonts": [
        "Plus Jakarta Sans"
      ],
      "url": "https://designlounge.vercel.app/p/testimonials-wall-grid",
      "brief": "https://designlounge.vercel.app/p/testimonials-wall-grid.md",
      "demo": "https://designlounge.vercel.app/demo/testimonials-wall-grid.html",
      "source": "linear"
    },
    {
      "id": "toggle-switch-set",
      "n": "157",
      "title": "Toggle switch set",
      "summary": "Six toggle temperaments (classic, icon thumb, day/night, squish, labelled, segmented) in a smart-home preferences card with a live status index.",
      "platform": "web",
      "type": "component",
      "category": "buttons",
      "tags": [
        "toggle",
        "switch",
        "settings",
        "preferences",
        "form"
      ],
      "styles": [
        "soft",
        "playful"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#F7EDE4",
        "#FFFBF7",
        "#2A1D17",
        "#F0552E",
        "#1D2346"
      ],
      "fonts": [
        "Bricolage Grotesque",
        "DM Mono"
      ],
      "url": "https://designlounge.vercel.app/p/toggle-switch-set",
      "brief": "https://designlounge.vercel.app/p/toggle-switch-set.md",
      "demo": "https://designlounge.vercel.app/demo/toggle-switch-set.html",
      "source": "usearticle"
    },
    {
      "id": "background-topographic-lines",
      "n": "158",
      "title": "Topographic lines background",
      "summary": "A marching-squares contour field drifts behind a Ridgeline Atlas hero; interval chips retile the map and Pause drift stops the hills.",
      "platform": "web",
      "type": "animation",
      "category": "backgrounds",
      "tags": [
        "background",
        "canvas",
        "contours",
        "map",
        "hero"
      ],
      "styles": [
        "organic",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#E8E9DD",
        "#1F3326",
        "#B8661A",
        "#F3F3EA"
      ],
      "fonts": [
        "Newsreader",
        "Hanken Grotesk"
      ],
      "url": "https://designlounge.vercel.app/p/background-topographic-lines",
      "brief": "https://designlounge.vercel.app/p/background-topographic-lines.md",
      "demo": "https://designlounge.vercel.app/demo/background-topographic-lines.html",
      "source": "susan"
    },
    {
      "id": "upload-file-queue",
      "n": "159",
      "title": "Upload file queue",
      "summary": "A dashed drop zone and a queue of files: one sent, one advancing, one rejected, with new sheets joining at 8 percent.",
      "platform": "web",
      "type": "component",
      "category": "inputs",
      "tags": [
        "upload",
        "files",
        "queue",
        "progress"
      ],
      "styles": [
        "paper",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#F4F1EA",
        "#FFFDF8",
        "#1C1915",
        "#8A4B12"
      ],
      "fonts": [
        "IBM Plex Sans",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/upload-file-queue",
      "brief": "https://designlounge.vercel.app/p/upload-file-queue.md",
      "demo": "https://designlounge.vercel.app/demo/upload-file-queue.html",
      "source": "usearticle"
    },
    {
      "id": "ios-weather-hourly-scrub",
      "n": "160",
      "title": "Weather with an hourly scrubber",
      "summary": "An iOS 26 weather screen where dragging along a 24-hour temperature curve retints the sky, moves the sun or moon and updates temperature and conditions.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "utility",
      "tags": [
        "weather",
        "scrubber",
        "chart",
        "gesture",
        "ios"
      ],
      "styles": [
        "glass",
        "soft"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#36508F",
        "#9C7AA6",
        "#F3A77F",
        "#FFFFFF",
        "#BFE3FF"
      ],
      "fonts": [
        "Outfit"
      ],
      "url": "https://designlounge.vercel.app/p/ios-weather-hourly-scrub",
      "brief": "https://designlounge.vercel.app/p/ios-weather-hourly-scrub.md",
      "demo": "https://designlounge.vercel.app/demo/ios-weather-hourly-scrub.html",
      "source": "icm"
    },
    {
      "id": "landing-wellness-retreat",
      "n": "161",
      "title": "Wellness retreat booking landing",
      "summary": "Loam House: a 76px Young Serif headline, an earth-tone date strip with steppers, and three stay cards each carrying a botanical SVG.",
      "platform": "web",
      "type": "screen",
      "category": "landing",
      "tags": [
        "landing",
        "wellness",
        "booking",
        "cards",
        "retreat"
      ],
      "styles": [
        "organic",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#F1EADC",
        "#3A2E24",
        "#3F5340",
        "#B86A42"
      ],
      "fonts": [
        "Young Serif",
        "Hanken Grotesk"
      ],
      "url": "https://designlounge.vercel.app/p/landing-wellness-retreat",
      "brief": "https://designlounge.vercel.app/p/landing-wellness-retreat.md",
      "demo": "https://designlounge.vercel.app/demo/landing-wellness-retreat.html",
      "source": "mindmarket"
    },
    {
      "id": "y2k-chrome-style",
      "n": "162",
      "title": "Y2K chrome design language kit",
      "summary": "A millennium chrome kit: ice-silver bevels, bubble highlights, Michroma display, electric blue actions, and hot pink used once on a 2000s music drop.",
      "platform": "web",
      "type": "style",
      "category": "design-language",
      "tags": [
        "y2k",
        "chrome",
        "kit",
        "typography",
        "music"
      ],
      "styles": [
        "y2k",
        "retro"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-02T00:00:00.000Z",
      "palette": [
        "#D8E2EC",
        "#8A96A3",
        "#1A2230",
        "#0078FF",
        "#FF2D7A"
      ],
      "fonts": [
        "Michroma",
        "Figtree"
      ],
      "url": "https://designlounge.vercel.app/p/y2k-chrome-style",
      "brief": "https://designlounge.vercel.app/p/y2k-chrome-style.md",
      "demo": "https://designlounge.vercel.app/demo/y2k-chrome-style.html",
      "source": "dontboardme"
    },
    {
      "id": "button-3d-press",
      "n": "163",
      "title": "3D keycap press buttons",
      "summary": "Chunky keycap buttons with a solid bottom edge that physically sink 6px on press, latching icon keys, and keyboard legends that press them too.",
      "platform": "web",
      "type": "component",
      "category": "buttons",
      "tags": [
        "buttons",
        "keycap",
        "3d",
        "press",
        "toggle",
        "shortcuts"
      ],
      "styles": [
        "playful",
        "industrial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#E7E1D5",
        "#D6CEBF",
        "#1F1B17",
        "#FF6B1A",
        "#F7F2E8"
      ],
      "fonts": [
        "Gabarito",
        "Reddit Mono"
      ],
      "url": "https://designlounge.vercel.app/p/button-3d-press",
      "brief": "https://designlounge.vercel.app/p/button-3d-press.md",
      "demo": "https://designlounge.vercel.app/demo/button-3d-press.html",
      "source": "wickret"
    },
    {
      "id": "button-add-to-cart",
      "n": "164",
      "title": "Add to cart that becomes a stepper",
      "summary": "An add-to-basket button that shows an adding state, flies the product to the cart icon, bumps the badge and turns into a quantity stepper. Sold out offers notify.",
      "platform": "web",
      "type": "component",
      "category": "buttons",
      "tags": [
        "ecommerce",
        "cart",
        "stepper",
        "add-to-cart",
        "shop"
      ],
      "styles": [
        "soft",
        "organic",
        "editorial"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F2E8D8",
        "#FBF6EC",
        "#2A1D14",
        "#B4492A",
        "#F4DCCB"
      ],
      "fonts": [
        "Gloock",
        "Rethink Sans"
      ],
      "url": "https://designlounge.vercel.app/p/button-add-to-cart",
      "brief": "https://designlounge.vercel.app/p/button-add-to-cart.md",
      "demo": "https://designlounge.vercel.app/demo/button-add-to-cart.html",
      "source": "usearticle"
    },
    {
      "id": "phone-calendar-agenda",
      "n": "165",
      "title": "Agenda calendar with quick add",
      "summary": "A Material 3 Expressive agenda: a month grid that folds into a week strip, sticky day headers, a Now line, and a quick-add sheet that parses plain sentences.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "utility",
      "tags": [
        "calendar",
        "agenda",
        "schedule",
        "material",
        "sheet"
      ],
      "styles": [
        "material",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#FFF8F5",
        "#F7E8E1",
        "#9A4524",
        "#FFDBCF",
        "#2E6B5F"
      ],
      "fonts": [
        "Roboto Flex"
      ],
      "url": "https://designlounge.vercel.app/p/phone-calendar-agenda",
      "brief": "https://designlounge.vercel.app/p/phone-calendar-agenda.md",
      "demo": "https://designlounge.vercel.app/demo/phone-calendar-agenda.html",
      "source": "icm"
    },
    {
      "id": "agent-step-trace",
      "n": "166",
      "title": "Agent step trace",
      "summary": "Four steps of a drafted note. The first is open. Opening another closes it. The last step is waiting.",
      "platform": "web",
      "type": "component",
      "category": "data",
      "tags": [
        "agent",
        "trace",
        "steps"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#1F4D3A",
        "#E7F2EC"
      ],
      "fonts": [
        "IBM Plex Sans",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/agent-step-trace",
      "brief": "https://designlounge.vercel.app/p/agent-step-trace.md",
      "demo": "https://designlounge.vercel.app/demo/agent-step-trace.html",
      "source": "60fps"
    },
    {
      "id": "ai-chat-workspace",
      "n": "167",
      "title": "AI chat workspace",
      "summary": "A warm paper AI assistant: history sidebar, a serif answer that streams in with a Stop button, numbered citations that open a sources panel, and a composer.",
      "platform": "web",
      "type": "screen",
      "category": "messaging",
      "tags": [
        "ai",
        "chat",
        "assistant",
        "streaming",
        "citations"
      ],
      "styles": [
        "paper",
        "editorial",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F7F2E8",
        "#EFE8DA",
        "#1F1B16",
        "#A8491F",
        "#F3E2D6"
      ],
      "fonts": [
        "Newsreader",
        "Instrument Sans"
      ],
      "url": "https://designlounge.vercel.app/p/ai-chat-workspace",
      "brief": "https://designlounge.vercel.app/p/ai-chat-workspace.md",
      "demo": "https://designlounge.vercel.app/demo/ai-chat-workspace.html",
      "source": "igloo"
    },
    {
      "id": "features-alternating-rows",
      "n": "168",
      "title": "Alternating feature rows",
      "summary": "Three Swiss industrial feature rows that swap sides, each with a numbered eyebrow, three checks, a text link and a drawn product panel that slides in 24px on view.",
      "platform": "web",
      "type": "section",
      "category": "features",
      "tags": [
        "features",
        "product-ui",
        "scroll",
        "industrial",
        "saas"
      ],
      "styles": [
        "swiss",
        "industrial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#E8E8E5",
        "#F5F5F2",
        "#111111",
        "#FF5B1A",
        "#45453F"
      ],
      "fonts": [
        "Barlow Condensed",
        "JetBrains Mono"
      ],
      "url": "https://designlounge.vercel.app/p/features-alternating-rows",
      "brief": "https://designlounge.vercel.app/p/features-alternating-rows.md",
      "demo": "https://designlounge.vercel.app/demo/features-alternating-rows.html",
      "source": "moremedia"
    },
    {
      "id": "analog-stick",
      "n": "169",
      "title": "Analog stick",
      "summary": "A stick in a round well. Move toward a side and it leans. Night, Gate, Month, or Yard lights.",
      "platform": "web",
      "type": "component",
      "category": "inputs",
      "tags": [
        "stick",
        "direction",
        "lean"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#1C1B19",
        "#D7B15E"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/analog-stick",
      "brief": "https://designlounge.vercel.app/p/analog-stick.md",
      "demo": "https://designlounge.vercel.app/demo/analog-stick.html",
      "source": "abel"
    },
    {
      "id": "app-icon-colour-wall",
      "n": "170",
      "title": "App icon colour wall",
      "summary": "A dark edge-to-edge wall of 96 SVG app icons that re-sorts by hue, lightness or shape with a FLIP animation, hover names and a pinned colour readout.",
      "platform": "web",
      "type": "screen",
      "category": "gallery",
      "tags": [
        "gallery",
        "app-icons",
        "sorting",
        "colour",
        "flip"
      ],
      "styles": [
        "dark",
        "kinetic",
        "minimal"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#0E0E10",
        "#EDEAE3",
        "#C8F169",
        "#1A1A1D"
      ],
      "fonts": [
        "Syne",
        "Azeret Mono"
      ],
      "url": "https://designlounge.vercel.app/p/app-icon-colour-wall",
      "brief": "https://designlounge.vercel.app/p/app-icon-colour-wall.md",
      "demo": "https://designlounge.vercel.app/demo/app-icon-colour-wall.html",
      "source": "60fps"
    },
    {
      "id": "app-icon-shelf-gallery",
      "n": "171",
      "title": "App icon shelf gallery",
      "summary": "A museum-style gallery of 36 SVG app icons on frosted glass shelves, with category, colour and finish filters and a detail sheet with a palette strip.",
      "platform": "web",
      "type": "screen",
      "category": "gallery",
      "tags": [
        "gallery",
        "app-icons",
        "museum",
        "filters",
        "detail"
      ],
      "styles": [
        "minimal",
        "editorial",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F4F2EE",
        "#1C1B19",
        "#D9480F",
        "#EBE8E2",
        "#FBFAF7"
      ],
      "fonts": [
        "Instrument Serif",
        "Onest"
      ],
      "url": "https://designlounge.vercel.app/p/app-icon-shelf-gallery",
      "brief": "https://designlounge.vercel.app/p/app-icon-shelf-gallery.md",
      "demo": "https://designlounge.vercel.app/demo/app-icon-shelf-gallery.html",
      "source": "icm"
    },
    {
      "id": "app-icon-spec-sheet",
      "n": "172",
      "title": "App icon spec sheet",
      "summary": "One app icon as a review page: a 1024 master with a keyline overlay and mask toggle, real-pixel sizes, light and dark home screens, and the export set.",
      "platform": "web",
      "type": "screen",
      "category": "utility",
      "tags": [
        "app-icons",
        "spec",
        "keylines",
        "export",
        "ios"
      ],
      "styles": [
        "swiss",
        "industrial",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#E7E8E3",
        "#121417",
        "#FF2E88",
        "#F5F5F1",
        "#2F7FD6"
      ],
      "fonts": [
        "Manrope",
        "Martian Mono"
      ],
      "url": "https://designlounge.vercel.app/p/app-icon-spec-sheet",
      "brief": "https://designlounge.vercel.app/p/app-icon-spec-sheet.md",
      "demo": "https://designlounge.vercel.app/demo/app-icon-spec-sheet.html",
      "source": "tailwind"
    },
    {
      "id": "architecture-studio-index",
      "n": "173",
      "title": "Architecture studio index",
      "summary": "A Swiss studio index: sortable, filterable project table whose selected row drives a true-scale SVG elevation that slides to follow it, plus a map view.",
      "platform": "web",
      "type": "screen",
      "category": "portfolio",
      "tags": [
        "portfolio",
        "architecture",
        "table",
        "sort",
        "map"
      ],
      "styles": [
        "swiss",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#FFFFFF",
        "#0A0A0A",
        "#D9D9D9",
        "#1D4ED8",
        "#EEF2FD"
      ],
      "fonts": [
        "Inter Tight",
        "Spline Sans Mono"
      ],
      "url": "https://designlounge.vercel.app/p/architecture-studio-index",
      "brief": "https://designlounge.vercel.app/p/architecture-studio-index.md",
      "demo": "https://designlounge.vercel.app/demo/architecture-studio-index.html",
      "source": "moremedia"
    },
    {
      "id": "background-aurora-mesh",
      "n": "174",
      "title": "Aurora mesh background",
      "summary": "Four soft gradient blobs drift like an aurora over a dark night sky with SVG grain and a ridge silhouette, plus a warm dawn preset and a drift/intensity panel.",
      "platform": "web",
      "type": "pattern",
      "category": "backgrounds",
      "tags": [
        "background",
        "gradient",
        "aurora",
        "mesh",
        "hero",
        "grain"
      ],
      "styles": [
        "dark",
        "organic",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#060A12",
        "#2BD9B4",
        "#8BF06A",
        "#E2577F",
        "#F4ECE4"
      ],
      "fonts": [
        "Instrument Serif",
        "Space Grotesk"
      ],
      "url": "https://designlounge.vercel.app/p/background-aurora-mesh",
      "brief": "https://designlounge.vercel.app/p/background-aurora-mesh.md",
      "demo": "https://designlounge.vercel.app/demo/background-aurora-mesh.html",
      "source": "lamalama"
    },
    {
      "id": "automation-config-live-preview",
      "n": "175",
      "title": "Automation builder with live preview",
      "summary": "A settings form on the left drives a sticky preview card on the right: headline count, progress, next issues and a calendar view, all in hard-shadow ink.",
      "platform": "web",
      "type": "section",
      "category": "features",
      "tags": [
        "configurator",
        "preview",
        "form",
        "sticky",
        "saas"
      ],
      "styles": [
        "brutalist",
        "playful",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#FFF6E9",
        "#FFFDF8",
        "#1B1712",
        "#FF5A1F",
        "#2FAE74",
        "#FFD84D"
      ],
      "fonts": [
        "Bricolage Grotesque",
        "DM Mono"
      ],
      "url": "https://designlounge.vercel.app/p/automation-config-live-preview",
      "brief": "https://designlounge.vercel.app/p/automation-config-live-preview.md",
      "demo": "https://designlounge.vercel.app/demo/automation-config-live-preview.html",
      "source": "usearticle"
    },
    {
      "id": "card-boarding-pass",
      "n": "176",
      "title": "Boarding pass with fold-out details",
      "summary": "A horizontal airline boarding pass with notch cutouts, a plane gliding along the route arc, a QR stub, a details sheet that folds down, and an Add to Wallet button.",
      "platform": "web",
      "type": "component",
      "category": "cards",
      "tags": [
        "cards",
        "travel",
        "boarding-pass",
        "qr",
        "wallet"
      ],
      "styles": [
        "swiss",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#DCE5EA",
        "#FBFBF8",
        "#0F2130",
        "#FF5A1F",
        "#1F7A55"
      ],
      "fonts": [
        "Familjen Grotesk",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/card-boarding-pass",
      "brief": "https://designlounge.vercel.app/p/card-boarding-pass.md",
      "demo": "https://designlounge.vercel.app/demo/card-boarding-pass.html",
      "source": "icm"
    },
    {
      "id": "book-page-flip",
      "n": "177",
      "title": "Book page flip",
      "summary": "A 640 by 400 ledger. Next turns the page on its left edge. Three yard notes, one at a time.",
      "platform": "web",
      "type": "animation",
      "category": "reading",
      "tags": [
        "book",
        "page",
        "flip"
      ],
      "styles": [
        "editorial",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F4F1EA",
        "#FFFDF8",
        "#1A1814",
        "#1F4D3A"
      ],
      "fonts": [
        "Fraunces",
        "Public Sans"
      ],
      "url": "https://designlounge.vercel.app/p/book-page-flip",
      "brief": "https://designlounge.vercel.app/p/book-page-flip.md",
      "demo": "https://designlounge.vercel.app/demo/book-page-flip.html",
      "source": "mendo"
    },
    {
      "id": "phone-booking-slots",
      "n": "178",
      "title": "Booking time slots",
      "summary": "An appointment picker: service card, a 14-day date strip with sold-out days, grouped time chips, therapist avatars, and a sticky 'Thu 8 Oct, 14:30 · Confirm' bar.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "pickers",
      "tags": [
        "booking",
        "appointment",
        "slots",
        "date",
        "wellness"
      ],
      "styles": [
        "soft",
        "organic"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F4EFE4",
        "#FBF8F1",
        "#23402F",
        "#B7C4AB",
        "#E1E7D8"
      ],
      "fonts": [
        "Fraunces",
        "Source Sans 3"
      ],
      "url": "https://designlounge.vercel.app/p/phone-booking-slots",
      "brief": "https://designlounge.vercel.app/p/phone-booking-slots.md",
      "demo": "https://designlounge.vercel.app/demo/phone-booking-slots.html",
      "source": "stripe"
    },
    {
      "id": "gym-membership-home",
      "n": "179",
      "title": "Boxing gym home with timetable",
      "summary": "Graftworks: a black poster hero in 190px Anton with an angled orange stripe, a filterable timetable, a monthly/annual tier toggle and a sticky free-class button.",
      "platform": "web",
      "type": "screen",
      "category": "landing",
      "tags": [
        "landing",
        "gym",
        "timetable",
        "pricing",
        "sport"
      ],
      "styles": [
        "brutalist",
        "dark"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#0C0C0C",
        "#F3F1EC",
        "#FF4B1F",
        "#A19D95"
      ],
      "fonts": [
        "Anton",
        "JetBrains Mono"
      ],
      "url": "https://designlounge.vercel.app/p/gym-membership-home",
      "brief": "https://designlounge.vercel.app/p/gym-membership-home.md",
      "demo": "https://designlounge.vercel.app/demo/gym-membership-home.html",
      "source": "flist"
    },
    {
      "id": "breadcrumb",
      "n": "180",
      "title": "Breadcrumb",
      "summary": "Dispatch, Asar, then Gate 4 as the current page. The current crumb is text. The earlier crumbs are links. A click names what opened.",
      "platform": "web",
      "type": "component",
      "category": "navigation",
      "tags": [
        "breadcrumb",
        "navigation",
        "path"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#161513",
        "#5A554C"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/breadcrumb",
      "brief": "https://designlounge.vercel.app/p/breadcrumb.md",
      "demo": "https://designlounge.vercel.app/demo/breadcrumb.html",
      "source": "tailwind"
    },
    {
      "id": "budget-meter",
      "n": "181",
      "title": "Budget meters",
      "summary": "Three budget rows and one number that is over. Only the over row uses the warning wash. The others stay quiet.",
      "platform": "web",
      "type": "component",
      "category": "charts",
      "tags": [
        "budget",
        "meter",
        "finance",
        "warning"
      ],
      "styles": [
        "editorial",
        "paper"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F4EAD6",
        "#FBF6EA",
        "#1C2744",
        "#C8102E",
        "#E8D6BB",
        "#7D470E"
      ],
      "fonts": [
        "Noto Serif Devanagari",
        "Mukta"
      ],
      "url": "https://designlounge.vercel.app/p/budget-meter",
      "brief": "https://designlounge.vercel.app/p/budget-meter.md",
      "demo": "https://designlounge.vercel.app/demo/budget-meter.html",
      "source": "moremedia"
    },
    {
      "id": "button-roles",
      "n": "182",
      "title": "Button roles",
      "summary": "Save is the one solid button. Cancel is outline, Preview is soft, Remove is outline in danger, and Export is disabled.",
      "platform": "web",
      "type": "component",
      "category": "buttons",
      "tags": [
        "button",
        "primary",
        "destructive",
        "disabled"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#1F4D3A",
        "#FFFDF8",
        "#E7F2EC",
        "#9B2C2C"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/button-roles",
      "brief": "https://designlounge.vercel.app/p/button-roles.md",
      "demo": "https://designlounge.vercel.app/demo/button-roles.html",
      "source": "wickret"
    },
    {
      "id": "card-cafe-menu-board",
      "n": "183",
      "title": "Café chalkboard and letterboard menu",
      "summary": "A framed café menu that switches between a chalkboard with grainy chalk lettering and a felt letterboard with plastic letters. Today's special writes itself in.",
      "platform": "web",
      "type": "component",
      "category": "cards",
      "tags": [
        "cards",
        "menu",
        "cafe",
        "chalkboard",
        "toggle"
      ],
      "styles": [
        "organic",
        "retro",
        "playful"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#CDBBA0",
        "#1F2A26",
        "#ECE8DF",
        "#F2D57E",
        "#161616"
      ],
      "fonts": [
        "Caveat",
        "Antonio"
      ],
      "url": "https://designlounge.vercel.app/p/card-cafe-menu-board",
      "brief": "https://designlounge.vercel.app/p/card-cafe-menu-board.md",
      "demo": "https://designlounge.vercel.app/demo/card-cafe-menu-board.html",
      "source": "bermawy"
    },
    {
      "id": "calendar-month",
      "n": "184",
      "title": "Calendar month",
      "summary": "One month, one chosen day. October 2026 opens with the 17th selected and the 3rd marked as today. Previous and next move a month.",
      "platform": "web",
      "type": "component",
      "category": "pickers",
      "tags": [
        "calendar",
        "date",
        "month",
        "picker"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#1F4D3A",
        "#E7F2EC"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/calendar-month",
      "brief": "https://designlounge.vercel.app/p/calendar-month.md",
      "demo": "https://designlounge.vercel.app/demo/calendar-month.html",
      "source": "moremedia"
    },
    {
      "id": "calendar-week-planner",
      "n": "185",
      "title": "Calendar week planner",
      "summary": "A week calendar app with a mini month, calendar toggles, a 15-minute time grid, side-by-side overlaps, drag to move or resize, and a quick-create popover.",
      "platform": "web",
      "type": "screen",
      "category": "utility",
      "tags": [
        "calendar",
        "week",
        "schedule",
        "drag",
        "planner"
      ],
      "styles": [
        "soft",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#FAF8F4",
        "#2B2A28",
        "#6F8F72",
        "#B5694B",
        "#C29A2E"
      ],
      "fonts": [
        "Hanken Grotesk"
      ],
      "url": "https://designlounge.vercel.app/p/calendar-week-planner",
      "brief": "https://designlounge.vercel.app/p/calendar-week-planner.md",
      "demo": "https://designlounge.vercel.app/demo/calendar-week-planner.html",
      "source": "icm"
    },
    {
      "id": "case-file-horizontal-scroll",
      "n": "186",
      "title": "Case file horizontal scroll",
      "summary": "A pinned section where scrolling down slides three foggy night 'case file' panels sideways, with chapter tabs that fill and a 01 / 03 counter.",
      "platform": "web",
      "type": "section",
      "category": "scroll",
      "tags": [
        "horizontal",
        "pinned",
        "storytelling",
        "chapters",
        "night"
      ],
      "styles": [
        "dark",
        "editorial",
        "kinetic"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#0A1220",
        "#ECE6D8",
        "#E8873A",
        "#9FB4C4",
        "#060B14"
      ],
      "fonts": [
        "Anton",
        "DM Mono"
      ],
      "url": "https://designlounge.vercel.app/p/case-file-horizontal-scroll",
      "brief": "https://designlounge.vercel.app/p/case-file-horizontal-scroll.md",
      "demo": "https://designlounge.vercel.app/demo/case-file-horizontal-scroll.html",
      "source": "haunted"
    },
    {
      "id": "changelog-timeline",
      "n": "187",
      "title": "Changelog timeline",
      "summary": "Four dated releases for Field ledger. All, Added, and Fixed filter the same list. A version pill sits under the date.",
      "platform": "web",
      "type": "section",
      "category": "blog",
      "tags": [
        "changelog",
        "timeline",
        "filter"
      ],
      "styles": [
        "editorial",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F4F1EA",
        "#FFFDF8",
        "#1A1814",
        "#1F4D3A",
        "#E7F2EC"
      ],
      "fonts": [
        "Fraunces",
        "Public Sans"
      ],
      "url": "https://designlounge.vercel.app/p/changelog-timeline",
      "brief": "https://designlounge.vercel.app/p/changelog-timeline.md",
      "demo": "https://designlounge.vercel.app/demo/changelog-timeline.html",
      "source": "mendo"
    },
    {
      "id": "hero-chaptered-scenes",
      "n": "188",
      "title": "Chaptered cinema hero",
      "summary": "A dark film-studio hero: fixed headline on the left, four night scenes crossfading on the right, and a numbered chapter index whose hairline fills as each scene plays.",
      "platform": "web",
      "type": "section",
      "category": "hero",
      "tags": [
        "hero",
        "chapters",
        "autoplay",
        "cinema",
        "architecture"
      ],
      "styles": [
        "dark",
        "editorial",
        "luxe"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#110E0B",
        "#F1E8DA",
        "#E9A15B",
        "#C9BCA9",
        "#8F8272"
      ],
      "fonts": [
        "Familjen Grotesk",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/hero-chaptered-scenes",
      "brief": "https://designlounge.vercel.app/p/hero-chaptered-scenes.md",
      "demo": "https://designlounge.vercel.app/demo/hero-chaptered-scenes.html",
      "source": "gmx"
    },
    {
      "id": "chat-thread",
      "n": "189",
      "title": "Chat thread",
      "summary": "A phone thread with Mira at the yard desk. Three messages are already there. Send adds yours on the right and clears the field.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "messaging",
      "tags": [
        "chat",
        "thread",
        "message",
        "phone"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#E7F2EC",
        "#1F4D3A"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/chat-thread",
      "brief": "https://designlounge.vercel.app/p/chat-thread.md",
      "demo": "https://designlounge.vercel.app/demo/chat-thread.html",
      "source": "igloo"
    },
    {
      "id": "checkbox-group",
      "n": "190",
      "title": "Checkbox group",
      "summary": "Three loads on one truck. Rice and Oil start on. Each box is its own choice, and the line names what is actually on.",
      "platform": "web",
      "type": "component",
      "category": "inputs",
      "tags": [
        "checkbox",
        "field",
        "loads",
        "group"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#1F4D3A"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/checkbox-group",
      "brief": "https://designlounge.vercel.app/p/checkbox-group.md",
      "demo": "https://designlounge.vercel.app/demo/checkbox-group.html",
      "source": "moremedia"
    },
    {
      "id": "chip-bucket",
      "n": "191",
      "title": "Chip bucket",
      "summary": "Three chips sit beside a night bucket. Drag one in and it stays. Miss, and it returns.",
      "platform": "web",
      "type": "component",
      "category": "cards",
      "tags": [
        "drag",
        "bucket",
        "chips"
      ],
      "styles": [
        "minimal",
        "dark"
      ],
      "motion": "none",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#1C1B19",
        "#F4F1EA"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/chip-bucket",
      "brief": "https://designlounge.vercel.app/p/chip-bucket.md",
      "demo": "https://designlounge.vercel.app/demo/chip-bucket.html",
      "source": "flist"
    },
    {
      "id": "card-cinema-ticket",
      "n": "192",
      "title": "Cinema ticket with tear-off stub",
      "summary": "A 1930s picture-house ticket in cream and oxblood. Pull the perforated stub away and it tears along a ragged edge, keeps itself, and stamps the ticket Admitted.",
      "platform": "web",
      "type": "component",
      "category": "cards",
      "tags": [
        "cards",
        "ticket",
        "cinema",
        "drag",
        "tear"
      ],
      "styles": [
        "deco",
        "retro",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#3B1418",
        "#F2E4C4",
        "#2B1B14",
        "#9C2A22",
        "#B8862F"
      ],
      "fonts": [
        "Limelight",
        "Spectral"
      ],
      "url": "https://designlounge.vercel.app/p/card-cinema-ticket",
      "brief": "https://designlounge.vercel.app/p/card-cinema-ticket.md",
      "demo": "https://designlounge.vercel.app/demo/card-cinema-ticket.html",
      "source": "bermawy"
    },
    {
      "id": "hero-video-loop",
      "n": "193",
      "title": "Cinematic video loop hero",
      "summary": "A full-bleed night-lake film loop behind a luxe hotel hero, with grain, a visible Pause control, captions, a poster still, and rules for shipping a real video.",
      "platform": "web",
      "type": "section",
      "category": "hero",
      "tags": [
        "hero",
        "video",
        "film",
        "loop",
        "hotel"
      ],
      "styles": [
        "luxe",
        "dark",
        "editorial"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#0B0907",
        "#F1E8DA",
        "#E9B872",
        "#B9AD9B",
        "#C9773B"
      ],
      "fonts": [
        "Cormorant Garamond",
        "Work Sans"
      ],
      "url": "https://designlounge.vercel.app/p/hero-video-loop",
      "brief": "https://designlounge.vercel.app/p/hero-video-loop.md",
      "demo": "https://designlounge.vercel.app/demo/hero-video-loop.html",
      "source": "gmx"
    },
    {
      "id": "cited-answer",
      "n": "194",
      "title": "Cited answer",
      "summary": "A sentence about Gate 4. Night book starts pressed and shows its line. Hold rule swaps the quote.",
      "platform": "web",
      "type": "component",
      "category": "reading",
      "tags": [
        "citation",
        "source",
        "answer"
      ],
      "styles": [
        "editorial",
        "paper"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F4F1EA",
        "#FFFDF8",
        "#1A1814",
        "#1F4D3A"
      ],
      "fonts": [
        "Fraunces",
        "Public Sans"
      ],
      "url": "https://designlounge.vercel.app/p/cited-answer",
      "brief": "https://designlounge.vercel.app/p/cited-answer.md",
      "demo": "https://designlounge.vercel.app/demo/cited-answer.html",
      "source": "mendo"
    },
    {
      "id": "mockup-ipod-classic",
      "n": "195",
      "title": "Click-wheel player mockup",
      "summary": "A CSS click-wheel music player with a working wheel: trace a circle to scroll the menu, press the centre to drill in, play tracks, scroll volume.",
      "platform": "web",
      "type": "component",
      "category": "mockups",
      "tags": [
        "mockup",
        "music",
        "player",
        "click-wheel",
        "retro"
      ],
      "styles": [
        "y2k",
        "playful",
        "retro"
      ],
      "motion": "subtle",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#D6F03B",
        "#0F0F0E",
        "#FF4FA3",
        "#F6F6F3",
        "#1D1D1F"
      ],
      "fonts": [
        "Familjen Grotesk",
        "Pixelify Sans"
      ],
      "url": "https://designlounge.vercel.app/p/mockup-ipod-classic",
      "brief": "https://designlounge.vercel.app/p/mockup-ipod-classic.md",
      "demo": "https://designlounge.vercel.app/demo/mockup-ipod-classic.html",
      "source": "usearticle"
    },
    {
      "id": "code-snippet-tabs",
      "n": "196",
      "title": "Code snippet tabs",
      "summary": "One request in curl, JavaScript, and Python. The active tab is a 32px pill. Copy writes that panel.",
      "platform": "web",
      "type": "component",
      "category": "reading",
      "tags": [
        "code",
        "tabs",
        "copy"
      ],
      "styles": [
        "terminal",
        "minimal"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#161513",
        "#F4F1EA",
        "#1F4D3A",
        "#D7EFE4"
      ],
      "fonts": [
        "IBM Plex Sans",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/code-snippet-tabs",
      "brief": "https://designlounge.vercel.app/p/code-snippet-tabs.md",
      "demo": "https://designlounge.vercel.app/demo/code-snippet-tabs.html",
      "source": "tailwind"
    },
    {
      "id": "combobox",
      "n": "197",
      "title": "Combobox",
      "summary": "A bay field that filters eight names as you type. It opens on Ba, with Bay 2, Bay 4, and Bay 14. Enter commits the highlighted row.",
      "platform": "web",
      "type": "component",
      "category": "inputs",
      "tags": [
        "combobox",
        "search",
        "listbox",
        "form"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#E7F2EC",
        "#9B2C2C"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/combobox",
      "brief": "https://designlounge.vercel.app/p/combobox.md",
      "demo": "https://designlounge.vercel.app/demo/combobox.html",
      "source": "linear"
    },
    {
      "id": "card-event-ticket-stub",
      "n": "198",
      "title": "Concert ticket stack with foil strip",
      "summary": "Three riso-printed gig tickets in a loose pile. A holographic security strip shifts with the pointer, the pile fans out like a hand of cards, and each stub has a seat map.",
      "platform": "web",
      "type": "component",
      "category": "cards",
      "tags": [
        "cards",
        "ticket",
        "concert",
        "foil",
        "stack"
      ],
      "styles": [
        "riso",
        "retro",
        "dark"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#22201D",
        "#F6EFE0",
        "#1B1A17",
        "#FF4F8B",
        "#3255FF"
      ],
      "fonts": [
        "Dela Gothic One",
        "Martian Mono"
      ],
      "url": "https://designlounge.vercel.app/p/card-event-ticket-stub",
      "brief": "https://designlounge.vercel.app/p/card-event-ticket-stub.md",
      "demo": "https://designlounge.vercel.app/demo/card-event-ticket-stub.html",
      "source": "bermawy"
    },
    {
      "id": "integrations-connect",
      "n": "199",
      "title": "Connection grid",
      "summary": "Six Field ledger connections. Three start connected. Connect and Connected are the same button, and the pressed one uses the soft green.",
      "platform": "web",
      "type": "section",
      "category": "features",
      "tags": [
        "integrations",
        "connect",
        "grid"
      ],
      "styles": [
        "editorial",
        "minimal"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F4F1EA",
        "#FFFDF8",
        "#1A1814",
        "#1F4D3A",
        "#E7F2EC"
      ],
      "fonts": [
        "Fraunces",
        "Public Sans"
      ],
      "url": "https://designlounge.vercel.app/p/integrations-connect",
      "brief": "https://designlounge.vercel.app/p/integrations-connect.md",
      "demo": "https://designlounge.vercel.app/demo/integrations-connect.html",
      "source": "stripe"
    },
    {
      "id": "consent-bar",
      "n": "200",
      "title": "Consent bar",
      "summary": "A yard log, and a bar that asks to keep one record of the visit. Accept keeps it. Decline does not. The bar leaves the page.",
      "platform": "web",
      "type": "pattern",
      "category": "utility",
      "tags": [
        "consent",
        "privacy",
        "bar",
        "choice"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#1F4D3A"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/consent-bar",
      "brief": "https://designlounge.vercel.app/p/consent-bar.md",
      "demo": "https://designlounge.vercel.app/demo/consent-bar.html",
      "source": "tailwind"
    },
    {
      "id": "gallery-contact-sheet",
      "n": "201",
      "title": "Contact sheet",
      "summary": "Eight equal plates in a grid. North wall starts selected. The caption under the sheet names the plate and the time of day.",
      "platform": "web",
      "type": "layout",
      "category": "gallery",
      "tags": [
        "gallery",
        "contact-sheet",
        "plates",
        "selection"
      ],
      "styles": [
        "paper",
        "editorial"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F3EFE6",
        "#1A1814",
        "#C4B49A",
        "#2C2825"
      ],
      "fonts": [
        "Fraunces",
        "Public Sans"
      ],
      "url": "https://designlounge.vercel.app/p/gallery-contact-sheet",
      "brief": "https://designlounge.vercel.app/p/gallery-contact-sheet.md",
      "demo": "https://designlounge.vercel.app/demo/gallery-contact-sheet.html",
      "source": "icm"
    },
    {
      "id": "content-card",
      "n": "202",
      "title": "Content card",
      "summary": "One load as a card: Gate 4, Rice, 2,400 kg, Mira Shrestha on 17 October. Opening it marks the card and says load 1842 is open.",
      "platform": "web",
      "type": "component",
      "category": "cards",
      "tags": [
        "card",
        "record",
        "load",
        "list"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#1F4D3A"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/content-card",
      "brief": "https://designlounge.vercel.app/p/content-card.md",
      "demo": "https://designlounge.vercel.app/demo/content-card.html",
      "source": "icm"
    },
    {
      "id": "widget-control-toggles",
      "n": "203",
      "title": "Control centre toggles",
      "summary": "A near-black control centre: radio cluster, tall brightness and volume sliders with rubber-band overdrag, and springy amber toggles that change the screen.",
      "platform": "mobile-app",
      "type": "component",
      "category": "widgets",
      "tags": [
        "controls",
        "toggles",
        "sliders",
        "settings",
        "phone"
      ],
      "styles": [
        "dark",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#0C0D0F",
        "#1A1B1F",
        "#ECEBE6",
        "#FFB547",
        "#8F8D89"
      ],
      "fonts": [
        "Geist",
        "Geist Mono"
      ],
      "url": "https://designlounge.vercel.app/p/widget-control-toggles",
      "brief": "https://designlounge.vercel.app/p/widget-control-toggles.md",
      "demo": "https://designlounge.vercel.app/demo/widget-control-toggles.html",
      "source": "mindmarket"
    },
    {
      "id": "button-copy-share",
      "n": "204",
      "title": "Copy, share and copy-email buttons",
      "summary": "A copy-citation button with a copy-to-check morph and tooltip, a Share button that opens a compact keyboard-ready menu, and an email chip that copies on click.",
      "platform": "web",
      "type": "component",
      "category": "buttons",
      "tags": [
        "copy",
        "clipboard",
        "share",
        "menu",
        "tooltip",
        "editorial"
      ],
      "styles": [
        "editorial",
        "paper",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F1EBDF",
        "#F9F5EC",
        "#1E1B16",
        "#2E5A43",
        "#DCE6DC"
      ],
      "fonts": [
        "Alegreya",
        "Commissioner"
      ],
      "url": "https://designlounge.vercel.app/p/button-copy-share",
      "brief": "https://designlounge.vercel.app/p/button-copy-share.md",
      "demo": "https://designlounge.vercel.app/demo/button-copy-share.html",
      "source": "wickret"
    },
    {
      "id": "corner-player",
      "n": "205",
      "title": "Corner player",
      "summary": "A 220 by 124 clip sits in the corner. Open grows it to 640 by 360. Play fills a gold bar.",
      "platform": "web",
      "type": "component",
      "category": "media",
      "tags": [
        "player",
        "corner",
        "video"
      ],
      "styles": [
        "dark",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F4F1EA",
        "#1A1814",
        "#F4F1EA",
        "#D7B15E"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/corner-player",
      "brief": "https://designlounge.vercel.app/p/corner-player.md",
      "demo": "https://designlounge.vercel.app/demo/corner-player.html",
      "source": "dragone"
    },
    {
      "id": "course-landing-curriculum",
      "n": "206",
      "title": "Course landing with curriculum",
      "summary": "An academic course page: navy serif hero, honest dated discount, a preview-lesson modal, a module accordion with lock and preview rows, FAQ, and a sticky enroll bar.",
      "platform": "web",
      "type": "screen",
      "category": "landing",
      "tags": [
        "course",
        "education",
        "curriculum",
        "accordion",
        "modal",
        "pricing"
      ],
      "styles": [
        "editorial",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#FAF7F1",
        "#15234A",
        "#2E6B4E",
        "#FFFDF8",
        "#E3DDD0"
      ],
      "fonts": [
        "Newsreader",
        "Public Sans"
      ],
      "url": "https://designlounge.vercel.app/p/course-landing-curriculum",
      "brief": "https://designlounge.vercel.app/p/course-landing-curriculum.md",
      "demo": "https://designlounge.vercel.app/demo/course-landing-curriculum.html",
      "source": "haunted"
    },
    {
      "id": "coverflow-strip",
      "n": "207",
      "title": "Coverflow strip",
      "summary": "Five load cards. The center one is forward. Previous and Next step the strip, and a card can be clicked.",
      "platform": "web",
      "type": "component",
      "category": "media",
      "tags": [
        "coverflow",
        "carousel",
        "cards"
      ],
      "styles": [
        "dark",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#141311",
        "#1C1B19",
        "#F4F1EA",
        "#D7B15E"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/coverflow-strip",
      "brief": "https://designlounge.vercel.app/p/coverflow-strip.md",
      "demo": "https://designlounge.vercel.app/demo/coverflow-strip.html",
      "source": "dragone"
    },
    {
      "id": "cta-giant-email-band",
      "n": "208",
      "title": "CTA giant email band",
      "summary": "A Tallyhook closer on electric yellow: a 120px two-line headline with one outlined word, an inline email form that validates, sends, and draws a check.",
      "platform": "web",
      "type": "section",
      "category": "cta",
      "tags": [
        "cta",
        "email",
        "form",
        "signup",
        "trial"
      ],
      "styles": [
        "kinetic",
        "brutalist"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#FFE600",
        "#0A0A0A",
        "#FFFBE0",
        "#B3001B"
      ],
      "fonts": [
        "Archivo",
        "JetBrains Mono"
      ],
      "url": "https://designlounge.vercel.app/p/cta-giant-email-band",
      "brief": "https://designlounge.vercel.app/p/cta-giant-email-band.md",
      "demo": "https://designlounge.vercel.app/demo/cta-giant-email-band.html",
      "source": "haunted"
    },
    {
      "id": "curve-drawer",
      "n": "209",
      "title": "Curve drawer",
      "summary": "The hold list starts open, edge straight. Close it and the edge bows. Open it and the bow settles flat.",
      "platform": "web",
      "type": "component",
      "category": "overlays",
      "tags": [
        "drawer",
        "curve",
        "hold"
      ],
      "styles": [
        "minimal",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F4F1EA",
        "#FFFDF8",
        "#1A1814",
        "#1F4D3A"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/curve-drawer",
      "brief": "https://designlounge.vercel.app/p/curve-drawer.md",
      "demo": "https://designlounge.vercel.app/demo/curve-drawer.html",
      "source": "usearticle"
    },
    {
      "id": "frame-circle-cut",
      "n": "210",
      "title": "Cut-shape image frames",
      "summary": "Four portfolio image frames cut by CSS masks: circle bites, an arch, a notched corner and a blob. Hover morphs each cut; Enter holds it.",
      "platform": "web",
      "type": "component",
      "category": "cards",
      "tags": [
        "cards",
        "image",
        "mask",
        "portfolio",
        "product"
      ],
      "styles": [
        "editorial",
        "organic",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#EEE7DC",
        "#231F1A",
        "#8A4B2A",
        "#D6CBB9",
        "#5A5148"
      ],
      "fonts": [
        "Instrument Serif",
        "Manrope"
      ],
      "url": "https://designlounge.vercel.app/p/frame-circle-cut",
      "brief": "https://designlounge.vercel.app/p/frame-circle-cut.md",
      "demo": "https://designlounge.vercel.app/demo/frame-circle-cut.html",
      "source": "mindmarket"
    },
    {
      "id": "card-daily-quote",
      "n": "211",
      "title": "Daily quote card",
      "summary": "A quote-of-the-day card whose sky gradient follows the time of day. Swipe for the next quote, save it, or open a share sheet that previews it as an image.",
      "platform": "web",
      "type": "component",
      "category": "cards",
      "tags": [
        "quote",
        "card",
        "swipe",
        "share",
        "gradient",
        "wellbeing"
      ],
      "styles": [
        "soft",
        "editorial",
        "kinetic"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#E6E8EF",
        "#0F1A33",
        "#3B4F7A",
        "#E9C46A",
        "#F2EBDD"
      ],
      "fonts": [
        "Young Serif",
        "Figtree"
      ],
      "url": "https://designlounge.vercel.app/p/card-daily-quote",
      "brief": "https://designlounge.vercel.app/p/card-daily-quote.md",
      "demo": "https://designlounge.vercel.app/demo/card-daily-quote.html",
      "source": "flist"
    },
    {
      "id": "social-repo-card",
      "n": "212",
      "title": "Dark mono repository card",
      "summary": "A code repository card in dark mono: star toggle with a ring pop, a growing language bar with legend highlight, and a 52-week commit sparkline you can scrub.",
      "platform": "web",
      "type": "component",
      "category": "social",
      "tags": [
        "repository",
        "code",
        "sparkline",
        "stars",
        "developer"
      ],
      "styles": [
        "dark",
        "terminal",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#0C1011",
        "#12181A",
        "#DFE6E3",
        "#F2B84B"
      ],
      "fonts": [
        "IBM Plex Mono",
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/social-repo-card",
      "brief": "https://designlounge.vercel.app/p/social-repo-card.md",
      "demo": "https://designlounge.vercel.app/demo/social-repo-card.html",
      "source": "stripe"
    },
    {
      "id": "motion-shot-gallery-dark",
      "n": "213",
      "title": "Dark motion shot gallery",
      "summary": "A dark gallery of phone-shot cards that loop when in view or hovered, filtered by gesture, pattern and effect, with a shot viewer and a giant faint wordmark.",
      "platform": "web",
      "type": "screen",
      "category": "gallery",
      "tags": [
        "gallery",
        "motion",
        "filters",
        "grid",
        "showcase"
      ],
      "styles": [
        "dark",
        "minimal",
        "kinetic"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#0B0B0C",
        "#131315",
        "#1A1A1D",
        "#EDEDE8",
        "#7AA2FF"
      ],
      "fonts": [
        "Archivo",
        "Geist Mono"
      ],
      "url": "https://designlounge.vercel.app/p/motion-shot-gallery-dark",
      "brief": "https://designlounge.vercel.app/p/motion-shot-gallery-dark.md",
      "demo": "https://designlounge.vercel.app/demo/motion-shot-gallery-dark.html",
      "source": "60fps"
    },
    {
      "id": "clinic-home-booking",
      "n": "214",
      "title": "Dental clinic home with live booking",
      "summary": "Larkfield Dental: a calm aqua clinic home with a live next-slot card, priced treatments, dentists, insurers, hours with today marked, a map and reviews.",
      "platform": "web",
      "type": "screen",
      "category": "landing",
      "tags": [
        "landing",
        "clinic",
        "booking",
        "health",
        "local"
      ],
      "styles": [
        "soft",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F2F9F8",
        "#FFFFFF",
        "#0E4F55",
        "#D6EFEC",
        "#D98A3D"
      ],
      "fonts": [
        "Nunito",
        "Nunito Sans"
      ],
      "url": "https://designlounge.vercel.app/p/clinic-home-booking",
      "brief": "https://designlounge.vercel.app/p/clinic-home-booking.md",
      "demo": "https://designlounge.vercel.app/demo/clinic-home-booking.html",
      "source": "stripe"
    },
    {
      "id": "notif-deploy-status",
      "n": "215",
      "title": "Deploy status notification",
      "summary": "A dark corner toast that follows a deploy from build to checks to live, with steps, commit hash, a live log line, open preview and a confirmed rollback.",
      "platform": "web",
      "type": "component",
      "category": "feedback",
      "tags": [
        "notification",
        "deploy",
        "devtools",
        "progress",
        "stepper",
        "toast"
      ],
      "styles": [
        "dark",
        "terminal",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#0C0E0D",
        "#131614",
        "#E6E9E4",
        "#C8F25A",
        "#FF6B5B"
      ],
      "fonts": [
        "Wix Madefor Text",
        "Martian Mono"
      ],
      "url": "https://designlounge.vercel.app/p/notif-deploy-status",
      "brief": "https://designlounge.vercel.app/p/notif-deploy-status.md",
      "demo": "https://designlounge.vercel.app/demo/notif-deploy-status.html",
      "source": "60fps"
    },
    {
      "id": "frame-transform-box",
      "n": "216",
      "title": "Design-tool transform box",
      "summary": "A canvas selection box with eight resize handles, a rotate handle and a live size badge. Drag to move, resize and rotate; Shift keeps ratio and snaps 15°.",
      "platform": "web",
      "type": "component",
      "category": "micro",
      "tags": [
        "selection",
        "resize",
        "rotate",
        "canvas",
        "editor",
        "drag"
      ],
      "styles": [
        "dark",
        "industrial",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#1A1C20",
        "#22252B",
        "#FF6B2C",
        "#E8E6E1",
        "#9AA0A9"
      ],
      "fonts": [
        "Bricolage Grotesque",
        "JetBrains Mono"
      ],
      "url": "https://designlounge.vercel.app/p/frame-transform-box",
      "brief": "https://designlounge.vercel.app/p/frame-transform-box.md",
      "demo": "https://designlounge.vercel.app/demo/frame-transform-box.html",
      "source": "60fps"
    },
    {
      "id": "dropdown-menubar-file",
      "n": "217",
      "title": "Desktop app menubar",
      "summary": "File Edit View Track Window Help for a dark audio workstation: hover-to-switch menus, submenus that flip, checkable and radio items, shortcuts.",
      "platform": "web",
      "type": "component",
      "category": "overlays",
      "tags": [
        "menubar",
        "menu",
        "submenu",
        "desktop",
        "keyboard",
        "shortcuts"
      ],
      "styles": [
        "dark",
        "industrial",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#151619",
        "#272A30",
        "#EBE7DF",
        "#F2A33A",
        "#E5484D"
      ],
      "fonts": [
        "Onest",
        "Fragment Mono"
      ],
      "url": "https://designlounge.vercel.app/p/dropdown-menubar-file",
      "brief": "https://designlounge.vercel.app/p/dropdown-menubar-file.md",
      "demo": "https://designlounge.vercel.app/demo/dropdown-menubar-file.html",
      "source": "stripe"
    },
    {
      "id": "widget-device-battery",
      "n": "218",
      "title": "Device battery widget",
      "summary": "A clay-soft battery widget for phone, earbuds (left, right, case), watch and pen, with live charging rings and a tap-through detail view.",
      "platform": "web",
      "type": "component",
      "category": "widgets",
      "tags": [
        "battery",
        "widget",
        "devices",
        "charging",
        "rings"
      ],
      "styles": [
        "clay",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#DFCFBD",
        "#ECDFD0",
        "#3A2C23",
        "#5F9468",
        "#C8603C"
      ],
      "fonts": [
        "Fredoka",
        "Nunito Sans"
      ],
      "url": "https://designlounge.vercel.app/p/widget-device-battery",
      "brief": "https://designlounge.vercel.app/p/widget-device-battery.md",
      "demo": "https://designlounge.vercel.app/demo/widget-device-battery.html",
      "source": "linear"
    },
    {
      "id": "background-diagonal-boxes",
      "n": "219",
      "title": "Diagonal boxes background",
      "summary": "A monochrome isometric box field on canvas. Boxes near the pointer rise on taller sides and lighten, then settle back when it leaves.",
      "platform": "web",
      "type": "pattern",
      "category": "backgrounds",
      "tags": [
        "background",
        "isometric",
        "canvas",
        "pointer",
        "3d"
      ],
      "styles": [
        "minimal",
        "dark",
        "industrial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#1A1B1E",
        "#2B2D31",
        "#686B72",
        "#ECEDEF"
      ],
      "fonts": [
        "Familjen Grotesk",
        "Spline Sans Mono"
      ],
      "url": "https://designlounge.vercel.app/p/background-diagonal-boxes",
      "brief": "https://designlounge.vercel.app/p/background-diagonal-boxes.md",
      "demo": "https://designlounge.vercel.app/demo/background-diagonal-boxes.html",
      "source": "lamalama"
    },
    {
      "id": "dial-knob",
      "n": "220",
      "title": "Dial knob",
      "summary": "A round hold-hours knob from 0 to 12. It starts at 6. Drag or arrow keys move it by one hour.",
      "platform": "web",
      "type": "component",
      "category": "inputs",
      "tags": [
        "dial",
        "knob",
        "input"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#1F4D3A",
        "#E7F2EC"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/dial-knob",
      "brief": "https://designlounge.vercel.app/p/dial-knob.md",
      "demo": "https://designlounge.vercel.app/demo/dial-knob.html",
      "source": "moremedia"
    },
    {
      "id": "diamond-badge-rail",
      "n": "221",
      "title": "Diamond badge rail",
      "summary": "A dark horizontal rail of badge cards, each crowned by a diamond icon that fills lime on hover. A thick scrubber bar drags the rail; a card click filters.",
      "platform": "web",
      "type": "section",
      "category": "cards",
      "tags": [
        "cards",
        "carousel",
        "badges",
        "filter",
        "scrubber",
        "dark"
      ],
      "styles": [
        "dark",
        "brutalist",
        "industrial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#0F1316",
        "#161B1F",
        "#EEF1EA",
        "#C5F04A",
        "#2C343A"
      ],
      "fonts": [
        "Big Shoulders Display",
        "Space Grotesk"
      ],
      "url": "https://designlounge.vercel.app/p/diamond-badge-rail",
      "brief": "https://designlounge.vercel.app/p/diamond-badge-rail.md",
      "demo": "https://designlounge.vercel.app/demo/diamond-badge-rail.html",
      "source": "flist"
    },
    {
      "id": "profile-contact-card",
      "n": "222",
      "title": "Digital business card",
      "summary": "A teal-and-brass business card that flips in 3D to a QR back, copies email and phone with a tag, tilts under the pointer, and downloads a real vCard 3.0 file.",
      "platform": "web",
      "type": "component",
      "category": "profile",
      "tags": [
        "profile",
        "contact",
        "vcard",
        "flip",
        "qr"
      ],
      "styles": [
        "luxe",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#CDC8BD",
        "#11302D",
        "#D6A25A",
        "#F1ECE2",
        "#132A27"
      ],
      "fonts": [
        "Gloock",
        "Azeret Mono"
      ],
      "url": "https://designlounge.vercel.app/p/profile-contact-card",
      "brief": "https://designlounge.vercel.app/p/profile-contact-card.md",
      "demo": "https://designlounge.vercel.app/demo/profile-contact-card.html",
      "source": "dontboardme"
    },
    {
      "id": "docs-install-steps",
      "n": "223",
      "title": "Docs install steps with code panels",
      "summary": "Numbered install steps for a docs page: prose on the left, a dark code panel on the right with highlighted added lines, guide tabs and tick-off numbers.",
      "platform": "web",
      "type": "section",
      "category": "reading",
      "tags": [
        "documentation",
        "code",
        "steps",
        "install",
        "developer"
      ],
      "styles": [
        "minimal",
        "terminal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F7F5F0",
        "#1D1F1B",
        "#0E7C66",
        "#181B1E",
        "#86CBE6"
      ],
      "fonts": [
        "Geist",
        "Geist Mono"
      ],
      "url": "https://designlounge.vercel.app/p/docs-install-steps",
      "brief": "https://designlounge.vercel.app/p/docs-install-steps.md",
      "demo": "https://designlounge.vercel.app/demo/docs-install-steps.html",
      "source": "tailwind"
    },
    {
      "id": "docs-hatched-gutter-shell",
      "n": "224",
      "title": "Docs shell with hatched gutters",
      "summary": "A docs page frame: sticky nav rail, a hairline-bordered content column with diagonal hatching in the gutters, crosshair marks, a version menu and a 3-way theme switch.",
      "platform": "web",
      "type": "layout",
      "category": "reading",
      "tags": [
        "documentation",
        "layout",
        "dark-mode",
        "sidebar",
        "developer"
      ],
      "styles": [
        "swiss",
        "minimal",
        "dark"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#FAFAF9",
        "#121417",
        "#C8402A",
        "#E4E5E8",
        "#0F1113",
        "#FF7A59"
      ],
      "fonts": [
        "Schibsted Grotesk",
        "Martian Mono"
      ],
      "url": "https://designlounge.vercel.app/p/docs-hatched-gutter-shell",
      "brief": "https://designlounge.vercel.app/p/docs-hatched-gutter-shell.md",
      "demo": "https://designlounge.vercel.app/demo/docs-hatched-gutter-shell.html",
      "source": "tailwind"
    },
    {
      "id": "donation-page-impact",
      "n": "225",
      "title": "Donation page with impact",
      "summary": "A nonprofit appeal: story hero, a donation card where every amount says what it buys, fee cover, live goal progress, recent donors, and a thank-you state.",
      "platform": "web",
      "type": "screen",
      "category": "landing",
      "tags": [
        "donation",
        "nonprofit",
        "form",
        "progress",
        "landing"
      ],
      "styles": [
        "organic",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6EEDF",
        "#FFFBF3",
        "#2B2118",
        "#B4502C",
        "#2F5D46"
      ],
      "fonts": [
        "Fraunces",
        "Source Sans 3"
      ],
      "url": "https://designlounge.vercel.app/p/donation-page-impact",
      "brief": "https://designlounge.vercel.app/p/donation-page-impact.md",
      "demo": "https://designlounge.vercel.app/demo/donation-page-impact.html",
      "source": "mindmarket"
    },
    {
      "id": "hero-dot-matrix-field",
      "n": "226",
      "title": "Dot-matrix blob field hero",
      "summary": "A dark studio hero over a canvas dot matrix where drifting metaball blobs carve black shapes with signal-orange rims. The pointer stirs them, and clicks seed new ones.",
      "platform": "web",
      "type": "section",
      "category": "hero",
      "tags": [
        "hero",
        "canvas",
        "dot-matrix",
        "agency",
        "interactive"
      ],
      "styles": [
        "dark",
        "industrial",
        "kinetic"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#0D1013",
        "#DCE3E6",
        "#FF5A1F",
        "#2A6F7A",
        "#8C979C"
      ],
      "fonts": [
        "Familjen Grotesk",
        "JetBrains Mono"
      ],
      "url": "https://designlounge.vercel.app/p/hero-dot-matrix-field",
      "brief": "https://designlounge.vercel.app/p/hero-dot-matrix-field.md",
      "demo": "https://designlounge.vercel.app/demo/hero-dot-matrix-field.html",
      "source": "lamalama"
    },
    {
      "id": "button-download-progress",
      "n": "227",
      "title": "Download button with progress and retry",
      "summary": "A download button that becomes a live progress bar with size, speed and time left, pause and resume, a drawn check on done, and resumable retry. Asset rows use rings.",
      "platform": "web",
      "type": "component",
      "category": "buttons",
      "tags": [
        "download",
        "progress",
        "retry",
        "developer",
        "release"
      ],
      "styles": [
        "dark",
        "terminal",
        "industrial"
      ],
      "motion": "subtle",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#0B0D0A",
        "#121510",
        "#E4E9D8",
        "#C8F04A",
        "#FF6A4D"
      ],
      "fonts": [
        "Epilogue",
        "Fragment Mono"
      ],
      "url": "https://designlounge.vercel.app/p/button-download-progress",
      "brief": "https://designlounge.vercel.app/p/button-download-progress.md",
      "demo": "https://designlounge.vercel.app/demo/button-download-progress.html",
      "source": "usearticle"
    },
    {
      "id": "drag-to-confirm",
      "n": "228",
      "title": "Drag to confirm",
      "summary": "A 56px track. The thumb must travel to the end before a hold is voided. A short drag snaps back.",
      "platform": "web",
      "type": "component",
      "category": "buttons",
      "tags": [
        "confirm",
        "drag",
        "destructive"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#9B2C2C",
        "#1F4D3A"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/drag-to-confirm",
      "brief": "https://designlounge.vercel.app/p/drag-to-confirm.md",
      "demo": "https://designlounge.vercel.app/demo/drag-to-confirm.html",
      "source": "wickret"
    },
    {
      "id": "widget-analog-clock",
      "n": "229",
      "title": "Dress-watch analog clock widget",
      "summary": "A gilt-cased analog clock on live time with a sweeping seconds hand, date window, 24-hour second-zone sub-dial and four dials you cycle by tapping.",
      "platform": "web",
      "type": "component",
      "category": "widgets",
      "tags": [
        "clock",
        "time",
        "watch",
        "timezone",
        "svg"
      ],
      "styles": [
        "luxe",
        "dark"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#0A1411",
        "#143F33",
        "#E8D29C",
        "#ECE2C8",
        "#D99A7D"
      ],
      "fonts": [
        "Marcellus",
        "Mulish"
      ],
      "url": "https://designlounge.vercel.app/p/widget-analog-clock",
      "brief": "https://designlounge.vercel.app/p/widget-analog-clock.md",
      "demo": "https://designlounge.vercel.app/demo/widget-analog-clock.html",
      "source": "usearticle"
    },
    {
      "id": "card-drop-cap-editorial",
      "n": "230",
      "title": "Drop-cap editorial card",
      "summary": "An essay card with a tiled ultramarine drop cap, a column-spanning pull quote, a column rule, reading time and a three-way classic type pairing switcher.",
      "platform": "web",
      "type": "component",
      "category": "reading",
      "tags": [
        "editorial",
        "article",
        "typography",
        "drop-cap",
        "reading"
      ],
      "styles": [
        "editorial",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#E6E0D3",
        "#FAF7F0",
        "#1D1B18",
        "#2B3A9E",
        "#D6CFC0"
      ],
      "fonts": [
        "Libre Bodoni",
        "Libre Franklin"
      ],
      "url": "https://designlounge.vercel.app/p/card-drop-cap-editorial",
      "brief": "https://designlounge.vercel.app/p/card-drop-cap-editorial.md",
      "demo": "https://designlounge.vercel.app/demo/card-drop-cap-editorial.html",
      "source": "mendo"
    },
    {
      "id": "edge-light-button",
      "n": "231",
      "title": "Edge light button",
      "summary": "A gold edge travels around Open the gate. Click says the gate opened on this page.",
      "platform": "web",
      "type": "component",
      "category": "buttons",
      "tags": [
        "button",
        "edge",
        "light"
      ],
      "styles": [
        "dark",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#141311",
        "#1C1B19",
        "#F4F1EA",
        "#D7B15E"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/edge-light-button",
      "brief": "https://designlounge.vercel.app/p/edge-light-button.md",
      "demo": "https://designlounge.vercel.app/demo/edge-light-button.html",
      "source": "wickret"
    },
    {
      "id": "error-404-editorial",
      "n": "232",
      "title": "Editorial 404 with search",
      "summary": "A riso-print 404: a huge serif 404 with a fluoro pink plate out of register, a torn strip, one plain apology, live search, four popular links and inline reporting.",
      "platform": "web",
      "type": "screen",
      "category": "error",
      "tags": [
        "404",
        "error",
        "search",
        "riso",
        "print"
      ],
      "styles": [
        "riso",
        "paper",
        "editorial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F2EBDD",
        "#F8F3E8",
        "#161412",
        "#FF4FA3",
        "#FFD3E8"
      ],
      "fonts": [
        "Fraunces",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/error-404-editorial",
      "brief": "https://designlounge.vercel.app/p/error-404-editorial.md",
      "demo": "https://designlounge.vercel.app/demo/error-404-editorial.html",
      "source": "dontboardme"
    },
    {
      "id": "social-profile-card",
      "n": "233",
      "title": "Editorial creator profile card",
      "summary": "A 440px creator card with a printed-issue cover, an overlapping initials avatar, stats that count up on load, a Follow/Following toggle and a mutuals row.",
      "platform": "web",
      "type": "component",
      "category": "social",
      "tags": [
        "profile",
        "creator",
        "follow",
        "stats",
        "card"
      ],
      "styles": [
        "editorial",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#ECE5D8",
        "#FBF8F2",
        "#1F1A17",
        "#8C2F1B",
        "#D9A441"
      ],
      "fonts": [
        "Fraunces",
        "Instrument Sans"
      ],
      "url": "https://designlounge.vercel.app/p/social-profile-card",
      "brief": "https://designlounge.vercel.app/p/social-profile-card.md",
      "demo": "https://designlounge.vercel.app/demo/social-profile-card.html",
      "source": "tailwind"
    },
    {
      "id": "phone-sign-in",
      "n": "234",
      "title": "Editorial phone sign-in",
      "summary": "A sharp, square-cornered phone sign-in under a 112px serif wordmark, with inline email checks, a show/hide password and a button that loads, then welcomes.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "auth",
      "tags": [
        "auth",
        "sign-in",
        "form",
        "validation",
        "phone"
      ],
      "styles": [
        "editorial",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F2EFE8",
        "#121110",
        "#FF4F00",
        "#B3380A",
        "#D6D0C4"
      ],
      "fonts": [
        "Instrument Serif",
        "Inter Tight"
      ],
      "url": "https://designlounge.vercel.app/p/phone-sign-in",
      "brief": "https://designlounge.vercel.app/p/phone-sign-in.md",
      "demo": "https://designlounge.vercel.app/demo/phone-sign-in.html",
      "source": "igloo"
    },
    {
      "id": "profile-editorial-staff",
      "n": "235",
      "title": "Editorial staff profile card",
      "summary": "A newspaper staff card: CSS stipple portrait, kicker and serif name, a byline count that ticks up, Recent/Most read article tabs, and a blue-ink signature that draws itself.",
      "platform": "web",
      "type": "section",
      "category": "team",
      "tags": [
        "team",
        "staff",
        "author",
        "newspaper",
        "signature"
      ],
      "styles": [
        "editorial",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#E9E3D5",
        "#F8F4EA",
        "#1C1A16",
        "#2340A8",
        "#CFC6B3"
      ],
      "fonts": [
        "Old Standard TT",
        "Libre Franklin"
      ],
      "url": "https://designlounge.vercel.app/p/profile-editorial-staff",
      "brief": "https://designlounge.vercel.app/p/profile-editorial-staff.md",
      "demo": "https://designlounge.vercel.app/demo/profile-editorial-staff.html",
      "source": "dontboardme"
    },
    {
      "id": "footer-engraved-caravan-strip",
      "n": "236",
      "title": "Engraved caravan footer",
      "summary": "A dark five-column footer with a ticking local time and an email form, ending in an engraved night plain where a herder and two pack llamas walk across.",
      "platform": "web",
      "type": "section",
      "category": "footer",
      "tags": [
        "footer",
        "illustration",
        "parallax",
        "newsletter",
        "clock",
        "svg"
      ],
      "styles": [
        "dark",
        "editorial",
        "paper"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#17211B",
        "#EBE3CC",
        "#E0623E",
        "#EFE8D6"
      ],
      "fonts": [
        "Newsreader",
        "Figtree"
      ],
      "url": "https://designlounge.vercel.app/p/footer-engraved-caravan-strip",
      "brief": "https://designlounge.vercel.app/p/footer-engraved-caravan-strip.md",
      "demo": "https://designlounge.vercel.app/demo/footer-engraved-caravan-strip.html",
      "source": "susan"
    },
    {
      "id": "throw-loop-engraved-strip",
      "n": "237",
      "title": "Engraved disc throw loop",
      "summary": "Two stick figures on hatched hills trade a pink flying disc along a curved motion path with a fading comet trail, all synced to one 14s CSS clock.",
      "platform": "web",
      "type": "animation",
      "category": "backgrounds",
      "tags": [
        "illustration",
        "offset-path",
        "loop",
        "svg",
        "keyframes",
        "playful"
      ],
      "styles": [
        "playful",
        "paper",
        "minimal"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#DFE7E2",
        "#22312C",
        "#D6336C",
        "#F1ECE0",
        "#A7B7AD"
      ],
      "fonts": [
        "Bricolage Grotesque",
        "Spline Sans Mono"
      ],
      "url": "https://designlounge.vercel.app/p/throw-loop-engraved-strip",
      "brief": "https://designlounge.vercel.app/p/throw-loop-engraved-strip.md",
      "demo": "https://designlounge.vercel.app/demo/throw-loop-engraved-strip.html",
      "source": "susan"
    },
    {
      "id": "hero-engraved-moonrise-plate",
      "n": "238",
      "title": "Engraved moonrise hero plate",
      "summary": "A night portfolio hero drawn like an engraving: hatched ridges, a rising moon, drifting outline clouds, a kite flyer and a lighthouse, with rising headline lines and a drawn underline.",
      "platform": "web",
      "type": "section",
      "category": "hero",
      "tags": [
        "hero",
        "illustration",
        "parallax",
        "portfolio",
        "svg",
        "night"
      ],
      "styles": [
        "editorial",
        "dark",
        "paper"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#0E1A1C",
        "#E9E4D4",
        "#F2A93B",
        "#152427"
      ],
      "fonts": [
        "Instrument Serif",
        "Manrope"
      ],
      "url": "https://designlounge.vercel.app/p/hero-engraved-moonrise-plate",
      "brief": "https://designlounge.vercel.app/p/hero-engraved-moonrise-plate.md",
      "demo": "https://designlounge.vercel.app/demo/hero-engraved-moonrise-plate.html",
      "source": "susan"
    },
    {
      "id": "card-event-countdown",
      "n": "239",
      "title": "Event countdown ticket card",
      "summary": "A gig ticket card with split-flap digits counting down to a real date, a venue block, an add-to-calendar menu, tier and quantity pickers, and a seat-hold CTA.",
      "platform": "web",
      "type": "component",
      "category": "cards",
      "tags": [
        "cards",
        "event",
        "countdown",
        "tickets",
        "calendar"
      ],
      "styles": [
        "retro",
        "riso"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#0F1633",
        "#F1E9D8",
        "#FF6A2B",
        "#141A33",
        "#CDBFA3"
      ],
      "fonts": [
        "Anybody",
        "Reddit Mono"
      ],
      "url": "https://designlounge.vercel.app/p/card-event-countdown",
      "brief": "https://designlounge.vercel.app/p/card-event-countdown.md",
      "demo": "https://designlounge.vercel.app/demo/card-event-countdown.html",
      "source": "bermawy"
    },
    {
      "id": "event-ticket-checkout",
      "n": "240",
      "title": "Event ticket checkout",
      "summary": "Club night tickets: types with steppers, an SVG seat map for rows A–H, an itemised fee summary, and a 10:00 hold that really releases seats at zero.",
      "platform": "web",
      "type": "screen",
      "category": "ecommerce",
      "tags": [
        "tickets",
        "checkout",
        "seats",
        "timer",
        "events"
      ],
      "styles": [
        "y2k",
        "cyber",
        "dark"
      ],
      "motion": "subtle",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#070708",
        "#0E0E10",
        "#F2F2F4",
        "#B9BBC2",
        "#FF2E93"
      ],
      "fonts": [
        "Archivo",
        "JetBrains Mono"
      ],
      "url": "https://designlounge.vercel.app/p/event-ticket-checkout",
      "brief": "https://designlounge.vercel.app/p/event-ticket-checkout.md",
      "demo": "https://designlounge.vercel.app/demo/event-ticket-checkout.html",
      "source": "abel"
    },
    {
      "id": "load-failed-retry",
      "n": "241",
      "title": "Failed load with retry",
      "summary": "A runs page that failed: a danger banner, one retry, then three rows. The failure is the first frame.",
      "platform": "web",
      "type": "pattern",
      "category": "error",
      "tags": [
        "error",
        "retry",
        "list",
        "banner"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#9B2C2C"
      ],
      "fonts": [
        "IBM Plex Sans",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/load-failed-retry",
      "brief": "https://designlounge.vercel.app/p/load-failed-retry.md",
      "demo": "https://designlounge.vercel.app/demo/load-failed-retry.html",
      "source": "stripe"
    },
    {
      "id": "faq-category-accordion",
      "n": "242",
      "title": "FAQ category accordion",
      "summary": "A Brightwell help centre FAQ: four categories with counts on the left, an accordion on the right, live search with highlighted matches, and a talk-to-a-person card.",
      "platform": "web",
      "type": "section",
      "category": "faq",
      "tags": [
        "faq",
        "accordion",
        "search",
        "help",
        "support"
      ],
      "styles": [
        "minimal",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#FFFFFF",
        "#0F172A",
        "#15803D",
        "#E2E8F0",
        "#F6F7F9"
      ],
      "fonts": [
        "Inter"
      ],
      "url": "https://designlounge.vercel.app/p/faq-category-accordion",
      "brief": "https://designlounge.vercel.app/p/faq-category-accordion.md",
      "demo": "https://designlounge.vercel.app/demo/faq-category-accordion.html",
      "source": "dontboardme"
    },
    {
      "id": "widget-compass",
      "n": "243",
      "title": "Field compass widget",
      "summary": "A forest-green compass widget on a topographic map: drag the cream card to rotate, read heading and cardinal, and watch a level bubble chase the pointer.",
      "platform": "web",
      "type": "component",
      "category": "widgets",
      "tags": [
        "compass",
        "widget",
        "outdoor",
        "dial",
        "map"
      ],
      "styles": [
        "organic",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#ECE4CF",
        "#1D3428",
        "#F4EEDD",
        "#E5562A",
        "#CDBF9B"
      ],
      "fonts": [
        "Saira Condensed",
        "Martian Mono"
      ],
      "url": "https://designlounge.vercel.app/p/widget-compass",
      "brief": "https://designlounge.vercel.app/p/widget-compass.md",
      "demo": "https://designlounge.vercel.app/demo/widget-compass.html",
      "source": "mindmarket"
    },
    {
      "id": "file-upload-manager",
      "n": "244",
      "title": "File upload manager",
      "summary": "A dark upload screen: a tall dropzone that inverts on drag, a real file picker, and a queue with live speed, time left, pause, cancel, and retry.",
      "platform": "web",
      "type": "screen",
      "category": "inputs",
      "tags": [
        "upload",
        "files",
        "dropzone",
        "progress",
        "queue"
      ],
      "styles": [
        "dark",
        "industrial",
        "terminal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#141518",
        "#1B1D21",
        "#EBE9E3",
        "#C8F53C",
        "#FF7A66"
      ],
      "fonts": [
        "Archivo",
        "JetBrains Mono"
      ],
      "url": "https://designlounge.vercel.app/p/file-upload-manager",
      "brief": "https://designlounge.vercel.app/p/file-upload-manager.md",
      "demo": "https://designlounge.vercel.app/demo/file-upload-manager.html",
      "source": "stripe"
    },
    {
      "id": "gallery-film-strip",
      "n": "245",
      "title": "Film strip with loupe",
      "summary": "A draggable 35mm strip with sprocket holes and edge-printed frame numbers. Clicking a frame enlarges it on a light box under a 3× loupe.",
      "platform": "web",
      "type": "layout",
      "category": "gallery",
      "tags": [
        "gallery",
        "film",
        "loupe",
        "negative",
        "darkroom"
      ],
      "styles": [
        "dark",
        "retro",
        "industrial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#121010",
        "#F4F1EA",
        "#E9A23B",
        "#D8402F",
        "#5B2C12"
      ],
      "fonts": [
        "Anton",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/gallery-film-strip",
      "brief": "https://designlounge.vercel.app/p/gallery-film-strip.md",
      "demo": "https://designlounge.vercel.app/demo/gallery-film-strip.html",
      "source": "sibal"
    },
    {
      "id": "dropdown-filter-sort",
      "n": "246",
      "title": "Filter and sort dropdowns",
      "summary": "A stock table's Filter popover (search, multi-select with live faceted counts) and Sort menu with a direction toggle, plus removable applied-filter chips.",
      "platform": "web",
      "type": "component",
      "category": "overlays",
      "tags": [
        "filter",
        "sort",
        "dropdown",
        "table",
        "chips",
        "listbox"
      ],
      "styles": [
        "organic",
        "soft",
        "editorial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#EDF0E8",
        "#FBFCF8",
        "#1E2A22",
        "#2F6B4F",
        "#A8482A"
      ],
      "fonts": [
        "Young Serif",
        "Libre Franklin"
      ],
      "url": "https://designlounge.vercel.app/p/dropdown-filter-sort",
      "brief": "https://designlounge.vercel.app/p/dropdown-filter-sort.md",
      "demo": "https://designlounge.vercel.app/demo/dropdown-filter-sort.html",
      "source": "usearticle"
    },
    {
      "id": "filter-toolbar",
      "n": "247",
      "title": "Filter toolbar",
      "summary": "A search field and four chips above a load list. All starts pressed. Out, In, and Held filter the rows. An empty match says no loads match.",
      "platform": "web",
      "type": "component",
      "category": "utility",
      "tags": [
        "filter",
        "search",
        "toolbar",
        "list"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#E7F2EC"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/filter-toolbar",
      "brief": "https://designlounge.vercel.app/p/filter-toolbar.md",
      "demo": "https://designlounge.vercel.app/demo/filter-toolbar.html",
      "source": "tailwind"
    },
    {
      "id": "widget-flight-arrival",
      "n": "248",
      "title": "Flight arrival split-flap widget",
      "summary": "An airport-signage flight widget: a plane rides a route arc, times and gate flip on split-flap cells, and a delay toggle re-flips the board.",
      "platform": "web",
      "type": "component",
      "category": "widgets",
      "tags": [
        "widget",
        "flight",
        "split-flap",
        "travel",
        "status"
      ],
      "styles": [
        "industrial",
        "dark",
        "retro"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#24231F",
        "#121211",
        "#F4F1E6",
        "#FFC72C",
        "#FF7A45"
      ],
      "fonts": [
        "Barlow Condensed",
        "Overpass Mono"
      ],
      "url": "https://designlounge.vercel.app/p/widget-flight-arrival",
      "brief": "https://designlounge.vercel.app/p/widget-flight-arrival.md",
      "demo": "https://designlounge.vercel.app/demo/widget-flight-arrival.html",
      "source": "abel"
    },
    {
      "id": "focus-dim",
      "n": "249",
      "title": "Focus dim",
      "summary": "Four yard cards. Press one and the others drop to opacity .35. Press it again and the board evens out.",
      "platform": "web",
      "type": "component",
      "category": "cards",
      "tags": [
        "focus",
        "dim",
        "cards"
      ],
      "styles": [
        "minimal",
        "paper"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#1F4D3A"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/focus-dim",
      "brief": "https://designlounge.vercel.app/p/focus-dim.md",
      "demo": "https://designlounge.vercel.app/demo/focus-dim.html",
      "source": "bermawy"
    },
    {
      "id": "folder-reveal",
      "n": "250",
      "title": "Folder reveal",
      "summary": "A manila folder starts open, three notes fanned above it. The folder button closes and opens the fan.",
      "platform": "web",
      "type": "animation",
      "category": "cards",
      "tags": [
        "folder",
        "cards",
        "reveal"
      ],
      "styles": [
        "paper",
        "editorial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F4F1EA",
        "#FFFDF8",
        "#E7D7B6",
        "#1A1814",
        "#1F4D3A"
      ],
      "fonts": [
        "Fraunces",
        "Public Sans"
      ],
      "url": "https://designlounge.vercel.app/p/folder-reveal",
      "brief": "https://designlounge.vercel.app/p/folder-reveal.md",
      "demo": "https://designlounge.vercel.app/demo/folder-reveal.html",
      "source": "bermawy"
    },
    {
      "id": "button-follow-bookmark",
      "n": "251",
      "title": "Follow, unfollow and save buttons",
      "summary": "A set of social buttons: Follow morphs to Following and shows Unfollow only on a later hover, a bell appears after follow, and Save fills its ribbon and shows an undo toast.",
      "platform": "web",
      "type": "component",
      "category": "buttons",
      "tags": [
        "social",
        "follow",
        "bookmark",
        "toast",
        "profile"
      ],
      "styles": [
        "minimal",
        "swiss"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#EBEDF1",
        "#FFFFFF",
        "#0D1015",
        "#2443F5",
        "#CF2A1F"
      ],
      "fonts": [
        "Funnel Display",
        "Funnel Sans"
      ],
      "url": "https://designlounge.vercel.app/p/button-follow-bookmark",
      "brief": "https://designlounge.vercel.app/p/button-follow-bookmark.md",
      "demo": "https://designlounge.vercel.app/demo/button-follow-bookmark.html",
      "source": "wickret"
    },
    {
      "id": "funnel-chart",
      "n": "252",
      "title": "Funnel chart",
      "summary": "71 billed, of 240 that arrived. Five single-colour bars. The pressed stage becomes the number.",
      "platform": "web",
      "type": "component",
      "category": "charts",
      "tags": [
        "chart",
        "funnel",
        "stages"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#1F4D3A",
        "#E7F2EC"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/funnel-chart",
      "brief": "https://designlounge.vercel.app/p/funnel-chart.md",
      "demo": "https://designlounge.vercel.app/demo/funnel-chart.html",
      "source": "mindmarket"
    },
    {
      "id": "social-chat-server-card",
      "n": "253",
      "title": "Gamer community chat card",
      "summary": "A three-column community chat card in violet-black with one acid-lime accent: banner, channels with unread badges, presence list and messages that arrive live after a typing indicator.",
      "platform": "web",
      "type": "component",
      "category": "social",
      "tags": [
        "chat",
        "community",
        "presence",
        "messages",
        "gaming"
      ],
      "styles": [
        "dark",
        "cyber",
        "industrial"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#0D0B12",
        "#16131D",
        "#ECE8F4",
        "#C6F36B",
        "#F0606A"
      ],
      "fonts": [
        "Chakra Petch",
        "Rubik"
      ],
      "url": "https://designlounge.vercel.app/p/social-chat-server-card",
      "brief": "https://designlounge.vercel.app/p/social-chat-server-card.md",
      "demo": "https://designlounge.vercel.app/demo/social-chat-server-card.html",
      "source": "abel"
    },
    {
      "id": "card-glass-credit",
      "n": "254",
      "title": "Glass credit card with flip",
      "summary": "A frosted-glass payment card that tilts to the pointer with a moving holographic edge, flips to a back with a hold-to-reveal CVV, and switches between three cards.",
      "platform": "web",
      "type": "component",
      "category": "cards",
      "tags": [
        "cards",
        "payments",
        "wallet",
        "tilt",
        "flip"
      ],
      "styles": [
        "glass",
        "dark",
        "luxe"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#0B1513",
        "#EEF2EC",
        "#C9733F",
        "#2FA39A",
        "#E8D9B5"
      ],
      "fonts": [
        "Unbounded",
        "Sometype Mono"
      ],
      "url": "https://designlounge.vercel.app/p/card-glass-credit",
      "brief": "https://designlounge.vercel.app/p/card-glass-credit.md",
      "demo": "https://designlounge.vercel.app/demo/card-glass-credit.html",
      "source": "flist"
    },
    {
      "id": "glitch-text",
      "n": "255",
      "title": "Glitch text",
      "summary": "GATE 4 splits red and green for 480ms when Replay runs, then the word sits still.",
      "platform": "web",
      "type": "animation",
      "category": "text-motion",
      "tags": [
        "glitch",
        "type",
        "replay"
      ],
      "styles": [
        "dark",
        "kinetic"
      ],
      "motion": "subtle",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#141311",
        "#F4F1EA",
        "#9B2C2C",
        "#1F4D3A"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/glitch-text",
      "brief": "https://designlounge.vercel.app/p/glitch-text.md",
      "demo": "https://designlounge.vercel.app/demo/glitch-text.html",
      "source": "wickret"
    },
    {
      "id": "card-progress-goals",
      "n": "256",
      "title": "Goals card with rings and confetti",
      "summary": "Three quarterly goals as progress rings with log buttons, inline-editable targets, and a confetti burst at 100% that respects reduced motion.",
      "platform": "web",
      "type": "component",
      "category": "cards",
      "tags": [
        "goals",
        "progress",
        "rings",
        "celebration",
        "inline-edit"
      ],
      "styles": [
        "soft",
        "playful"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#D5E3D8",
        "#FBFCF7",
        "#1C2923",
        "#D9512F",
        "#C98A12",
        "#1F7A74"
      ],
      "fonts": [
        "Bricolage Grotesque",
        "Azeret Mono"
      ],
      "url": "https://designlounge.vercel.app/p/card-progress-goals",
      "brief": "https://designlounge.vercel.app/p/card-progress-goals.md",
      "demo": "https://designlounge.vercel.app/demo/card-progress-goals.html",
      "source": "mindmarket"
    },
    {
      "id": "gooey-menu",
      "n": "257",
      "title": "Gooey menu",
      "summary": "A green menu blob starts open. Hold, Note, and Call sit out on the goo. The menu button pulls them back.",
      "platform": "web",
      "type": "component",
      "category": "buttons",
      "tags": [
        "menu",
        "goo",
        "blob"
      ],
      "styles": [
        "minimal",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#1F4D3A",
        "#E7F2EC"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/gooey-menu",
      "brief": "https://designlounge.vercel.app/p/gooey-menu.md",
      "demo": "https://designlounge.vercel.app/demo/gooey-menu.html",
      "source": "wickret"
    },
    {
      "id": "gooey-nav",
      "n": "258",
      "title": "Gooey nav",
      "summary": "Four yard links. A green pill slides under the current one and softens through a goo filter.",
      "platform": "web",
      "type": "component",
      "category": "navbar",
      "tags": [
        "nav",
        "goo",
        "pill"
      ],
      "styles": [
        "minimal",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#1F4D3A"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/gooey-nav",
      "brief": "https://designlounge.vercel.app/p/gooey-nav.md",
      "demo": "https://designlounge.vercel.app/demo/gooey-nav.html",
      "source": "lamalama"
    },
    {
      "id": "background-graph-paper",
      "n": "259",
      "title": "Graph paper background",
      "summary": "Engineering graph paper on a true 1 mm grid with rulers, a snapping pointer crosshair, a live X/Y readout in millimetres, and paper or blueprint sheets.",
      "platform": "web",
      "type": "pattern",
      "category": "backgrounds",
      "tags": [
        "background",
        "grid",
        "crosshair",
        "blueprint",
        "engineering"
      ],
      "styles": [
        "industrial",
        "paper",
        "swiss"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F1EEE3",
        "#9DBCB5",
        "#1F2A2E",
        "#C8412B",
        "#163E72"
      ],
      "fonts": [
        "Big Shoulders Display",
        "Red Hat Mono"
      ],
      "url": "https://designlounge.vercel.app/p/background-graph-paper",
      "brief": "https://designlounge.vercel.app/p/background-graph-paper.md",
      "demo": "https://designlounge.vercel.app/demo/background-graph-paper.html",
      "source": "lamalama"
    },
    {
      "id": "graph-paper-homepage",
      "n": "260",
      "title": "Graph paper homepage",
      "summary": "A personal homepage typed onto engineering paper: a typewriter greeting, a torn photo print, paperclipped project slips and a notebook log.",
      "platform": "web",
      "type": "screen",
      "category": "portfolio",
      "tags": [
        "personal",
        "homepage",
        "typewriter",
        "paper",
        "notebook"
      ],
      "styles": [
        "paper",
        "retro",
        "editorial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#ECF0E1",
        "#FAFAF4",
        "#26271F",
        "#9C3324",
        "#C3D2B2"
      ],
      "fonts": [
        "Courier Prime",
        "Caveat"
      ],
      "url": "https://designlounge.vercel.app/p/graph-paper-homepage",
      "brief": "https://designlounge.vercel.app/p/graph-paper-homepage.md",
      "demo": "https://designlounge.vercel.app/demo/graph-paper-homepage.html",
      "source": "bermawy"
    },
    {
      "id": "greeting-loader",
      "n": "261",
      "title": "Greeting loader",
      "summary": "Hello, Namaste, Salaam, Bonjour. Each word holds 700ms, then it stops. Replay starts again.",
      "platform": "web",
      "type": "animation",
      "category": "loaders",
      "tags": [
        "greeting",
        "loader",
        "type"
      ],
      "styles": [
        "editorial",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F4F1EA",
        "#FFFDF8",
        "#1A1814",
        "#1F4D3A"
      ],
      "fonts": [
        "Fraunces",
        "Public Sans"
      ],
      "url": "https://designlounge.vercel.app/p/greeting-loader",
      "brief": "https://designlounge.vercel.app/p/greeting-loader.md",
      "demo": "https://designlounge.vercel.app/demo/greeting-loader.html",
      "source": "sibal"
    },
    {
      "id": "grow-grid",
      "n": "262",
      "title": "Grow grid",
      "summary": "Six yard rooms in a 3 by 2 grid. The row and column under the pointer grow. The rest shrink.",
      "platform": "web",
      "type": "layout",
      "category": "gallery",
      "tags": [
        "grid",
        "hover",
        "rooms"
      ],
      "styles": [
        "minimal",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#1F4D3A"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/grow-grid",
      "brief": "https://designlounge.vercel.app/p/grow-grid.md",
      "demo": "https://designlounge.vercel.app/demo/grow-grid.html",
      "source": "icm"
    },
    {
      "id": "background-halftone-pop",
      "n": "263",
      "title": "Halftone pop background",
      "summary": "A 45° canvas halftone screen whose dot sizes follow a drifting gradient and swell under the pointer, in three two-ink pop-art presets behind comic caption boxes.",
      "platform": "web",
      "type": "pattern",
      "category": "backgrounds",
      "tags": [
        "background",
        "halftone",
        "canvas",
        "pointer",
        "pop-art",
        "hero"
      ],
      "styles": [
        "playful",
        "riso",
        "retro"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#FFE14A",
        "#E8302A",
        "#141010",
        "#FFFAF0"
      ],
      "fonts": [
        "Bricolage Grotesque",
        "Courier Prime"
      ],
      "url": "https://designlounge.vercel.app/p/background-halftone-pop",
      "brief": "https://designlounge.vercel.app/p/background-halftone-pop.md",
      "demo": "https://designlounge.vercel.app/demo/background-halftone-pop.html",
      "source": "susan"
    },
    {
      "id": "hamburger-circle-reveal",
      "n": "264",
      "title": "Hamburger circle reveal",
      "summary": "A 44px menu button morphs into an X while a black panel grows out of it as a clip-path circle, then five 40px grotesk links rise in on a 50ms stagger.",
      "platform": "mobile-web",
      "type": "component",
      "category": "navbar",
      "tags": [
        "navigation",
        "menu",
        "hamburger",
        "overlay",
        "clip-path"
      ],
      "styles": [
        "kinetic",
        "dark",
        "swiss"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#EFE9DC",
        "#121110",
        "#F2EDE2",
        "#FF4A1C"
      ],
      "fonts": [
        "Archivo",
        "JetBrains Mono"
      ],
      "url": "https://designlounge.vercel.app/p/hamburger-circle-reveal",
      "brief": "https://designlounge.vercel.app/p/hamburger-circle-reveal.md",
      "demo": "https://designlounge.vercel.app/demo/hamburger-circle-reveal.html",
      "source": "lamalama"
    },
    {
      "id": "text-annotated-underlines",
      "n": "265",
      "title": "Hand-drawn text annotations",
      "summary": "An essay page where six pen marks (underline, circle, highlight, strike, bracket, arrow) draw onto the text on scroll, with a picker that replays each one.",
      "platform": "web",
      "type": "animation",
      "category": "text-motion",
      "tags": [
        "annotation",
        "svg",
        "handwriting",
        "editorial",
        "scroll"
      ],
      "styles": [
        "editorial",
        "paper"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F3ECDF",
        "#1F1D1A",
        "#2346B8",
        "#CF3A25",
        "#7FD9AD"
      ],
      "fonts": [
        "Literata",
        "Kalam"
      ],
      "url": "https://designlounge.vercel.app/p/text-annotated-underlines",
      "brief": "https://designlounge.vercel.app/p/text-annotated-underlines.md",
      "demo": "https://designlounge.vercel.app/demo/text-annotated-underlines.html",
      "source": "susan"
    },
    {
      "id": "handheld-talk-player",
      "n": "266",
      "title": "Handheld talk player",
      "summary": "A list of recorded talks beside a pocket handheld console that plays the chosen one on a four-tone LCD, driven by a real d-pad and A/B keys.",
      "platform": "web",
      "type": "section",
      "category": "media",
      "tags": [
        "video",
        "talks",
        "retro",
        "console",
        "playlist"
      ],
      "styles": [
        "retro",
        "playful",
        "dark"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#1F2A2C",
        "#E6D8AE",
        "#B9C68C",
        "#E0562A",
        "#9C2F3D"
      ],
      "fonts": [
        "IBM Plex Mono",
        "VT323"
      ],
      "url": "https://designlounge.vercel.app/p/handheld-talk-player",
      "brief": "https://designlounge.vercel.app/p/handheld-talk-player.md",
      "demo": "https://designlounge.vercel.app/demo/handheld-talk-player.html",
      "source": "bermawy"
    },
    {
      "id": "text-rise-underline-whisper",
      "n": "267",
      "title": "Headline rise with drawn underline",
      "summary": "A staged headline intro: two lines rise 160ms apart, a hand-drawn underline strokes under the italic word at 1s, then the paragraph and a faint aside note follow.",
      "platform": "web",
      "type": "animation",
      "category": "text-motion",
      "tags": [
        "headline",
        "intro",
        "underline",
        "svg",
        "stagger",
        "editorial"
      ],
      "styles": [
        "editorial",
        "paper",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F3EEE4",
        "#1E2633",
        "#2F55C8",
        "#FBF8F2"
      ],
      "fonts": [
        "Cormorant Garamond",
        "Karla"
      ],
      "url": "https://designlounge.vercel.app/p/text-rise-underline-whisper",
      "brief": "https://designlounge.vercel.app/p/text-rise-underline-whisper.md",
      "demo": "https://designlounge.vercel.app/demo/text-rise-underline-whisper.html",
      "source": "susan"
    },
    {
      "id": "hero-live-browser-card",
      "n": "268",
      "title": "Hero with a live browser card",
      "summary": "A SaaS hero: marker-highlighted headline, hard-shadow buttons, and a browser mockup whose schedule card ticks up, adds a post and pops a toast every 4.2s.",
      "platform": "web",
      "type": "section",
      "category": "hero",
      "tags": [
        "hero",
        "saas",
        "mockup",
        "live",
        "automation"
      ],
      "styles": [
        "brutalist",
        "playful"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#EEF3EA",
        "#FCFDF9",
        "#0F1E19",
        "#2443F0",
        "#FFE14D",
        "#15A05C"
      ],
      "fonts": [
        "Familjen Grotesk",
        "Fragment Mono"
      ],
      "url": "https://designlounge.vercel.app/p/hero-live-browser-card",
      "brief": "https://designlounge.vercel.app/p/hero-live-browser-card.md",
      "demo": "https://designlounge.vercel.app/demo/hero-live-browser-card.html",
      "source": "usearticle"
    },
    {
      "id": "navbar-hide-on-scroll",
      "n": "269",
      "title": "Hide-on-scroll navbar",
      "summary": "A docs-site header with a dismissible announcement bar. It slides away when you scroll down, returns with a shadow when you scroll up, and underlines the section in view.",
      "platform": "web",
      "type": "component",
      "category": "navbar",
      "tags": [
        "navbar",
        "scroll",
        "scrollspy",
        "announcement",
        "saas"
      ],
      "styles": [
        "swiss",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F5F1",
        "#141414",
        "#1F4FD8",
        "#FBFAF7",
        "#E2E0D8"
      ],
      "fonts": [
        "Hanken Grotesk",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/navbar-hide-on-scroll",
      "brief": "https://designlounge.vercel.app/p/navbar-hide-on-scroll.md",
      "demo": "https://designlounge.vercel.app/demo/navbar-hide-on-scroll.html",
      "source": "lamalama"
    },
    {
      "id": "button-hold-to-confirm",
      "n": "270",
      "title": "Hold and slide to confirm",
      "summary": "Hold-to-delete buttons that fill while held and drain on release, plus slide-to-pay tracks that spring home short of 92%, all with keyboard paths.",
      "platform": "web",
      "type": "component",
      "category": "buttons",
      "tags": [
        "buttons",
        "destructive",
        "confirm",
        "slider",
        "payment",
        "hold"
      ],
      "styles": [
        "industrial",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#EEEDE7",
        "#FAFAF6",
        "#151613",
        "#C42A1C",
        "#1E7A4A"
      ],
      "fonts": [
        "Commissioner",
        "Fragment Mono"
      ],
      "url": "https://designlounge.vercel.app/p/button-hold-to-confirm",
      "brief": "https://designlounge.vercel.app/p/button-hold-to-confirm.md",
      "demo": "https://designlounge.vercel.app/demo/button-hold-to-confirm.html",
      "source": "wickret"
    },
    {
      "id": "streak-hold-confetti",
      "n": "271",
      "title": "Hold to log, streak and confetti",
      "summary": "A reading-streak screen: press and hold to log today, the streak digits roll from 11 to 12, today's dot fills, and one short, restrained confetti burst fires.",
      "platform": "mobile-app",
      "type": "component",
      "category": "feedback",
      "tags": [
        "streak",
        "reward",
        "long-press",
        "confetti",
        "success"
      ],
      "styles": [
        "dark",
        "organic",
        "playful"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#10261F",
        "#173229",
        "#F6EFDF",
        "#F2C14E",
        "#8FB59A"
      ],
      "fonts": [
        "Young Serif",
        "Space Grotesk"
      ],
      "url": "https://designlounge.vercel.app/p/streak-hold-confetti",
      "brief": "https://designlounge.vercel.app/p/streak-hold-confetti.md",
      "demo": "https://designlounge.vercel.app/demo/streak-hold-confetti.html",
      "source": "60fps"
    },
    {
      "id": "widget-voice-assistant",
      "n": "272",
      "title": "Hold-to-talk voice orb",
      "summary": "A voice assistant widget: hold a soft teal orb to listen, a ring of 56 bars reacts to fake audio, and the transcript and reply arrive word by word.",
      "platform": "web",
      "type": "component",
      "category": "widgets",
      "tags": [
        "widget",
        "voice",
        "assistant",
        "waveform",
        "transcript"
      ],
      "styles": [
        "soft",
        "minimal"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#E4E9E4",
        "#F6F7F3",
        "#13201D",
        "#2E8C7C",
        "#F0764A"
      ],
      "fonts": [
        "Sora",
        "Newsreader"
      ],
      "url": "https://designlounge.vercel.app/p/widget-voice-assistant",
      "brief": "https://designlounge.vercel.app/p/widget-voice-assistant.md",
      "demo": "https://designlounge.vercel.app/demo/widget-voice-assistant.html",
      "source": "moremedia"
    },
    {
      "id": "card-holo-foil",
      "n": "273",
      "title": "Holographic foil pass",
      "summary": "A conference pass that tilts up to 12° toward the pointer or arrow keys, with a narrow three-stop foil band and a glare spot driven by CSS variables.",
      "platform": "web",
      "type": "component",
      "category": "cards",
      "tags": [
        "cards",
        "tilt",
        "foil",
        "pass",
        "membership"
      ],
      "styles": [
        "y2k",
        "cyber",
        "dark"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#0A0C12",
        "#11141D",
        "#E9ECF2",
        "#BFE3EA",
        "#F2C4D6"
      ],
      "fonts": [
        "Archivo",
        "JetBrains Mono"
      ],
      "url": "https://designlounge.vercel.app/p/card-holo-foil",
      "brief": "https://designlounge.vercel.app/p/card-holo-foil.md",
      "demo": "https://designlounge.vercel.app/demo/card-holo-foil.html",
      "source": "flist"
    },
    {
      "id": "app-icon-home-screen-set",
      "n": "274",
      "title": "Home screen icon set",
      "summary": "Twelve original SVG app icons in one consistent style on a phone home screen with dock and widget, switching between light, dark and tinted appearances.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "mockups",
      "tags": [
        "app-icons",
        "home-screen",
        "ios",
        "dark-mode",
        "tinted"
      ],
      "styles": [
        "glass",
        "soft",
        "organic"
      ],
      "motion": "subtle",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#E8B26A",
        "#1E2A2B",
        "#3E7C74",
        "#F6DCAE",
        "#1C1C1F"
      ],
      "fonts": [
        "Albert Sans",
        "Fraunces"
      ],
      "url": "https://designlounge.vercel.app/p/app-icon-home-screen-set",
      "brief": "https://designlounge.vercel.app/p/app-icon-home-screen-set.md",
      "demo": "https://designlounge.vercel.app/demo/app-icon-home-screen-set.html",
      "source": "icm"
    },
    {
      "id": "hud-boot-gate",
      "n": "275",
      "title": "HUD boot gate",
      "summary": "A portfolio intro in three acts: a quiet title card with an Enter control, a ring loader with a boot log, then a CRT-open framed hero whose headline decodes in.",
      "platform": "web",
      "type": "animation",
      "category": "loaders",
      "tags": [
        "intro",
        "boot",
        "hud",
        "gate",
        "portfolio"
      ],
      "styles": [
        "cyber",
        "terminal",
        "dark"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#07100D",
        "#0D1814",
        "#DDEDE4",
        "#5CF2B0",
        "#F2C35C"
      ],
      "fonts": [
        "Oxanium",
        "Martian Mono"
      ],
      "url": "https://designlounge.vercel.app/p/hud-boot-gate",
      "brief": "https://designlounge.vercel.app/p/hud-boot-gate.md",
      "demo": "https://designlounge.vercel.app/demo/hud-boot-gate.html",
      "source": "sibal"
    },
    {
      "id": "notif-incoming-call",
      "n": "276",
      "title": "Incoming call banner",
      "summary": "A ringing call banner over an agenda app that expands into a full-screen call: slide to answer, decline with a quick reply, live timer, minimise to a pill.",
      "platform": "mobile-app",
      "type": "component",
      "category": "feedback",
      "tags": [
        "notification",
        "call",
        "banner",
        "swipe",
        "phone",
        "voip"
      ],
      "styles": [
        "dark",
        "glass",
        "editorial"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F2EDE4",
        "#120F0D",
        "#D9734E",
        "#3BD07F",
        "#F0524A"
      ],
      "fonts": [
        "Gloock",
        "Rethink Sans"
      ],
      "url": "https://designlounge.vercel.app/p/notif-incoming-call",
      "brief": "https://designlounge.vercel.app/p/notif-incoming-call.md",
      "demo": "https://designlounge.vercel.app/demo/notif-incoming-call.html",
      "source": "60fps"
    },
    {
      "id": "widget-stopwatch-laps",
      "n": "277",
      "title": "Industrial stopwatch with lap log",
      "summary": "A bolted instrument-panel stopwatch: amber phosphor centisecond readout, lap log with best and worst flagged, keycaps for Space, L and R.",
      "platform": "web",
      "type": "component",
      "category": "widgets",
      "tags": [
        "stopwatch",
        "timer",
        "laps",
        "keyboard",
        "sports"
      ],
      "styles": [
        "industrial",
        "terminal",
        "dark"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#2A2B2D",
        "#1B1C1E",
        "#0D0E0F",
        "#FFB23F",
        "#8EE07A"
      ],
      "fonts": [
        "VT323",
        "Red Hat Mono"
      ],
      "url": "https://designlounge.vercel.app/p/widget-stopwatch-laps",
      "brief": "https://designlounge.vercel.app/p/widget-stopwatch-laps.md",
      "demo": "https://designlounge.vercel.app/demo/widget-stopwatch-laps.html",
      "source": "moremedia"
    },
    {
      "id": "background-ink-wash",
      "n": "278",
      "title": "Ink wash background",
      "summary": "Sumi ink blooms that spread and dry on rice paper where you click, drawn on canvas with layered translucent washes, tide-line edges and pigment grain.",
      "platform": "web",
      "type": "pattern",
      "category": "backgrounds",
      "tags": [
        "background",
        "canvas",
        "ink",
        "watercolour",
        "paper"
      ],
      "styles": [
        "organic",
        "paper",
        "editorial"
      ],
      "motion": "subtle",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#EEE7D8",
        "#1B1A17",
        "#2E3F5C",
        "#B5332A",
        "#F6F1E6"
      ],
      "fonts": [
        "Shippori Mincho",
        "Zen Kaku Gothic New"
      ],
      "url": "https://designlounge.vercel.app/p/background-ink-wash",
      "brief": "https://designlounge.vercel.app/p/background-ink-wash.md",
      "demo": "https://designlounge.vercel.app/demo/background-ink-wash.html",
      "source": "susan"
    },
    {
      "id": "inline-alert",
      "n": "279",
      "title": "Inline alert",
      "summary": "One warning on the dispatch page: Gate 2 closes at 18:00. Dismiss removes it. Three swatches below are the other tones, not three more alerts.",
      "platform": "web",
      "type": "pattern",
      "category": "feedback",
      "tags": [
        "alert",
        "warning",
        "dismiss",
        "banner"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#F3E6D0",
        "#7D470E",
        "#D6E8DC",
        "#F8E4E2"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/inline-alert",
      "brief": "https://designlounge.vercel.app/p/inline-alert.md",
      "demo": "https://designlounge.vercel.app/demo/inline-alert.html",
      "source": "60fps"
    },
    {
      "id": "inline-edit",
      "n": "280",
      "title": "Inline edit",
      "summary": "The load name is text until you click it. Enter saves. Escape puts the old name back.",
      "platform": "web",
      "type": "component",
      "category": "inputs",
      "tags": [
        "edit",
        "inline",
        "name"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#1F4D3A"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/inline-edit",
      "brief": "https://designlounge.vercel.app/p/inline-edit.md",
      "demo": "https://designlounge.vercel.app/demo/inline-edit.html",
      "source": "icm"
    },
    {
      "id": "phone-workout-timer",
      "n": "281",
      "title": "Interval workout timer",
      "summary": "A black sport timer that runs live: a draining SVG ring, volt for work and cyan for rest, a flash at each switch, a segmented timeline, and a finish screen.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "utility",
      "tags": [
        "workout",
        "timer",
        "fitness",
        "countdown",
        "intervals"
      ],
      "styles": [
        "kinetic",
        "dark"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#050505",
        "#121310",
        "#D4FF2E",
        "#2EE6FF",
        "#F3F5EC"
      ],
      "fonts": [
        "Big Shoulders Display",
        "Archivo"
      ],
      "url": "https://designlounge.vercel.app/p/phone-workout-timer",
      "brief": "https://designlounge.vercel.app/p/phone-workout-timer.md",
      "demo": "https://designlounge.vercel.app/demo/phone-workout-timer.html",
      "source": "tailwind"
    },
    {
      "id": "features-isometric-fig-triptych",
      "n": "282",
      "title": "Isometric figure triptych",
      "summary": "Three hairline isometric drawings captioned FIG 0.1–0.3 under a two-tone statement; hovering a column explodes its drawing, lights one amber part and dims the others.",
      "platform": "web",
      "type": "section",
      "category": "features",
      "tags": [
        "features",
        "isometric",
        "svg",
        "illustration",
        "dark"
      ],
      "styles": [
        "dark",
        "minimal",
        "industrial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#0E100D",
        "#ECE8DC",
        "#A19D90",
        "#4B4C43",
        "#F2B33D"
      ],
      "fonts": [
        "Familjen Grotesk",
        "Martian Mono"
      ],
      "url": "https://designlounge.vercel.app/p/features-isometric-fig-triptych",
      "brief": "https://designlounge.vercel.app/p/features-isometric-fig-triptych.md",
      "demo": "https://designlounge.vercel.app/demo/features-isometric-fig-triptych.html",
      "source": "linear"
    },
    {
      "id": "blog-issue-index",
      "n": "283",
      "title": "Issue index",
      "summary": "Four notes in a 720px column, newest first. City, Desk, and Kitchen filter the list. The pressed topic sits on a pale blue.",
      "platform": "web",
      "type": "screen",
      "category": "blog",
      "tags": [
        "blog",
        "index",
        "essays",
        "filter"
      ],
      "styles": [
        "editorial",
        "paper"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F7F4EE",
        "#FFFFFF",
        "#1C2430",
        "#E4EEF5"
      ],
      "fonts": [
        "Newsreader",
        "Public Sans"
      ],
      "url": "https://designlounge.vercel.app/p/blog-issue-index",
      "brief": "https://designlounge.vercel.app/p/blog-issue-index.md",
      "demo": "https://designlounge.vercel.app/demo/blog-issue-index.html",
      "source": "mendo"
    },
    {
      "id": "job-board-search",
      "n": "284",
      "title": "Job board search",
      "summary": "A three-column job board. Search, live filters with a dual salary slider, a result list with save, and a detail pane with apply and similar jobs.",
      "platform": "web",
      "type": "screen",
      "category": "utility",
      "tags": [
        "jobs",
        "search",
        "filters",
        "list",
        "detail"
      ],
      "styles": [
        "swiss",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#FFFFFF",
        "#0B0B0B",
        "#F5F5F4",
        "#E6E6E6",
        "#0B7A3E"
      ],
      "fonts": [
        "Inter Tight",
        "JetBrains Mono"
      ],
      "url": "https://designlounge.vercel.app/p/job-board-search",
      "brief": "https://designlounge.vercel.app/p/job-board-search.md",
      "demo": "https://designlounge.vercel.app/demo/job-board-search.html",
      "source": "tailwind"
    },
    {
      "id": "card-journal-page",
      "n": "285",
      "title": "Journal page",
      "summary": "A ruled notepad page on a kraft desk: margin line, punched holes, a date header, handwriting that stays on the rules, mood stickers, ink colours and autosave.",
      "platform": "web",
      "type": "component",
      "category": "utility",
      "tags": [
        "journal",
        "notes",
        "textarea",
        "stickers",
        "autosave"
      ],
      "styles": [
        "paper",
        "playful"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#B89F7B",
        "#FBF6E9",
        "#233067",
        "#E2908C",
        "#B9CDE0"
      ],
      "fonts": [
        "Caveat",
        "Courier Prime"
      ],
      "url": "https://designlounge.vercel.app/p/card-journal-page",
      "brief": "https://designlounge.vercel.app/p/card-journal-page.md",
      "demo": "https://designlounge.vercel.app/demo/card-journal-page.html",
      "source": "tailwind"
    },
    {
      "id": "dropdown-kebab-actions",
      "n": "286",
      "title": "Kebab row actions menu",
      "summary": "A ⋯ button on each invoice row opens an actions menu with icons, shortcuts, a divider and a delete that asks to confirm inside the same popover.",
      "platform": "web",
      "type": "component",
      "category": "overlays",
      "tags": [
        "menu",
        "dropdown",
        "kebab",
        "table",
        "actions",
        "confirm"
      ],
      "styles": [
        "minimal",
        "swiss"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F2F0EB",
        "#FFFFFF",
        "#16181D",
        "#0E6E63",
        "#C0341B"
      ],
      "fonts": [
        "Schibsted Grotesk",
        "Spline Sans Mono"
      ],
      "url": "https://designlounge.vercel.app/p/dropdown-kebab-actions",
      "brief": "https://designlounge.vercel.app/p/dropdown-kebab-actions.md",
      "demo": "https://designlounge.vercel.app/demo/dropdown-kebab-actions.html",
      "source": "dontboardme"
    },
    {
      "id": "object-3d-turntable",
      "n": "287",
      "title": "Kraft box 3D turntable",
      "summary": "A CSS 3D coffee box with six printed kraft faces: drag to spin with inertia, snap to Front, Side or Back, arrow keys turn 90°, and a contact shadow follows tilt.",
      "platform": "web",
      "type": "component",
      "category": "ecommerce",
      "tags": [
        "3d",
        "product",
        "turntable",
        "packaging",
        "drag"
      ],
      "styles": [
        "paper",
        "industrial"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#EDE4D3",
        "#C69C6D",
        "#1B1611",
        "#E4571B",
        "#A87D50"
      ],
      "fonts": [
        "Barlow Condensed",
        "DM Mono"
      ],
      "url": "https://designlounge.vercel.app/p/object-3d-turntable",
      "brief": "https://designlounge.vercel.app/p/object-3d-turntable.md",
      "demo": "https://designlounge.vercel.app/demo/object-3d-turntable.html",
      "source": "abel"
    },
    {
      "id": "mockup-laptop-browser",
      "n": "288",
      "title": "Laptop browser mockup",
      "summary": "A CSS laptop whose lid swings open on load to reveal a desktop and a tabbed browser window; tabs switch real pages, finish toggles silver or space.",
      "platform": "web",
      "type": "component",
      "category": "mockups",
      "tags": [
        "mockup",
        "laptop",
        "browser",
        "device",
        "showcase"
      ],
      "styles": [
        "industrial",
        "minimal",
        "swiss"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#CFD5D0",
        "#B4BCB5",
        "#131714",
        "#2346D8",
        "#F3F1EC"
      ],
      "fonts": [
        "Bricolage Grotesque",
        "JetBrains Mono"
      ],
      "url": "https://designlounge.vercel.app/p/mockup-laptop-browser",
      "brief": "https://designlounge.vercel.app/p/mockup-laptop-browser.md",
      "demo": "https://designlounge.vercel.app/demo/mockup-laptop-browser.html",
      "source": "icm"
    },
    {
      "id": "law-firm-home",
      "n": "289",
      "title": "Law firm home, editorial",
      "summary": "Thorne & Aldridge: an ivory page with an 88px Bodoni sentence, numbered practice areas that reveal on hover, case results, partners and a confidential form.",
      "platform": "web",
      "type": "screen",
      "category": "landing",
      "tags": [
        "landing",
        "law",
        "professional",
        "editorial",
        "form"
      ],
      "styles": [
        "luxe",
        "editorial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F1E7",
        "#14213A",
        "#6E1F24",
        "#D9D0BF",
        "#FBF8F1"
      ],
      "fonts": [
        "Bodoni Moda",
        "Schibsted Grotesk"
      ],
      "url": "https://designlounge.vercel.app/p/law-firm-home",
      "brief": "https://designlounge.vercel.app/p/law-firm-home.md",
      "demo": "https://designlounge.vercel.app/demo/law-firm-home.html",
      "source": "gmx"
    },
    {
      "id": "hero-layered-letter-swap",
      "n": "290",
      "title": "Layered letter word-swap hero",
      "summary": "A centred fintech hero whose second headline word swaps letter by letter: each glyph splits into coral and butter copies, then the new word gathers back.",
      "platform": "web",
      "type": "section",
      "category": "hero",
      "tags": [
        "hero",
        "headline",
        "word-swap",
        "parallax",
        "fintech"
      ],
      "styles": [
        "playful",
        "kinetic"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#FBF7EF",
        "#0F3D2E",
        "#FF6B4A",
        "#FFC94D",
        "#BFE6D3"
      ],
      "fonts": [
        "Unbounded",
        "Figtree"
      ],
      "url": "https://designlounge.vercel.app/p/hero-layered-letter-swap",
      "brief": "https://designlounge.vercel.app/p/hero-layered-letter-swap.md",
      "demo": "https://designlounge.vercel.app/demo/hero-layered-letter-swap.html",
      "source": "wickret"
    },
    {
      "id": "parallax-layered-hero",
      "n": "291",
      "title": "Layered parallax landscape hero",
      "summary": "A dusk landscape hero built from six layers that scroll at 0.1x to 1.0x, with a title that lifts and fades and a 12px pointer drift.",
      "platform": "web",
      "type": "animation",
      "category": "scroll",
      "tags": [
        "parallax",
        "hero",
        "landscape",
        "outdoor",
        "scroll"
      ],
      "styles": [
        "organic",
        "editorial"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#222A40",
        "#2F3A5A",
        "#6E6F8E",
        "#A7899A",
        "#E9A97A",
        "#F6E7D4"
      ],
      "fonts": [
        "Fraunces",
        "Instrument Sans"
      ],
      "url": "https://designlounge.vercel.app/p/parallax-layered-hero",
      "brief": "https://designlounge.vercel.app/p/parallax-layered-hero.md",
      "demo": "https://designlounge.vercel.app/demo/parallax-layered-hero.html",
      "source": "susan"
    },
    {
      "id": "lens-bento",
      "n": "292",
      "title": "Lens bento",
      "summary": "A board of yard chips. A 180px lens follows the pointer and chips under it scale to 1.35.",
      "platform": "web",
      "type": "animation",
      "category": "cards",
      "tags": [
        "lens",
        "magnify",
        "chips"
      ],
      "styles": [
        "minimal",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#1F4D3A"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/lens-bento",
      "brief": "https://designlounge.vercel.app/p/lens-bento.md",
      "demo": "https://designlounge.vercel.app/demo/lens-bento.html",
      "source": "bermawy"
    },
    {
      "id": "scroll-lens-card-ticker",
      "n": "293",
      "title": "Lens card scroll ticker",
      "summary": "Scroll moves a row of huge benefit lines sideways through a fixed centre card. Inside the card the text turns ink and the card recolours per benefit.",
      "platform": "web",
      "type": "section",
      "category": "scroll",
      "tags": [
        "scroll",
        "ticker",
        "features",
        "sticky",
        "benefits"
      ],
      "styles": [
        "dark",
        "playful",
        "kinetic"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#161514",
        "#EDE6D8",
        "#B9CBA4",
        "#E79B72",
        "#E8C35A"
      ],
      "fonts": [
        "Bricolage Grotesque",
        "Instrument Serif"
      ],
      "url": "https://designlounge.vercel.app/p/scroll-lens-card-ticker",
      "brief": "https://designlounge.vercel.app/p/scroll-lens-card-ticker.md",
      "demo": "https://designlounge.vercel.app/demo/scroll-lens-card-ticker.html",
      "source": "haunted"
    },
    {
      "id": "letter-sleeve",
      "n": "294",
      "title": "Letter sleeve",
      "summary": "A letter starts out of a charcoal sleeve. Tuck slides it in. Pull brings Gate 4 back out.",
      "platform": "web",
      "type": "animation",
      "category": "cards",
      "tags": [
        "letter",
        "sleeve",
        "paper"
      ],
      "styles": [
        "editorial",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F4F1EA",
        "#FFFDF8",
        "#1C1B19",
        "#1A1814"
      ],
      "fonts": [
        "Fraunces",
        "Public Sans"
      ],
      "url": "https://designlounge.vercel.app/p/letter-sleeve",
      "brief": "https://designlounge.vercel.app/p/letter-sleeve.md",
      "demo": "https://designlounge.vercel.app/demo/letter-sleeve.html",
      "source": "bermawy"
    },
    {
      "id": "background-linen-weave",
      "n": "295",
      "title": "Linen weave background",
      "summary": "A plain-weave linen background in SVG with swappable warp and weft threads, a sheen that follows the pointer, and a folded-paper variant with live crease light.",
      "platform": "web",
      "type": "pattern",
      "category": "backgrounds",
      "tags": [
        "background",
        "textile",
        "svg",
        "pattern",
        "paper"
      ],
      "styles": [
        "organic",
        "paper",
        "luxe"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#A4532E",
        "#D9CBB0",
        "#FBF8F2",
        "#2A221B",
        "#8F9E83"
      ],
      "fonts": [
        "Gelasio",
        "Atkinson Hyperlegible"
      ],
      "url": "https://designlounge.vercel.app/p/background-linen-weave",
      "brief": "https://designlounge.vercel.app/p/background-linen-weave.md",
      "demo": "https://designlounge.vercel.app/demo/background-linen-weave.html",
      "source": "susan"
    },
    {
      "id": "link-orbit",
      "n": "296",
      "title": "Link orbit",
      "summary": "Eight yard connections on a ring around a Yard hub. One starts pressed. Choosing another rewrites the line.",
      "platform": "web",
      "type": "section",
      "category": "features",
      "tags": [
        "integrations",
        "orbit",
        "connections"
      ],
      "styles": [
        "editorial",
        "paper"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F4F1EA",
        "#FFFDF8",
        "#1A1814",
        "#1F4D3A",
        "#E7F2EC"
      ],
      "fonts": [
        "Fraunces",
        "Public Sans"
      ],
      "url": "https://designlounge.vercel.app/p/link-orbit",
      "brief": "https://designlounge.vercel.app/p/link-orbit.md",
      "demo": "https://designlounge.vercel.app/demo/link-orbit.html",
      "source": "moremedia"
    },
    {
      "id": "features-live-checkout-bento",
      "n": "297",
      "title": "Live checkout bento",
      "summary": "A product bento where every cell is working UI: a currency switcher, a freezable issued card, a retry timeline, and a checkout that posts its payment into a payouts ledger.",
      "platform": "web",
      "type": "section",
      "category": "features",
      "tags": [
        "features",
        "bento",
        "checkout",
        "fintech",
        "ledger"
      ],
      "styles": [
        "minimal",
        "swiss"
      ],
      "motion": "subtle",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#EEF1F5",
        "#FFFFFF",
        "#14213D",
        "#5B6782",
        "#E4572E"
      ],
      "fonts": [
        "Geist",
        "Geist Mono"
      ],
      "url": "https://designlounge.vercel.app/p/features-live-checkout-bento",
      "brief": "https://designlounge.vercel.app/p/features-live-checkout-bento.md",
      "demo": "https://designlounge.vercel.app/demo/features-live-checkout-bento.html",
      "source": "moremedia"
    },
    {
      "id": "widget-heart-rate",
      "n": "298",
      "title": "Live heart-rate tile",
      "summary": "A dark watch-face tile with a sweeping ECG trace, a BPM that ticks every third beat, and a tap that cycles live, resting and zone views.",
      "platform": "web",
      "type": "component",
      "category": "widgets",
      "tags": [
        "widget",
        "health",
        "heart-rate",
        "ecg",
        "watch"
      ],
      "styles": [
        "dark",
        "industrial",
        "kinetic"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#0A0C0B",
        "#121513",
        "#EEF2EC",
        "#FF4632"
      ],
      "fonts": [
        "Teko",
        "Azeret Mono"
      ],
      "url": "https://designlounge.vercel.app/p/widget-heart-rate",
      "brief": "https://designlounge.vercel.app/p/widget-heart-rate.md",
      "demo": "https://designlounge.vercel.app/demo/widget-heart-rate.html",
      "source": "icm"
    },
    {
      "id": "card-terminal-log",
      "n": "299",
      "title": "Live terminal log card",
      "summary": "A streaming service log in a card: coloured levels, multi-select level filters, search highlight, hover-to-hold autoscroll, and copy any line.",
      "platform": "web",
      "type": "component",
      "category": "data",
      "tags": [
        "logs",
        "terminal",
        "streaming",
        "filter",
        "search",
        "devtools"
      ],
      "styles": [
        "terminal",
        "dark",
        "industrial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#161513",
        "#1E1D1A",
        "#EBE6DA",
        "#E6B350",
        "#7FBCC8",
        "#F0705A"
      ],
      "fonts": [
        "Martian Mono",
        "Familjen Grotesk"
      ],
      "url": "https://designlounge.vercel.app/p/card-terminal-log",
      "brief": "https://designlounge.vercel.app/p/card-terminal-log.md",
      "demo": "https://designlounge.vercel.app/demo/card-terminal-log.html",
      "source": "flist"
    },
    {
      "id": "notif-delivery-live",
      "n": "300",
      "title": "Lock screen delivery live update",
      "summary": "A lock-screen live activity for a delivery: ETA countdown, four-stage track with a moving scooter, an expandable map, courier actions and an arrival hand-off.",
      "platform": "mobile-app",
      "type": "component",
      "category": "feedback",
      "tags": [
        "notification",
        "live-activity",
        "delivery",
        "lock-screen",
        "map",
        "eta"
      ],
      "styles": [
        "organic",
        "riso",
        "soft"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#0F3B3A",
        "#F5EDDF",
        "#1A1714",
        "#FF5B2E",
        "#F0A63A"
      ],
      "fonts": [
        "Darker Grotesque",
        "Red Hat Mono"
      ],
      "url": "https://designlounge.vercel.app/p/notif-delivery-live",
      "brief": "https://designlounge.vercel.app/p/notif-delivery-live.md",
      "demo": "https://designlounge.vercel.app/demo/notif-delivery-live.html",
      "source": "60fps"
    },
    {
      "id": "logos-grid-case-hover",
      "n": "301",
      "title": "Logos grid case hover",
      "summary": "A 4×2 grid of eight fictional monochrome wordmarks on bone with brass hairlines. Hover, focus or tap a cell and it slides up to a one-line result.",
      "platform": "web",
      "type": "section",
      "category": "logos",
      "tags": [
        "logos",
        "clients",
        "grid",
        "hover"
      ],
      "styles": [
        "luxe",
        "minimal",
        "editorial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#EFE9DF",
        "#17150F",
        "#A8874A",
        "#755A2A",
        "#E7DFD2"
      ],
      "fonts": [
        "Cormorant",
        "Jost"
      ],
      "url": "https://designlounge.vercel.app/p/logos-grid-case-hover",
      "brief": "https://designlounge.vercel.app/p/logos-grid-case-hover.md",
      "demo": "https://designlounge.vercel.app/demo/logos-grid-case-hover.html",
      "source": "moremedia"
    },
    {
      "id": "m3-navigation-bar",
      "n": "302",
      "title": "M3 navigation bar",
      "summary": "An Android Material 3 Expressive bottom bar: four destinations, a 64x32 pill that stretches in, filled active icons, a dot and a 12 badge, and a FAB above.",
      "platform": "mobile-app",
      "type": "component",
      "category": "navigation",
      "tags": [
        "material",
        "android",
        "navigation",
        "tabs",
        "badge",
        "fab"
      ],
      "styles": [
        "material",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#DDF5EF",
        "#E9EFEC",
        "#006A63",
        "#CCE8E3",
        "#BA1A1A"
      ],
      "fonts": [
        "Roboto Flex"
      ],
      "url": "https://designlounge.vercel.app/p/m3-navigation-bar",
      "brief": "https://designlounge.vercel.app/p/m3-navigation-bar.md",
      "demo": "https://designlounge.vercel.app/demo/m3-navigation-bar.html",
      "source": "60fps"
    },
    {
      "id": "hero-machined-part-breakout",
      "n": "303",
      "title": "Machined part breakout hero",
      "summary": "An industrial hero: a dark rounded card, a light and black two-line caps headline, and a steel part that breaks out of the card with tolerance callouts.",
      "platform": "web",
      "type": "section",
      "category": "hero",
      "tags": [
        "hero",
        "industrial",
        "manufacturing",
        "callouts",
        "isometric"
      ],
      "styles": [
        "industrial",
        "dark",
        "swiss"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#E9E6DF",
        "#1D1E20",
        "#F1EEE7",
        "#F2A900",
        "#A9AAA6"
      ],
      "fonts": [
        "Archivo",
        "Barlow"
      ],
      "url": "https://designlounge.vercel.app/p/hero-machined-part-breakout",
      "brief": "https://designlounge.vercel.app/p/hero-machined-part-breakout.md",
      "demo": "https://designlounge.vercel.app/demo/hero-machined-part-breakout.html",
      "source": "lamalama"
    },
    {
      "id": "card-magazine-cover",
      "n": "304",
      "title": "Magazine cover card",
      "summary": "A 3:4 magazine cover card with masthead, cover lines, an SVG illustration and barcode. Hover lifts it and curls the corner; three issues swap from a stack.",
      "platform": "web",
      "type": "component",
      "category": "cards",
      "tags": [
        "magazine",
        "cover",
        "card",
        "editorial",
        "print"
      ],
      "styles": [
        "editorial",
        "riso",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#D8D1C3",
        "#1C1A17",
        "#E84F2F",
        "#1E3BB3",
        "#E8A722"
      ],
      "fonts": [
        "Anton",
        "Rethink Sans"
      ],
      "url": "https://designlounge.vercel.app/p/card-magazine-cover",
      "brief": "https://designlounge.vercel.app/p/card-magazine-cover.md",
      "demo": "https://designlounge.vercel.app/demo/card-magazine-cover.html",
      "source": "bermawy"
    },
    {
      "id": "dock-magnify-desktop",
      "n": "305",
      "title": "Magnifying desktop dock",
      "summary": "A desktop-OS dock whose icons swell by pointer distance on a cosine curve, with tooltips, a two-hop launch bounce, running dots and arrow-key navigation.",
      "platform": "web",
      "type": "component",
      "category": "navigation",
      "tags": [
        "dock",
        "desktop",
        "launcher",
        "magnification",
        "toolbar"
      ],
      "styles": [
        "glass",
        "soft"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#EFA77A",
        "#4A1F1F",
        "#FFF1DF",
        "#C4643F",
        "#E5483A"
      ],
      "fonts": [
        "Familjen Grotesk",
        "Martian Mono"
      ],
      "url": "https://designlounge.vercel.app/p/dock-magnify-desktop",
      "brief": "https://designlounge.vercel.app/p/dock-magnify-desktop.md",
      "demo": "https://designlounge.vercel.app/demo/dock-magnify-desktop.html",
      "source": "60fps"
    },
    {
      "id": "card-folder-tabs",
      "n": "306",
      "title": "Manila folder with tabs",
      "summary": "A manila project folder with four cut tabs; each tab drops the current sheet into the pocket and slides the next one up. A stacked drawer variant sits beside it.",
      "platform": "web",
      "type": "component",
      "category": "cards",
      "tags": [
        "cards",
        "folder",
        "tabs",
        "documents",
        "files"
      ],
      "styles": [
        "paper",
        "editorial",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#D6DCDF",
        "#E4C78E",
        "#FBF8F1",
        "#1D2A33",
        "#2449A8"
      ],
      "fonts": [
        "Zilla Slab",
        "Overpass Mono"
      ],
      "url": "https://designlounge.vercel.app/p/card-folder-tabs",
      "brief": "https://designlounge.vercel.app/p/card-folder-tabs.md",
      "demo": "https://designlounge.vercel.app/demo/card-folder-tabs.html",
      "source": "bermawy"
    },
    {
      "id": "phone-map-listings",
      "n": "307",
      "title": "Map with price pins and listing sheet",
      "summary": "A stays map drawn in SVG with terracotta price pins, a three-detent sheet (count, card carousel, list), pin-to-card sync, Search this area after a pan, and locate-me.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "utility",
      "tags": [
        "map",
        "listings",
        "bottom-sheet",
        "carousel",
        "travel"
      ],
      "styles": [
        "editorial",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#E8DCC2",
        "#FBF7EE",
        "#1E1A16",
        "#B84A26",
        "#AEC4C1"
      ],
      "fonts": [
        "Newsreader",
        "Instrument Sans"
      ],
      "url": "https://designlounge.vercel.app/p/phone-map-listings",
      "brief": "https://designlounge.vercel.app/p/phone-map-listings.md",
      "demo": "https://designlounge.vercel.app/demo/phone-map-listings.html",
      "source": "icm"
    },
    {
      "id": "hero-search-marketplace",
      "n": "308",
      "title": "Marketplace search hero",
      "summary": "An editorial travel hero with a Where / When / Guests search bar, a two-month date-range popover, a guests stepper, category chips and four drawn destination tiles.",
      "platform": "web",
      "type": "section",
      "category": "hero",
      "tags": [
        "hero",
        "search",
        "travel",
        "marketplace",
        "calendar"
      ],
      "styles": [
        "editorial",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#EFE6D6",
        "#F8F2E7",
        "#1F1A15",
        "#B4502C",
        "#ECD3C3"
      ],
      "fonts": [
        "Instrument Serif",
        "Schibsted Grotesk"
      ],
      "url": "https://designlounge.vercel.app/p/hero-search-marketplace",
      "brief": "https://designlounge.vercel.app/p/hero-search-marketplace.md",
      "demo": "https://designlounge.vercel.app/demo/hero-search-marketplace.html",
      "source": "susan"
    },
    {
      "id": "cta-material-rod-rack",
      "n": "309",
      "title": "Material rod rack CTA",
      "summary": "Five CSS-drawn bar stock rods stand behind a dark CTA card. Pick one and it rises; the card swaps to that material's specs and quote button.",
      "platform": "web",
      "type": "section",
      "category": "cta",
      "tags": [
        "cta",
        "industrial",
        "materials",
        "picker",
        "radiogroup"
      ],
      "styles": [
        "industrial",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#E3E7E8",
        "#0F1A24",
        "#E8EEF0",
        "#FF5A36",
        "#93A1AB"
      ],
      "fonts": [
        "Saira Condensed",
        "Red Hat Mono"
      ],
      "url": "https://designlounge.vercel.app/p/cta-material-rod-rack",
      "brief": "https://designlounge.vercel.app/p/cta-material-rod-rack.md",
      "demo": "https://designlounge.vercel.app/demo/cta-material-rod-rack.html",
      "source": "mwdt"
    },
    {
      "id": "table-users-select",
      "n": "310",
      "title": "Members table with range select",
      "summary": "An admin members table: shift-click range selection, inline role menus that save on change, an invite row, and numbered pagination.",
      "platform": "web",
      "type": "component",
      "category": "data",
      "tags": [
        "table",
        "admin",
        "selection",
        "pagination",
        "invite"
      ],
      "styles": [
        "minimal",
        "swiss"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#EEF0F3",
        "#FDFDFE",
        "#0D0F14",
        "#1747E5",
        "#EDF1FF"
      ],
      "fonts": [
        "Geist",
        "Geist Mono"
      ],
      "url": "https://designlounge.vercel.app/p/table-users-select",
      "brief": "https://designlounge.vercel.app/p/table-users-select.md",
      "demo": "https://designlounge.vercel.app/demo/table-users-select.html",
      "source": "60fps"
    },
    {
      "id": "social-microblog-post",
      "n": "311",
      "title": "Microblog post card",
      "summary": "A short-post card with verified handle, highlighted links and hashtags, a map image, rolling digit counters, and a seven-dot like burst.",
      "platform": "web",
      "type": "component",
      "category": "social",
      "tags": [
        "social",
        "post",
        "feed",
        "like",
        "counter"
      ],
      "styles": [
        "minimal",
        "swiss"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#EEF0EC",
        "#FCFDFB",
        "#121614",
        "#0B6F6A",
        "#D92A5B"
      ],
      "fonts": [
        "Hanken Grotesk",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/social-microblog-post",
      "brief": "https://designlounge.vercel.app/p/social-microblog-post.md",
      "demo": "https://designlounge.vercel.app/demo/social-microblog-post.html",
      "source": "icm"
    },
    {
      "id": "social-microblog-profile",
      "n": "312",
      "title": "Microblog profile header",
      "summary": "A dark short-post profile with a contour-map banner, Follow that flips to Unfollow on hover, a notify bell gated by following, and Posts/Replies/Media tabs with a sliding lime bar.",
      "platform": "web",
      "type": "component",
      "category": "social",
      "tags": [
        "social",
        "profile",
        "tabs",
        "follow",
        "dark"
      ],
      "styles": [
        "dark",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#0E0F0C",
        "#141611",
        "#EEEDE4",
        "#C8F23A",
        "#FF6B5A"
      ],
      "fonts": [
        "Bricolage Grotesque",
        "DM Mono"
      ],
      "url": "https://designlounge.vercel.app/p/social-microblog-profile",
      "brief": "https://designlounge.vercel.app/p/social-microblog-profile.md",
      "demo": "https://designlounge.vercel.app/demo/social-microblog-profile.html",
      "source": "mindmarket"
    },
    {
      "id": "minute-wheel",
      "n": "313",
      "title": "Minute wheel",
      "summary": "A wheel of minutes from 1 to 30. It starts at 10. Drag or arrow keys change the hour-less count.",
      "platform": "web",
      "type": "component",
      "category": "pickers",
      "tags": [
        "wheel",
        "minutes",
        "picker"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#1F4D3A"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/minute-wheel",
      "brief": "https://designlounge.vercel.app/p/minute-wheel.md",
      "demo": "https://designlounge.vercel.app/demo/minute-wheel.html",
      "source": "tailwind"
    },
    {
      "id": "card-article-mix",
      "n": "314",
      "title": "Mixed article cards",
      "summary": "A magazine grid that mixes one lead card with a CSS cover, two numbered text cards, and three small thumbnail cards. Each whole card is one link.",
      "platform": "web",
      "type": "section",
      "category": "cards",
      "tags": [
        "cards",
        "blog",
        "articles",
        "magazine",
        "grid"
      ],
      "styles": [
        "editorial",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F2ECDF",
        "#16140F",
        "#1F44C4",
        "#E8E0CF",
        "#D3C9B4"
      ],
      "fonts": [
        "Instrument Serif",
        "Schibsted Grotesk"
      ],
      "url": "https://designlounge.vercel.app/p/card-article-mix",
      "brief": "https://designlounge.vercel.app/p/card-article-mix.md",
      "demo": "https://designlounge.vercel.app/demo/card-article-mix.html",
      "source": "bermawy"
    },
    {
      "id": "mobile-scroll-story",
      "n": "315",
      "title": "Mobile scroll story",
      "summary": "A six-chapter riso brand story for phones: full-height snapped chapters, a tappable segmented progress bar, big overprinted numbers and drawings that animate in.",
      "platform": "mobile-web",
      "type": "pattern",
      "category": "scroll",
      "tags": [
        "story",
        "scrollytelling",
        "progress",
        "chapters",
        "phone"
      ],
      "styles": [
        "riso",
        "editorial",
        "playful"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F3ECDC",
        "#2338A0",
        "#FF48B0",
        "#1B2350",
        "#D6D3D6"
      ],
      "fonts": [
        "Anton",
        "Source Serif 4"
      ],
      "url": "https://designlounge.vercel.app/p/mobile-scroll-story",
      "brief": "https://designlounge.vercel.app/p/mobile-scroll-story.md",
      "demo": "https://designlounge.vercel.app/demo/mobile-scroll-story.html",
      "source": "susan"
    },
    {
      "id": "mobile-web-bottom-nav",
      "n": "316",
      "title": "Mobile website bottom bar",
      "summary": "A five-item bottom bar for a phone website with a raised square Book action, a scroll-linked active state, and hide-on-scroll-down that returns on scroll up.",
      "platform": "mobile-web",
      "type": "component",
      "category": "navigation",
      "tags": [
        "navigation",
        "bottom-bar",
        "scroll",
        "website",
        "pwa"
      ],
      "styles": [
        "industrial",
        "brutalist"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#ECEBE7",
        "#F7F6F3",
        "#111111",
        "#FF5A00",
        "#4F4D48"
      ],
      "fonts": [
        "Barlow Condensed",
        "Barlow"
      ],
      "url": "https://designlounge.vercel.app/p/mobile-web-bottom-nav",
      "brief": "https://designlounge.vercel.app/p/mobile-web-bottom-nav.md",
      "demo": "https://designlounge.vercel.app/demo/mobile-web-bottom-nav.html",
      "source": "tailwind"
    },
    {
      "id": "mood-pill-morph-card",
      "n": "317",
      "title": "Mood pill that morphs into a card",
      "summary": "Five capsule pills for a mood check-in. Tap one and it springs open into a card with feeling chips, the others shrink aside, and the room light shifts to its hue.",
      "platform": "mobile-app",
      "type": "component",
      "category": "micro",
      "tags": [
        "morph",
        "picker",
        "mood",
        "spring",
        "check-in"
      ],
      "styles": [
        "soft",
        "organic",
        "playful"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F2EEE7",
        "#FBF8F3",
        "#1D1A27",
        "#F1CF8A",
        "#F2AA92"
      ],
      "fonts": [
        "Fraunces",
        "Figtree"
      ],
      "url": "https://designlounge.vercel.app/p/mood-pill-morph-card",
      "brief": "https://designlounge.vercel.app/p/mood-pill-morph-card.md",
      "demo": "https://designlounge.vercel.app/demo/mood-pill-morph-card.html",
      "source": "60fps"
    },
    {
      "id": "gallery-museum-placard",
      "n": "318",
      "title": "Museum wall with placards",
      "summary": "Four framed paintings on an oxblood gallery wall, each with a wall label. Selecting one zooms it forward with the label as a reading panel.",
      "platform": "web",
      "type": "layout",
      "category": "gallery",
      "tags": [
        "gallery",
        "museum",
        "lightbox",
        "labels",
        "art"
      ],
      "styles": [
        "luxe",
        "editorial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#6B2420",
        "#F3EEE3",
        "#C29A55",
        "#1F1A17",
        "#2A1210"
      ],
      "fonts": [
        "Bodoni Moda",
        "Jost"
      ],
      "url": "https://designlounge.vercel.app/p/gallery-museum-placard",
      "brief": "https://designlounge.vercel.app/p/gallery-museum-placard.md",
      "demo": "https://designlounge.vercel.app/demo/gallery-museum-placard.html",
      "source": "icm"
    },
    {
      "id": "newsletter-close-band",
      "n": "319",
      "title": "Newsletter close",
      "summary": "The last line of a note, then a band: The evening list, one Sunday letter, an email field, and Join. A bad address stays on the page.",
      "platform": "web",
      "type": "section",
      "category": "newsletter",
      "tags": [
        "newsletter",
        "email",
        "form",
        "close"
      ],
      "styles": [
        "editorial",
        "paper"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F4EFE6",
        "#F7F3EA",
        "#241C16",
        "#3F5C4B",
        "#9B2C2C"
      ],
      "fonts": [
        "Newsreader",
        "Public Sans"
      ],
      "url": "https://designlounge.vercel.app/p/newsletter-close-band",
      "brief": "https://designlounge.vercel.app/p/newsletter-close-band.md",
      "demo": "https://designlounge.vercel.app/demo/newsletter-close-band.html",
      "source": "mendo"
    },
    {
      "id": "node-graph",
      "n": "320",
      "title": "Node graph",
      "summary": "Five yard nodes. Yard starts pressed and its lines turn green. Another node lights only its own lines.",
      "platform": "web",
      "type": "component",
      "category": "data",
      "tags": [
        "graph",
        "nodes",
        "links"
      ],
      "styles": [
        "minimal",
        "paper"
      ],
      "motion": "none",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#1F4D3A"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/node-graph",
      "brief": "https://designlounge.vercel.app/p/node-graph.md",
      "demo": "https://designlounge.vercel.app/demo/node-graph.html",
      "source": "60fps"
    },
    {
      "id": "kpi-delta",
      "n": "321",
      "title": "One number, with a delta",
      "summary": "A single metric at 72px. The delta is a small badge. Four equal numbers in a row are a different, worse screen.",
      "platform": "web",
      "type": "component",
      "category": "charts",
      "tags": [
        "kpi",
        "metric",
        "dashboard",
        "delta"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#161513",
        "#1F4D3A",
        "#E7F2EC"
      ],
      "fonts": [
        "IBM Plex Sans",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/kpi-delta",
      "brief": "https://designlounge.vercel.app/p/kpi-delta.md",
      "demo": "https://designlounge.vercel.app/demo/kpi-delta.html",
      "source": "dontboardme"
    },
    {
      "id": "otp-code",
      "n": "322",
      "title": "One-time code",
      "summary": "Six digits from a letter. Three are filled, so the line reads 3 of 6. The check accepts only 184219 and otherwise names that code.",
      "platform": "web",
      "type": "component",
      "category": "auth",
      "tags": [
        "otp",
        "code",
        "sign-in",
        "digits"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#1F4D3A",
        "#9B2C2C"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/otp-code",
      "brief": "https://designlounge.vercel.app/p/otp-code.md",
      "demo": "https://designlounge.vercel.app/demo/otp-code.html",
      "source": "igloo"
    },
    {
      "id": "careers-role-list",
      "n": "323",
      "title": "Open roles",
      "summary": "Four Harbour roles. The pressed row fills the panel beside it with the team, the place, and one sentence. Apply is outline.",
      "platform": "web",
      "type": "section",
      "category": "team",
      "tags": [
        "careers",
        "list",
        "hiring"
      ],
      "styles": [
        "editorial",
        "minimal"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F4F1EA",
        "#FFFDF8",
        "#1A1814",
        "#1F4D3A",
        "#E7F2EC"
      ],
      "fonts": [
        "Fraunces",
        "Public Sans"
      ],
      "url": "https://designlounge.vercel.app/p/careers-role-list",
      "brief": "https://designlounge.vercel.app/p/careers-role-list.md",
      "demo": "https://designlounge.vercel.app/demo/careers-role-list.html",
      "source": "synchronized"
    },
    {
      "id": "order-confirmed",
      "n": "324",
      "title": "Order confirmed",
      "summary": "A paid order for रु 4,200, three lines, and one button that opens tracking. The receipt stays on the page.",
      "platform": "web",
      "type": "screen",
      "category": "ecommerce",
      "tags": [
        "order",
        "receipt",
        "confirmation",
        "shop"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#1F4D3A",
        "#D6E8DC"
      ],
      "fonts": [
        "Noto Sans"
      ],
      "url": "https://designlounge.vercel.app/p/order-confirmed",
      "brief": "https://designlounge.vercel.app/p/order-confirmed.md",
      "demo": "https://designlounge.vercel.app/demo/order-confirmed.html",
      "source": "abel"
    },
    {
      "id": "table-orders-status",
      "n": "325",
      "title": "Orders table with fulfilment",
      "summary": "A warm shop orders table: payment pills, segmented fulfilment bars, rows that expand into packable items, and a floating bulk bar.",
      "platform": "web",
      "type": "component",
      "category": "data",
      "tags": [
        "table",
        "ecommerce",
        "orders",
        "bulk",
        "expand"
      ],
      "styles": [
        "soft",
        "editorial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F3EADB",
        "#FFFBF4",
        "#2A1E16",
        "#B9472A",
        "#3F5A22"
      ],
      "fonts": [
        "Fraunces",
        "Work Sans"
      ],
      "url": "https://designlounge.vercel.app/p/table-orders-status",
      "brief": "https://designlounge.vercel.app/p/table-orders-status.md",
      "demo": "https://designlounge.vercel.app/demo/table-orders-status.html",
      "source": "flist"
    },
    {
      "id": "logos-outline-name-marquee",
      "n": "326",
      "title": "Outline name marquee",
      "summary": "Four rows of huge outlined client names drift in alternating directions. Hover or arrow to a name to fill it and caption the project; a ring badge spins.",
      "platform": "web",
      "type": "section",
      "category": "logos",
      "tags": [
        "logos",
        "marquee",
        "clients",
        "agency",
        "outline"
      ],
      "styles": [
        "kinetic",
        "dark",
        "editorial"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#191517",
        "#EADFCB",
        "#FF9F6B",
        "#B3A895"
      ],
      "fonts": [
        "Hanken Grotesk",
        "Instrument Serif"
      ],
      "url": "https://designlounge.vercel.app/p/logos-outline-name-marquee",
      "brief": "https://designlounge.vercel.app/p/logos-outline-name-marquee.md",
      "demo": "https://designlounge.vercel.app/demo/logos-outline-name-marquee.html",
      "source": "moremedia"
    },
    {
      "id": "outline-fill-topic-list",
      "n": "327",
      "title": "Outline to fill topic list",
      "summary": "A long list of topics in huge condensed outline type. The one at the centre of the screen fills solid, steps right with a mint bar, and swaps the backdrop.",
      "platform": "web",
      "type": "section",
      "category": "features",
      "tags": [
        "list",
        "scroll",
        "outline-type",
        "topics",
        "night"
      ],
      "styles": [
        "dark",
        "kinetic",
        "editorial"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#140D0E",
        "#EAE0CF",
        "#7FD1C3",
        "#3A2226",
        "#8F8579"
      ],
      "fonts": [
        "Big Shoulders Display",
        "Spline Sans Mono"
      ],
      "url": "https://designlounge.vercel.app/p/outline-fill-topic-list",
      "brief": "https://designlounge.vercel.app/p/outline-fill-topic-list.md",
      "demo": "https://designlounge.vercel.app/demo/outline-fill-topic-list.html",
      "source": "haunted"
    },
    {
      "id": "overlap-slider",
      "n": "328",
      "title": "Overlap slider",
      "summary": "Five gate cards. The ones to the left of the pointer scale back. Gate 4 starts forward.",
      "platform": "web",
      "type": "component",
      "category": "media",
      "tags": [
        "slider",
        "cards",
        "scale"
      ],
      "styles": [
        "dark",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#141311",
        "#1C1B19",
        "#F4F1EA",
        "#D7B15E"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/overlap-slider",
      "brief": "https://designlounge.vercel.app/p/overlap-slider.md",
      "demo": "https://designlounge.vercel.app/demo/overlap-slider.html",
      "source": "dragone"
    },
    {
      "id": "page-transition-tile-wipe",
      "n": "329",
      "title": "Page transition tile wipe",
      "summary": "Nav clicks cover the page with a 6×4 grid of cobalt tiles that spin in on a diagonal, swap the page, spin out the same way, then the new title rises line by line.",
      "platform": "web",
      "type": "animation",
      "category": "transitions",
      "tags": [
        "transition",
        "navigation",
        "tiles",
        "routing",
        "typography"
      ],
      "styles": [
        "swiss",
        "kinetic",
        "minimal"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#FFFFFF",
        "#0A0A0A",
        "#5C5C5C",
        "#1F3FFF"
      ],
      "fonts": [
        "Schibsted Grotesk",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/page-transition-tile-wipe",
      "brief": "https://designlounge.vercel.app/p/page-transition-tile-wipe.md",
      "demo": "https://designlounge.vercel.app/demo/page-transition-tile-wipe.html",
      "source": "60fps"
    },
    {
      "id": "pagination",
      "n": "330",
      "title": "Pagination",
      "summary": "Pages of a 48-row list, ten at a time. Page 2 starts current. Previous and Next disable at the ends. The count line shows the range.",
      "platform": "web",
      "type": "component",
      "category": "data",
      "tags": [
        "pagination",
        "list",
        "pages"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#E7F2EC"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/pagination",
      "brief": "https://designlounge.vercel.app/p/pagination.md",
      "demo": "https://designlounge.vercel.app/demo/pagination.html",
      "source": "60fps"
    },
    {
      "id": "pan-canvas",
      "n": "331",
      "title": "Pan canvas",
      "summary": "A yard map bigger than the frame. Drag to pan. Arrow keys nudge the view by 40px.",
      "platform": "web",
      "type": "layout",
      "category": "gallery",
      "tags": [
        "pan",
        "canvas",
        "map"
      ],
      "styles": [
        "dark",
        "minimal"
      ],
      "motion": "none",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#141311",
        "#1C1B19",
        "#F4F1EA",
        "#D7B15E"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/pan-canvas",
      "brief": "https://designlounge.vercel.app/p/pan-canvas.md",
      "demo": "https://designlounge.vercel.app/demo/pan-canvas.html",
      "source": "60fps"
    },
    {
      "id": "social-contribution-graph",
      "n": "332",
      "title": "Paper contribution heatmap",
      "summary": "A year-long contribution heatmap on warm paper with day tooltips, arrow-key navigation, a year switcher, streak stats and three ink themes that ripple across the grid.",
      "platform": "web",
      "type": "component",
      "category": "social",
      "tags": [
        "heatmap",
        "calendar",
        "streaks",
        "contributions",
        "profile"
      ],
      "styles": [
        "paper",
        "editorial",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F3EFE3",
        "#FAF7EE",
        "#22302A",
        "#8FBF6A",
        "#24642F"
      ],
      "fonts": [
        "Spectral",
        "DM Mono"
      ],
      "url": "https://designlounge.vercel.app/p/social-contribution-graph",
      "brief": "https://designlounge.vercel.app/p/social-contribution-graph.md",
      "demo": "https://designlounge.vercel.app/demo/social-contribution-graph.html",
      "source": "moremedia"
    },
    {
      "id": "sidebar-docs-toc",
      "n": "333",
      "title": "Paper docs with scrollspy TOC",
      "summary": "An editorial docs layout: 240px grouped nav, a 68ch serif-headed article, and a 200px On this page list with scrollspy and a red progress line.",
      "platform": "web",
      "type": "layout",
      "category": "navigation",
      "tags": [
        "documentation",
        "toc",
        "scrollspy",
        "sidebar",
        "reading"
      ],
      "styles": [
        "paper",
        "editorial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F1E7",
        "#FBF8F1",
        "#1F1B16",
        "#6E6658",
        "#B8321F"
      ],
      "fonts": [
        "Newsreader",
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/sidebar-docs-toc",
      "brief": "https://designlounge.vercel.app/p/sidebar-docs-toc.md",
      "demo": "https://designlounge.vercel.app/demo/sidebar-docs-toc.html",
      "source": "tailwind"
    },
    {
      "id": "widget-hydration",
      "n": "334",
      "title": "Paper hydration tumbler",
      "summary": "A paper-minimal water widget: an outlined tumbler whose liquid sloshes and rises on +250 ml, a 2 L goal, a dated log and a one-step undo.",
      "platform": "web",
      "type": "component",
      "category": "widgets",
      "tags": [
        "widget",
        "health",
        "water",
        "tracker",
        "undo"
      ],
      "styles": [
        "paper",
        "minimal",
        "editorial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#EEEAE0",
        "#F8F6F0",
        "#22262A",
        "#2F5FD0"
      ],
      "fonts": [
        "Spectral",
        "Albert Sans"
      ],
      "url": "https://designlounge.vercel.app/p/widget-hydration",
      "brief": "https://designlounge.vercel.app/p/widget-hydration.md",
      "demo": "https://designlounge.vercel.app/demo/widget-hydration.html",
      "source": "tailwind"
    },
    {
      "id": "password-field",
      "n": "335",
      "title": "Password field",
      "summary": "A password that starts hidden. Show reveals gate-1842. Hide puts it back. The hint says the yard issued it.",
      "platform": "web",
      "type": "component",
      "category": "inputs",
      "tags": [
        "password",
        "field",
        "show",
        "form"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/password-field",
      "brief": "https://designlounge.vercel.app/p/password-field.md",
      "demo": "https://designlounge.vercel.app/demo/password-field.html",
      "source": "abel"
    },
    {
      "id": "notif-payment-received",
      "n": "336",
      "title": "Payment received banner",
      "summary": "An in-app banner for money in: the amount counts up, the balance follows, View receipt unfolds a slip, Split opens a sheet, and a grouped stack fans out on tap.",
      "platform": "mobile-app",
      "type": "component",
      "category": "feedback",
      "tags": [
        "notification",
        "payments",
        "banner",
        "count-up",
        "stack",
        "split"
      ],
      "styles": [
        "material",
        "playful",
        "soft"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F4F5FB",
        "#FFFFFF",
        "#161A2E",
        "#2341D9",
        "#FFB23F"
      ],
      "fonts": [
        "Funnel Display",
        "Funnel Sans"
      ],
      "url": "https://designlounge.vercel.app/p/notif-payment-received",
      "brief": "https://designlounge.vercel.app/p/notif-payment-received.md",
      "demo": "https://designlounge.vercel.app/demo/notif-payment-received.html",
      "source": "60fps"
    },
    {
      "id": "phone-comments-sheet",
      "n": "337",
      "title": "Phone comments sheet",
      "summary": "A dark comments sheet over a dimmed post: Top/Newest sort, one level of threaded replies, like toggles, a reply chip, and a composer that stays off until you type.",
      "platform": "mobile-app",
      "type": "component",
      "category": "messaging",
      "tags": [
        "comments",
        "sheet",
        "thread",
        "replies",
        "phone"
      ],
      "styles": [
        "dark",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#1C1A18",
        "#262320",
        "#EDE8E1",
        "#E9A23B",
        "#33302C"
      ],
      "fonts": [
        "Instrument Sans",
        "JetBrains Mono"
      ],
      "url": "https://designlounge.vercel.app/p/phone-comments-sheet",
      "brief": "https://designlounge.vercel.app/p/phone-comments-sheet.md",
      "demo": "https://designlounge.vercel.app/demo/phone-comments-sheet.html",
      "source": "igloo"
    },
    {
      "id": "mobile-list-empty",
      "n": "338",
      "title": "Phone empty list",
      "summary": "A phone list with zero runs. The screen name is a 13px label. The empty heading is 28px. One 44px button.",
      "platform": "mobile-app",
      "type": "pattern",
      "category": "feedback",
      "tags": [
        "empty",
        "list",
        "phone",
        "yard"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F4F1EA",
        "#FFFDF8",
        "#1B1814",
        "#8A4B12"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/mobile-list-empty",
      "brief": "https://designlounge.vercel.app/p/mobile-list-empty.md",
      "demo": "https://designlounge.vercel.app/demo/mobile-list-empty.html",
      "source": "60fps"
    },
    {
      "id": "mobile-load-failed",
      "n": "339",
      "title": "Phone failed load",
      "summary": "A phone list that did not load. The screen name is a label. The failure sentence is 20px, with a 44px retry. Not the empty state.",
      "platform": "mobile-app",
      "type": "pattern",
      "category": "error",
      "tags": [
        "error",
        "retry",
        "phone",
        "list"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F4F1EA",
        "#FFFDF8",
        "#1B1814",
        "#9B2C2C",
        "#F8E8E6"
      ],
      "fonts": [
        "IBM Plex Sans",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/mobile-load-failed",
      "brief": "https://designlounge.vercel.app/p/mobile-load-failed.md",
      "demo": "https://designlounge.vercel.app/demo/mobile-load-failed.html",
      "source": "abel"
    },
    {
      "id": "phone-form-fields",
      "n": "340",
      "title": "Phone form fields",
      "summary": "An industrial phone booking form: caps labels, mono values, phone with country code, date, segmented size, counted note, switch, blur validation and an error summary.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "inputs",
      "tags": [
        "form",
        "validation",
        "phone",
        "inputs",
        "booking"
      ],
      "styles": [
        "industrial",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#D3D1CB",
        "#F0EFEB",
        "#1A1A18",
        "#FFD400",
        "#A3200F"
      ],
      "fonts": [
        "Barlow Condensed",
        "JetBrains Mono"
      ],
      "url": "https://designlounge.vercel.app/p/phone-form-fields",
      "brief": "https://designlounge.vercel.app/p/phone-form-fields.md",
      "demo": "https://designlounge.vercel.app/demo/phone-form-fields.html",
      "source": "usearticle"
    },
    {
      "id": "input-phone-country",
      "n": "341",
      "title": "Phone input with country picker",
      "summary": "A phone field with a searchable flag-and-dial-code picker, live formatting per country, paste detection of +codes, and digit-count validation.",
      "platform": "web",
      "type": "component",
      "category": "inputs",
      "tags": [
        "phone",
        "country",
        "combobox",
        "form",
        "validation",
        "checkout"
      ],
      "styles": [
        "minimal",
        "soft",
        "swiss"
      ],
      "motion": "subtle",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F4F1EA",
        "#FFFDF8",
        "#1A1916",
        "#2443D6",
        "#1F7A4D"
      ],
      "fonts": [
        "Rethink Sans",
        "Fragment Mono"
      ],
      "url": "https://designlounge.vercel.app/p/input-phone-country",
      "brief": "https://designlounge.vercel.app/p/input-phone-country.md",
      "demo": "https://designlounge.vercel.app/demo/input-phone-country.html",
      "source": "dontboardme"
    },
    {
      "id": "phone-splash-launch",
      "n": "342",
      "title": "Phone launch splash lift",
      "summary": "A 1.52s app launch: a G mark draws in three strokes, GANTRY rises letter by letter, then the splash lifts away to reveal the first home screen.",
      "platform": "mobile-app",
      "type": "animation",
      "category": "loaders",
      "tags": [
        "splash",
        "launch",
        "logo",
        "reveal",
        "phone"
      ],
      "styles": [
        "industrial",
        "dark",
        "kinetic"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#0C0D0B",
        "#141513",
        "#1B1C1A",
        "#ECECE6",
        "#C8F031"
      ],
      "fonts": [
        "Archivo",
        "JetBrains Mono"
      ],
      "url": "https://designlounge.vercel.app/p/phone-splash-launch",
      "brief": "https://designlounge.vercel.app/p/phone-splash-launch.md",
      "demo": "https://designlounge.vercel.app/demo/phone-splash-launch.html",
      "source": "sibal"
    },
    {
      "id": "phone-notifications-list",
      "n": "343",
      "title": "Phone notification centre",
      "summary": "A Swiss phone notification list: Today, This week and Earlier groups, red unread dots, a three-way filter, tap to read, and Mark all read with a stagger.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "feedback",
      "tags": [
        "notifications",
        "list",
        "filter",
        "unread",
        "empty"
      ],
      "styles": [
        "swiss",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#FFFFFF",
        "#0A0A0A",
        "#E10600",
        "#F4F4F4",
        "#737373"
      ],
      "fonts": [
        "Inter"
      ],
      "url": "https://designlounge.vercel.app/p/phone-notifications-list",
      "brief": "https://designlounge.vercel.app/p/phone-notifications-list.md",
      "demo": "https://designlounge.vercel.app/demo/phone-notifications-list.html",
      "source": "60fps"
    },
    {
      "id": "phone-order-tracking",
      "n": "344",
      "title": "Phone order tracking",
      "summary": "A food delivery tracker: map with a moving courier, ETA in 42px type, a four-step progress with a pulsing current step, courier card, and a folding receipt.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "ecommerce",
      "tags": [
        "delivery",
        "tracking",
        "map",
        "order",
        "courier"
      ],
      "styles": [
        "playful",
        "brutalist"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6EEDF",
        "#FFFAF1",
        "#17120D",
        "#D6341F",
        "#EFE3CC"
      ],
      "fonts": [
        "Rubik"
      ],
      "url": "https://designlounge.vercel.app/p/phone-order-tracking",
      "brief": "https://designlounge.vercel.app/p/phone-order-tracking.md",
      "demo": "https://designlounge.vercel.app/demo/phone-order-tracking.html",
      "source": "abel"
    },
    {
      "id": "phone-paywall-plans",
      "n": "345",
      "title": "Phone paywall with two plans",
      "summary": "An honest subscription paywall: three benefits, Monthly and Yearly cards as radios, a 7-day trial timeline, and a button that names the price you picked.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "pricing",
      "tags": [
        "paywall",
        "subscription",
        "plans",
        "trial",
        "phone"
      ],
      "styles": [
        "editorial",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F3EEE4",
        "#FBF8F2",
        "#1A1714",
        "#6B1E23",
        "#D8CFC0"
      ],
      "fonts": [
        "Instrument Serif",
        "Inter Tight"
      ],
      "url": "https://designlounge.vercel.app/p/phone-paywall-plans",
      "brief": "https://designlounge.vercel.app/p/phone-paywall-plans.md",
      "demo": "https://designlounge.vercel.app/demo/phone-paywall-plans.html",
      "source": "abel"
    },
    {
      "id": "phone-permission-prompt",
      "n": "346",
      "title": "Phone permission prompt",
      "summary": "A soft pre-permission screen before the OS asks: a swaying plant drawing, three reasons, Allow and Not now, a labelled system step, then a granted or later state.",
      "platform": "mobile-app",
      "type": "component",
      "category": "overlays",
      "tags": [
        "permissions",
        "notifications",
        "onboarding",
        "phone",
        "overlay"
      ],
      "styles": [
        "soft",
        "organic"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F5EFE2",
        "#E7EAD9",
        "#56704A",
        "#26301F",
        "#C98A63"
      ],
      "fonts": [
        "Fraunces",
        "Source Sans 3"
      ],
      "url": "https://designlounge.vercel.app/p/phone-permission-prompt",
      "brief": "https://designlounge.vercel.app/p/phone-permission-prompt.md",
      "demo": "https://designlounge.vercel.app/demo/phone-permission-prompt.html",
      "source": "mwdt"
    },
    {
      "id": "phone-photo-picker",
      "n": "347",
      "title": "Phone photo picker",
      "summary": "A dark photo picker sheet: album menu, camera tile, 3-column grid, numbered multi-select up to 4, a toast at the limit, and a tray with removable thumbnails.",
      "platform": "mobile-app",
      "type": "component",
      "category": "pickers",
      "tags": [
        "photos",
        "picker",
        "sheet",
        "multi-select",
        "media"
      ],
      "styles": [
        "dark",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#0A0A0A",
        "#161616",
        "#262626",
        "#F5F5F5",
        "#FFE500"
      ],
      "fonts": [
        "Inter",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/phone-photo-picker",
      "brief": "https://designlounge.vercel.app/p/phone-photo-picker.md",
      "demo": "https://designlounge.vercel.app/demo/phone-photo-picker.html",
      "source": "mindmarket"
    },
    {
      "id": "phone-product-detail",
      "n": "348",
      "title": "Phone product page",
      "summary": "A retro paper product page for a small pottery shop: CSS-drawn gallery, glaze swatches that recolour the art, size chips, an accordion and a sticky Add to bag.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "ecommerce",
      "tags": [
        "product",
        "shop",
        "gallery",
        "swatches",
        "cart"
      ],
      "styles": [
        "paper",
        "retro",
        "clay"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F3E9D8",
        "#FBF5EA",
        "#2A1E16",
        "#B5532F",
        "#E7D3B6"
      ],
      "fonts": [
        "Archivo",
        "Instrument Serif"
      ],
      "url": "https://designlounge.vercel.app/p/phone-product-detail",
      "brief": "https://designlounge.vercel.app/p/phone-product-detail.md",
      "demo": "https://designlounge.vercel.app/demo/phone-product-detail.html",
      "source": "abel"
    },
    {
      "id": "phone-profile-header",
      "n": "349",
      "title": "Phone profile header",
      "summary": "A maker's profile: 92px initials avatar, tabular stats, a Follow button that morphs to Following, Posts/Saved/About tabs, and a glass top bar on scroll.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "profile",
      "tags": [
        "profile",
        "follow",
        "tabs",
        "scroll",
        "phone",
        "ios"
      ],
      "styles": [
        "soft",
        "glass",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F5F2",
        "#FFFFFF",
        "#141518",
        "#2340F0",
        "#ECEBE7"
      ],
      "fonts": [
        "Inter"
      ],
      "url": "https://designlounge.vercel.app/p/phone-profile-header",
      "brief": "https://designlounge.vercel.app/p/phone-profile-header.md",
      "demo": "https://designlounge.vercel.app/demo/phone-profile-header.html",
      "source": "mindmarket"
    },
    {
      "id": "phone-qr-scanner",
      "n": "350",
      "title": "Phone QR ticket scanner",
      "summary": "A door-staff ticket scanner: grainy camera scene, breathing reticle with a scan line, torch, manual code sheet, and a mint valid or red invalid result.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "utility",
      "tags": [
        "scanner",
        "qr",
        "tickets",
        "camera",
        "events"
      ],
      "styles": [
        "dark",
        "minimal"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#000000",
        "#111111",
        "#FFFFFF",
        "#4FE3A5",
        "#FF5A4F"
      ],
      "fonts": [
        "Geist",
        "Geist Mono"
      ],
      "url": "https://designlounge.vercel.app/p/phone-qr-scanner",
      "brief": "https://designlounge.vercel.app/p/phone-qr-scanner.md",
      "demo": "https://designlounge.vercel.app/demo/phone-qr-scanner.html",
      "source": "tailwind"
    },
    {
      "id": "phone-ride-request",
      "n": "351",
      "title": "Phone ride request",
      "summary": "A night ride-hailing screen: dark map with a dashed acid route, pickup and drop fields with swap, three ride options, then a radar search and a driver card.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "utility",
      "tags": [
        "ride",
        "map",
        "booking",
        "transport",
        "sheet"
      ],
      "styles": [
        "industrial",
        "dark"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#0D0E0F",
        "#121314",
        "#F2F2EE",
        "#D7FF2E",
        "#2B2D30"
      ],
      "fonts": [
        "Barlow Condensed",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/phone-ride-request",
      "brief": "https://designlounge.vercel.app/p/phone-ride-request.md",
      "demo": "https://designlounge.vercel.app/demo/phone-ride-request.html",
      "source": "tailwind"
    },
    {
      "id": "phone-search-results",
      "n": "352",
      "title": "Phone search with live results",
      "summary": "A phone search screen: focused field with Cancel, removable recents, ranked trending chips, live suggestions with the match in bold, tabbed results and a did-you-mean empty state.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "utility",
      "tags": [
        "search",
        "suggestions",
        "tabs",
        "empty-state",
        "ios"
      ],
      "styles": [
        "minimal",
        "swiss"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#FFFFFF",
        "#F1F3F6",
        "#11151C",
        "#1F4FD8"
      ],
      "fonts": [
        "Inter"
      ],
      "url": "https://designlounge.vercel.app/p/phone-search-results",
      "brief": "https://designlounge.vercel.app/p/phone-search-results.md",
      "demo": "https://designlounge.vercel.app/demo/phone-search-results.html",
      "source": "tailwind"
    },
    {
      "id": "mockup-phone-showcase",
      "n": "353",
      "title": "Phone showcase mockup",
      "summary": "A pure-CSS titanium phone with side keys and an island, four finishes, three live screens, pointer-driven 3D tilt and a light or dark gallery stage.",
      "platform": "web",
      "type": "component",
      "category": "mockups",
      "tags": [
        "mockup",
        "phone",
        "device",
        "showcase",
        "3d"
      ],
      "styles": [
        "luxe",
        "editorial",
        "minimal"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#EBE5DA",
        "#1D1A16",
        "#B4561F",
        "#B3ADA3",
        "#14120F"
      ],
      "fonts": [
        "Instrument Serif",
        "Geist"
      ],
      "url": "https://designlounge.vercel.app/p/mockup-phone-showcase",
      "brief": "https://designlounge.vercel.app/p/mockup-phone-showcase.md",
      "demo": "https://designlounge.vercel.app/demo/mockup-phone-showcase.html",
      "source": "icm"
    },
    {
      "id": "phone-video-player",
      "n": "354",
      "title": "Phone video player",
      "summary": "A 16:9 player with tap-to-show controls, double-tap ±10s ripples, a chaptered scrubber with a time bubble, speed chips, captions and a rotate-to-landscape full screen.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "media",
      "tags": [
        "video",
        "player",
        "scrubber",
        "chapters",
        "captions",
        "dark"
      ],
      "styles": [
        "dark",
        "minimal"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#0B0B0C",
        "#161618",
        "#F5F5F4",
        "#E5322D",
        "#9A9A9F"
      ],
      "fonts": [
        "Hanken Grotesk"
      ],
      "url": "https://designlounge.vercel.app/p/phone-video-player",
      "brief": "https://designlounge.vercel.app/p/phone-video-player.md",
      "demo": "https://designlounge.vercel.app/demo/phone-video-player.html",
      "source": "dragone"
    },
    {
      "id": "gallery-photo-album",
      "n": "355",
      "title": "Photo album with page turns",
      "summary": "A black-paged family album with photo corners and white-pen captions. Leaves turn over the spine in 3D on click or the arrow keys.",
      "platform": "web",
      "type": "layout",
      "category": "gallery",
      "tags": [
        "gallery",
        "album",
        "page-flip",
        "3d",
        "nostalgia"
      ],
      "styles": [
        "paper",
        "retro",
        "organic"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#26332B",
        "#1C1C1A",
        "#5A2F24",
        "#EFE8D8",
        "#C8962F"
      ],
      "fonts": [
        "Caveat",
        "Lora"
      ],
      "url": "https://designlounge.vercel.app/p/gallery-photo-album",
      "brief": "https://designlounge.vercel.app/p/gallery-photo-album.md",
      "demo": "https://designlounge.vercel.app/demo/gallery-photo-album.html",
      "source": "icm"
    },
    {
      "id": "social-photo-post",
      "n": "356",
      "title": "Photo post with carousel",
      "summary": "A dark square photo post: four CSS-painted slides with drag, dots and counter, double-tap heart pop, save toggle, caption with more, and inline comments.",
      "platform": "web",
      "type": "component",
      "category": "social",
      "tags": [
        "social",
        "photo",
        "carousel",
        "like",
        "feed"
      ],
      "styles": [
        "dark",
        "minimal"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#0B0B0C",
        "#141416",
        "#F2EFE9",
        "#FF6A4D",
        "#FFB547"
      ],
      "fonts": [
        "Manrope",
        "Instrument Serif"
      ],
      "url": "https://designlounge.vercel.app/p/social-photo-post",
      "brief": "https://designlounge.vercel.app/p/social-photo-post.md",
      "demo": "https://designlounge.vercel.app/demo/social-photo-post.html",
      "source": "tailwind"
    },
    {
      "id": "list-empty-plain",
      "n": "357",
      "title": "Plain list empty",
      "summary": "An empty runs list: a heading, one sentence, and one button. No illustration, no second action, no joke.",
      "platform": "web",
      "type": "pattern",
      "category": "feedback",
      "tags": [
        "empty",
        "list",
        "dashboard"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#1F4D3A"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/list-empty-plain",
      "brief": "https://designlounge.vercel.app/p/list-empty-plain.md",
      "demo": "https://designlounge.vercel.app/demo/list-empty-plain.html",
      "source": "60fps"
    },
    {
      "id": "phone-tab-plain",
      "n": "358",
      "title": "Plain phone tabs",
      "summary": "A four-item phone tab bar with a hairline and a top mark. No glass, no blur, no floating capsule.",
      "platform": "mobile-app",
      "type": "component",
      "category": "navigation",
      "tags": [
        "navigation",
        "tabs",
        "phone",
        "ios"
      ],
      "styles": [
        "minimal",
        "paper"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F4EAD6",
        "#FBF6EA",
        "#1C2744",
        "#C8102E"
      ],
      "fonts": [
        "Noto Serif Devanagari",
        "Mukta"
      ],
      "url": "https://designlounge.vercel.app/p/phone-tab-plain",
      "brief": "https://designlounge.vercel.app/p/phone-tab-plain.md",
      "demo": "https://designlounge.vercel.app/demo/phone-tab-plain.html",
      "source": "tailwind"
    },
    {
      "id": "card-music-playlist",
      "n": "359",
      "title": "Playlist card with now playing",
      "summary": "A playlist card with a four-tile CSS cover collage, a track list with hover-to-play, live equaliser bars, shuffle that reorders with FLIP, a save toggle, and a total runtime.",
      "platform": "web",
      "type": "component",
      "category": "media",
      "tags": [
        "music",
        "playlist",
        "player",
        "cards",
        "tracks"
      ],
      "styles": [
        "soft",
        "editorial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#D8DDCB",
        "#F7F4EA",
        "#1B201B",
        "#2B44E0",
        "#E3A23A"
      ],
      "fonts": [
        "Gloock",
        "Rethink Sans"
      ],
      "url": "https://designlounge.vercel.app/p/card-music-playlist",
      "brief": "https://designlounge.vercel.app/p/card-music-playlist.md",
      "demo": "https://designlounge.vercel.app/demo/card-music-playlist.html",
      "source": "bermawy"
    },
    {
      "id": "polaroid-fan",
      "n": "360",
      "title": "Polaroid fan",
      "summary": "Five prints start fanned. Click stacks them. Click again opens the arc.",
      "platform": "web",
      "type": "animation",
      "category": "cards",
      "tags": [
        "polaroid",
        "fan",
        "stack"
      ],
      "styles": [
        "paper",
        "editorial"
      ],
      "motion": "subtle",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F4F1EA",
        "#FFFDF8",
        "#1A1814",
        "#1F4D3A"
      ],
      "fonts": [
        "Fraunces",
        "Public Sans"
      ],
      "url": "https://designlounge.vercel.app/p/polaroid-fan",
      "brief": "https://designlounge.vercel.app/p/polaroid-fan.md",
      "demo": "https://designlounge.vercel.app/demo/polaroid-fan.html",
      "source": "bermawy"
    },
    {
      "id": "card-polaroid-frames",
      "n": "361",
      "title": "Polaroid frames, three ways",
      "summary": "One 300px instant-photo frame in three treatments: a hard shadow lit by the cursor, tape with a peelable sticky note, and a print you shake to develop.",
      "platform": "web",
      "type": "component",
      "category": "cards",
      "tags": [
        "cards",
        "polaroid",
        "photo",
        "sticky-note",
        "drag"
      ],
      "styles": [
        "brutalist",
        "playful",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F1EEE4",
        "#FFFDF6",
        "#141414",
        "#FF4F2E",
        "#FFD93B"
      ],
      "fonts": [
        "Permanent Marker",
        "Sometype Mono"
      ],
      "url": "https://designlounge.vercel.app/p/card-polaroid-frames",
      "brief": "https://designlounge.vercel.app/p/card-polaroid-frames.md",
      "demo": "https://designlounge.vercel.app/demo/card-polaroid-frames.html",
      "source": "bermawy"
    },
    {
      "id": "popover-panel",
      "n": "362",
      "title": "Popover panel",
      "summary": "Note opens a panel under the button: Gate 2 closes at 18:00. Close and Escape put it away. There is no scrim and no focus trap.",
      "platform": "web",
      "type": "component",
      "category": "overlays",
      "tags": [
        "popover",
        "panel",
        "note",
        "disclosure"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/popover-panel",
      "brief": "https://designlounge.vercel.app/p/popover-panel.md",
      "demo": "https://designlounge.vercel.app/demo/popover-panel.html",
      "source": "abel"
    },
    {
      "id": "card-postcard-stamp",
      "n": "363",
      "title": "Postcard with stamp and postmark",
      "summary": "A travel postcard that turns over by drag or key: an illustrated harbour on the front, a handwritten note, perforated stamp, and an inked postmark on the back.",
      "platform": "web",
      "type": "component",
      "category": "cards",
      "tags": [
        "cards",
        "postcard",
        "flip",
        "stamp",
        "travel"
      ],
      "styles": [
        "retro",
        "paper",
        "playful"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#173840",
        "#F4E9D3",
        "#E2553F",
        "#F0B14A",
        "#2B7A78"
      ],
      "fonts": [
        "Abril Fatface",
        "Reenie Beanie"
      ],
      "url": "https://designlounge.vercel.app/p/card-postcard-stamp",
      "brief": "https://designlounge.vercel.app/p/card-postcard-stamp.md",
      "demo": "https://designlounge.vercel.app/demo/card-postcard-stamp.html",
      "source": "bermawy"
    },
    {
      "id": "preloader-counter-intro",
      "n": "364",
      "title": "Preloader counter intro",
      "summary": "A 0 to 100 counter runs for 1.8s while four print blocks pop in, then the loader splits top and bottom and the hero headline rises letter by letter.",
      "platform": "web",
      "type": "animation",
      "category": "loaders",
      "tags": [
        "preloader",
        "counter",
        "intro",
        "split",
        "hero"
      ],
      "styles": [
        "brutalist",
        "kinetic",
        "paper"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F1EADB",
        "#141310",
        "#C6F432",
        "#E6DCC8",
        "#4F4A40"
      ],
      "fonts": [
        "Anton",
        "JetBrains Mono"
      ],
      "url": "https://designlounge.vercel.app/p/preloader-counter-intro",
      "brief": "https://designlounge.vercel.app/p/preloader-counter-intro.md",
      "demo": "https://designlounge.vercel.app/demo/preloader-counter-intro.html",
      "source": "noomo"
    },
    {
      "id": "dock-presence-bar",
      "n": "365",
      "title": "Presence dock with follow mode",
      "summary": "A dark pill dock of collaborator avatars over a shared doc: live named cursors drift through the text, clicking a face follows them, and Invite adds a pending seat.",
      "platform": "web",
      "type": "component",
      "category": "navigation",
      "tags": [
        "collaboration",
        "presence",
        "avatars",
        "cursors",
        "dock"
      ],
      "styles": [
        "editorial",
        "minimal"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#ECE9E1",
        "#FBFAF6",
        "#17181C",
        "#D4F25A",
        "#FF7A59"
      ],
      "fonts": [
        "Literata",
        "Albert Sans"
      ],
      "url": "https://designlounge.vercel.app/p/dock-presence-bar",
      "brief": "https://designlounge.vercel.app/p/dock-presence-bar.md",
      "demo": "https://designlounge.vercel.app/demo/dock-presence-bar.html",
      "source": "tailwind"
    },
    {
      "id": "press-well",
      "n": "366",
      "title": "Press well",
      "summary": "Open the gate sits in a recessed well. Press and the button drops 4px. Click says the gate opened.",
      "platform": "web",
      "type": "component",
      "category": "buttons",
      "tags": [
        "button",
        "press",
        "well"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "subtle",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#1F4D3A"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/press-well",
      "brief": "https://designlounge.vercel.app/p/press-well.md",
      "demo": "https://designlounge.vercel.app/demo/press-well.html",
      "source": "wickret"
    },
    {
      "id": "process-step-dossier",
      "n": "367",
      "title": "Process step dossier",
      "summary": "A portfolio case panel: a project's steps from sketch to shipped sit side by side as artboards; hover or focus one to light it and swap in its story.",
      "platform": "web",
      "type": "section",
      "category": "portfolio",
      "tags": [
        "portfolio",
        "case-study",
        "process",
        "hover",
        "artboards"
      ],
      "styles": [
        "industrial",
        "dark",
        "swiss"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#151517",
        "#1C1C1F",
        "#ECE6DA",
        "#FF5B2E",
        "#8F8A81"
      ],
      "fonts": [
        "Bai Jamjuree",
        "Azeret Mono"
      ],
      "url": "https://designlounge.vercel.app/p/process-step-dossier",
      "brief": "https://designlounge.vercel.app/p/process-step-dossier.md",
      "demo": "https://designlounge.vercel.app/demo/process-step-dossier.html",
      "source": "lamalama"
    },
    {
      "id": "card-product-quick-add",
      "n": "368",
      "title": "Product cards with quick add",
      "summary": "Four square-cornered shop cards with CSS-drawn art, a second angle on hover, colour swatches, sale tags, and a quick-add bar that bumps the bag count.",
      "platform": "web",
      "type": "component",
      "category": "cards",
      "tags": [
        "cards",
        "shop",
        "product",
        "quick-add",
        "swatches"
      ],
      "styles": [
        "retro",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F1EDE4",
        "#151412",
        "#C2321C",
        "#E6E0D2",
        "#B6AE9D"
      ],
      "fonts": [
        "Barlow Condensed",
        "DM Mono"
      ],
      "url": "https://designlounge.vercel.app/p/card-product-quick-add",
      "brief": "https://designlounge.vercel.app/p/card-product-quick-add.md",
      "demo": "https://designlounge.vercel.app/demo/card-product-quick-add.html",
      "source": "bermawy"
    },
    {
      "id": "mega-menu-product-grid",
      "n": "369",
      "title": "Product mega menu grid",
      "summary": "A white SaaS navbar whose Product item opens a full-width panel: three product columns, a by-team column and a release card, with hover intent and full keys.",
      "platform": "web",
      "type": "component",
      "category": "navbar",
      "tags": [
        "navigation",
        "mega-menu",
        "header",
        "saas",
        "hover"
      ],
      "styles": [
        "swiss",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#FFFFFF",
        "#F4F4F1",
        "#0D0D0D",
        "#73736E",
        "#F0441C"
      ],
      "fonts": [
        "Schibsted Grotesk",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/mega-menu-product-grid",
      "brief": "https://designlounge.vercel.app/p/mega-menu-product-grid.md",
      "demo": "https://designlounge.vercel.app/demo/mega-menu-product-grid.html",
      "source": "lamalama"
    },
    {
      "id": "social-pro-post",
      "n": "370",
      "title": "Professional network post",
      "summary": "A warm editorial work-network post: author with role, clamped text, a paged document preview, a five-reaction hover picker, and a live comment count.",
      "platform": "web",
      "type": "component",
      "category": "social",
      "tags": [
        "social",
        "post",
        "reactions",
        "document",
        "comments"
      ],
      "styles": [
        "editorial",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#EBE3D4",
        "#FBF7EF",
        "#24201B",
        "#2F5E4B",
        "#2e3f7a"
      ],
      "fonts": [
        "Newsreader",
        "Public Sans"
      ],
      "url": "https://designlounge.vercel.app/p/social-pro-post",
      "brief": "https://designlounge.vercel.app/p/social-pro-post.md",
      "demo": "https://designlounge.vercel.app/demo/social-pro-post.html",
      "source": "stripe"
    },
    {
      "id": "social-pro-profile",
      "n": "371",
      "title": "Professional network profile card",
      "summary": "A work-network profile card with a contour banner, an open-to-work arc ring, a Connect → Pending → Connected flow, an inline message composer and a fold-out experience timeline.",
      "platform": "web",
      "type": "component",
      "category": "social",
      "tags": [
        "social",
        "profile",
        "network",
        "timeline",
        "connect"
      ],
      "styles": [
        "minimal",
        "swiss"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#E3E6DF",
        "#FBFBF7",
        "#17201B",
        "#D4511B",
        "#2D6A4A"
      ],
      "fonts": [
        "Spectral",
        "Albert Sans"
      ],
      "url": "https://designlounge.vercel.app/p/social-pro-profile",
      "brief": "https://designlounge.vercel.app/p/social-pro-profile.md",
      "demo": "https://designlounge.vercel.app/demo/social-pro-profile.html",
      "source": "abel"
    },
    {
      "id": "progress-bar",
      "n": "372",
      "title": "Progress bar",
      "summary": "Packing the rice, 5 of 8. Each click fills the bar by one bag. At 8 the button stops and the line says all the bags are packed.",
      "platform": "web",
      "type": "component",
      "category": "feedback",
      "tags": [
        "progress",
        "meter",
        "packing",
        "status"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#161513",
        "#1F4D3A",
        "#CFC6B8"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/progress-bar",
      "brief": "https://designlounge.vercel.app/p/progress-bar.md",
      "demo": "https://designlounge.vercel.app/demo/progress-bar.html",
      "source": "60fps"
    },
    {
      "id": "prompt-composer",
      "n": "373",
      "title": "Prompt composer",
      "summary": "A 640px ask box. Plain, Short, or Formal. Send stays off until there is text, then reports the tone and the count.",
      "platform": "web",
      "type": "component",
      "category": "inputs",
      "tags": [
        "prompt",
        "composer",
        "form"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#1F4D3A",
        "#E7F2EC"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/prompt-composer",
      "brief": "https://designlounge.vercel.app/p/prompt-composer.md",
      "demo": "https://designlounge.vercel.app/demo/prompt-composer.html",
      "source": "tailwind"
    },
    {
      "id": "property-list",
      "n": "374",
      "title": "Property list",
      "summary": "Four facts of load 1842. Gate, driver, slot, and weight, each a label and a value on one row. The label is quiet. The value is the ink.",
      "platform": "web",
      "type": "component",
      "category": "data",
      "tags": [
        "properties",
        "definition",
        "record",
        "list"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#5A554C"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/property-list",
      "brief": "https://designlounge.vercel.app/p/property-list.md",
      "demo": "https://designlounge.vercel.app/demo/property-list.html",
      "source": "60fps"
    },
    {
      "id": "card-pull-quote",
      "n": "375",
      "title": "Pull-quote testimonial card",
      "summary": "A dark editorial testimonial card: a 300px chartreuse quote mark, a 46px serif quote whose key phrase is highlighted by a marker sweep, and prev/next.",
      "platform": "web",
      "type": "component",
      "category": "testimonials",
      "tags": [
        "testimonials",
        "quote",
        "carousel",
        "highlight",
        "editorial"
      ],
      "styles": [
        "editorial",
        "dark"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#141611",
        "#1D2019",
        "#EDEADF",
        "#D4EE4E",
        "#323729"
      ],
      "fonts": [
        "Gloock",
        "Albert Sans"
      ],
      "url": "https://designlounge.vercel.app/p/card-pull-quote",
      "brief": "https://designlounge.vercel.app/p/card-pull-quote.md",
      "demo": "https://designlounge.vercel.app/demo/card-pull-quote.html",
      "source": "linear"
    },
    {
      "id": "pwa-offline-library",
      "n": "376",
      "title": "PWA offline library",
      "summary": "A saved-for-offline screen at night: storage meter, Wi-Fi-only switch, download rings, remove buttons, dimmed items with a reason, and an offline badge.",
      "platform": "pwa",
      "type": "screen",
      "category": "reading",
      "tags": [
        "pwa",
        "offline",
        "downloads",
        "storage",
        "podcast",
        "reading"
      ],
      "styles": [
        "editorial",
        "dark"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#0D1726",
        "#14223A",
        "#F3EEE4",
        "#BCC2CD",
        "#F0A640"
      ],
      "fonts": [
        "Source Serif 4",
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/pwa-offline-library",
      "brief": "https://designlounge.vercel.app/p/pwa-offline-library.md",
      "demo": "https://designlounge.vercel.app/demo/pwa-offline-library.html",
      "source": "mendo"
    },
    {
      "id": "pwa-outbox-sync",
      "n": "377",
      "title": "PWA outbox sync",
      "summary": "An offline outbox sheet for a field-notes app: queued, sending, failed with retry, conflict with keep mine or theirs, and sent, sending one by one when signal returns.",
      "platform": "pwa",
      "type": "component",
      "category": "feedback",
      "tags": [
        "pwa",
        "offline",
        "sync",
        "queue",
        "conflict",
        "retry"
      ],
      "styles": [
        "industrial",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#D9CDAE",
        "#ECE4CD",
        "#16140F",
        "#E4571B",
        "#A63A0A"
      ],
      "fonts": [
        "Archivo Narrow",
        "JetBrains Mono"
      ],
      "url": "https://designlounge.vercel.app/p/pwa-outbox-sync",
      "brief": "https://designlounge.vercel.app/p/pwa-outbox-sync.md",
      "demo": "https://designlounge.vercel.app/demo/pwa-outbox-sync.html",
      "source": "60fps"
    },
    {
      "id": "qty-stepper",
      "n": "378",
      "title": "Quantity stepper",
      "summary": "Rice at रु 1,200 a bag, starting at 2. Minus and plus step by one, from 1 to 8, and the line amount follows.",
      "platform": "web",
      "type": "component",
      "category": "ecommerce",
      "tags": [
        "quantity",
        "stepper",
        "cart",
        "price"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#1F4D3A"
      ],
      "fonts": [
        "Noto Sans"
      ],
      "url": "https://designlounge.vercel.app/p/qty-stepper",
      "brief": "https://designlounge.vercel.app/p/qty-stepper.md",
      "demo": "https://designlounge.vercel.app/demo/qty-stepper.html",
      "source": "abel"
    },
    {
      "id": "chart-line-range",
      "n": "379",
      "title": "Quarter line chart",
      "summary": "Twelve weeks of tonnage as one stroke. The latest week is a 56px number. The line is the evidence under it, not a second headline.",
      "platform": "web",
      "type": "component",
      "category": "charts",
      "tags": [
        "charts",
        "line",
        "dashboard",
        "quarter"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#1F4D3A"
      ],
      "fonts": [
        "IBM Plex Sans",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/chart-line-range",
      "brief": "https://designlounge.vercel.app/p/chart-line-range.md",
      "demo": "https://designlounge.vercel.app/demo/chart-line-range.html",
      "source": "icm"
    },
    {
      "id": "radio-group",
      "n": "380",
      "title": "Radio group",
      "summary": "Three shifts in one fieldset. Morning starts selected. Arrow keys move the choice. The status line names the shift on the gate.",
      "platform": "web",
      "type": "component",
      "category": "inputs",
      "tags": [
        "radio",
        "form",
        "choice",
        "shift"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#1F4D3A",
        "#E7F2EC"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/radio-group",
      "brief": "https://designlounge.vercel.app/p/radio-group.md",
      "demo": "https://designlounge.vercel.app/demo/radio-group.html",
      "source": "usearticle"
    },
    {
      "id": "chart-rank-spend",
      "n": "381",
      "title": "Ranked spend",
      "summary": "Where the money went: one amount at display size, then five horizontal bars ranked by size. No pie, no legend, no second series.",
      "platform": "web",
      "type": "component",
      "category": "charts",
      "tags": [
        "charts",
        "spend",
        "finance",
        "nepal"
      ],
      "styles": [
        "editorial",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F4EAD6",
        "#FBF6EA",
        "#1C2744",
        "#C8102E"
      ],
      "fonts": [
        "Noto Serif Devanagari",
        "Mukta"
      ],
      "url": "https://designlounge.vercel.app/p/chart-rank-spend",
      "brief": "https://designlounge.vercel.app/p/chart-rank-spend.md",
      "demo": "https://designlounge.vercel.app/demo/chart-rank-spend.html",
      "source": "dontboardme"
    },
    {
      "id": "rating-score",
      "n": "382",
      "title": "Rating score",
      "summary": "Five marks for the handoff. Four start filled. Choosing another mark rewrites the line to that score of 5.",
      "platform": "web",
      "type": "component",
      "category": "inputs",
      "tags": [
        "rating",
        "score",
        "radio",
        "handoff"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#161513",
        "#1F4D3A",
        "#CFC6B8"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/rating-score",
      "brief": "https://designlounge.vercel.app/p/rating-score.md",
      "demo": "https://designlounge.vercel.app/demo/rating-score.html",
      "source": "icm"
    },
    {
      "id": "realestate-listing-detail",
      "n": "383",
      "title": "Real estate listing detail",
      "summary": "A stone-and-bronze house listing: CSS-drawn room gallery, a tappable SVG floor plan, a mortgage estimate, an SVG area map, and a sticky viewing card.",
      "platform": "web",
      "type": "screen",
      "category": "ecommerce",
      "tags": [
        "property",
        "listing",
        "floor-plan",
        "mortgage",
        "booking",
        "map"
      ],
      "styles": [
        "luxe",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#EBE6DE",
        "#F5F2EC",
        "#22201E",
        "#8A5A2B",
        "#D2CABD"
      ],
      "fonts": [
        "Cormorant Garamond",
        "Schibsted Grotesk"
      ],
      "url": "https://designlounge.vercel.app/p/realestate-listing-detail",
      "brief": "https://designlounge.vercel.app/p/realestate-listing-detail.md",
      "demo": "https://designlounge.vercel.app/demo/realestate-listing-detail.html",
      "source": "abel"
    },
    {
      "id": "receipt-slip",
      "n": "384",
      "title": "Receipt slip",
      "summary": "Print slip feeds a yard note out of a slot. Reprint pulls it back. The note says it is not a tax bill.",
      "platform": "web",
      "type": "component",
      "category": "ecommerce",
      "tags": [
        "receipt",
        "slip",
        "print"
      ],
      "styles": [
        "minimal",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFDF8",
        "#161513",
        "#1C1B19"
      ],
      "fonts": [
        "IBM Plex Sans",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/receipt-slip",
      "brief": "https://designlounge.vercel.app/p/receipt-slip.md",
      "demo": "https://designlounge.vercel.app/demo/receipt-slip.html",
      "source": "abel"
    },
    {
      "id": "redaction-bar-reveal",
      "n": "385",
      "title": "Redaction bar reveal",
      "summary": "Condensed investigative copy hidden under black bars, one per line, that lift right-to-left in a stagger. One name stays withheld for good.",
      "platform": "web",
      "type": "section",
      "category": "text-motion",
      "tags": [
        "redaction",
        "text",
        "reveal",
        "investigative",
        "report",
        "stagger"
      ],
      "styles": [
        "editorial",
        "brutalist",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#DCDFD6",
        "#111111",
        "#0D0D0D",
        "#D7261E",
        "#3D403A"
      ],
      "fonts": [
        "Antonio",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/redaction-bar-reveal",
      "brief": "https://designlounge.vercel.app/p/redaction-bar-reveal.md",
      "demo": "https://designlounge.vercel.app/demo/redaction-bar-reveal.html",
      "source": "susan"
    },
    {
      "id": "restaurant-menu-page",
      "n": "386",
      "title": "Restaurant menu page",
      "summary": "An oxblood-and-mustard bistro menu: riso halftone hero, sticky category bar with scrollspy, dotted price leaders, a Chef's pick stamp, and a booking popover.",
      "platform": "web",
      "type": "screen",
      "category": "landing",
      "tags": [
        "restaurant",
        "menu",
        "scrollspy",
        "booking",
        "popover"
      ],
      "styles": [
        "retro",
        "riso"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F2E6CF",
        "#6B1E23",
        "#D79B22",
        "#2A1A17",
        "#F8EFDC"
      ],
      "fonts": [
        "Instrument Serif",
        "Courier Prime"
      ],
      "url": "https://designlounge.vercel.app/p/restaurant-menu-page",
      "brief": "https://designlounge.vercel.app/p/restaurant-menu-page.md",
      "demo": "https://designlounge.vercel.app/demo/restaurant-menu-page.html",
      "source": "haunted"
    },
    {
      "id": "widget-ride-pickup",
      "n": "387",
      "title": "Ride pickup live activity",
      "summary": "A lock-screen ride widget: a car drives a mini route map, the ETA counts down to Here, and one tap folds it to a compact progress row.",
      "platform": "mobile-app",
      "type": "component",
      "category": "widgets",
      "tags": [
        "widget",
        "live-activity",
        "ride",
        "map",
        "countdown"
      ],
      "styles": [
        "paper",
        "minimal",
        "playful"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#ECE6D8",
        "#FBF9F4",
        "#191B1F",
        "#F2551D",
        "#F5D548"
      ],
      "fonts": [
        "Bricolage Grotesque",
        "Martian Mono"
      ],
      "url": "https://designlounge.vercel.app/p/widget-ride-pickup",
      "brief": "https://designlounge.vercel.app/p/widget-ride-pickup.md",
      "demo": "https://designlounge.vercel.app/demo/widget-ride-pickup.html",
      "source": "usearticle"
    },
    {
      "id": "rolling-total-period-switch",
      "n": "388",
      "title": "Rolling total with a jelly period switch",
      "summary": "A spending screen where a lime pill squashes across Day to Year, the total and count roll digit by digit, bars spring, and the top-places list grows or shrinks.",
      "platform": "mobile-app",
      "type": "component",
      "category": "data",
      "tags": [
        "ticker",
        "numbers",
        "segmented",
        "finance",
        "spring"
      ],
      "styles": [
        "minimal",
        "kinetic",
        "swiss"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#EEF1F4",
        "#0F3B3A",
        "#0E1A26",
        "#C8F25A",
        "#FBFCFD"
      ],
      "fonts": [
        "Schibsted Grotesk",
        "DM Mono"
      ],
      "url": "https://designlounge.vercel.app/p/rolling-total-period-switch",
      "brief": "https://designlounge.vercel.app/p/rolling-total-period-switch.md",
      "demo": "https://designlounge.vercel.app/demo/rolling-total-period-switch.html",
      "source": "60fps"
    },
    {
      "id": "gallery-wall-frames",
      "n": "389",
      "title": "Salon wall planner",
      "summary": "A gallery wall of seven mixed frames over a sofa. Drag to rearrange on a 10 cm snap grid; frames swing on their nail when hung. Pick a frame finish.",
      "platform": "web",
      "type": "layout",
      "category": "gallery",
      "tags": [
        "gallery",
        "drag",
        "snap-grid",
        "frames",
        "planner"
      ],
      "styles": [
        "soft",
        "organic",
        "playful"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F1EDE4",
        "#B9C0A8",
        "#22251F",
        "#C4532E",
        "#8F5E4A"
      ],
      "fonts": [
        "Bricolage Grotesque",
        "Instrument Serif"
      ],
      "url": "https://designlounge.vercel.app/p/gallery-wall-frames",
      "brief": "https://designlounge.vercel.app/p/gallery-wall-frames.md",
      "demo": "https://designlounge.vercel.app/demo/gallery-wall-frames.html",
      "source": "60fps"
    },
    {
      "id": "saved-banner",
      "n": "390",
      "title": "Saved banner",
      "summary": "A confirmation that stays on the page after a save. One word at display size, one sentence, one button. Not a toast.",
      "platform": "web",
      "type": "pattern",
      "category": "feedback",
      "tags": [
        "feedback",
        "save",
        "banner",
        "confirmation"
      ],
      "styles": [
        "editorial",
        "paper"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F4EAD6",
        "#D6D8C2",
        "#1B5E3D",
        "#C8102E"
      ],
      "fonts": [
        "Noto Serif Devanagari",
        "Mukta"
      ],
      "url": "https://designlounge.vercel.app/p/saved-banner",
      "brief": "https://designlounge.vercel.app/p/saved-banner.md",
      "demo": "https://designlounge.vercel.app/demo/saved-banner.html",
      "source": "60fps"
    },
    {
      "id": "scan-page",
      "n": "391",
      "title": "Scan page",
      "summary": "A note sits on the desk. Scan runs a green beam down the sheet, then reports two lines read.",
      "platform": "web",
      "type": "animation",
      "category": "micro",
      "tags": [
        "scan",
        "beam",
        "note"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "subtle",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#1F4D3A"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/scan-page",
      "brief": "https://designlounge.vercel.app/p/scan-page.md",
      "demo": "https://designlounge.vercel.app/demo/scan-page.html",
      "source": "60fps"
    },
    {
      "id": "school-admissions-home",
      "n": "392",
      "title": "School admissions home",
      "summary": "A Bauhaus-leaning college admissions page: geometric campus drawing, key dates timeline, filterable programmes, fees with scholarships, FAQ, and an enquiry form.",
      "platform": "web",
      "type": "screen",
      "category": "landing",
      "tags": [
        "education",
        "school",
        "admissions",
        "timeline",
        "form"
      ],
      "styles": [
        "bauhaus",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F4EEE1",
        "#FBF8F1",
        "#1B2A4A",
        "#C8402A",
        "#E2A72E"
      ],
      "fonts": [
        "Libre Caslon Text",
        "Jost"
      ],
      "url": "https://designlounge.vercel.app/p/school-admissions-home",
      "brief": "https://designlounge.vercel.app/p/school-admissions-home.md",
      "demo": "https://designlounge.vercel.app/demo/school-admissions-home.html",
      "source": "linear"
    },
    {
      "id": "scroll-split",
      "n": "393",
      "title": "Scroll split",
      "summary": "Gate 4, Night book, and Month close start as one board. Scroll opens a 16px gap between them.",
      "platform": "web",
      "type": "animation",
      "category": "scroll",
      "tags": [
        "scroll",
        "split",
        "panels"
      ],
      "styles": [
        "editorial",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F4F1EA",
        "#1F4D3A",
        "#3A342C",
        "#FFFDF8"
      ],
      "fonts": [
        "Fraunces",
        "Public Sans"
      ],
      "url": "https://designlounge.vercel.app/p/scroll-split",
      "brief": "https://designlounge.vercel.app/p/scroll-split.md",
      "demo": "https://designlounge.vercel.app/demo/scroll-split.html",
      "source": "susan"
    },
    {
      "id": "scroll-velocity-type",
      "n": "394",
      "title": "Scroll velocity type",
      "summary": "Hold the line sits sticky. Scrolling opens its tracking up to 0.2em, then the tracking settles.",
      "platform": "web",
      "type": "animation",
      "category": "scroll",
      "tags": [
        "scroll",
        "tracking",
        "type"
      ],
      "styles": [
        "editorial",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F4F1EA",
        "#FFFDF8",
        "#1A1814",
        "#1F4D3A"
      ],
      "fonts": [
        "Fraunces",
        "Public Sans"
      ],
      "url": "https://designlounge.vercel.app/p/scroll-velocity-type",
      "brief": "https://designlounge.vercel.app/p/scroll-velocity-type.md",
      "demo": "https://designlounge.vercel.app/demo/scroll-velocity-type.html",
      "source": "susan"
    },
    {
      "id": "scroll-word-highlight",
      "n": "395",
      "title": "Scroll word highlight",
      "summary": "A 54px serif manifesto pinned for 340vh. Each word goes from 18% to 100% opacity in reading order as you scroll, and three key phrases draw a terracotta underline.",
      "platform": "web",
      "type": "animation",
      "category": "text-motion",
      "tags": [
        "scroll",
        "manifesto",
        "about",
        "words",
        "underline"
      ],
      "styles": [
        "editorial",
        "minimal",
        "paper"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F2EA",
        "#26231F",
        "#B4532F",
        "#E2DACB",
        "#FBF8F2"
      ],
      "fonts": [
        "Newsreader",
        "Instrument Sans"
      ],
      "url": "https://designlounge.vercel.app/p/scroll-word-highlight",
      "brief": "https://designlounge.vercel.app/p/scroll-word-highlight.md",
      "demo": "https://designlounge.vercel.app/demo/scroll-word-highlight.html",
      "source": "susan"
    },
    {
      "id": "scroll-zoom-portal",
      "n": "396",
      "title": "Scroll zoom portal",
      "summary": "Scroll zooms the camera into the hole of a giant geometric O until its yellow centre fills the screen and becomes the next section.",
      "platform": "web",
      "type": "animation",
      "category": "scroll",
      "tags": [
        "scroll",
        "zoom",
        "portal",
        "hero",
        "typography"
      ],
      "styles": [
        "bauhaus",
        "playful"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F2EBDD",
        "#1D3B8C",
        "#D9402B",
        "#F2B630"
      ],
      "fonts": [
        "League Spartan"
      ],
      "url": "https://designlounge.vercel.app/p/scroll-zoom-portal",
      "brief": "https://designlounge.vercel.app/p/scroll-zoom-portal.md",
      "demo": "https://designlounge.vercel.app/demo/scroll-zoom-portal.html",
      "source": "mindmarket"
    },
    {
      "id": "scroll-scrub-product-sequence",
      "n": "397",
      "title": "Scroll-scrubbed product teardown",
      "summary": "A pinned 400vh section where scroll turns a CSS wristwatch, explodes it into four labelled parts, and closes it again, with stepped captions and a rail.",
      "platform": "web",
      "type": "animation",
      "category": "scroll",
      "tags": [
        "scroll",
        "product",
        "pinned",
        "exploded",
        "watch"
      ],
      "styles": [
        "luxe",
        "dark"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#121214",
        "#1A1A1D",
        "#ECE8E1",
        "#B8955A",
        "#DCC08A"
      ],
      "fonts": [
        "Archivo",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/scroll-scrub-product-sequence",
      "brief": "https://designlounge.vercel.app/p/scroll-scrub-product-sequence.md",
      "demo": "https://designlounge.vercel.app/demo/scroll-scrub-product-sequence.html",
      "source": "gmx"
    },
    {
      "id": "navbar-section-tagline-pill",
      "n": "398",
      "title": "Section-tagline nav pill",
      "summary": "A dark floating nav pill whose centre tagline rolls to a new cheeky line per section, opens into a menu drawer, and sits beside a stack of collapsible cards.",
      "platform": "web",
      "type": "component",
      "category": "navbar",
      "tags": [
        "navbar",
        "menu",
        "sticky",
        "agency",
        "drawer"
      ],
      "styles": [
        "minimal",
        "industrial",
        "swiss"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#E4E6E1",
        "#111311",
        "#E9ECE6",
        "#C8F04A",
        "#8E958D"
      ],
      "fonts": [
        "Schibsted Grotesk",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/navbar-section-tagline-pill",
      "brief": "https://designlounge.vercel.app/p/navbar-section-tagline-pill.md",
      "demo": "https://designlounge.vercel.app/demo/navbar-section-tagline-pill.html",
      "source": "lamalama"
    },
    {
      "id": "select-field",
      "n": "399",
      "title": "Select field",
      "summary": "A closed list of roles. The field matches the other controls. The list uses the same radius. Empty submit puts the error under the field.",
      "platform": "web",
      "type": "component",
      "category": "inputs",
      "tags": [
        "select",
        "form",
        "listbox",
        "role"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#1F4D3A",
        "#9B2C2C"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/select-field",
      "brief": "https://designlounge.vercel.app/p/select-field.md",
      "demo": "https://designlounge.vercel.app/demo/select-field.html",
      "source": "dontboardme"
    },
    {
      "id": "selection-bar",
      "n": "400",
      "title": "Selection bar",
      "summary": "Checking loads raises a dark bar: the count, Clear, Export, and Archive. Zero checks hides it.",
      "platform": "web",
      "type": "component",
      "category": "data",
      "tags": [
        "table",
        "selection",
        "bulk"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#1F4D3A",
        "#E7F2EC"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/selection-bar",
      "brief": "https://designlounge.vercel.app/p/selection-bar.md",
      "demo": "https://designlounge.vercel.app/demo/selection-bar.html",
      "source": "60fps"
    },
    {
      "id": "dropdown-share-menu",
      "n": "401",
      "title": "Share menu with invites and QR",
      "summary": "A riso-print share popover: email chips, an access-level menu, copy link with a Copied state, four send targets and a QR switch, all anchored to Share.",
      "platform": "web",
      "type": "component",
      "category": "overlays",
      "tags": [
        "share",
        "popover",
        "menu",
        "invite",
        "chips",
        "qr"
      ],
      "styles": [
        "riso",
        "paper",
        "editorial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F1E8D6",
        "#FFFAF0",
        "#1F2A55",
        "#C8264F",
        "#1F6E5A"
      ],
      "fonts": [
        "Gloock",
        "Atkinson Hyperlegible"
      ],
      "url": "https://designlounge.vercel.app/p/dropdown-share-menu",
      "brief": "https://designlounge.vercel.app/p/dropdown-share-menu.md",
      "demo": "https://designlounge.vercel.app/demo/dropdown-share-menu.html",
      "source": "abel"
    },
    {
      "id": "button-sheen-pill",
      "n": "402",
      "title": "Sheen pill buttons",
      "summary": "Champagne pill buttons on green-black: a light sheen sweeps across on hover, a conic gradient border turns, and async pills go loading then success.",
      "platform": "web",
      "type": "component",
      "category": "buttons",
      "tags": [
        "buttons",
        "pill",
        "gradient-border",
        "loading",
        "success",
        "hover"
      ],
      "styles": [
        "luxe",
        "dark",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#0F1412",
        "#161C19",
        "#F4E2B8",
        "#D4B073",
        "#8FD3A8"
      ],
      "fonts": [
        "Italiana",
        "Urbanist"
      ],
      "url": "https://designlounge.vercel.app/p/button-sheen-pill",
      "brief": "https://designlounge.vercel.app/p/button-sheen-pill.md",
      "demo": "https://designlounge.vercel.app/demo/button-sheen-pill.html",
      "source": "wickret"
    },
    {
      "id": "shop-cart",
      "n": "403",
      "title": "Shop cart",
      "summary": "The bag total is 56px. Two lines start at Rs 5,600. Quantity changes the total. An empty bag replaces the total with a sentence.",
      "platform": "web",
      "type": "screen",
      "category": "ecommerce",
      "tags": [
        "shop",
        "cart",
        "quantity",
        "total"
      ],
      "styles": [
        "organic",
        "minimal"
      ],
      "motion": "none",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F3E6D4",
        "#FAEFE0",
        "#2A1B14",
        "#C45C2A"
      ],
      "fonts": [
        "Hanken Grotesk"
      ],
      "url": "https://designlounge.vercel.app/p/shop-cart",
      "brief": "https://designlounge.vercel.app/p/shop-cart.md",
      "demo": "https://designlounge.vercel.app/demo/shop-cart.html",
      "source": "abel"
    },
    {
      "id": "shop-collection",
      "n": "404",
      "title": "Shop collection",
      "summary": "Six clay pieces on a warm table. One shelf filter. Lamps is the empty shelf. The button opens the selected piece.",
      "platform": "web",
      "type": "screen",
      "category": "ecommerce",
      "tags": [
        "shop",
        "collection",
        "filter",
        "empty"
      ],
      "styles": [
        "organic",
        "minimal"
      ],
      "motion": "none",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F3E6D4",
        "#FAEFE0",
        "#2A1B14",
        "#C45C2A"
      ],
      "fonts": [
        "Young Serif",
        "Hanken Grotesk"
      ],
      "url": "https://designlounge.vercel.app/p/shop-collection",
      "brief": "https://designlounge.vercel.app/p/shop-collection.md",
      "demo": "https://designlounge.vercel.app/demo/shop-collection.html",
      "source": "abel"
    },
    {
      "id": "hamburger-drawer-accordion",
      "n": "405",
      "title": "Shop drawer with accordion sections",
      "summary": "An 86%-wide shop menu drawer from the left with search, one-open-at-a-time accordion sections, a promo row and account and help pinned at the bottom.",
      "platform": "mobile-web",
      "type": "component",
      "category": "navigation",
      "tags": [
        "navigation",
        "drawer",
        "accordion",
        "shop",
        "menu"
      ],
      "styles": [
        "soft",
        "organic",
        "editorial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#FBF7F1",
        "#FFFDF9",
        "#D8C2A3",
        "#3A2A1F",
        "#6E5A49"
      ],
      "fonts": [
        "Fraunces",
        "Source Sans 3"
      ],
      "url": "https://designlounge.vercel.app/p/hamburger-drawer-accordion",
      "brief": "https://designlounge.vercel.app/p/hamburger-drawer-accordion.md",
      "demo": "https://designlounge.vercel.app/demo/hamburger-drawer-accordion.html",
      "source": "60fps"
    },
    {
      "id": "shop-product",
      "n": "406",
      "title": "Shop product",
      "summary": "One bowl. The name is 56px. The price sits under it. One button puts it in the bag. The collection is a quiet back control.",
      "platform": "web",
      "type": "screen",
      "category": "ecommerce",
      "tags": [
        "shop",
        "product",
        "bag",
        "bowl"
      ],
      "styles": [
        "organic",
        "minimal"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F3E6D4",
        "#2A1B14",
        "#C45C2A",
        "#FFFDF8"
      ],
      "fonts": [
        "Young Serif",
        "Hanken Grotesk"
      ],
      "url": "https://designlounge.vercel.app/p/shop-product",
      "brief": "https://designlounge.vercel.app/p/shop-product.md",
      "demo": "https://designlounge.vercel.app/demo/shop-product.html",
      "source": "abel"
    },
    {
      "id": "shortcut-sheet",
      "n": "407",
      "title": "Shortcut sheet",
      "summary": "A 480px sheet of yard shortcuts. The row for the key you press picks up a green wash.",
      "platform": "web",
      "type": "component",
      "category": "utility",
      "tags": [
        "keyboard",
        "shortcuts",
        "sheet"
      ],
      "styles": [
        "minimal",
        "paper"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#1F4D3A",
        "#E7F2EC"
      ],
      "fonts": [
        "IBM Plex Sans",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/shortcut-sheet",
      "brief": "https://designlounge.vercel.app/p/shortcut-sheet.md",
      "demo": "https://designlounge.vercel.app/demo/shortcut-sheet.html",
      "source": "tailwind"
    },
    {
      "id": "shred-button",
      "n": "408",
      "title": "Shred button",
      "summary": "Shred draft cuts a note into strips that fall. Restore brings the note back.",
      "platform": "web",
      "type": "animation",
      "category": "buttons",
      "tags": [
        "delete",
        "shred",
        "paper"
      ],
      "styles": [
        "minimal",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#9B2C2C"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/shred-button",
      "brief": "https://designlounge.vercel.app/p/shred-button.md",
      "demo": "https://designlounge.vercel.app/demo/shred-button.html",
      "source": "wickret"
    },
    {
      "id": "sidebar-workspace-switcher",
      "n": "409",
      "title": "Sidebar with workspace switcher",
      "summary": "A 260px dark app sidebar: workspace switcher popover, ⌘K search, counted inbox items, a collapsing Projects group and a pinned user row with plan badge.",
      "platform": "web",
      "type": "component",
      "category": "navigation",
      "tags": [
        "sidebar",
        "navigation",
        "workspace",
        "saas",
        "keyboard"
      ],
      "styles": [
        "minimal",
        "dark"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#16171A",
        "#1C1D20",
        "#ECEBE7",
        "#8A867E",
        "#C5E86C"
      ],
      "fonts": [
        "Inter",
        "JetBrains Mono"
      ],
      "url": "https://designlounge.vercel.app/p/sidebar-workspace-switcher",
      "brief": "https://designlounge.vercel.app/p/sidebar-workspace-switcher.md",
      "demo": "https://designlounge.vercel.app/demo/sidebar-workspace-switcher.html",
      "source": "tailwind"
    },
    {
      "id": "hero-silk-ribbon-ticker",
      "n": "410",
      "title": "Silk ribbon hero with live ticker",
      "summary": "A warm-paper fintech hero: a 150-fibre canvas ribbon sweeps off the top right, a two-tone light headline, a live payout ticker and chevrons that grow into arrows.",
      "platform": "web",
      "type": "section",
      "category": "hero",
      "tags": [
        "hero",
        "fintech",
        "canvas",
        "gradient",
        "ticker"
      ],
      "styles": [
        "minimal",
        "editorial"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#FBFAF7",
        "#0F2421",
        "#55645F",
        "#0B5D5E",
        "#F07856"
      ],
      "fonts": [
        "Hanken Grotesk",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/hero-silk-ribbon-ticker",
      "brief": "https://designlounge.vercel.app/p/hero-silk-ribbon-ticker.md",
      "demo": "https://designlounge.vercel.app/demo/hero-silk-ribbon-ticker.html",
      "source": "stripe"
    },
    {
      "id": "footer-sitemap-columns",
      "n": "411",
      "title": "Sitemap columns footer",
      "summary": "A quiet charcoal product footer: CTA row, brand and newsletter, five link columns, status line, language and region selects. Columns fold into accordions under 640px.",
      "platform": "web",
      "type": "section",
      "category": "footer",
      "tags": [
        "footer",
        "sitemap",
        "newsletter",
        "accordion",
        "status",
        "saas"
      ],
      "styles": [
        "dark",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#1A1918",
        "#222120",
        "#ECE7DF",
        "#B0A99F",
        "#F0A63A"
      ],
      "fonts": [
        "Space Grotesk",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/footer-sitemap-columns",
      "brief": "https://designlounge.vercel.app/p/footer-sitemap-columns.md",
      "demo": "https://designlounge.vercel.app/demo/footer-sitemap-columns.html",
      "source": "linear"
    },
    {
      "id": "widget-sleep-score",
      "n": "412",
      "title": "Sleep score with scrubbable hypnogram",
      "summary": "A night-blue sleep card: a moon-cream score ring that fills to 84, four stage totals, and a stepped hypnogram you drag or arrow through to read the time and stage.",
      "platform": "web",
      "type": "component",
      "category": "widgets",
      "tags": [
        "widget",
        "sleep",
        "health",
        "hypnogram",
        "scrubber"
      ],
      "styles": [
        "soft",
        "dark",
        "editorial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#0E141C",
        "#151D28",
        "#F1E9D6",
        "#EAD9B0",
        "#5E86C2"
      ],
      "fonts": [
        "Petrona",
        "Mulish"
      ],
      "url": "https://designlounge.vercel.app/p/widget-sleep-score",
      "brief": "https://designlounge.vercel.app/p/widget-sleep-score.md",
      "demo": "https://designlounge.vercel.app/demo/widget-sleep-score.html",
      "source": "linear"
    },
    {
      "id": "slider-field",
      "n": "413",
      "title": "Slider field",
      "summary": "A dock arrival from 08:00 to 18:00. The thumb starts at 16:00. The value sits beside the label and updates as the thumb moves.",
      "platform": "web",
      "type": "component",
      "category": "inputs",
      "tags": [
        "slider",
        "range",
        "form",
        "time"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#161513",
        "#1F4D3A",
        "#CFC6B8"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/slider-field",
      "brief": "https://designlounge.vercel.app/p/slider-field.md",
      "demo": "https://designlounge.vercel.app/demo/slider-field.html",
      "source": "abel"
    },
    {
      "id": "smooth-scroll-inertia",
      "n": "414",
      "title": "Smooth scroll with inertia",
      "summary": "A dark agency page whose content glides behind the native scrollbar with lerp 0.1, frames skew up to 4deg with speed, and art drifts inside each frame.",
      "platform": "web",
      "type": "pattern",
      "category": "scroll",
      "tags": [
        "scroll",
        "smooth-scroll",
        "parallax",
        "agency",
        "inertia"
      ],
      "styles": [
        "editorial",
        "dark",
        "kinetic"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#0E0D0C",
        "#171513",
        "#EAE4D8",
        "#A8A195",
        "#EA3A22"
      ],
      "fonts": [
        "Inter Tight",
        "Instrument Serif"
      ],
      "url": "https://designlounge.vercel.app/p/smooth-scroll-inertia",
      "brief": "https://designlounge.vercel.app/p/smooth-scroll-inertia.md",
      "demo": "https://designlounge.vercel.app/demo/smooth-scroll-inertia.html",
      "source": "haunted"
    },
    {
      "id": "phone-feed-posts",
      "n": "415",
      "title": "Social feed with stories and posts",
      "summary": "A playful social home: unseen-ring stories, posts with CSS-drawn pictures and double-tap heart burst, counted actions, a clamped caption, a text post and a suggested-accounts carousel.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "media",
      "tags": [
        "feed",
        "social",
        "stories",
        "like",
        "carousel"
      ],
      "styles": [
        "playful",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#FAF7F2",
        "#FFFFFF",
        "#141210",
        "#FF4B36",
        "#FFE27A"
      ],
      "fonts": [
        "Fredoka",
        "Nunito"
      ],
      "url": "https://designlounge.vercel.app/p/phone-feed-posts",
      "brief": "https://designlounge.vercel.app/p/phone-feed-posts.md",
      "demo": "https://designlounge.vercel.app/demo/phone-feed-posts.html",
      "source": "bermawy"
    },
    {
      "id": "button-inset-soft",
      "n": "416",
      "title": "Soft inset clay buttons",
      "summary": "Neumorphic buttons, icon toggles, switches and a segmented control on a clay surface, with AA text, a hairline edge and colour as the second state signal.",
      "platform": "web",
      "type": "component",
      "category": "buttons",
      "tags": [
        "buttons",
        "neumorphic",
        "toggle",
        "switch",
        "segmented",
        "soft-ui"
      ],
      "styles": [
        "soft",
        "clay",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#E3CBB8",
        "#F7E8DB",
        "#B8957D",
        "#3A261B",
        "#8F3219"
      ],
      "fonts": [
        "Gloock",
        "Lexend"
      ],
      "url": "https://designlounge.vercel.app/p/button-inset-soft",
      "brief": "https://designlounge.vercel.app/p/button-inset-soft.md",
      "demo": "https://designlounge.vercel.app/demo/button-inset-soft.html",
      "source": "wickret"
    },
    {
      "id": "spend-list",
      "n": "417",
      "title": "Spend list",
      "summary": "A phone list of one month's lines. The amount left is the answer. All, out, and in filter the rows. Cash and a wallet would be different rows.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "dashboard",
      "tags": [
        "list",
        "finance",
        "phone",
        "nepal"
      ],
      "styles": [
        "editorial",
        "paper"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F4EAD6",
        "#FBF6EA",
        "#1C2744",
        "#C8102E"
      ],
      "fonts": [
        "Noto Serif Devanagari",
        "Mukta"
      ],
      "url": "https://designlounge.vercel.app/p/spend-list",
      "brief": "https://designlounge.vercel.app/p/spend-list.md",
      "demo": "https://designlounge.vercel.app/demo/spend-list.html",
      "source": "moremedia"
    },
    {
      "id": "loader-spinner-set",
      "n": "418",
      "title": "Spinner specimen set",
      "summary": "Eight pure-CSS spinners on a dark specimen sheet, sharing one size, colour and speed dial, each with a copy button for its class and settings.",
      "platform": "web",
      "type": "component",
      "category": "loaders",
      "tags": [
        "spinner",
        "loading",
        "css",
        "specimen",
        "copy"
      ],
      "styles": [
        "dark",
        "swiss",
        "kinetic"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#13120F",
        "#1A1814",
        "#ECE6D8",
        "#FF5B2E"
      ],
      "fonts": [
        "Unbounded",
        "Azeret Mono"
      ],
      "url": "https://designlounge.vercel.app/p/loader-spinner-set",
      "brief": "https://designlounge.vercel.app/p/loader-spinner-set.md",
      "demo": "https://designlounge.vercel.app/demo/loader-spinner-set.html",
      "source": "sibal"
    },
    {
      "id": "split-button",
      "n": "419",
      "title": "Split button",
      "summary": "One primary action and a 44px chevron that opens three related ways to send the same note.",
      "platform": "web",
      "type": "component",
      "category": "buttons",
      "tags": [
        "button",
        "menu",
        "send"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#1F4D3A",
        "#E7F2EC"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/split-button",
      "brief": "https://designlounge.vercel.app/p/split-button.md",
      "demo": "https://designlounge.vercel.app/demo/split-button.html",
      "source": "wickret"
    },
    {
      "id": "hero-split-ui-stack",
      "n": "420",
      "title": "Split hero with UI card stack",
      "summary": "A soft SaaS hero: copy on the left, three overlapping product cards on the right that settle in with a stagger and drift up to 6px with the pointer.",
      "platform": "web",
      "type": "section",
      "category": "hero",
      "tags": [
        "hero",
        "saas",
        "product",
        "cards",
        "parallax"
      ],
      "styles": [
        "soft",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#FBF8F2",
        "#FFFFFF",
        "#0F4C4A",
        "#F6D97A",
        "#16302E"
      ],
      "fonts": [
        "Hanken Grotesk"
      ],
      "url": "https://designlounge.vercel.app/p/hero-split-ui-stack",
      "brief": "https://designlounge.vercel.app/p/hero-split-ui-stack.md",
      "demo": "https://designlounge.vercel.app/demo/hero-split-ui-stack.html",
      "source": "stripe"
    },
    {
      "id": "navbar-split-centered-logo",
      "n": "421",
      "title": "Split navbar with centred wordmark",
      "summary": "Links split left and right of a centred serif wordmark over a dark hero. After 80px of scroll it turns into a paper bar and the wordmark shrinks 40px to 24px.",
      "platform": "web",
      "type": "component",
      "category": "navbar",
      "tags": [
        "navbar",
        "scroll",
        "sticky",
        "hotel",
        "restaurant"
      ],
      "styles": [
        "luxe",
        "editorial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#1D3A2F",
        "#F4EFE4",
        "#B08D4A",
        "#1B1F1C",
        "#F7F2E8"
      ],
      "fonts": [
        "Cormorant Garamond",
        "Jost"
      ],
      "url": "https://designlounge.vercel.app/p/navbar-split-centered-logo",
      "brief": "https://designlounge.vercel.app/p/navbar-split-centered-logo.md",
      "demo": "https://designlounge.vercel.app/demo/navbar-split-centered-logo.html",
      "source": "lamalama"
    },
    {
      "id": "split-flap-board",
      "n": "422",
      "title": "Split-flap board",
      "summary": "Three departure rows flip from a dot to the gate text. Replay runs the flaps again.",
      "platform": "web",
      "type": "animation",
      "category": "text-motion",
      "tags": [
        "text",
        "flap",
        "board"
      ],
      "styles": [
        "dark",
        "kinetic"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#141311",
        "#1C1B19",
        "#F4F1EA",
        "#D7B15E"
      ],
      "fonts": [
        "IBM Plex Sans",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/split-flap-board",
      "brief": "https://designlounge.vercel.app/p/split-flap-board.md",
      "demo": "https://designlounge.vercel.app/demo/split-flap-board.html",
      "source": "wickret"
    },
    {
      "id": "spotlight-command-bar",
      "n": "423",
      "title": "Spotlight search with preview",
      "summary": "A frosted, desktop-OS spotlight bar on ⌘K: fuzzy results grouped as top hit, apps, files and actions, inline calculator, and a live preview pane.",
      "platform": "web",
      "type": "component",
      "category": "navigation",
      "tags": [
        "search",
        "spotlight",
        "command",
        "keyboard",
        "preview"
      ],
      "styles": [
        "glass",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#16202B",
        "#F2F4F7",
        "#14181E",
        "#2F6FE4",
        "#9FB2BF"
      ],
      "fonts": [
        "Geologica",
        "Red Hat Mono"
      ],
      "url": "https://designlounge.vercel.app/p/spotlight-command-bar",
      "brief": "https://designlounge.vercel.app/p/spotlight-command-bar.md",
      "demo": "https://designlounge.vercel.app/demo/spotlight-command-bar.html",
      "source": "tailwind"
    },
    {
      "id": "spring-deck",
      "n": "424",
      "title": "Spring deck",
      "summary": "Three notes in a pile. Drag the front one, Gate 4. Release and it springs back.",
      "platform": "web",
      "type": "component",
      "category": "cards",
      "tags": [
        "deck",
        "drag",
        "spring"
      ],
      "styles": [
        "editorial",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F4F1EA",
        "#FFFDF8",
        "#1A1814",
        "#1F4D3A"
      ],
      "fonts": [
        "Fraunces",
        "Public Sans"
      ],
      "url": "https://designlounge.vercel.app/p/spring-deck",
      "brief": "https://designlounge.vercel.app/p/spring-deck.md",
      "demo": "https://designlounge.vercel.app/demo/spring-deck.html",
      "source": "bermawy"
    },
    {
      "id": "card-stamped-document",
      "n": "425",
      "title": "Stamped document",
      "summary": "An official permit on a desk blotter: a paperclipped receipt, a signature that draws itself, and an APPROVED rubber stamp that thumps down wherever you click.",
      "platform": "web",
      "type": "component",
      "category": "cards",
      "tags": [
        "cards",
        "document",
        "stamp",
        "signature",
        "approval"
      ],
      "styles": [
        "paper",
        "retro",
        "editorial"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#2E3A33",
        "#F2EBD9",
        "#2A2723",
        "#C0262D",
        "#1F3A8A"
      ],
      "fonts": [
        "Old Standard TT",
        "Special Elite"
      ],
      "url": "https://designlounge.vercel.app/p/card-stamped-document",
      "brief": "https://designlounge.vercel.app/p/card-stamped-document.md",
      "demo": "https://designlounge.vercel.app/demo/card-stamped-document.html",
      "source": "bermawy"
    },
    {
      "id": "stats-count-up-band",
      "n": "426",
      "title": "Stats count-up band",
      "summary": "A Halyard stats band on deep green: four serif figures count up once in 1.2s when seen, each with a mono label, a drawn sparkline or bars, and a source line.",
      "platform": "web",
      "type": "section",
      "category": "stats",
      "tags": [
        "stats",
        "numbers",
        "counter",
        "sparkline",
        "band"
      ],
      "styles": [
        "editorial",
        "dark"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#0F2A22",
        "#F2E8D5",
        "#D08452",
        "#93A395"
      ],
      "fonts": [
        "Fraunces",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/stats-count-up-band",
      "brief": "https://designlounge.vercel.app/p/stats-count-up-band.md",
      "demo": "https://designlounge.vercel.app/demo/stats-count-up-band.html",
      "source": "flist"
    },
    {
      "id": "status-badge",
      "n": "427",
      "title": "Status badge",
      "summary": "Four loads, four different states. Cleared, Held, Refused, and Booked each use their own wash and the ink that sits on that wash.",
      "platform": "web",
      "type": "component",
      "category": "feedback",
      "tags": [
        "badge",
        "status",
        "list"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#D6E8DC",
        "#F3E6D0"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/status-badge",
      "brief": "https://designlounge.vercel.app/p/status-badge.md",
      "demo": "https://designlounge.vercel.app/demo/status-badge.html",
      "source": "60fps"
    },
    {
      "id": "contact-project-brief-steps",
      "n": "428",
      "title": "Stepped project brief form",
      "summary": "Brutalist agency inquiry on cream: four steps on one page with chips, budget segments and timeline cards, per-step checks, a review screen and a success screen.",
      "platform": "web",
      "type": "section",
      "category": "contact",
      "tags": [
        "contact",
        "form",
        "steps",
        "agency",
        "validation"
      ],
      "styles": [
        "brutalist",
        "editorial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F2E8D5",
        "#FBF5EA",
        "#141210",
        "#E5432A",
        "#A8240F"
      ],
      "fonts": [
        "Big Shoulders Display",
        "Archivo"
      ],
      "url": "https://designlounge.vercel.app/p/contact-project-brief-steps",
      "brief": "https://designlounge.vercel.app/p/contact-project-brief-steps.md",
      "demo": "https://designlounge.vercel.app/demo/contact-project-brief-steps.html",
      "source": "dontboardme"
    },
    {
      "id": "widget-activity-rings",
      "n": "429",
      "title": "Sticker activity rings",
      "summary": "Three chunky concentric rings, Burn, Hustle and Rise, that spring-fill on load on a cream sticker card; tap a ring or pill for its detail and hourly bars.",
      "platform": "web",
      "type": "component",
      "category": "widgets",
      "tags": [
        "widget",
        "fitness",
        "rings",
        "progress",
        "health"
      ],
      "styles": [
        "playful",
        "bauhaus"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#FFD447",
        "#FFF7E4",
        "#1B1A17",
        "#FF5B3A",
        "#2F5BFF"
      ],
      "fonts": [
        "Bowlby One",
        "Outfit"
      ],
      "url": "https://designlounge.vercel.app/p/widget-activity-rings",
      "brief": "https://designlounge.vercel.app/p/widget-activity-rings.md",
      "demo": "https://designlounge.vercel.app/demo/widget-activity-rings.html",
      "source": "usearticle"
    },
    {
      "id": "card-sticky-notepad",
      "n": "430",
      "title": "Sticky notes board",
      "summary": "A retro board of sticky notes on dark felt: add notes in five colours, drag them with a tilt, peel a corner on hover, and drop on the bin to delete with undo.",
      "platform": "web",
      "type": "component",
      "category": "utility",
      "tags": [
        "notes",
        "board",
        "drag",
        "retro",
        "collaboration"
      ],
      "styles": [
        "playful",
        "paper",
        "dark"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#2D2B28",
        "#F6D365",
        "#A8DDB5",
        "#F5A08B",
        "#9CC9EE",
        "#E8553E"
      ],
      "fonts": [
        "Kalam",
        "Karla"
      ],
      "url": "https://designlounge.vercel.app/p/card-sticky-notepad",
      "brief": "https://designlounge.vercel.app/p/card-sticky-notepad.md",
      "demo": "https://designlounge.vercel.app/demo/card-sticky-notepad.html",
      "source": "tailwind"
    },
    {
      "id": "stretch-switch",
      "n": "431",
      "title": "Stretch switch",
      "summary": "Hold starts on. Press the thumb and it widens. Release and it slides. The label says on or off.",
      "platform": "web",
      "type": "component",
      "category": "inputs",
      "tags": [
        "switch",
        "hold",
        "thumb"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "subtle",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#1F4D3A"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/stretch-switch",
      "brief": "https://designlounge.vercel.app/p/stretch-switch.md",
      "demo": "https://designlounge.vercel.app/demo/stretch-switch.html",
      "source": "linear"
    },
    {
      "id": "background-sunrise-horizon",
      "n": "432",
      "title": "Sunrise horizon background",
      "summary": "Hard-edged sky and sea bands recolour through dawn while a sun disc rises over the horizon, driven by scroll, a time slider, or a slow autoplay.",
      "platform": "web",
      "type": "pattern",
      "category": "backgrounds",
      "tags": [
        "background",
        "sunrise",
        "gradient",
        "scroll",
        "editorial",
        "hero"
      ],
      "styles": [
        "editorial",
        "paper",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F5EFE4",
        "#9DB0C6",
        "#F9B071",
        "#F26B2A",
        "#221D18"
      ],
      "fonts": [
        "Newsreader",
        "Schibsted Grotesk"
      ],
      "url": "https://designlounge.vercel.app/p/background-sunrise-horizon",
      "brief": "https://designlounge.vercel.app/p/background-sunrise-horizon.md",
      "demo": "https://designlounge.vercel.app/demo/background-sunrise-horizon.html",
      "source": "susan"
    },
    {
      "id": "card-retail-price-tag",
      "n": "433",
      "title": "Swinging kraft hang tag",
      "summary": "A kraft-paper price tag on a green string that swings when you brush past it, with a struck price, a sale sticker, size chips, a hold button and a real EAN barcode.",
      "platform": "web",
      "type": "component",
      "category": "ecommerce",
      "tags": [
        "price",
        "tag",
        "retail",
        "sale",
        "sizes",
        "barcode"
      ],
      "styles": [
        "paper",
        "editorial",
        "retro"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#E3DED2",
        "#C9A47A",
        "#2A2017",
        "#8F2010",
        "#4F6B3A"
      ],
      "fonts": [
        "Bodoni Moda",
        "Courier Prime"
      ],
      "url": "https://designlounge.vercel.app/p/card-retail-price-tag",
      "brief": "https://designlounge.vercel.app/p/card-retail-price-tag.md",
      "demo": "https://designlounge.vercel.app/demo/card-retail-price-tag.html",
      "source": "abel"
    },
    {
      "id": "card-stacked-deck",
      "n": "434",
      "title": "Swipe deck with undo",
      "summary": "A stacked deck of trip cards: drag right to save, left to pass, arrow keys for both, undo flies the card back from the side it left.",
      "platform": "web",
      "type": "component",
      "category": "cards",
      "tags": [
        "deck",
        "swipe",
        "drag",
        "undo",
        "travel",
        "shortlist"
      ],
      "styles": [
        "editorial",
        "organic"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#22302A",
        "#F6EEDF",
        "#1F2A24",
        "#E2643A",
        "#EFE7D6"
      ],
      "fonts": [
        "Gloock",
        "Instrument Sans"
      ],
      "url": "https://designlounge.vercel.app/p/card-stacked-deck",
      "brief": "https://designlounge.vercel.app/p/card-stacked-deck.md",
      "demo": "https://designlounge.vercel.app/demo/card-stacked-deck.html",
      "source": "flist"
    },
    {
      "id": "swipe-pay-ember-bloom",
      "n": "435",
      "title": "Swipe to pay, ember bloom",
      "summary": "A dark phone checkout where you drag a knob across a track to pay, then the keypad drops away and an ember glow blooms behind a drawn check.",
      "platform": "mobile-app",
      "type": "component",
      "category": "micro",
      "tags": [
        "payments",
        "slider",
        "swipe",
        "success",
        "checkout"
      ],
      "styles": [
        "dark",
        "kinetic",
        "minimal"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#12100E",
        "#1C1916",
        "#F4EEE6",
        "#FF7A2F",
        "#FFB27A"
      ],
      "fonts": [
        "Manrope",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/swipe-pay-ember-bloom",
      "brief": "https://designlounge.vercel.app/p/swipe-pay-ember-bloom.md",
      "demo": "https://designlounge.vercel.app/demo/swipe-pay-ember-bloom.html",
      "source": "60fps"
    },
    {
      "id": "switch-row",
      "n": "436",
      "title": "Switch row",
      "summary": "One setting, Hold the gate. It starts off, the gate stays open, and turning it on says the gate is held.",
      "platform": "web",
      "type": "component",
      "category": "buttons",
      "tags": [
        "switch",
        "toggle",
        "setting",
        "gate"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "subtle",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#1F4D3A"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/switch-row",
      "brief": "https://designlounge.vercel.app/p/switch-row.md",
      "demo": "https://designlounge.vercel.app/demo/switch-row.html",
      "source": "wickret"
    },
    {
      "id": "tablet-pos-register",
      "n": "437",
      "title": "Tablet cafe register",
      "summary": "A 1180×820 cafe point of sale: category rail, big item tiles with a hold-for-options sheet, a live order ticket, and a Charge flow through Cash, Card or QR to Paid.",
      "platform": "tablet",
      "type": "screen",
      "category": "ecommerce",
      "tags": [
        "pos",
        "register",
        "cafe",
        "order",
        "checkout",
        "touch"
      ],
      "styles": [
        "soft",
        "organic"
      ],
      "motion": "subtle",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#EFE6D8",
        "#FAF5EC",
        "#3B2A20",
        "#1F6F68",
        "#D5E9E5"
      ],
      "fonts": [
        "Fraunces",
        "Source Sans 3"
      ],
      "url": "https://designlounge.vercel.app/p/tablet-pos-register",
      "brief": "https://designlounge.vercel.app/p/tablet-pos-register.md",
      "demo": "https://designlounge.vercel.app/demo/tablet-pos-register.html",
      "source": "abel"
    },
    {
      "id": "tablet-kiosk-checkin",
      "n": "438",
      "title": "Tablet kiosk check-in",
      "summary": "A front-desk check-in kiosk: tap-to-start attract screen, code or name search on a big keypad, confirm card, badge print with progress, and a 10s auto-reset.",
      "platform": "tablet",
      "type": "screen",
      "category": "utility",
      "tags": [
        "kiosk",
        "check-in",
        "keypad",
        "tablet",
        "reception"
      ],
      "styles": [
        "industrial",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#DDDBD6",
        "#EBEAE6",
        "#F5F4F1",
        "#111111",
        "#1D7039"
      ],
      "fonts": [
        "Barlow Condensed",
        "Barlow"
      ],
      "url": "https://designlounge.vercel.app/p/tablet-kiosk-checkin",
      "brief": "https://designlounge.vercel.app/p/tablet-kiosk-checkin.md",
      "demo": "https://designlounge.vercel.app/demo/tablet-kiosk-checkin.html",
      "source": "tailwind"
    },
    {
      "id": "tablet-notes-three-pane",
      "n": "439",
      "title": "Tablet notes in three panes",
      "summary": "A 1180×820 paper notes app: collapsible folders, a note list with red pencil selection, a serif editor with tickable checklist and quote, a floating format bar, and focus mode.",
      "platform": "tablet",
      "type": "screen",
      "category": "utility",
      "tags": [
        "notes",
        "editor",
        "three-pane",
        "writing",
        "focus-mode"
      ],
      "styles": [
        "paper",
        "editorial"
      ],
      "motion": "subtle",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F1E7",
        "#FBF8F1",
        "#23201B",
        "#B8402B",
        "#EFE8DA"
      ],
      "fonts": [
        "Literata",
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/tablet-notes-three-pane",
      "brief": "https://designlounge.vercel.app/p/tablet-notes-three-pane.md",
      "demo": "https://designlounge.vercel.app/demo/tablet-notes-three-pane.html",
      "source": "icm"
    },
    {
      "id": "tablet-cook-mode",
      "n": "440",
      "title": "Tablet recipe cook mode",
      "summary": "A 1180×820 kitchen cook mode: one step in 54px heavy type, tickable ingredients for that step, two timer chips that ring, swipe or big buttons between steps.",
      "platform": "tablet",
      "type": "screen",
      "category": "reading",
      "tags": [
        "recipe",
        "cooking",
        "timer",
        "steps",
        "kitchen",
        "swipe"
      ],
      "styles": [
        "playful",
        "organic"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F5ECD7",
        "#2E3820",
        "#C4381F",
        "#FBF5E6",
        "#ECE0C2"
      ],
      "fonts": [
        "Rubik"
      ],
      "url": "https://designlounge.vercel.app/p/tablet-cook-mode",
      "brief": "https://designlounge.vercel.app/p/tablet-cook-mode.md",
      "demo": "https://designlounge.vercel.app/demo/tablet-cook-mode.html",
      "source": "tailwind"
    },
    {
      "id": "tactile-chip-tabs-stretch",
      "n": "441",
      "title": "Tactile chip tabs with a stretch",
      "summary": "Clay-raised category chips that press down like keys, a dark well that stretches and springs to the chosen tab, and skeleton cards that hand over to listings.",
      "platform": "mobile-app",
      "type": "component",
      "category": "navigation",
      "tags": [
        "tabs",
        "chips",
        "press",
        "spring",
        "skeleton"
      ],
      "styles": [
        "clay",
        "soft",
        "organic"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#E6E1D6",
        "#F3EFE6",
        "#2B2A26",
        "#CBC3B3",
        "#C2412D"
      ],
      "fonts": [
        "Bricolage Grotesque",
        "Instrument Serif"
      ],
      "url": "https://designlounge.vercel.app/p/tactile-chip-tabs-stretch",
      "brief": "https://designlounge.vercel.app/p/tactile-chip-tabs-stretch.md",
      "demo": "https://designlounge.vercel.app/demo/tactile-chip-tabs-stretch.html",
      "source": "60fps"
    },
    {
      "id": "table-tasks-inline",
      "n": "442",
      "title": "Tasks table with inline editing",
      "summary": "A playful sprint table grouped by status: rename in place, swap assignees, nudge due dates, cycle priority, and drag rows between groups.",
      "platform": "web",
      "type": "component",
      "category": "data",
      "tags": [
        "table",
        "tasks",
        "drag",
        "inline-edit",
        "productivity"
      ],
      "styles": [
        "playful",
        "brutalist"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#FFF1C9",
        "#FFFDF4",
        "#1F1A2E",
        "#FF5A36",
        "#FFD34D",
        "#9FE3C4"
      ],
      "fonts": [
        "Bricolage Grotesque",
        "DM Mono"
      ],
      "url": "https://designlounge.vercel.app/p/table-tasks-inline",
      "brief": "https://designlounge.vercel.app/p/table-tasks-inline.md",
      "demo": "https://designlounge.vercel.app/demo/table-tasks-inline.html",
      "source": "flist"
    },
    {
      "id": "settings-team-members",
      "n": "443",
      "title": "Team members settings",
      "summary": "A Swiss members page: email chip invites, a seat meter, a table with inline role changes and an undo toast, pending invites, and a confirm before remove.",
      "platform": "web",
      "type": "screen",
      "category": "settings",
      "tags": [
        "settings",
        "team",
        "members",
        "invite",
        "roles",
        "table"
      ],
      "styles": [
        "swiss",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#FFFFFF",
        "#000000",
        "#F5F5F5",
        "#E6E6E6",
        "#D7261E"
      ],
      "fonts": [
        "Inter"
      ],
      "url": "https://designlounge.vercel.app/p/settings-team-members",
      "brief": "https://designlounge.vercel.app/p/settings-team-members.md",
      "demo": "https://designlounge.vercel.app/demo/settings-team-members.html",
      "source": "abel"
    },
    {
      "id": "crypto-exchange-trade",
      "n": "444",
      "title": "Terminal crypto trading screen",
      "summary": "A dense near-black spot trading screen: pair header, SVG candles with a crosshair, a live order book that ticks every 800ms, trades, and a buy/sell panel.",
      "platform": "web",
      "type": "screen",
      "category": "dashboard",
      "tags": [
        "trading",
        "crypto",
        "chart",
        "order-book",
        "finance"
      ],
      "styles": [
        "terminal",
        "dark"
      ],
      "motion": "subtle",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#0A0B0A",
        "#0F1110",
        "#D9DCD6",
        "#36C27F",
        "#F0616D",
        "#F5A524"
      ],
      "fonts": [
        "JetBrains Mono"
      ],
      "url": "https://designlounge.vercel.app/p/crypto-exchange-trade",
      "brief": "https://designlounge.vercel.app/p/crypto-exchange-trade.md",
      "demo": "https://designlounge.vercel.app/demo/crypto-exchange-trade.html",
      "source": "stripe"
    },
    {
      "id": "background-terrazzo",
      "n": "445",
      "title": "Terrazzo background",
      "summary": "A seeded SVG terrazzo floor of irregular stone chips in three depth layers, with a reshuffle button, three stone palettes and gentle pointer parallax.",
      "platform": "web",
      "type": "pattern",
      "category": "backgrounds",
      "tags": [
        "background",
        "terrazzo",
        "svg",
        "generative",
        "parallax",
        "hero"
      ],
      "styles": [
        "organic",
        "minimal",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#EFE6D8",
        "#B4532A",
        "#D9A441",
        "#8A9A7B",
        "#2E2A26"
      ],
      "fonts": [
        "Young Serif",
        "Figtree"
      ],
      "url": "https://designlounge.vercel.app/p/background-terrazzo",
      "brief": "https://designlounge.vercel.app/p/background-terrazzo.md",
      "demo": "https://designlounge.vercel.app/demo/background-terrazzo.html",
      "source": "susan"
    },
    {
      "id": "testimonials-masonry-wall",
      "n": "446",
      "title": "Testimonials masonry wall",
      "summary": "A riso-paper wall of twelve Pressroom letters in three CSS columns: one coral featured quote, marked phrases, post cards, and a fade with Show more.",
      "platform": "web",
      "type": "section",
      "category": "testimonials",
      "tags": [
        "testimonials",
        "masonry",
        "quotes",
        "riso"
      ],
      "styles": [
        "paper",
        "riso",
        "editorial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F2EAD9",
        "#16130F",
        "#FF5B4A",
        "#FBF6EA"
      ],
      "fonts": [
        "Instrument Serif",
        "DM Mono"
      ],
      "url": "https://designlounge.vercel.app/p/testimonials-masonry-wall",
      "brief": "https://designlounge.vercel.app/p/testimonials-masonry-wall.md",
      "demo": "https://designlounge.vercel.app/demo/testimonials-masonry-wall.html",
      "source": "dragone"
    },
    {
      "id": "testimonials-metric-tabs",
      "n": "447",
      "title": "Testimonials metric tabs",
      "summary": "Four customer wordmark tabs for Keel billing: a 112px mono metric, a quote, a person, and a case link. Auto-advances every 7s with a mint progress line.",
      "platform": "web",
      "type": "section",
      "category": "testimonials",
      "tags": [
        "testimonials",
        "tabs",
        "case-study",
        "metrics"
      ],
      "styles": [
        "dark",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#0C1222",
        "#111A2E",
        "#F3F5F9",
        "#5EE3B1"
      ],
      "fonts": [
        "Geist",
        "Geist Mono"
      ],
      "url": "https://designlounge.vercel.app/p/testimonials-metric-tabs",
      "brief": "https://designlounge.vercel.app/p/testimonials-metric-tabs.md",
      "demo": "https://designlounge.vercel.app/demo/testimonials-metric-tabs.html",
      "source": "linear"
    },
    {
      "id": "text-field",
      "n": "448",
      "title": "Text field",
      "summary": "Three account fields: a name with a hint, a gate code in error until it is four digits, and a badge number that cannot be edited.",
      "platform": "web",
      "type": "component",
      "category": "inputs",
      "tags": [
        "field",
        "form",
        "error",
        "disabled"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#1F4D3A",
        "#9B2C2C"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/text-field",
      "brief": "https://designlounge.vercel.app/p/text-field.md",
      "demo": "https://designlounge.vercel.app/demo/text-field.html",
      "source": "mindmarket"
    },
    {
      "id": "loader-text-shimmer",
      "n": "449",
      "title": "Text loaders for AI states",
      "summary": "Four text-only loaders for slow answers: a shimmer sweep, a thinking ellipsis with honest seconds, a typewriter step cycle, and a scramble that resolves.",
      "platform": "web",
      "type": "component",
      "category": "loaders",
      "tags": [
        "loading",
        "text",
        "ai",
        "shimmer",
        "typewriter",
        "status"
      ],
      "styles": [
        "editorial",
        "paper",
        "minimal"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#ECEEE6",
        "#F6F7F1",
        "#1E2A22",
        "#B5562A"
      ],
      "fonts": [
        "Spectral",
        "Spline Sans Mono"
      ],
      "url": "https://designlounge.vercel.app/p/loader-text-shimmer",
      "brief": "https://designlounge.vercel.app/p/loader-text-shimmer.md",
      "demo": "https://designlounge.vercel.app/demo/loader-text-shimmer.html",
      "source": "60fps"
    },
    {
      "id": "text-mask-scroll-reveal",
      "n": "450",
      "title": "Text mask scroll reveal",
      "summary": "A 26vw black-weight word cuts a window into a moving CSS sunset. Scrolling scales the word into its I until the scene fills the screen and the next headline lands.",
      "platform": "web",
      "type": "animation",
      "category": "scroll",
      "tags": [
        "scroll",
        "mask",
        "wordmark",
        "zoom",
        "hero"
      ],
      "styles": [
        "kinetic",
        "dark",
        "brutalist"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#000000",
        "#FF5B14",
        "#FFB21E",
        "#B3122E",
        "#F4EDE4"
      ],
      "fonts": [
        "Archivo",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/text-mask-scroll-reveal",
      "brief": "https://designlounge.vercel.app/p/text-mask-scroll-reveal.md",
      "demo": "https://designlounge.vercel.app/demo/text-mask-scroll-reveal.html",
      "source": "haunted"
    },
    {
      "id": "textarea-field",
      "n": "451",
      "title": "Textarea field",
      "summary": "A dock note with the hint under it and a count of 160. Past 160 the hint yields to the error and the border turns danger.",
      "platform": "web",
      "type": "component",
      "category": "inputs",
      "tags": [
        "textarea",
        "field",
        "note",
        "count"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#9B2C2C"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/textarea-field",
      "brief": "https://designlounge.vercel.app/p/textarea-field.md",
      "demo": "https://designlounge.vercel.app/demo/textarea-field.html",
      "source": "tailwind"
    },
    {
      "id": "features-thread-to-issue-board",
      "n": "452",
      "title": "Thread to issue board",
      "summary": "A dark intake section: a chat thread floats over a faded kanban board; sending an @mention makes a bot file two issues that drop into Todo, linked back to the reply.",
      "platform": "web",
      "type": "section",
      "category": "features",
      "tags": [
        "features",
        "kanban",
        "chat",
        "agent",
        "dark"
      ],
      "styles": [
        "dark",
        "minimal"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#0D0F12",
        "#15181D",
        "#EEF0F3",
        "#A3ABB7",
        "#5BE3B0"
      ],
      "fonts": [
        "Onest",
        "Fragment Mono"
      ],
      "url": "https://designlounge.vercel.app/p/features-thread-to-issue-board",
      "brief": "https://designlounge.vercel.app/p/features-thread-to-issue-board.md",
      "demo": "https://designlounge.vercel.app/demo/features-thread-to-issue-board.html",
      "source": "linear"
    },
    {
      "id": "social-thread-card",
      "n": "453",
      "title": "Threaded conversation card",
      "summary": "A playful thread card: parent post with a drawn thread line through replies, a hooked expand control, a quote post, and repost or quote from any post.",
      "platform": "web",
      "type": "component",
      "category": "social",
      "tags": [
        "social",
        "thread",
        "replies",
        "quote",
        "comments"
      ],
      "styles": [
        "playful",
        "brutalist"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#FFE38A",
        "#FFFAF0",
        "#1D1638",
        "#D0391F",
        "#6FD3A8"
      ],
      "fonts": [
        "Bricolage Grotesque",
        "DM Mono"
      ],
      "url": "https://designlounge.vercel.app/p/social-thread-card",
      "brief": "https://designlounge.vercel.app/p/social-thread-card.md",
      "demo": "https://designlounge.vercel.app/demo/social-thread-card.html",
      "source": "icm"
    },
    {
      "id": "stage-passes-compare",
      "n": "454",
      "title": "Three passes, one frame",
      "summary": "A method section: one portrait frame shown as sketch, light and motion passes, with timed tabs and a drag line that compares each pass with the one before.",
      "platform": "web",
      "type": "section",
      "category": "features",
      "tags": [
        "process",
        "compare",
        "tabs",
        "before-after",
        "studio"
      ],
      "styles": [
        "paper",
        "editorial",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#ECE7DC",
        "#F6F2EA",
        "#1D211C",
        "#2F6B4F",
        "#E3B45A"
      ],
      "fonts": [
        "Hanken Grotesk",
        "Literata"
      ],
      "url": "https://designlounge.vercel.app/p/stage-passes-compare",
      "brief": "https://designlounge.vercel.app/p/stage-passes-compare.md",
      "demo": "https://designlounge.vercel.app/demo/stage-passes-compare.html",
      "source": "stripe"
    },
    {
      "id": "phone-sign-up-steps",
      "n": "455",
      "title": "Three-step phone sign-up",
      "summary": "A soft, cream-and-green phone sign-up in three sliding steps: name and email, a password with live ticking rules, then pick 3+ interests as chips.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "auth",
      "tags": [
        "auth",
        "sign-up",
        "stepper",
        "form",
        "chips"
      ],
      "styles": [
        "soft",
        "material",
        "organic"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F0E3",
        "#FFFBF2",
        "#1F4D3A",
        "#DCE8D9",
        "#A63D2A"
      ],
      "fonts": [
        "Nunito"
      ],
      "url": "https://designlounge.vercel.app/p/phone-sign-up-steps",
      "brief": "https://designlounge.vercel.app/p/phone-sign-up-steps.md",
      "demo": "https://designlounge.vercel.app/demo/phone-sign-up-steps.html",
      "source": "igloo"
    },
    {
      "id": "stats-tilted-card-stack",
      "n": "456",
      "title": "Tilted stat card stack",
      "summary": "A pinned stats section: big headline left, four coloured stat cards that rise tilted, land on a 44px peek, count up, and pile as you scroll.",
      "platform": "web",
      "type": "section",
      "category": "stats",
      "tags": [
        "stats",
        "scroll",
        "sticky",
        "cards",
        "count-up",
        "agency"
      ],
      "styles": [
        "playful",
        "soft"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#E8EEF2",
        "#13202B",
        "#E3A21A",
        "#1F7A6D",
        "#C2452D",
        "#FFFFFF"
      ],
      "fonts": [
        "Schibsted Grotesk"
      ],
      "url": "https://designlounge.vercel.app/p/stats-tilted-card-stack",
      "brief": "https://designlounge.vercel.app/p/stats-tilted-card-stack.md",
      "demo": "https://designlounge.vercel.app/demo/stats-tilted-card-stack.html",
      "source": "mindmarket"
    },
    {
      "id": "time-field",
      "n": "457",
      "title": "Time field",
      "summary": "Hour and minute for when Gate 4 closes. It starts at 18:00, the same time as the dock note, and rejects an hour or minute that cannot exist.",
      "platform": "web",
      "type": "component",
      "category": "pickers",
      "tags": [
        "time",
        "field",
        "hour",
        "gate"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#9B2C2C"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/time-field",
      "brief": "https://designlounge.vercel.app/p/time-field.md",
      "demo": "https://designlounge.vercel.app/demo/time-field.html",
      "source": "usearticle"
    },
    {
      "id": "token-field",
      "n": "458",
      "title": "Token field",
      "summary": "Rice and Oil start on the truck. Enter adds a load once. A remove control drops one. Backspace on an empty field drops the last.",
      "platform": "web",
      "type": "component",
      "category": "inputs",
      "tags": [
        "tokens",
        "chips",
        "tags",
        "field"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#F0EBE3"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/token-field",
      "brief": "https://designlounge.vercel.app/p/token-field.md",
      "demo": "https://designlounge.vercel.app/demo/token-field.html",
      "source": "mindmarket"
    },
    {
      "id": "widget-pomodoro",
      "n": "459",
      "title": "Tomato pomodoro timer widget",
      "summary": "A focus timer card where the countdown ring is the tomato: start, pause, skip, reset, focus and break modes, and four session dots.",
      "platform": "web",
      "type": "component",
      "category": "widgets",
      "tags": [
        "timer",
        "pomodoro",
        "focus",
        "productivity",
        "ring"
      ],
      "styles": [
        "playful",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#FFE9D6",
        "#FFF8EF",
        "#3A1610",
        "#E8442E",
        "#2F7D4F"
      ],
      "fonts": [
        "Rammetto One",
        "Nunito"
      ],
      "url": "https://designlounge.vercel.app/p/widget-pomodoro",
      "brief": "https://designlounge.vercel.app/p/widget-pomodoro.md",
      "demo": "https://designlounge.vercel.app/demo/widget-pomodoro.html",
      "source": "stripe"
    },
    {
      "id": "tooltip",
      "n": "460",
      "title": "Tooltip",
      "summary": "Hold describes itself: the tip says the load stays on the dock until 18:00. It starts open, and it follows hover and focus.",
      "platform": "web",
      "type": "component",
      "category": "overlays",
      "tags": [
        "tooltip",
        "hint",
        "hover",
        "focus"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#FFFDF8"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/tooltip",
      "brief": "https://designlounge.vercel.app/p/tooltip.md",
      "demo": "https://designlounge.vercel.app/demo/tooltip.html",
      "source": "linear"
    },
    {
      "id": "trail-type",
      "n": "461",
      "title": "Trail type",
      "summary": "HOLD is an outline. Drag it and up to eight outlines stay behind. Release clears them.",
      "platform": "web",
      "type": "animation",
      "category": "text-motion",
      "tags": [
        "type",
        "drag",
        "trail"
      ],
      "styles": [
        "dark",
        "kinetic"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#141311",
        "#1C1B19",
        "#F4F1EA",
        "#D7B15E"
      ],
      "fonts": [
        "Fraunces"
      ],
      "url": "https://designlounge.vercel.app/p/trail-type",
      "brief": "https://designlounge.vercel.app/p/trail-type.md",
      "demo": "https://designlounge.vercel.app/demo/trail-type.html",
      "source": "wickret"
    },
    {
      "id": "table-transactions-ledger",
      "n": "462",
      "title": "Transactions ledger",
      "summary": "A bank ledger in serif and mono: day group headers, merchant icons, decimal-aligned signed amounts, a running balance, search and a direction filter.",
      "platform": "web",
      "type": "component",
      "category": "data",
      "tags": [
        "table",
        "finance",
        "ledger",
        "search",
        "banking"
      ],
      "styles": [
        "editorial",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#E7E3D8",
        "#F7F5EF",
        "#12332A",
        "#13201C",
        "#1C6A44",
        "#8A6A2F"
      ],
      "fonts": [
        "Spectral",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/table-transactions-ledger",
      "brief": "https://designlounge.vercel.app/p/table-transactions-ledger.md",
      "demo": "https://designlounge.vercel.app/demo/table-transactions-ledger.html",
      "source": "60fps"
    },
    {
      "id": "tree-nav",
      "n": "463",
      "title": "Tree",
      "summary": "A place tree. Dispatch and Asar start open, Gate 4 is current, and Bhadra and People start closed. A click opens a branch or moves the current page.",
      "platform": "web",
      "type": "component",
      "category": "navigation",
      "tags": [
        "tree",
        "navigation",
        "nested",
        "folders"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "none",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#161513",
        "#E7F2EC"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/tree-nav",
      "brief": "https://designlounge.vercel.app/p/tree-nav.md",
      "demo": "https://designlounge.vercel.app/demo/tree-nav.html",
      "source": "tailwind"
    },
    {
      "id": "input-otp-underline",
      "n": "464",
      "title": "Underline OTP input",
      "summary": "A six-digit verification code on hairline underlines: paste fills all six, typing auto-advances, a wrong code shakes coral, a resend countdown ticks, success turns gold.",
      "platform": "web",
      "type": "component",
      "category": "inputs",
      "tags": [
        "otp",
        "verification",
        "code",
        "auth",
        "form"
      ],
      "styles": [
        "luxe",
        "editorial",
        "dark"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#0E2622",
        "#123029",
        "#F2EBDD",
        "#D9B26F",
        "#F08A6C"
      ],
      "fonts": [
        "Prata",
        "Albert Sans"
      ],
      "url": "https://designlounge.vercel.app/p/input-otp-underline",
      "brief": "https://designlounge.vercel.app/p/input-otp-underline.md",
      "demo": "https://designlounge.vercel.app/demo/input-otp-underline.html",
      "source": "linear"
    },
    {
      "id": "undo-toast",
      "n": "465",
      "title": "Undo toast",
      "summary": "Archiving a yard note raises a dark toast with Undo. It leaves after six seconds unless undone.",
      "platform": "web",
      "type": "component",
      "category": "feedback",
      "tags": [
        "toast",
        "undo",
        "archive"
      ],
      "styles": [
        "minimal",
        "dark"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#161513",
        "#FFFDF8",
        "#1F4D3A"
      ],
      "fonts": [
        "IBM Plex Sans"
      ],
      "url": "https://designlounge.vercel.app/p/undo-toast",
      "brief": "https://designlounge.vercel.app/p/undo-toast.md",
      "demo": "https://designlounge.vercel.app/demo/undo-toast.html",
      "source": "60fps"
    },
    {
      "id": "pricing-usage-slider",
      "n": "466",
      "title": "Usage pricing slider",
      "summary": "Usage pricing on white: a log-scale event slider with snapping ticks, live prices that count to the new value, a moving recommended border and a sales state past 10M.",
      "platform": "web",
      "type": "section",
      "category": "pricing",
      "tags": [
        "pricing",
        "slider",
        "usage",
        "saas",
        "calculator"
      ],
      "styles": [
        "swiss",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#FFFFFF",
        "#0B0B0C",
        "#1F4FE0",
        "#DCDCDF",
        "#F4F4F5"
      ],
      "fonts": [
        "Inter Tight",
        "JetBrains Mono"
      ],
      "url": "https://designlounge.vercel.app/p/pricing-usage-slider",
      "brief": "https://designlounge.vercel.app/p/pricing-usage-slider.md",
      "demo": "https://designlounge.vercel.app/demo/pricing-usage-slider.html",
      "source": "abel"
    },
    {
      "id": "features-vertical-label-columns",
      "n": "467",
      "title": "Vertical label service columns",
      "summary": "Four tall columns with rotated service names. Hover, click or Enter widens one into a list of services with arrows; the others stay as labels.",
      "platform": "web",
      "type": "section",
      "category": "features",
      "tags": [
        "features",
        "services",
        "accordion",
        "agency",
        "columns"
      ],
      "styles": [
        "swiss",
        "minimal",
        "editorial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#E4E9E2",
        "#13201A",
        "#D4DDD2",
        "#BFCABD",
        "#D8432A"
      ],
      "fonts": [
        "Bricolage Grotesque",
        "JetBrains Mono"
      ],
      "url": "https://designlounge.vercel.app/p/features-vertical-label-columns",
      "brief": "https://designlounge.vercel.app/p/features-vertical-label-columns.md",
      "demo": "https://designlounge.vercel.app/demo/features-vertical-label-columns.html",
      "source": "moremedia"
    },
    {
      "id": "navbar-vertical-rail",
      "n": "468",
      "title": "Vertical rail navbar",
      "summary": "A fixed 88px left rail for a studio site: rotated wordmark, four numbered links with a pink block that follows the section in view, local time at the foot.",
      "platform": "web",
      "type": "component",
      "category": "navbar",
      "tags": [
        "navbar",
        "rail",
        "portfolio",
        "scrollspy",
        "studio"
      ],
      "styles": [
        "brutalist",
        "riso"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F2EBDD",
        "#141414",
        "#FF48B0",
        "#E9E0CD"
      ],
      "fonts": [
        "Big Shoulders Display",
        "Space Mono"
      ],
      "url": "https://designlounge.vercel.app/p/navbar-vertical-rail",
      "brief": "https://designlounge.vercel.app/p/navbar-vertical-rail.md",
      "demo": "https://designlounge.vercel.app/demo/navbar-vertical-rail.html",
      "source": "lamalama"
    },
    {
      "id": "widget-now-playing",
      "n": "469",
      "title": "Vinyl now-playing widget",
      "summary": "A 70s now-playing widget in small and medium sizes: CSS-only album art, a record that spins while playing, a scrubber, and equaliser bars.",
      "platform": "web",
      "type": "component",
      "category": "widgets",
      "tags": [
        "widget",
        "music",
        "player",
        "vinyl",
        "scrubber"
      ],
      "styles": [
        "retro",
        "playful"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#E9DCC0",
        "#2B1D14",
        "#F3E7CF",
        "#D9541E",
        "#E3A92B"
      ],
      "fonts": [
        "Shrikhand",
        "Space Mono"
      ],
      "url": "https://designlounge.vercel.app/p/widget-now-playing",
      "brief": "https://designlounge.vercel.app/p/widget-now-playing.md",
      "demo": "https://designlounge.vercel.app/demo/widget-now-playing.html",
      "source": "icm"
    },
    {
      "id": "phone-wallet-cards",
      "n": "470",
      "title": "Wallet card stack",
      "summary": "Four passes stacked with a 56px peek. Tap one to lift it out with balance, transactions or a code, then hold near the reader for a pulse and a tick.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "ecommerce",
      "tags": [
        "wallet",
        "cards",
        "payments",
        "passes",
        "ios",
        "dark"
      ],
      "styles": [
        "luxe",
        "dark",
        "minimal"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#0A0A0B",
        "#151517",
        "#D9C8A3",
        "#163F3C",
        "#4E1D1A"
      ],
      "fonts": [
        "Archivo",
        "JetBrains Mono"
      ],
      "url": "https://designlounge.vercel.app/p/phone-wallet-cards",
      "brief": "https://designlounge.vercel.app/p/phone-wallet-cards.md",
      "demo": "https://designlounge.vercel.app/demo/phone-wallet-cards.html",
      "source": "abel"
    },
    {
      "id": "mockup-watch-faces",
      "n": "471",
      "title": "Watch crown mockup",
      "summary": "A CSS smartwatch with strap, crown and side button; turn the crown (drag, scroll, arrows) to roll through four live faces with snap and rubber-banding.",
      "platform": "web",
      "type": "component",
      "category": "mockups",
      "tags": [
        "mockup",
        "watch",
        "wearable",
        "crown",
        "device"
      ],
      "styles": [
        "dark",
        "industrial",
        "kinetic"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#141912",
        "#ECEFE4",
        "#FF6A2B",
        "#5D6B3A",
        "#D9D4C7"
      ],
      "fonts": [
        "Big Shoulders Display",
        "DM Mono"
      ],
      "url": "https://designlounge.vercel.app/p/mockup-watch-faces",
      "brief": "https://designlounge.vercel.app/p/mockup-watch-faces.md",
      "demo": "https://designlounge.vercel.app/demo/mockup-watch-faces.html",
      "source": "usearticle"
    },
    {
      "id": "widget-weather-glance",
      "n": "472",
      "title": "Weather glance widget, three sizes",
      "summary": "One frosted weather widget that morphs between small, medium and large, with an animated SVG condition scene and a tappable hourly strip.",
      "platform": "web",
      "type": "component",
      "category": "widgets",
      "tags": [
        "weather",
        "widget",
        "forecast",
        "sizes",
        "hourly"
      ],
      "styles": [
        "glass",
        "soft"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#14243D",
        "#2C5568",
        "#F3B27F",
        "#F7F2EA",
        "#9FD0DF"
      ],
      "fonts": [
        "Outfit",
        "Instrument Serif"
      ],
      "url": "https://designlounge.vercel.app/p/widget-weather-glance",
      "brief": "https://designlounge.vercel.app/p/widget-weather-glance.md",
      "demo": "https://designlounge.vercel.app/demo/widget-weather-glance.html",
      "source": "mindmarket"
    },
    {
      "id": "webgl-shader-hero",
      "n": "473",
      "title": "WebGL shader hero",
      "summary": "A hero whose background is a raw WebGL fragment shader: slow domain-warped noise in navy, glacier blue and ice, nudged by the pointer, with a CSS fallback.",
      "platform": "web",
      "type": "section",
      "category": "backgrounds",
      "tags": [
        "webgl",
        "shader",
        "hero",
        "noise",
        "background"
      ],
      "styles": [
        "dark",
        "minimal"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#06102A",
        "#0F2B4F",
        "#4F8FBF",
        "#D8EAF5",
        "#F4F9FC"
      ],
      "fonts": [
        "Instrument Sans",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/webgl-shader-hero",
      "brief": "https://designlounge.vercel.app/p/webgl-shader-hero.md",
      "demo": "https://designlounge.vercel.app/demo/webgl-shader-hero.html",
      "source": "lamalama"
    },
    {
      "id": "week-schedule",
      "n": "474",
      "title": "Week schedule",
      "summary": "Seven days for the week of 28 Sep. Tuesday starts pressed. Choosing a block rewrites the line under the title.",
      "platform": "web",
      "type": "section",
      "category": "utility",
      "tags": [
        "calendar",
        "week",
        "schedule"
      ],
      "styles": [
        "editorial",
        "paper"
      ],
      "motion": "none",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F4F1EA",
        "#FFFDF8",
        "#1A1814",
        "#1F4D3A",
        "#E7F2EC"
      ],
      "fonts": [
        "Fraunces",
        "Public Sans"
      ],
      "url": "https://designlounge.vercel.app/p/week-schedule",
      "brief": "https://designlounge.vercel.app/p/week-schedule.md",
      "demo": "https://designlounge.vercel.app/demo/week-schedule.html",
      "source": "icm"
    },
    {
      "id": "chart-bar-week",
      "n": "475",
      "title": "Weekly bar chart",
      "summary": "Seven bars for a yard week. One series, one selected day, and a mono readout. No legend, no second colour, no chart theme.",
      "platform": "web",
      "type": "component",
      "category": "charts",
      "tags": [
        "charts",
        "bars",
        "dashboard",
        "week"
      ],
      "styles": [
        "minimal",
        "industrial"
      ],
      "motion": "subtle",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F6F4EF",
        "#FFFFFF",
        "#161513",
        "#1F4D3A"
      ],
      "fonts": [
        "IBM Plex Sans",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/chart-bar-week",
      "brief": "https://designlounge.vercel.app/p/chart-bar-week.md",
      "demo": "https://designlounge.vercel.app/demo/chart-bar-week.html",
      "source": "linear"
    },
    {
      "id": "dock-editor-tools",
      "n": "476",
      "title": "Whiteboard tool dock",
      "summary": "A floating hard-shadow tool dock for a whiteboard: exclusive tools, a nested shapes flyout, colour swatches, working undo/redo, and a two-row collapse on phones.",
      "platform": "web",
      "type": "component",
      "category": "navigation",
      "tags": [
        "toolbar",
        "dock",
        "whiteboard",
        "editor",
        "flyout"
      ],
      "styles": [
        "playful",
        "paper",
        "brutalist"
      ],
      "motion": "subtle",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#F3EEE4",
        "#FFFDF8",
        "#1D1B18",
        "#FF5A36",
        "#2E5BFF"
      ],
      "fonts": [
        "Bricolage Grotesque",
        "Caveat"
      ],
      "url": "https://designlounge.vercel.app/p/dock-editor-tools",
      "brief": "https://designlounge.vercel.app/p/dock-editor-tools.md",
      "demo": "https://designlounge.vercel.app/demo/dock-editor-tools.html",
      "source": "60fps"
    },
    {
      "id": "winding-ribbon-scroll-story",
      "n": "477",
      "title": "Winding ribbon scroll story",
      "summary": "A thick orange road ribbon winds down the page between alternating step cards, drawing itself as you scroll while a small van drives along it.",
      "platform": "web",
      "type": "section",
      "category": "scroll",
      "tags": [
        "scroll",
        "svg",
        "path",
        "storytelling",
        "steps",
        "illustration"
      ],
      "styles": [
        "playful",
        "organic"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#E4EFE6",
        "#1D2B26",
        "#F05A28",
        "#2F4BD8",
        "#FFC93C",
        "#FFFDF8"
      ],
      "fonts": [
        "Bricolage Grotesque",
        "Caveat"
      ],
      "url": "https://designlounge.vercel.app/p/winding-ribbon-scroll-story",
      "brief": "https://designlounge.vercel.app/p/winding-ribbon-scroll-story.md",
      "demo": "https://designlounge.vercel.app/demo/winding-ribbon-scroll-story.html",
      "source": "mindmarket"
    },
    {
      "id": "phone-lesson-quiz",
      "n": "478",
      "title": "Word-bank lesson card",
      "summary": "A clay-style language lesson: tap tiles to build a sentence, Check turns into a green or coral banner, hearts drop on a miss, and an SVG flame counts the streak.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "feedback",
      "tags": [
        "lesson",
        "quiz",
        "language",
        "tiles",
        "streak"
      ],
      "styles": [
        "playful",
        "clay"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#FBF4E6",
        "#FFFDF7",
        "#5BC236",
        "#FF7A59",
        "#3A2E22"
      ],
      "fonts": [
        "Fredoka",
        "Nunito"
      ],
      "url": "https://designlounge.vercel.app/p/phone-lesson-quiz",
      "brief": "https://designlounge.vercel.app/p/phone-lesson-quiz.md",
      "demo": "https://designlounge.vercel.app/demo/phone-lesson-quiz.html",
      "source": "60fps"
    },
    {
      "id": "onboarding-workspace-setup",
      "n": "479",
      "title": "Workspace setup with live preview",
      "summary": "A three-step create-your-workspace flow: name and checked URL, colour and mark, email invites. A live sidebar preview updates as you type, then builds itself.",
      "platform": "web",
      "type": "screen",
      "category": "onboarding",
      "tags": [
        "onboarding",
        "workspace",
        "form",
        "preview",
        "invite"
      ],
      "styles": [
        "bauhaus",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#FFFFFF",
        "#141414",
        "#1F4FE0",
        "#FFC629",
        "#F4F4F1"
      ],
      "fonts": [
        "Jost"
      ],
      "url": "https://designlounge.vercel.app/p/onboarding-workspace-setup",
      "brief": "https://designlounge.vercel.app/p/onboarding-workspace-setup.md",
      "demo": "https://designlounge.vercel.app/demo/onboarding-workspace-setup.html",
      "source": "60fps"
    },
    {
      "id": "widget-world-clocks",
      "n": "480",
      "title": "World clocks meeting planner",
      "summary": "Six city rows with 24-hour day/night bands and one shared cursor. Drag a band or the slider to scrub time across every city at once.",
      "platform": "web",
      "type": "component",
      "category": "widgets",
      "tags": [
        "clock",
        "timezone",
        "meeting",
        "scheduler",
        "slider"
      ],
      "styles": [
        "swiss",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-03T00:00:00.000Z",
      "palette": [
        "#ECEBE5",
        "#F7F6F1",
        "#141414",
        "#1B1C21",
        "#2441D6"
      ],
      "fonts": [
        "Familjen Grotesk",
        "Martian Mono"
      ],
      "url": "https://designlounge.vercel.app/p/widget-world-clocks",
      "brief": "https://designlounge.vercel.app/p/widget-world-clocks.md",
      "demo": "https://designlounge.vercel.app/demo/widget-world-clocks.html",
      "source": "usearticle"
    },
    {
      "id": "game-lobby",
      "n": "481",
      "title": "Bramble parlour lobby",
      "summary": "Four seats in Parlour 4, a copyable room code, one ready toggle, and a host Start that stays off until two players are ready, then a one-line deal.",
      "platform": "web",
      "type": "screen",
      "category": "social",
      "tags": [
        "lobby",
        "multiplayer",
        "ready",
        "room"
      ],
      "styles": [
        "editorial",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#E8DCC8",
        "#3A2E22",
        "#F7F1E4",
        "#7A2E24"
      ],
      "fonts": [
        "Fraunces",
        "Outfit"
      ],
      "url": "https://designlounge.vercel.app/p/game-lobby",
      "brief": "https://designlounge.vercel.app/p/game-lobby.md",
      "demo": "https://designlounge.vercel.app/demo/game-lobby.html",
      "source": "icm"
    },
    {
      "id": "shot-callout-pins",
      "n": "482",
      "title": "Callouts on a review still",
      "summary": "Four numbered pins beside a checkout still. The open pin draws a line to one note. Arrow keys move it.",
      "platform": "web",
      "type": "component",
      "category": "overlays",
      "tags": [
        "annotation",
        "callout",
        "review",
        "screenshot"
      ],
      "styles": [
        "editorial",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#D7D1C6",
        "#F6F3EE",
        "#1A1814",
        "#8F2D1C"
      ],
      "fonts": [
        "Literata",
        "Figtree"
      ],
      "url": "https://designlounge.vercel.app/p/shot-callout-pins",
      "brief": "https://designlounge.vercel.app/p/shot-callout-pins.md",
      "demo": "https://designlounge.vercel.app/demo/shot-callout-pins.html",
      "source": "abel"
    },
    {
      "id": "phone-code-entry",
      "n": "483",
      "title": "Chitthi code entry",
      "summary": "Six digit boxes for a masked Nepal mobile. Paste fills them, a wrong code shakes, and Resend waits 30 seconds.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "auth",
      "tags": [
        "auth",
        "otp",
        "phone",
        "ios"
      ],
      "styles": [
        "editorial",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#E6E8EF",
        "#F4F6FA",
        "#172033",
        "#9E2B22"
      ],
      "fonts": [
        "Vollkorn",
        "Inconsolata"
      ],
      "url": "https://designlounge.vercel.app/p/phone-code-entry",
      "brief": "https://designlounge.vercel.app/p/phone-code-entry.md",
      "demo": "https://designlounge.vercel.app/demo/phone-code-entry.html",
      "source": "igloo"
    },
    {
      "id": "phone-app-lock",
      "n": "484",
      "title": "Coffer drawer lock",
      "summary": "An in-app drawer lock with a fingerprint beat, a square keypad, and one home row after it opens.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "auth",
      "tags": [
        "auth",
        "lock",
        "biometric",
        "phone",
        "ios"
      ],
      "styles": [
        "luxe",
        "dark"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#14110E",
        "#221C16",
        "#F3E7D4",
        "#D4B06A",
        "#F0B2A4"
      ],
      "fonts": [
        "Cardo",
        "PT Sans"
      ],
      "url": "https://designlounge.vercel.app/p/phone-app-lock",
      "brief": "https://designlounge.vercel.app/p/phone-app-lock.md",
      "demo": "https://designlounge.vercel.app/demo/phone-app-lock.html",
      "source": "igloo"
    },
    {
      "id": "phone-delete-account",
      "n": "485",
      "title": "Delete account with a 30-day undo",
      "summary": "A dark iOS delete-account flow: a concrete list of what goes, export first, a one-line grace period, type-your-email confirm, and a scheduled state with a live countdown and Undo.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "settings",
      "tags": [
        "settings",
        "account",
        "delete",
        "destructive",
        "confirmation",
        "ios"
      ],
      "styles": [
        "dark",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#131518",
        "#1C1F24",
        "#ECEEF1",
        "#9CC1E8",
        "#D83B3B"
      ],
      "fonts": [
        "Albert Sans",
        "Sometype Mono"
      ],
      "url": "https://designlounge.vercel.app/p/phone-delete-account",
      "brief": "https://designlounge.vercel.app/p/phone-delete-account.md",
      "demo": "https://designlounge.vercel.app/demo/phone-delete-account.html",
      "source": "dontboardme"
    },
    {
      "id": "game-hud",
      "n": "486",
      "title": "Duskwell mission HUD",
      "summary": "Duskwell chrome over a still night ridge: score, lives, wave, a minimap, and a pause menu that opens on P.",
      "platform": "web",
      "type": "screen",
      "category": "overlays",
      "tags": [
        "hud",
        "pause",
        "minimap",
        "overlay",
        "wave"
      ],
      "styles": [
        "cyber",
        "dark"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#070B12",
        "#101820",
        "#D5E4EA",
        "#9FE1C8",
        "#E2B15A"
      ],
      "fonts": [
        "Chakra Petch",
        "Share Tech Mono"
      ],
      "url": "https://designlounge.vercel.app/p/game-hud",
      "brief": "https://designlounge.vercel.app/p/game-hud.md",
      "demo": "https://designlounge.vercel.app/demo/game-hud.html",
      "source": "tailwind"
    },
    {
      "id": "phone-account-edit",
      "n": "487",
      "title": "Edit profile with live username check",
      "summary": "An iOS edit-profile screen: change photo sheet, live username availability, bio counter, unverified email with resend cooldown, and a Save that only wakes on real changes.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "profile",
      "tags": [
        "profile",
        "account",
        "forms",
        "username",
        "validation",
        "ios"
      ],
      "styles": [
        "paper",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#EFEBE3",
        "#FBF9F4",
        "#1F1D1A",
        "#1F5C4A",
        "#8A5200"
      ],
      "fonts": [
        "Young Serif",
        "Rethink Sans"
      ],
      "url": "https://designlounge.vercel.app/p/phone-account-edit",
      "brief": "https://designlounge.vercel.app/p/phone-account-edit.md",
      "demo": "https://designlounge.vercel.app/demo/phone-account-edit.html",
      "source": "mwdt"
    },
    {
      "id": "phone-photo-viewer",
      "n": "488",
      "title": "Full-bleed photo viewer",
      "summary": "Dunlin pages four drawn photos full bleed. Swipe or buttons move, one zoom step returns, and a caption, close control, and page indicator stay on screen.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "media",
      "tags": [
        "photos",
        "viewer",
        "swipe",
        "zoom",
        "phone"
      ],
      "styles": [
        "dark",
        "editorial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#12110F",
        "#F4EFE6",
        "#E6A322",
        "#6E3D52",
        "#C9BBA6"
      ],
      "fonts": [
        "Libre Baskerville",
        "Figtree"
      ],
      "url": "https://designlounge.vercel.app/p/phone-photo-viewer",
      "brief": "https://designlounge.vercel.app/p/phone-photo-viewer.md",
      "demo": "https://designlounge.vercel.app/demo/phone-photo-viewer.html",
      "source": "dragone"
    },
    {
      "id": "handwritten-homepage",
      "n": "489",
      "title": "Handwritten homepage",
      "summary": "A first page written as a letter on warm paper: a short nav, a signed opening, and three notes for three pieces of work.",
      "platform": "web",
      "type": "screen",
      "category": "landing",
      "tags": [
        "letter",
        "handwriting",
        "landing",
        "paper",
        "personal"
      ],
      "styles": [
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#EFE6D2",
        "#FFFAF0",
        "#1C2430",
        "#1D4E89",
        "#B42323"
      ],
      "fonts": [
        "Gochi Hand",
        "Patrick Hand"
      ],
      "url": "https://designlounge.vercel.app/p/handwritten-homepage",
      "brief": "https://designlounge.vercel.app/p/handwritten-homepage.md",
      "demo": "https://designlounge.vercel.app/demo/handwritten-homepage.html",
      "source": "linear"
    },
    {
      "id": "handwritten-letter",
      "n": "490",
      "title": "Handwritten night letter",
      "summary": "One night letter on a warm dark desk: date, salutation, three short paragraphs, a red margin note, a P.S., and a signature.",
      "platform": "web",
      "type": "screen",
      "category": "reading",
      "tags": [
        "letter",
        "handwriting",
        "reading",
        "paper",
        "night"
      ],
      "styles": [
        "paper",
        "editorial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#1A1612",
        "#241E18",
        "#F3EAD8",
        "#9EC0EA",
        "#E08080"
      ],
      "fonts": [
        "Gochi Hand",
        "Patrick Hand"
      ],
      "url": "https://designlounge.vercel.app/p/handwritten-letter",
      "brief": "https://designlounge.vercel.app/p/handwritten-letter.md",
      "demo": "https://designlounge.vercel.app/demo/handwritten-letter.html",
      "source": "mendo"
    },
    {
      "id": "phone-large-text-layout",
      "n": "491",
      "title": "Large text layout rules",
      "summary": "One phone order screen stepped from Small to Accessibility 5. Rows grow, two-column rows stack, icons hold the first line, tab labels never truncate.",
      "platform": "mobile-app",
      "type": "pattern",
      "category": "utility",
      "tags": [
        "accessibility",
        "dynamic-type",
        "layout",
        "text-size",
        "reflow"
      ],
      "styles": [
        "dark",
        "minimal"
      ],
      "motion": "none",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#0E1114",
        "#1A1F25",
        "#EEF1EA",
        "#8FE3B5",
        "#183326"
      ],
      "fonts": [
        "Atkinson Hyperlegible Next",
        "Atkinson Hyperlegible Mono"
      ],
      "url": "https://designlounge.vercel.app/p/phone-large-text-layout",
      "brief": "https://designlounge.vercel.app/p/phone-large-text-layout.md",
      "demo": "https://designlounge.vercel.app/demo/phone-large-text-layout.html",
      "source": "tailwind"
    },
    {
      "id": "handwritten-style",
      "n": "492",
      "title": "Letter hand kit",
      "summary": "A letter-hand kit sheet: one rule, a title hand beside a body hand, a button, a field, a card, and three lines not to copy.",
      "platform": "web",
      "type": "style",
      "category": "design-language",
      "tags": [
        "handwriting",
        "kit",
        "paper",
        "type",
        "buttons"
      ],
      "styles": [
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#F6F1E4",
        "#FFFAF0",
        "#1C2430",
        "#1D4E89",
        "#B42323"
      ],
      "fonts": [
        "Gochi Hand",
        "Patrick Hand"
      ],
      "url": "https://designlounge.vercel.app/p/handwritten-style",
      "brief": "https://designlounge.vercel.app/p/handwritten-style.md",
      "demo": "https://designlounge.vercel.app/demo/handwritten-style.html",
      "source": "tailwind"
    },
    {
      "id": "game-card-table",
      "n": "493",
      "title": "Linnet pairs table",
      "summary": "A 4 by 4 felt table of drawn cards. Flip two, a match stays, a miss turns back, moves count, and the win line names the moves.",
      "platform": "web",
      "type": "screen",
      "category": "media",
      "tags": [
        "cards",
        "memory",
        "table",
        "keyboard"
      ],
      "styles": [
        "organic",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#3E2A1E",
        "#1E4A38",
        "#F4EBDA",
        "#8C3A2F"
      ],
      "fonts": [
        "Libre Baskerville",
        "Source Sans 3"
      ],
      "url": "https://designlounge.vercel.app/p/game-card-table",
      "brief": "https://designlounge.vercel.app/p/game-card-table.md",
      "demo": "https://designlounge.vercel.app/demo/game-card-table.html",
      "source": "dragone"
    },
    {
      "id": "three-orbit-object",
      "n": "494",
      "title": "Lit study on a quiet stage",
      "summary": "Drag orbits a plaster massing on a quiet stage, with one key light and a dim fill so a face goes dark as it turns.",
      "platform": "web",
      "type": "component",
      "category": "mockups",
      "tags": [
        "mockup",
        "webgl",
        "orbit",
        "lighting",
        "architecture"
      ],
      "styles": [
        "dark",
        "minimal"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#161311",
        "#E7DCCB",
        "#A85A38",
        "#5C564F",
        "#F4EFE8"
      ],
      "fonts": [
        "Fraunces",
        "Outfit"
      ],
      "url": "https://designlounge.vercel.app/p/three-orbit-object",
      "brief": "https://designlounge.vercel.app/p/three-orbit-object.md",
      "demo": "https://designlounge.vercel.app/demo/three-orbit-object.html",
      "source": "icm"
    },
    {
      "id": "live-cursors-board",
      "n": "495",
      "title": "Live cursors on a board",
      "summary": "Three named cursors on a rehearsal floor plan. Yours follows the pointer. Click a set piece to claim it.",
      "platform": "web",
      "type": "component",
      "category": "cursor",
      "tags": [
        "cursor",
        "collaboration",
        "board",
        "presence"
      ],
      "styles": [
        "editorial",
        "paper"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#E4DDD0",
        "#F4EFE6",
        "#1C1914",
        "#9C3418"
      ],
      "fonts": [
        "Newsreader",
        "Public Sans"
      ],
      "url": "https://designlounge.vercel.app/p/live-cursors-board",
      "brief": "https://designlounge.vercel.app/p/live-cursors-board.md",
      "demo": "https://designlounge.vercel.app/demo/live-cursors-board.html",
      "source": "noomo"
    },
    {
      "id": "three-room-look",
      "n": "496",
      "title": "Look around a small room",
      "summary": "Drag looks around a room with one window on the cut and a jar on a stand. Yaw and pitch stay clamped. Reset faces the window.",
      "platform": "web",
      "type": "section",
      "category": "hero",
      "tags": [
        "hero",
        "webgl",
        "room",
        "camera",
        "interior"
      ],
      "styles": [
        "editorial",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#E4D5C3",
        "#7A5234",
        "#8EB8C8",
        "#1C4A42",
        "#F7F1E8"
      ],
      "fonts": [
        "Cormorant Garamond",
        "Outfit"
      ],
      "url": "https://designlounge.vercel.app/p/three-room-look",
      "brief": "https://designlounge.vercel.app/p/three-room-look.md",
      "demo": "https://designlounge.vercel.app/demo/three-room-look.html",
      "source": "stripe"
    },
    {
      "id": "m3-dialog",
      "n": "497",
      "title": "M3 basic and destructive dialogs",
      "summary": "A centred Briarnote alert over a field note. Leave is a basic dialog; Delete uses the error colour. Esc closes, and the scrim does not.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "overlays",
      "tags": [
        "material",
        "dialog",
        "android",
        "alert",
        "overlay"
      ],
      "styles": [
        "material",
        "editorial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#F5F6F8",
        "#E8EAEE",
        "#0E4D8B",
        "#1A1C1E",
        "#BA1A1A"
      ],
      "fonts": [
        "Source Serif 4",
        "Sora"
      ],
      "url": "https://designlounge.vercel.app/p/m3-dialog",
      "brief": "https://designlounge.vercel.app/p/m3-dialog.md",
      "demo": "https://designlounge.vercel.app/demo/m3-dialog.html",
      "source": "abel"
    },
    {
      "id": "m3-top-app-bar-scroll",
      "n": "498",
      "title": "M3 collapsing large top app bar",
      "summary": "An Android M3 large top app bar that collapses to the small bar as you scroll, its title gliding and shrinking, with an extended FAB that shrinks on scroll down.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "scroll",
      "tags": [
        "material",
        "android",
        "app-bar",
        "fab",
        "scroll",
        "list"
      ],
      "styles": [
        "material",
        "soft"
      ],
      "motion": "rich",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#FFF8F7",
        "#FBEAEB",
        "#8E4957",
        "#FFD9DE",
        "#FBDCBC"
      ],
      "fonts": [
        "Bricolage Grotesque",
        "DM Sans"
      ],
      "url": "https://designlounge.vercel.app/p/m3-top-app-bar-scroll",
      "brief": "https://designlounge.vercel.app/p/m3-top-app-bar-scroll.md",
      "demo": "https://designlounge.vercel.app/demo/m3-top-app-bar-scroll.html",
      "source": "mindmarket"
    },
    {
      "id": "m3-list-detail",
      "n": "499",
      "title": "M3 list to detail with predictive back",
      "summary": "An Android Material 3 list that opens a detail screen with a container transform, a small top app bar with back, and a predictive back swipe that reverses it.",
      "platform": "mobile-app",
      "type": "pattern",
      "category": "transitions",
      "tags": [
        "list",
        "detail",
        "container-transform",
        "back",
        "android",
        "material"
      ],
      "styles": [
        "material",
        "soft"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#FFF9EE",
        "#F9F3E5",
        "#6C5E10",
        "#F6E388",
        "#C5ECCE"
      ],
      "fonts": [
        "Red Hat Display",
        "Red Hat Text"
      ],
      "url": "https://designlounge.vercel.app/p/m3-list-detail",
      "brief": "https://designlounge.vercel.app/p/m3-list-detail.md",
      "demo": "https://designlounge.vercel.app/demo/m3-list-detail.html",
      "source": "60fps"
    },
    {
      "id": "m3-modal-bottom-sheet",
      "n": "500",
      "title": "M3 modal bottom sheet with predictive back",
      "summary": "An Android M3 filter sheet over a trail list: scrim, drag handle, partial and full heights, spring settle, drag to dismiss and a predictive-back shrink.",
      "platform": "mobile-app",
      "type": "component",
      "category": "overlays",
      "tags": [
        "material",
        "android",
        "bottom-sheet",
        "filters",
        "gesture",
        "spring"
      ],
      "styles": [
        "material",
        "dark",
        "organic"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#17130B",
        "#1F1B13",
        "#E9C16C",
        "#554529",
        "#EBE1D4"
      ],
      "fonts": [
        "Fraunces",
        "Schibsted Grotesk"
      ],
      "url": "https://designlounge.vercel.app/p/m3-modal-bottom-sheet",
      "brief": "https://designlounge.vercel.app/p/m3-modal-bottom-sheet.md",
      "demo": "https://designlounge.vercel.app/demo/m3-modal-bottom-sheet.html",
      "source": "mwdt"
    },
    {
      "id": "m3-search-results",
      "n": "501",
      "title": "M3 search results",
      "summary": "An Orchardbind search view with a focused filled field, tappable recent searches, live filtering, and an empty line that includes the query.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "utility",
      "tags": [
        "material",
        "search",
        "android",
        "filter",
        "empty"
      ],
      "styles": [
        "material",
        "organic"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#F7F6F0",
        "#E6E4D8",
        "#1F5C38",
        "#1A1C16",
        "#B7F0C8"
      ],
      "fonts": [
        "Literata",
        "Manrope"
      ],
      "url": "https://designlounge.vercel.app/p/m3-search-results",
      "brief": "https://designlounge.vercel.app/p/m3-search-results.md",
      "demo": "https://designlounge.vercel.app/demo/m3-search-results.html",
      "source": "tailwind"
    },
    {
      "id": "m3-settings-list",
      "n": "502",
      "title": "M3 settings list",
      "summary": "An Android Material 3 settings screen: flat list with primary section headers, 72dp two-line rows, M3 switches with check handles and a radio theme dialog.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "settings",
      "tags": [
        "material",
        "android",
        "settings",
        "switch",
        "dialog",
        "list"
      ],
      "styles": [
        "material",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#F7F9FF",
        "#E5E8EE",
        "#2B638B",
        "#CBE6FF",
        "#181C20"
      ],
      "fonts": [
        "Outfit",
        "Atkinson Hyperlegible"
      ],
      "url": "https://designlounge.vercel.app/p/m3-settings-list",
      "brief": "https://designlounge.vercel.app/p/m3-settings-list.md",
      "demo": "https://designlounge.vercel.app/demo/m3-settings-list.html",
      "source": "linear"
    },
    {
      "id": "m3-sign-in",
      "n": "503",
      "title": "M3 sign-in with passkey",
      "summary": "An Android Material 3 sign-in: outlined fields with supporting and error text, show and hide password, a tonal passkey button, and a loading filled button.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "auth",
      "tags": [
        "sign-in",
        "form",
        "passkey",
        "android",
        "material"
      ],
      "styles": [
        "material",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#FFF8F6",
        "#8F4C38",
        "#FFDBD1",
        "#F7DED6",
        "#BA1A1A"
      ],
      "fonts": [
        "Lexend",
        "Nunito Sans"
      ],
      "url": "https://designlounge.vercel.app/p/m3-sign-in",
      "brief": "https://designlounge.vercel.app/p/m3-sign-in.md",
      "demo": "https://designlounge.vercel.app/demo/m3-sign-in.html",
      "source": "igloo"
    },
    {
      "id": "m3-snackbar",
      "n": "504",
      "title": "M3 snackbar with undo",
      "summary": "One Woldwalk snackbar, Trail archived, with Undo. A second archive replaces it. It sits above the home inset and leaves after 4 seconds.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "feedback",
      "tags": [
        "material",
        "snackbar",
        "android",
        "undo",
        "list"
      ],
      "styles": [
        "material",
        "dark"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#13110E",
        "#E8E1D6",
        "#E6C176",
        "#5C4300",
        "#1C1915"
      ],
      "fonts": [
        "Newsreader",
        "Outfit"
      ],
      "url": "https://designlounge.vercel.app/p/m3-snackbar",
      "brief": "https://designlounge.vercel.app/p/m3-snackbar.md",
      "demo": "https://designlounge.vercel.app/demo/m3-snackbar.html",
      "source": "60fps"
    },
    {
      "id": "game-playfield",
      "n": "505",
      "title": "Mallow Court brick rally",
      "summary": "A finishable Mallow Court rally: paddle, bricks, three lives, a score from cleared bricks, Esc to pause, and Play again.",
      "platform": "web",
      "type": "screen",
      "category": "media",
      "tags": [
        "game",
        "breakout",
        "paddle",
        "canvas",
        "pause"
      ],
      "styles": [
        "playful",
        "soft"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#F3E2CC",
        "#FFF8F0",
        "#2A241C",
        "#E07A5F",
        "#2C3A52"
      ],
      "fonts": [
        "Fredoka"
      ],
      "url": "https://designlounge.vercel.app/p/game-playfield",
      "brief": "https://designlounge.vercel.app/p/game-playfield.md",
      "demo": "https://designlounge.vercel.app/demo/game-playfield.html",
      "source": "bermawy"
    },
    {
      "id": "phone-subscription-manage",
      "n": "506",
      "title": "Manage subscription, honest cancel",
      "summary": "An iOS subscription screen: navy plan card, monthly or yearly with real arithmetic, billing rows, Restore purchases, and a cancel sheet that states the end date and the losses.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "settings",
      "tags": [
        "settings",
        "subscription",
        "billing",
        "pricing",
        "cancel",
        "ios"
      ],
      "styles": [
        "editorial",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#E6ECEE",
        "#F7FAFA",
        "#12324A",
        "#0F2130",
        "#E8552D"
      ],
      "fonts": [
        "Gloock",
        "Onest"
      ],
      "url": "https://designlounge.vercel.app/p/phone-subscription-manage",
      "brief": "https://designlounge.vercel.app/p/phone-subscription-manage.md",
      "demo": "https://designlounge.vercel.app/demo/phone-subscription-manage.html",
      "source": "moremedia"
    },
    {
      "id": "phone-composer",
      "n": "507",
      "title": "New note composer",
      "summary": "Whinchat's new-note screen. Post stays off until the body has text, four drawn thumbs appear on request, and Cancel opens a discard sheet on a dirty draft.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "messaging",
      "tags": [
        "composer",
        "notes",
        "sheet",
        "phone",
        "ios"
      ],
      "styles": [
        "paper",
        "editorial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#F3EBDD",
        "#FFF9F1",
        "#1C2B22",
        "#9C3B2E",
        "#E4D5C3"
      ],
      "fonts": [
        "Lora",
        "Outfit"
      ],
      "url": "https://designlounge.vercel.app/p/phone-composer",
      "brief": "https://designlounge.vercel.app/p/phone-composer.md",
      "demo": "https://designlounge.vercel.app/demo/phone-composer.html",
      "source": "igloo"
    },
    {
      "id": "game-title-screen",
      "n": "508",
      "title": "Pebbleline attract screen",
      "summary": "A Pebbleline coin-op attract screen: bezel, looping ledge demo, blinking Press start, high score, and a credit that opens Stage 1.",
      "platform": "web",
      "type": "screen",
      "category": "landing",
      "tags": [
        "arcade",
        "attract",
        "pixel",
        "title",
        "credits"
      ],
      "styles": [
        "pixel",
        "retro"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#100C08",
        "#07140E",
        "#F4E27A",
        "#8FE06A",
        "#D4531A"
      ],
      "fonts": [
        "Silkscreen",
        "Space Mono"
      ],
      "url": "https://designlounge.vercel.app/p/game-title-screen",
      "brief": "https://designlounge.vercel.app/p/game-title-screen.md",
      "demo": "https://designlounge.vercel.app/demo/game-title-screen.html",
      "source": "haunted"
    },
    {
      "id": "phone-checkout",
      "n": "509",
      "title": "Phone checkout",
      "summary": "Threadrow phone checkout with an address, two priced deliveries, and a saved card, where Place order stays off until a speed is picked.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "ecommerce",
      "tags": [
        "checkout",
        "delivery",
        "payment",
        "phone",
        "ios"
      ],
      "styles": [
        "minimal",
        "swiss"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#E4EAF0",
        "#F4F7F8",
        "#13202B",
        "#0C5C48",
        "#D3DDE5"
      ],
      "fonts": [
        "Petrona",
        "Manrope"
      ],
      "url": "https://designlounge.vercel.app/p/phone-checkout",
      "brief": "https://designlounge.vercel.app/p/phone-checkout.md",
      "demo": "https://designlounge.vercel.app/demo/phone-checkout.html",
      "source": "abel"
    },
    {
      "id": "phone-notification-settings",
      "n": "510",
      "title": "Phone notification settings",
      "summary": "iOS notification settings with a system-off banner, per-category push or email chips, a quiet-hours wheel picker with a live summary, and a lock-screen preview.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "settings",
      "tags": [
        "settings",
        "notifications",
        "ios",
        "time-picker",
        "toggles"
      ],
      "styles": [
        "minimal",
        "organic"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#EEEAE0",
        "#FAF8F3",
        "#1C2420",
        "#2F6A4B",
        "#F6E3B4"
      ],
      "fonts": [
        "Bricolage Grotesque",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/phone-notification-settings",
      "brief": "https://designlounge.vercel.app/p/phone-notification-settings.md",
      "demo": "https://designlounge.vercel.app/demo/phone-notification-settings.html",
      "source": "stripe"
    },
    {
      "id": "phone-orders",
      "n": "511",
      "title": "Phone past orders",
      "summary": "A Sablecroft list of past orders with status, date, count, and total, opening in place to items, a status sentence, and a receipt.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "ecommerce",
      "tags": [
        "orders",
        "receipt",
        "shop",
        "phone",
        "ios"
      ],
      "styles": [
        "paper",
        "editorial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#E3E8E2",
        "#F3F6F2",
        "#17211C",
        "#1B4F3E",
        "#7A4510"
      ],
      "fonts": [
        "Besley",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/phone-orders",
      "brief": "https://designlounge.vercel.app/p/phone-orders.md",
      "demo": "https://designlounge.vercel.app/demo/phone-orders.html",
      "source": "abel"
    },
    {
      "id": "phone-privacy-data",
      "n": "512",
      "title": "Phone privacy and data",
      "summary": "Dark iOS privacy screen: real system permission states, a deep link to Settings, a tracking switch, a data export that runs requested, preparing, ready, and a confirmed clear.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "settings",
      "tags": [
        "settings",
        "privacy",
        "permissions",
        "export",
        "ios"
      ],
      "styles": [
        "dark",
        "editorial",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#101314",
        "#191E20",
        "#ECE8DF",
        "#9ADBC0",
        "#E8C26E"
      ],
      "fonts": [
        "Instrument Serif",
        "Schibsted Grotesk"
      ],
      "url": "https://designlounge.vercel.app/p/phone-privacy-data",
      "brief": "https://designlounge.vercel.app/p/phone-privacy-data.md",
      "demo": "https://designlounge.vercel.app/demo/phone-privacy-data.html",
      "source": "mendo"
    },
    {
      "id": "phone-rating-prompt",
      "n": "513",
      "title": "Phone rating prompt",
      "summary": "An 'Enjoying Brindle?' sheet after a delivered order. Yes hands off to a generic five-star system review alert; Not really opens a private feedback form; Not now backs off.",
      "platform": "mobile-app",
      "type": "pattern",
      "category": "feedback",
      "tags": [
        "rating",
        "review",
        "feedback",
        "bottom-sheet",
        "ios"
      ],
      "styles": [
        "soft",
        "playful",
        "paper"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#FFF3DC",
        "#FFFAF0",
        "#2A1A12",
        "#BD421C",
        "#F0A92E"
      ],
      "fonts": [
        "Young Serif",
        "Figtree"
      ],
      "url": "https://designlounge.vercel.app/p/phone-rating-prompt",
      "brief": "https://designlounge.vercel.app/p/phone-rating-prompt.md",
      "demo": "https://designlounge.vercel.app/demo/phone-rating-prompt.html",
      "source": "60fps"
    },
    {
      "id": "phone-cart",
      "n": "514",
      "title": "Phone shopping bag",
      "summary": "An iOS bag for Wickmere with three swatched lines, steppers, a cents total pinned to the bar, and one button when the bag is empty.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "ecommerce",
      "tags": [
        "cart",
        "shop",
        "phone",
        "ios",
        "quantity"
      ],
      "styles": [
        "editorial",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#EFE6D8",
        "#FBF6EE",
        "#241C16",
        "#9C3412",
        "#E4D5C3"
      ],
      "fonts": [
        "Cormorant Garamond",
        "Outfit"
      ],
      "url": "https://designlounge.vercel.app/p/phone-cart",
      "brief": "https://designlounge.vercel.app/p/phone-cart.md",
      "demo": "https://designlounge.vercel.app/demo/phone-cart.html",
      "source": "abel"
    },
    {
      "id": "game-leaderboard",
      "n": "515",
      "title": "Quern score ladder",
      "summary": "Today, This week, and All reorder twelve Quern scores. Your row stays marked, and a few rows show places gained or lost.",
      "platform": "web",
      "type": "screen",
      "category": "data",
      "tags": [
        "leaderboard",
        "ranks",
        "tabs",
        "scores"
      ],
      "styles": [
        "swiss",
        "minimal"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#E7EEF2",
        "#F7FBFC",
        "#14202B",
        "#C4512C"
      ],
      "fonts": [
        "Newsreader",
        "Public Sans"
      ],
      "url": "https://designlounge.vercel.app/p/game-leaderboard",
      "brief": "https://designlounge.vercel.app/p/game-leaderboard.md",
      "demo": "https://designlounge.vercel.app/demo/game-leaderboard.html",
      "source": "60fps"
    },
    {
      "id": "label-roll-button",
      "n": "516",
      "title": "Rolling label row",
      "summary": "Three full-width rows. Hover, focus, or a click rolls the label up to a second line and turns the row black.",
      "platform": "web",
      "type": "component",
      "category": "buttons",
      "tags": [
        "buttons",
        "motion",
        "type",
        "menu"
      ],
      "styles": [
        "editorial",
        "kinetic"
      ],
      "motion": "rich",
      "difficulty": 1,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#F3EEE4",
        "#16140F",
        "#6D675C",
        "#B7B0A4"
      ],
      "fonts": [
        "Bodoni Moda",
        "Karla"
      ],
      "url": "https://designlounge.vercel.app/p/label-roll-button",
      "brief": "https://designlounge.vercel.app/p/label-roll-button.md",
      "demo": "https://designlounge.vercel.app/demo/label-roll-button.html",
      "source": "wickret"
    },
    {
      "id": "three-scroll-world",
      "n": "517",
      "title": "Scroll past three path models",
      "summary": "Three chapters beside a canvas. Scroll moves the camera past a gate, a cistern, and a belvedere. Buttons jump.",
      "platform": "web",
      "type": "screen",
      "category": "scroll",
      "tags": [
        "scroll",
        "webgl",
        "camera",
        "chapters",
        "landscape"
      ],
      "styles": [
        "editorial",
        "organic"
      ],
      "motion": "rich",
      "difficulty": 3,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#F3EDE3",
        "#1C2822",
        "#1F4D38",
        "#C4622D",
        "#1B6572"
      ],
      "fonts": [
        "Literata",
        "Manrope"
      ],
      "url": "https://designlounge.vercel.app/p/three-scroll-world",
      "brief": "https://designlounge.vercel.app/p/three-scroll-world.md",
      "demo": "https://designlounge.vercel.app/demo/three-scroll-world.html",
      "source": "susan"
    },
    {
      "id": "chart-scrub-readout",
      "n": "518",
      "title": "Scrub a firing curve",
      "summary": "A 90 minute kiln curve. Drag or press an arrow key. The big number is the degree at that minute.",
      "platform": "web",
      "type": "component",
      "category": "charts",
      "tags": [
        "charts",
        "line",
        "scrub",
        "dashboard"
      ],
      "styles": [
        "dark",
        "industrial"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#141210",
        "#F3EBE2",
        "#E07A45",
        "#2C2824"
      ],
      "fonts": [
        "Space Grotesk",
        "IBM Plex Mono"
      ],
      "url": "https://designlounge.vercel.app/p/chart-scrub-readout",
      "brief": "https://designlounge.vercel.app/p/chart-scrub-readout.md",
      "demo": "https://designlounge.vercel.app/demo/chart-scrub-readout.html",
      "source": "mwdt"
    },
    {
      "id": "phone-skeleton-list",
      "n": "519",
      "title": "Skeleton list swap",
      "summary": "Reedmark opens on a pulsing notice skeleton, then five real rows after 1.4 seconds. Replay runs it again. Reduced motion skips the pulse and the wait.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "loaders",
      "tags": [
        "skeleton",
        "loading",
        "list",
        "phone",
        "replay"
      ],
      "styles": [
        "minimal",
        "soft"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#E6EEF2",
        "#F5F8F9",
        "#132028",
        "#0E5962",
        "#B4C3CB"
      ],
      "fonts": [
        "Petrona",
        "Manrope"
      ],
      "url": "https://designlounge.vercel.app/p/phone-skeleton-list",
      "brief": "https://designlounge.vercel.app/p/phone-skeleton-list.md",
      "demo": "https://designlounge.vercel.app/demo/phone-skeleton-list.html",
      "source": "60fps"
    },
    {
      "id": "phone-forgot-password",
      "n": "520",
      "title": "Solander password reset",
      "summary": "A grouped phone screen that emails a reset link, then shows that address with Resend held for 30 seconds.",
      "platform": "mobile-app",
      "type": "screen",
      "category": "auth",
      "tags": [
        "auth",
        "password",
        "email",
        "phone",
        "ios"
      ],
      "styles": [
        "paper",
        "organic"
      ],
      "motion": "subtle",
      "difficulty": 2,
      "featured": false,
      "published": "2026-10-04T00:00:00.000Z",
      "palette": [
        "#E4DDD0",
        "#F8F4EC",
        "#1C261F",
        "#1F5C3E",
        "#8C2A24"
      ],
      "fonts": [
        "Crimson Pro",
        "Sofia Sans"
      ],
      "url": "https://designlounge.vercel.app/p/phone-forgot-password",
      "brief": "https://designlounge.vercel.app/p/phone-forgot-password.md",
      "demo": "https://designlounge.vercel.app/demo/phone-forgot-password.html",
      "source": "igloo"
    }
  ],
  "pairings": [
    {
      "id": "gallery-wall",
      "name": "Gallery Wall",
      "url": "https://designlounge.vercel.app/type/gallery-wall",
      "display": "Instrument Serif",
      "text": "Inter",
      "tags": [
        "editorial",
        "portfolio"
      ]
    },
    {
      "id": "the-lounge",
      "name": "The Lounge",
      "url": "https://designlounge.vercel.app/type/the-lounge",
      "display": "Fraunces",
      "text": "Instrument Sans",
      "tags": [
        "editorial",
        "warm"
      ]
    },
    {
      "id": "newsroom",
      "name": "Newsroom",
      "url": "https://designlounge.vercel.app/type/newsroom",
      "display": "Newsreader",
      "text": "Work Sans",
      "tags": [
        "editorial",
        "news"
      ]
    },
    {
      "id": "swiss-precision",
      "name": "Swiss Precision",
      "url": "https://designlounge.vercel.app/type/swiss-precision",
      "display": "Schibsted Grotesk",
      "text": "Schibsted Grotesk",
      "tags": [
        "swiss",
        "product"
      ]
    },
    {
      "id": "brutal-grotesk",
      "name": "Brutal Grotesk",
      "url": "https://designlounge.vercel.app/type/brutal-grotesk",
      "display": "Archivo Black",
      "text": "Archivo",
      "tags": [
        "brutalist",
        "loud"
      ]
    },
    {
      "id": "maison",
      "name": "Maison",
      "url": "https://designlounge.vercel.app/type/maison",
      "display": "Bodoni Moda",
      "text": "Tenor Sans",
      "tags": [
        "luxe",
        "fashion"
      ]
    },
    {
      "id": "studio-display",
      "name": "Studio Display",
      "url": "https://designlounge.vercel.app/type/studio-display",
      "display": "Syne",
      "text": "Manrope",
      "tags": [
        "expressive",
        "studio"
      ]
    },
    {
      "id": "developer-docs",
      "name": "Developer Docs",
      "url": "https://designlounge.vercel.app/type/developer-docs",
      "display": "Geist",
      "text": "Geist",
      "tags": [
        "product",
        "tech"
      ]
    },
    {
      "id": "bookish",
      "name": "Bookish",
      "url": "https://designlounge.vercel.app/type/bookish",
      "display": "Libre Caslon Text",
      "text": "Karla",
      "tags": [
        "editorial",
        "reading"
      ]
    },
    {
      "id": "poster-condensed",
      "name": "Poster Condensed",
      "url": "https://designlounge.vercel.app/type/poster-condensed",
      "display": "Bebas Neue",
      "text": "Space Mono",
      "tags": [
        "loud",
        "poster"
      ]
    },
    {
      "id": "deco-hotel",
      "name": "Deco Hotel",
      "url": "https://designlounge.vercel.app/type/deco-hotel",
      "display": "Italiana",
      "text": "Josefin Sans",
      "tags": [
        "deco",
        "luxe"
      ]
    },
    {
      "id": "atelier",
      "name": "Atelier",
      "url": "https://designlounge.vercel.app/type/atelier",
      "display": "Gloock",
      "text": "Figtree",
      "tags": [
        "fashion",
        "editorial"
      ]
    },
    {
      "id": "arcade",
      "name": "Arcade",
      "url": "https://designlounge.vercel.app/type/arcade",
      "display": "Silkscreen",
      "text": "Space Mono",
      "tags": [
        "pixel",
        "retro"
      ]
    },
    {
      "id": "hud",
      "name": "HUD",
      "url": "https://designlounge.vercel.app/type/hud",
      "display": "Chakra Petch",
      "text": "Share Tech Mono",
      "tags": [
        "cyber",
        "tech"
      ]
    },
    {
      "id": "candy-clay",
      "name": "Candy Clay",
      "url": "https://designlounge.vercel.app/type/candy-clay",
      "display": "Bagel Fat One",
      "text": "Fredoka",
      "tags": [
        "clay",
        "playful"
      ]
    },
    {
      "id": "friendly-saas",
      "name": "Friendly SaaS",
      "url": "https://designlounge.vercel.app/type/friendly-saas",
      "display": "Plus Jakarta Sans",
      "text": "Plus Jakarta Sans",
      "tags": [
        "product",
        "saas"
      ]
    },
    {
      "id": "devanagari",
      "name": "Devanagari",
      "url": "https://designlounge.vercel.app/type/devanagari",
      "display": "Noto Serif Devanagari",
      "text": "Mukta",
      "tags": [
        "editorial",
        "locale"
      ]
    },
    {
      "id": "bauhaus-school",
      "name": "Bauhaus School",
      "url": "https://designlounge.vercel.app/type/bauhaus-school",
      "display": "Outfit",
      "text": "DM Mono",
      "tags": [
        "bauhaus",
        "geometric"
      ]
    },
    {
      "id": "wide-tech",
      "name": "Wide Tech",
      "url": "https://designlounge.vercel.app/type/wide-tech",
      "display": "Unbounded",
      "text": "Onest",
      "tags": [
        "tech",
        "wide"
      ]
    },
    {
      "id": "garden-journal",
      "name": "Garden Journal",
      "url": "https://designlounge.vercel.app/type/garden-journal",
      "display": "Young Serif",
      "text": "Hanken Grotesk",
      "tags": [
        "organic",
        "warm"
      ]
    },
    {
      "id": "literary",
      "name": "Literary",
      "url": "https://designlounge.vercel.app/type/literary",
      "display": "Cormorant Garamond",
      "text": "Work Sans",
      "tags": [
        "editorial",
        "classic"
      ]
    },
    {
      "id": "riso-zine",
      "name": "Riso Zine",
      "url": "https://designlounge.vercel.app/type/riso-zine",
      "display": "Rubik Mono One",
      "text": "Rubik",
      "tags": [
        "riso",
        "playful"
      ]
    },
    {
      "id": "industrial-label",
      "name": "Industrial Label",
      "url": "https://designlounge.vercel.app/type/industrial-label",
      "display": "Big Shoulders Display",
      "text": "IBM Plex Sans",
      "tags": [
        "industrial",
        "utility"
      ]
    },
    {
      "id": "letter-hand",
      "name": "Letter Hand",
      "url": "https://designlounge.vercel.app/type/letter-hand",
      "display": "Gochi Hand",
      "text": "Patrick Hand",
      "tags": [
        "playful",
        "personal"
      ]
    },
    {
      "id": "handwritten-notes",
      "name": "Handwritten Notes",
      "url": "https://designlounge.vercel.app/type/handwritten-notes",
      "display": "Caveat",
      "text": "Inter",
      "tags": [
        "playful",
        "personal"
      ]
    },
    {
      "id": "slab-ledger",
      "name": "Slab Ledger",
      "url": "https://designlounge.vercel.app/type/slab-ledger",
      "display": "Zilla Slab",
      "text": "IBM Plex Mono",
      "tags": [
        "utility",
        "finance"
      ]
    },
    {
      "id": "red-hat",
      "name": "Red Hat Pair",
      "url": "https://designlounge.vercel.app/type/red-hat",
      "display": "Red Hat Display",
      "text": "Red Hat Mono",
      "tags": [
        "product",
        "superfamily"
      ]
    },
    {
      "id": "y2k-chrome",
      "name": "Y2K Chrome",
      "url": "https://designlounge.vercel.app/type/y2k-chrome",
      "display": "Michroma",
      "text": "Figtree",
      "tags": [
        "y2k",
        "retro"
      ]
    },
    {
      "id": "signal-mono",
      "name": "Signal Mono",
      "url": "https://designlounge.vercel.app/type/signal-mono",
      "display": "Space Grotesk",
      "text": "Space Grotesk",
      "tags": [
        "tech",
        "product"
      ]
    },
    {
      "id": "playground",
      "name": "Playground",
      "url": "https://designlounge.vercel.app/type/playground",
      "display": "Baloo 2",
      "text": "Nunito",
      "tags": [
        "playful",
        "friendly"
      ]
    },
    {
      "id": "magazine-contrast",
      "name": "Magazine Contrast",
      "url": "https://designlounge.vercel.app/type/magazine-contrast",
      "display": "DM Serif Display",
      "text": "DM Sans",
      "tags": [
        "editorial",
        "superfamily"
      ]
    },
    {
      "id": "neo-grotesk-mono",
      "name": "Neo Grotesk Mono",
      "url": "https://designlounge.vercel.app/type/neo-grotesk-mono",
      "display": "Familjen Grotesk",
      "text": "Familjen Grotesk",
      "tags": [
        "swiss",
        "product"
      ]
    },
    {
      "id": "variable-expressive",
      "name": "Variable Expressive",
      "url": "https://designlounge.vercel.app/type/variable-expressive",
      "display": "Anybody",
      "text": "Epilogue",
      "tags": [
        "kinetic",
        "variable"
      ]
    },
    {
      "id": "academic",
      "name": "Academic",
      "url": "https://designlounge.vercel.app/type/academic",
      "display": "Literata",
      "text": "Public Sans",
      "tags": [
        "editorial",
        "civic"
      ]
    },
    {
      "id": "cinema",
      "name": "Cinema",
      "url": "https://designlounge.vercel.app/type/cinema",
      "display": "Anton",
      "text": "Crimson Pro",
      "tags": [
        "poster",
        "editorial"
      ]
    },
    {
      "id": "monumental",
      "name": "Monumental",
      "url": "https://designlounge.vercel.app/type/monumental",
      "display": "Cinzel",
      "text": "Spectral",
      "tags": [
        "classic",
        "luxe"
      ]
    },
    {
      "id": "terminal-native",
      "name": "Terminal Native",
      "url": "https://designlounge.vercel.app/type/terminal-native",
      "display": "JetBrains Mono",
      "text": "IBM Plex Sans",
      "tags": [
        "terminal",
        "tech"
      ]
    },
    {
      "id": "neon-marquee",
      "name": "Neon Marquee",
      "url": "https://designlounge.vercel.app/type/neon-marquee",
      "display": "Monoton",
      "text": "Josefin Sans",
      "tags": [
        "retro",
        "deco"
      ]
    },
    {
      "id": "indie-maker",
      "name": "Indie Maker",
      "url": "https://designlounge.vercel.app/type/indie-maker",
      "display": "Bricolage Grotesque",
      "text": "Bricolage Grotesque",
      "tags": [
        "single-family",
        "product"
      ]
    },
    {
      "id": "ai-editorial",
      "name": "AI Editorial",
      "url": "https://designlounge.vercel.app/type/ai-editorial",
      "display": "Instrument Serif",
      "text": "JetBrains Mono",
      "tags": [
        "editorial",
        "tech"
      ]
    },
    {
      "id": "lettera",
      "name": "Lettera",
      "url": "https://designlounge.vercel.app/type/lettera",
      "display": "Playfair Display",
      "text": "Karla",
      "tags": [
        "classic",
        "editorial"
      ]
    },
    {
      "id": "pixel-soft",
      "name": "Pixel Soft",
      "url": "https://designlounge.vercel.app/type/pixel-soft",
      "display": "Pixelify Sans",
      "text": "Lexend",
      "tags": [
        "pixel",
        "friendly"
      ]
    },
    {
      "id": "classic-garamond",
      "name": "Classic Garamond",
      "url": "https://designlounge.vercel.app/type/classic-garamond",
      "display": "EB Garamond",
      "text": "Hanken Grotesk",
      "tags": [
        "classic",
        "reading"
      ]
    },
    {
      "id": "geometric-modern",
      "name": "Geometric Modern",
      "url": "https://designlounge.vercel.app/type/geometric-modern",
      "display": "Sora",
      "text": "Sora",
      "tags": [
        "product",
        "single-family"
      ]
    }
  ],
  "themes": [
    {
      "id": "paper-ink",
      "name": "Paper & Ink",
      "url": "https://designlounge.vercel.app/themes/paper-ink",
      "tokens": {
        "bg": "#f3efe6",
        "surface": "#eae5d9",
        "surface2": "#e0dacb",
        "surface3": "#d4cec0",
        "ink": "#171512",
        "ink2": "#5b564e",
        "ink3": "#5e5b53",
        "line": "#d6cfc0",
        "lineStrong": "#8d887e",
        "primary": "#a8661a",
        "primaryInk": "#fffdf8",
        "primarySoft": "#e9dcc9",
        "secondary": "#3f6b4a",
        "secondaryInk": "#fffdf8",
        "secondarySoft": "#daddd0",
        "tertiary": "#3d4f6b",
        "tertiaryInk": "#fffdf8",
        "tertiarySoft": "#dad9d5",
        "success": "#3f6b4a",
        "successInk": "#fffdf8",
        "successSoft": "#daddd0",
        "warning": "#b45309",
        "warningInk": "#fffdf8",
        "warningSoft": "#ead9c7",
        "danger": "#9b2c2c",
        "dangerInk": "#fffdf8",
        "dangerSoft": "#e7d4cc",
        "info": "#3d4f6b",
        "infoInk": "#fffdf8",
        "infoSoft": "#dad9d5",
        "successOnSoft": "#375e41",
        "warningOnSoft": "#8b4007",
        "dangerOnSoft": "#9b2c2c",
        "infoOnSoft": "#3d4f6b",
        "focus": "#a8661a",
        "link": "#975c17",
        "overlay": "#141210",
        "inverse": "#171512",
        "inverseInk": "#f3efe6",
        "accent": "#a8661a",
        "accentInk": "#fffdf8",
        "positive": "#3f6b4a"
      },
      "tags": [
        "paper",
        "editorial",
        "warm"
      ]
    },
    {
      "id": "night-desk",
      "name": "Night Desk",
      "url": "https://designlounge.vercel.app/themes/night-desk",
      "tokens": {
        "bg": "#141311",
        "surface": "#1b1a17",
        "surface2": "#242320",
        "surface3": "#383733",
        "ink": "#ece7dc",
        "ink2": "#a7a196",
        "ink3": "#928d83",
        "line": "#2b2925",
        "lineStrong": "#74716b",
        "primary": "#e0a34b",
        "primaryInk": "#141210",
        "primarySoft": "#45361f",
        "secondary": "#8fbf7a",
        "secondaryInk": "#141210",
        "secondarySoft": "#323c2a",
        "tertiary": "#c48a8a",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#3e302e",
        "success": "#8fbf7a",
        "successInk": "#141210",
        "successSoft": "#323c2a",
        "warning": "#e08a3a",
        "warningInk": "#141210",
        "warningSoft": "#45301b",
        "danger": "#e07060",
        "dangerInk": "#141210",
        "dangerSoft": "#452924",
        "info": "#8ab4c8",
        "infoInk": "#141210",
        "infoSoft": "#303a3d",
        "successOnSoft": "#8fbf7a",
        "warningOnSoft": "#e08a3a",
        "dangerOnSoft": "#e48173",
        "infoOnSoft": "#8ab4c8",
        "focus": "#e0a34b",
        "link": "#e0a34b",
        "overlay": "#070605",
        "inverse": "#ece7dc",
        "inverseInk": "#141311",
        "accent": "#e0a34b",
        "accentInk": "#141210",
        "positive": "#8fbf7a"
      },
      "tags": [
        "dark",
        "warm",
        "editorial"
      ]
    },
    {
      "id": "alpine-clinic",
      "name": "Alpine Clinic",
      "url": "https://designlounge.vercel.app/themes/alpine-clinic",
      "tokens": {
        "bg": "#eef6f3",
        "surface": "#ffffff",
        "surface2": "#dceae4",
        "surface3": "#d0dfd9",
        "ink": "#11302a",
        "ink2": "#3d5c55",
        "ink3": "#53716b",
        "line": "#c5d8d0",
        "lineStrong": "#819891",
        "primary": "#22937a",
        "primaryInk": "#141210",
        "primarySoft": "#cfe7e0",
        "secondary": "#2a6f97",
        "secondaryInk": "#fffdf8",
        "secondarySoft": "#d3e3e6",
        "tertiary": "#6b5a8a",
        "tertiaryInk": "#fffdf8",
        "tertiarySoft": "#dce0e4",
        "success": "#22937a",
        "successInk": "#141210",
        "successSoft": "#cfe7e0",
        "warning": "#c27a1a",
        "warningInk": "#141210",
        "warningSoft": "#e8e5d5",
        "danger": "#b53838",
        "dangerInk": "#fffdf8",
        "dangerSoft": "#e6dbd9",
        "info": "#2a6f97",
        "infoInk": "#fffdf8",
        "infoSoft": "#d3e3e6",
        "successOnSoft": "#176453",
        "warningOnSoft": "#845312",
        "dangerOnSoft": "#9f3131",
        "infoOnSoft": "#256285",
        "focus": "#22937a",
        "link": "#1c7763",
        "overlay": "#141210",
        "inverse": "#11302a",
        "inverseInk": "#eef6f3",
        "accent": "#22937a",
        "accentInk": "#141210",
        "positive": "#22937a"
      },
      "tags": [
        "soft",
        "health",
        "cool"
      ]
    },
    {
      "id": "harbour-ledger",
      "name": "Harbour Ledger",
      "url": "https://designlounge.vercel.app/themes/harbour-ledger",
      "tokens": {
        "bg": "#f4efe4",
        "surface": "#fffaf0",
        "surface2": "#e8e0d0",
        "surface3": "#dbd4c7",
        "ink": "#152033",
        "ink2": "#4a5568",
        "ink3": "#5e6879",
        "line": "#d4cbb8",
        "lineStrong": "#8b8a85",
        "primary": "#b08a3e",
        "primaryInk": "#141210",
        "primarySoft": "#eae1cd",
        "secondary": "#1e3a5f",
        "secondaryInk": "#fffdf8",
        "secondarySoft": "#d6d6d1",
        "tertiary": "#8a3a3a",
        "tertiaryInk": "#fffdf8",
        "tertiarySoft": "#e5d6cc",
        "success": "#2f6b4f",
        "successInk": "#fffdf8",
        "successSoft": "#d8ddcf",
        "warning": "#c27a14",
        "warningInk": "#141210",
        "warningSoft": "#eddfc7",
        "danger": "#8a2a2a",
        "dangerInk": "#fffdf8",
        "dangerSoft": "#e5d3ca",
        "info": "#2a4a7a",
        "infoInk": "#fffdf8",
        "infoSoft": "#d8d8d5",
        "successOnSoft": "#2f6b4f",
        "warningOnSoft": "#84530e",
        "dangerOnSoft": "#8a2a2a",
        "infoOnSoft": "#2a4a7a",
        "focus": "#b08a3e",
        "link": "#80652d",
        "overlay": "#141210",
        "inverse": "#152033",
        "inverseInk": "#f4efe4",
        "accent": "#b08a3e",
        "accentInk": "#141210",
        "positive": "#2f6b4f"
      },
      "tags": [
        "luxe",
        "finance",
        "classic"
      ]
    },
    {
      "id": "kiln",
      "name": "Kiln",
      "url": "https://designlounge.vercel.app/themes/kiln",
      "tokens": {
        "bg": "#f3e6d4",
        "surface": "#faefe0",
        "surface2": "#e6d2b8",
        "surface3": "#dbc7ae",
        "ink": "#2a1b14",
        "ink2": "#6a4e3e",
        "ink3": "#7b6250",
        "line": "#d8c0a4",
        "lineStrong": "#96816d",
        "primary": "#c9693b",
        "primaryInk": "#141210",
        "primarySoft": "#ecd3bc",
        "secondary": "#4f6b3a",
        "secondaryInk": "#fffdf8",
        "secondarySoft": "#dcd5be",
        "tertiary": "#3a4558",
        "tertiaryInk": "#fffdf8",
        "tertiarySoft": "#d9cfc3",
        "success": "#3d7a32",
        "successInk": "#fffdf8",
        "successSoft": "#dad7bd",
        "warning": "#d4a02a",
        "warningInk": "#141210",
        "warningSoft": "#efdcbc",
        "danger": "#9b2c2c",
        "dangerInk": "#fffdf8",
        "dangerSoft": "#e7ccbc",
        "info": "#3a5a78",
        "infoInk": "#fffdf8",
        "infoSoft": "#d9d2c7",
        "successOnSoft": "#305e27",
        "warningOnSoft": "#715417",
        "dangerOnSoft": "#9b2c2c",
        "infoOnSoft": "#3a5a78",
        "focus": "#c9693b",
        "link": "#934d2b",
        "overlay": "#141210",
        "inverse": "#2a1b14",
        "inverseInk": "#f3e6d4",
        "accent": "#c9693b",
        "accentInk": "#141210",
        "positive": "#3d7a32"
      },
      "tags": [
        "organic",
        "warm",
        "craft"
      ]
    },
    {
      "id": "signal-green",
      "name": "Signal Green",
      "url": "https://designlounge.vercel.app/themes/signal-green",
      "tokens": {
        "bg": "#0b0f0c",
        "surface": "#121814",
        "surface2": "#1a221c",
        "surface3": "#2b372e",
        "ink": "#c8f7d4",
        "ink2": "#7fb38c",
        "ink3": "#6f9479",
        "line": "#1e2a21",
        "lineStrong": "#5f7865",
        "primary": "#3ddc84",
        "primaryInk": "#141210",
        "primarySoft": "#174029",
        "secondary": "#e6c35c",
        "secondaryInk": "#141210",
        "secondarySoft": "#403a1f",
        "tertiary": "#7ab8c8",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#263839",
        "success": "#3ddc84",
        "successInk": "#141210",
        "successSoft": "#174029",
        "warning": "#e6c35c",
        "warningInk": "#141210",
        "warningSoft": "#403a1f",
        "danger": "#ff6b5a",
        "dangerInk": "#141210",
        "dangerSoft": "#46251f",
        "info": "#7ab8c8",
        "infoInk": "#141210",
        "infoSoft": "#263839",
        "successOnSoft": "#3ddc84",
        "warningOnSoft": "#e6c35c",
        "dangerOnSoft": "#ff6b5a",
        "infoOnSoft": "#7ab8c8",
        "focus": "#3ddc84",
        "link": "#3ddc84",
        "overlay": "#070605",
        "inverse": "#c8f7d4",
        "inverseInk": "#0b0f0c",
        "accent": "#3ddc84",
        "accentInk": "#141210",
        "positive": "#3ddc84"
      },
      "tags": [
        "terminal",
        "dark",
        "tech"
      ]
    },
    {
      "id": "atelier-noir",
      "name": "Atelier Noir",
      "url": "https://designlounge.vercel.app/themes/atelier-noir",
      "tokens": {
        "bg": "#0c0b0a",
        "surface": "#161412",
        "surface2": "#211e1b",
        "surface3": "#36322e",
        "ink": "#efe6d6",
        "ink2": "#b3a894",
        "ink3": "#867d6e",
        "line": "#2a2622",
        "lineStrong": "#756f66",
        "primary": "#c9a54a",
        "primaryInk": "#141210",
        "primarySoft": "#393019",
        "secondary": "#8a3a3a",
        "secondaryInk": "#fffdf8",
        "secondarySoft": "#2a1616",
        "tertiary": "#62707f",
        "tertiaryInk": "#fffdf8",
        "tertiarySoft": "#232629",
        "success": "#8fbf7a",
        "successInk": "#141210",
        "successSoft": "#2b3625",
        "warning": "#e08a3a",
        "warningInk": "#141210",
        "warningSoft": "#3f2916",
        "danger": "#c96958",
        "dangerInk": "#141210",
        "dangerSoft": "#381e19",
        "info": "#7a8aa0",
        "infoInk": "#141210",
        "infoSoft": "#26292e",
        "successOnSoft": "#8fbf7a",
        "warningOnSoft": "#e08a3a",
        "dangerOnSoft": "#cf7b6c",
        "infoOnSoft": "#8a98ab",
        "focus": "#c9a54a",
        "link": "#c9a54a",
        "overlay": "#070605",
        "inverse": "#efe6d6",
        "inverseInk": "#0c0b0a",
        "accent": "#c9a54a",
        "accentInk": "#141210",
        "positive": "#8fbf7a"
      },
      "tags": [
        "luxe",
        "dark",
        "fashion"
      ]
    },
    {
      "id": "loam",
      "name": "Loam",
      "url": "https://designlounge.vercel.app/themes/loam",
      "tokens": {
        "bg": "#eef0e6",
        "surface": "#f7f6ee",
        "surface2": "#dde1d0",
        "surface3": "#d2d6c5",
        "ink": "#1e2a1e",
        "ink2": "#4e5c4c",
        "ink3": "#606d5e",
        "line": "#c9d0bc",
        "lineStrong": "#889180",
        "primary": "#c46a3c",
        "primaryInk": "#141210",
        "primarySoft": "#e8ddce",
        "secondary": "#4a6b38",
        "secondaryInk": "#fffdf8",
        "secondarySoft": "#d7ddce",
        "tertiary": "#6a3a4a",
        "tertiaryInk": "#fffdf8",
        "tertiarySoft": "#dcd7d0",
        "success": "#4a6b38",
        "successInk": "#fffdf8",
        "successSoft": "#d7ddce",
        "warning": "#c46a3c",
        "warningInk": "#141210",
        "warningSoft": "#e8ddce",
        "danger": "#9b2c2c",
        "dangerInk": "#fffdf8",
        "dangerSoft": "#e2d5cc",
        "info": "#3d5a6b",
        "infoInk": "#fffdf8",
        "infoSoft": "#d5dbd5",
        "successOnSoft": "#415e31",
        "warningOnSoft": "#854829",
        "dangerOnSoft": "#9b2c2c",
        "infoOnSoft": "#3d5a6b",
        "focus": "#c46a3c",
        "link": "#9e5631",
        "overlay": "#141210",
        "inverse": "#1e2a1e",
        "inverseInk": "#eef0e6",
        "accent": "#c46a3c",
        "accentInk": "#141210",
        "positive": "#4a6b38"
      },
      "tags": [
        "organic",
        "warm",
        "editorial"
      ]
    },
    {
      "id": "ice-station",
      "name": "Ice Station",
      "url": "https://designlounge.vercel.app/themes/ice-station",
      "tokens": {
        "bg": "#e8eef2",
        "surface": "#f7fafc",
        "surface2": "#d5dee6",
        "surface3": "#c9d3db",
        "ink": "#14202b",
        "ink2": "#445564",
        "ink3": "#5e6d7a",
        "line": "#c5d0da",
        "lineStrong": "#828d98",
        "primary": "#2a6f97",
        "primaryInk": "#fffdf8",
        "primarySoft": "#cddce5",
        "secondary": "#5a7a8a",
        "secondaryInk": "#fffdf8",
        "secondarySoft": "#d4dee3",
        "tertiary": "#b86a1a",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#e1dcd4",
        "success": "#2a7a62",
        "successInk": "#fffdf8",
        "successSoft": "#cddede",
        "warning": "#b86a1a",
        "warningInk": "#141210",
        "warningSoft": "#e1dcd4",
        "danger": "#a83838",
        "dangerInk": "#fffdf8",
        "dangerSoft": "#dfd5d8",
        "info": "#2a6f97",
        "infoInk": "#fffdf8",
        "infoSoft": "#cddce5",
        "successOnSoft": "#256b56",
        "warningOnSoft": "#8f5214",
        "dangerOnSoft": "#943131",
        "infoOnSoft": "#256285",
        "focus": "#2a6f97",
        "link": "#2a6f97",
        "overlay": "#141210",
        "inverse": "#14202b",
        "inverseInk": "#e8eef2",
        "accent": "#2a6f97",
        "accentInk": "#fffdf8",
        "positive": "#2a7a62"
      },
      "tags": [
        "cool",
        "minimal",
        "civic"
      ]
    },
    {
      "id": "press-room",
      "name": "Press Room",
      "url": "https://designlounge.vercel.app/themes/press-room",
      "tokens": {
        "bg": "#f4f1e8",
        "surface": "#fffdf6",
        "surface2": "#e6e1d4",
        "surface3": "#d9d5c8",
        "ink": "#111111",
        "ink2": "#444444",
        "ink3": "#686868",
        "line": "#cfc8b8",
        "lineStrong": "#878279",
        "primary": "#c4121a",
        "primaryInk": "#fffdf8",
        "primarySoft": "#edd2cb",
        "secondary": "#1a2744",
        "secondaryInk": "#fffdf8",
        "secondarySoft": "#d5d5d1",
        "tertiary": "#c49a2a",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#ede5cd",
        "success": "#1f6b3a",
        "successInk": "#fffdf8",
        "successSoft": "#d6ded0",
        "warning": "#c49a2a",
        "warningInk": "#141210",
        "warningSoft": "#ede5cd",
        "danger": "#c4121a",
        "dangerInk": "#fffdf8",
        "dangerSoft": "#edd2cb",
        "info": "#1a2744",
        "infoInk": "#fffdf8",
        "infoSoft": "#d5d5d1",
        "successOnSoft": "#1f6b3a",
        "warningOnSoft": "#755d1a",
        "dangerOnSoft": "#ac1017",
        "infoOnSoft": "#1a2744",
        "focus": "#c4121a",
        "link": "#c4121a",
        "overlay": "#141210",
        "inverse": "#111111",
        "inverseInk": "#f4f1e8",
        "accent": "#c4121a",
        "accentInk": "#fffdf8",
        "positive": "#1f6b3a"
      },
      "tags": [
        "editorial",
        "swiss",
        "loud"
      ]
    },
    {
      "id": "velvet-club",
      "name": "Velvet Club",
      "url": "https://designlounge.vercel.app/themes/velvet-club",
      "tokens": {
        "bg": "#1a0e12",
        "surface": "#26151b",
        "surface2": "#341e26",
        "surface3": "#473238",
        "ink": "#f3e6d8",
        "ink2": "#c4a992",
        "ink3": "#9a8174",
        "line": "#3d2630",
        "lineStrong": "#826f70",
        "primary": "#d4a24a",
        "primaryInk": "#141210",
        "primarySoft": "#47321f",
        "secondary": "#8a2a44",
        "secondaryInk": "#fffdf8",
        "secondarySoft": "#35151e",
        "tertiary": "#6a8a7a",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#2d2c2b",
        "success": "#8fbf7a",
        "successInk": "#141210",
        "successSoft": "#36382b",
        "warning": "#d4a24a",
        "warningInk": "#141210",
        "warningSoft": "#47321f",
        "danger": "#e07070",
        "dangerInk": "#141210",
        "dangerSoft": "#4a2629",
        "info": "#8aa0c4",
        "infoInk": "#141210",
        "infoSoft": "#35313d",
        "successOnSoft": "#8fbf7a",
        "warningOnSoft": "#d4a24a",
        "dangerOnSoft": "#e48181",
        "infoOnSoft": "#8aa0c4",
        "focus": "#d4a24a",
        "link": "#d4a24a",
        "overlay": "#070605",
        "inverse": "#f3e6d8",
        "inverseInk": "#1a0e12",
        "accent": "#d4a24a",
        "accentInk": "#141210",
        "positive": "#8fbf7a"
      },
      "tags": [
        "luxe",
        "dark",
        "deco"
      ]
    },
    {
      "id": "greenhouse",
      "name": "Greenhouse",
      "url": "https://designlounge.vercel.app/themes/greenhouse",
      "tokens": {
        "bg": "#e7f0dc",
        "surface": "#f4f8ec",
        "surface2": "#d4e2c4",
        "surface3": "#c9d7ba",
        "ink": "#1d2e18",
        "ink2": "#4a5e40",
        "ink3": "#56684d",
        "line": "#bfd0ae",
        "lineStrong": "#819275",
        "primary": "#4f7a32",
        "primaryInk": "#fffdf8",
        "primarySoft": "#d2dfc4",
        "secondary": "#2a4a28",
        "secondaryInk": "#fffdf8",
        "secondarySoft": "#cdd9c3",
        "tertiary": "#c46a6a",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#e2ddcc",
        "success": "#4f7a32",
        "successInk": "#fffdf8",
        "successSoft": "#d2dfc4",
        "warning": "#c47a28",
        "warningInk": "#141210",
        "warningSoft": "#e2dfc3",
        "danger": "#b53838",
        "dangerInk": "#fffdf8",
        "dangerSoft": "#e0d6c5",
        "info": "#3a6a7a",
        "infoInk": "#fffdf8",
        "infoSoft": "#cfddce",
        "successOnSoft": "#3e5e27",
        "warningOnSoft": "#85531b",
        "dangerOnSoft": "#9f3131",
        "infoOnSoft": "#335d6b",
        "focus": "#4f7a32",
        "link": "#476e2d",
        "overlay": "#141210",
        "inverse": "#1d2e18",
        "inverseInk": "#e7f0dc",
        "accent": "#4f7a32",
        "accentInk": "#fffdf8",
        "positive": "#4f7a32"
      },
      "tags": [
        "organic",
        "playful",
        "soft"
      ]
    },
    {
      "id": "circuit",
      "name": "Circuit",
      "url": "https://designlounge.vercel.app/themes/circuit",
      "tokens": {
        "bg": "#0e0f12",
        "surface": "#16181d",
        "surface2": "#1f2229",
        "surface3": "#34373d",
        "ink": "#eef0f3",
        "ink2": "#9aa3b0",
        "ink3": "#7e8691",
        "line": "#2a2e36",
        "lineStrong": "#74787e",
        "primary": "#c6ff3d",
        "primaryInk": "#141210",
        "primarySoft": "#3a491c",
        "secondary": "#3d8aff",
        "secondaryInk": "#141210",
        "secondarySoft": "#192d4b",
        "tertiary": "#ffb020",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#483615",
        "success": "#c6ff3d",
        "successInk": "#141210",
        "successSoft": "#3a491c",
        "warning": "#ffb020",
        "warningInk": "#141210",
        "warningSoft": "#483615",
        "danger": "#ff5a4a",
        "dangerInk": "#141210",
        "dangerSoft": "#48211f",
        "info": "#3d8aff",
        "infoInk": "#141210",
        "infoSoft": "#192d4b",
        "successOnSoft": "#c6ff3d",
        "warningOnSoft": "#ffb020",
        "dangerOnSoft": "#ff5a4a",
        "infoOnSoft": "#5498ff",
        "focus": "#c6ff3d",
        "link": "#c6ff3d",
        "overlay": "#070605",
        "inverse": "#eef0f3",
        "inverseInk": "#0e0f12",
        "accent": "#c6ff3d",
        "accentInk": "#141210",
        "positive": "#c6ff3d"
      },
      "tags": [
        "industrial",
        "dark",
        "tech"
      ]
    },
    {
      "id": "marble-hall",
      "name": "Marble Hall",
      "url": "https://designlounge.vercel.app/themes/marble-hall",
      "tokens": {
        "bg": "#f3f1ec",
        "surface": "#ffffff",
        "surface2": "#e6e3db",
        "surface3": "#dad7cf",
        "ink": "#1c1914",
        "ink2": "#5a554c",
        "ink3": "#6c665c",
        "line": "#d4d0c6",
        "lineStrong": "#8e8a82",
        "primary": "#8a6a2f",
        "primaryInk": "#fffdf8",
        "primarySoft": "#e4ded2",
        "secondary": "#4a5560",
        "secondaryInk": "#fffdf8",
        "secondarySoft": "#dbdbd8",
        "tertiary": "#6a2a2a",
        "tertiaryInk": "#fffdf8",
        "tertiarySoft": "#e0d5d1",
        "success": "#3d6b4a",
        "successInk": "#fffdf8",
        "successSoft": "#daded5",
        "warning": "#c27a14",
        "warningInk": "#141210",
        "warningSoft": "#ece0ce",
        "danger": "#8a2a2a",
        "dangerInk": "#fffdf8",
        "dangerSoft": "#e4d5d1",
        "info": "#3d4f6b",
        "infoInk": "#fffdf8",
        "infoSoft": "#dadada",
        "successOnSoft": "#3d6b4a",
        "warningOnSoft": "#84530e",
        "dangerOnSoft": "#8a2a2a",
        "infoOnSoft": "#3d4f6b",
        "focus": "#8a6a2f",
        "link": "#7c5f2a",
        "overlay": "#141210",
        "inverse": "#1c1914",
        "inverseInk": "#f3f1ec",
        "accent": "#8a6a2f",
        "accentInk": "#fffdf8",
        "positive": "#3d6b4a"
      },
      "tags": [
        "classic",
        "luxe",
        "civic"
      ]
    },
    {
      "id": "cinder",
      "name": "Cinder",
      "url": "https://designlounge.vercel.app/themes/cinder",
      "tokens": {
        "bg": "#e7e6e1",
        "surface": "#f4f3ef",
        "surface2": "#d4d3cd",
        "surface3": "#c9c8c3",
        "ink": "#1b1c1e",
        "ink2": "#4e5054",
        "ink3": "#616366",
        "line": "#c4c3bd",
        "lineStrong": "#848481",
        "primary": "#ff5a1f",
        "primaryInk": "#141210",
        "primarySoft": "#ead2c6",
        "secondary": "#3a4a5a",
        "secondaryInk": "#fffdf8",
        "secondarySoft": "#cfd0ce",
        "tertiary": "#e6b020",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#e7dec6",
        "success": "#2f7a4a",
        "successInk": "#fffdf8",
        "successSoft": "#cdd7cc",
        "warning": "#e6b020",
        "warningInk": "#141210",
        "warningSoft": "#e7dec6",
        "danger": "#ff5a1f",
        "dangerInk": "#141210",
        "dangerSoft": "#ead2c6",
        "info": "#3a4a5a",
        "infoInk": "#fffdf8",
        "infoSoft": "#cfd0ce",
        "successOnSoft": "#245e39",
        "warningOnSoft": "#795d11",
        "dangerOnSoft": "#983712",
        "infoOnSoft": "#3a4a5a",
        "focus": "#ff5a1f",
        "link": "#a73b15",
        "overlay": "#141210",
        "inverse": "#1b1c1e",
        "inverseInk": "#e7e6e1",
        "accent": "#ff5a1f",
        "accentInk": "#141210",
        "positive": "#2f7a4a"
      },
      "tags": [
        "industrial",
        "utility",
        "loud"
      ]
    },
    {
      "id": "sakura-desk",
      "name": "Sakura Desk",
      "url": "https://designlounge.vercel.app/themes/sakura-desk",
      "tokens": {
        "bg": "#f6ebe8",
        "surface": "#fff7f4",
        "surface2": "#ead8d3",
        "surface3": "#deccc8",
        "ink": "#2a1716",
        "ink2": "#6a4a46",
        "ink3": "#7b5e5a",
        "line": "#e0c8c2",
        "lineStrong": "#9b8581",
        "primary": "#c43b3b",
        "primaryInk": "#fffdf8",
        "primarySoft": "#efd2d0",
        "secondary": "#2a1716",
        "secondaryInk": "#fffdf8",
        "secondarySoft": "#d9cdcb",
        "tertiary": "#d4a09a",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#f1e1dd",
        "success": "#3d6b4a",
        "successInk": "#fffdf8",
        "successSoft": "#dcd9d2",
        "warning": "#c47a28",
        "warningInk": "#141210",
        "warningSoft": "#efdbcd",
        "danger": "#c43b3b",
        "dangerInk": "#fffdf8",
        "dangerSoft": "#efd2d0",
        "info": "#5a4a6b",
        "infoInk": "#fffdf8",
        "infoSoft": "#e0d4d7",
        "successOnSoft": "#365e41",
        "warningOnSoft": "#85531b",
        "dangerOnSoft": "#972e2e",
        "infoOnSoft": "#5a4a6b",
        "focus": "#c43b3b",
        "link": "#b03535",
        "overlay": "#141210",
        "inverse": "#2a1716",
        "inverseInk": "#f6ebe8",
        "accent": "#c43b3b",
        "accentInk": "#fffdf8",
        "positive": "#3d6b4a"
      },
      "tags": [
        "paper",
        "soft",
        "editorial"
      ]
    },
    {
      "id": "observatory",
      "name": "Observatory",
      "url": "https://designlounge.vercel.app/themes/observatory",
      "tokens": {
        "bg": "#0b1220",
        "surface": "#121a2c",
        "surface2": "#1a2438",
        "surface3": "#2f384b",
        "ink": "#e8eef8",
        "ink2": "#9aacc4",
        "ink3": "#7a8aa3",
        "line": "#243044",
        "lineStrong": "#6e7888",
        "primary": "#e0b44a",
        "primaryInk": "#141210",
        "primarySoft": "#3e392a",
        "secondary": "#5ec8a0",
        "secondaryInk": "#141210",
        "secondarySoft": "#1f3e3f",
        "tertiary": "#6a5a9a",
        "tertiaryInk": "#fffdf8",
        "tertiarySoft": "#22233d",
        "success": "#5ec8a0",
        "successInk": "#141210",
        "successSoft": "#1f3e3f",
        "warning": "#e0b44a",
        "warningInk": "#141210",
        "warningSoft": "#3e392a",
        "danger": "#e07070",
        "dangerInk": "#141210",
        "dangerSoft": "#3e2933",
        "info": "#6a8ac8",
        "infoInk": "#141210",
        "infoSoft": "#222f48",
        "successOnSoft": "#5ec8a0",
        "warningOnSoft": "#e0b44a",
        "dangerOnSoft": "#e48181",
        "infoOnSoft": "#7c98cf",
        "focus": "#e0b44a",
        "link": "#e0b44a",
        "overlay": "#070605",
        "inverse": "#e8eef8",
        "inverseInk": "#0b1220",
        "accent": "#e0b44a",
        "accentInk": "#141210",
        "positive": "#5ec8a0"
      },
      "tags": [
        "dark",
        "luxe",
        "cool"
      ]
    },
    {
      "id": "market-stall",
      "name": "Market Stall",
      "url": "https://designlounge.vercel.app/themes/market-stall",
      "tokens": {
        "bg": "#f6ead2",
        "surface": "#fff6e4",
        "surface2": "#ead8b4",
        "surface3": "#decdaa",
        "ink": "#2a1a10",
        "ink2": "#6a4a30",
        "ink3": "#7b5b41",
        "line": "#d8c094",
        "lineStrong": "#968162",
        "primary": "#d23a1e",
        "primaryInk": "#fffdf8",
        "primarySoft": "#f1d1b9",
        "secondary": "#d4a020",
        "secondaryInk": "#141210",
        "secondarySoft": "#f1e0b9",
        "tertiary": "#3d6b2a",
        "tertiaryInk": "#fffdf8",
        "tertiarySoft": "#dcd8ba",
        "success": "#3d6b2a",
        "successInk": "#fffdf8",
        "successSoft": "#dcd8ba",
        "warning": "#d4a020",
        "warningInk": "#141210",
        "warningSoft": "#f1e0b9",
        "danger": "#d23a1e",
        "dangerInk": "#fffdf8",
        "dangerSoft": "#f1d1b9",
        "info": "#2a5a7a",
        "infoInk": "#fffdf8",
        "infoSoft": "#d9d6c6",
        "successOnSoft": "#365e25",
        "warningOnSoft": "#715411",
        "dangerOnSoft": "#a32d17",
        "infoOnSoft": "#2a5a7a",
        "focus": "#d23a1e",
        "link": "#bd341b",
        "overlay": "#141210",
        "inverse": "#2a1a10",
        "inverseInk": "#f6ead2",
        "accent": "#d23a1e",
        "accentInk": "#fffdf8",
        "positive": "#3d6b2a"
      },
      "tags": [
        "playful",
        "warm",
        "organic"
      ]
    },
    {
      "id": "fog-city",
      "name": "Fog City",
      "url": "https://designlounge.vercel.app/themes/fog-city",
      "tokens": {
        "bg": "#eef1f3",
        "surface": "#ffffff",
        "surface2": "#dfe4e8",
        "surface3": "#d3d8dc",
        "ink": "#0f1418",
        "ink2": "#4a5560",
        "ink3": "#5c666f",
        "line": "#cdd3d8",
        "lineStrong": "#858a8f",
        "primary": "#0e66eb",
        "primaryInk": "#fffdf8",
        "primarySoft": "#cfdff5",
        "secondary": "#3d4a5c",
        "secondaryInk": "#fffdf8",
        "secondarySoft": "#d5dade",
        "tertiary": "#22937a",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#cfe3e0",
        "success": "#319367",
        "successInk": "#141210",
        "successSoft": "#d1e3de",
        "warning": "#c27a14",
        "warningInk": "#141210",
        "warningSoft": "#e8e0d4",
        "danger": "#c4121a",
        "dangerInk": "#fffdf8",
        "dangerSoft": "#e8d2d5",
        "info": "#0e66eb",
        "infoInk": "#fffdf8",
        "infoSoft": "#cfdff5",
        "successOnSoft": "#216446",
        "warningOnSoft": "#84530e",
        "dangerOnSoft": "#ac1017",
        "infoOnSoft": "#0c5acf",
        "focus": "#0e66eb",
        "link": "#0d5cd4",
        "overlay": "#141210",
        "inverse": "#0f1418",
        "inverseInk": "#eef1f3",
        "accent": "#0e66eb",
        "accentInk": "#fffdf8",
        "positive": "#319367"
      },
      "tags": [
        "minimal",
        "cool",
        "product"
      ]
    },
    {
      "id": "archive",
      "name": "Archive",
      "url": "https://designlounge.vercel.app/themes/archive",
      "tokens": {
        "bg": "#efe4c8",
        "surface": "#f7eed6",
        "surface2": "#e0d2ae",
        "surface3": "#d5c7a5",
        "ink": "#231c12",
        "ink2": "#5a4e38",
        "ink3": "#6e6045",
        "line": "#d4c49a",
        "lineStrong": "#918466",
        "primary": "#8b1e1e",
        "primaryInk": "#fffdf8",
        "primarySoft": "#e1c8b0",
        "secondary": "#2a3a5a",
        "secondaryInk": "#fffdf8",
        "secondarySoft": "#d3ccb9",
        "tertiary": "#c4a86a",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#e9dcbb",
        "success": "#3d5c2a",
        "successInk": "#fffdf8",
        "successSoft": "#d6d1b2",
        "warning": "#c4a86a",
        "warningInk": "#141210",
        "warningSoft": "#e9dcbb",
        "danger": "#8b1e1e",
        "dangerInk": "#fffdf8",
        "dangerSoft": "#e1c8b0",
        "info": "#2a3a5a",
        "infoInk": "#fffdf8",
        "infoSoft": "#d3ccb9",
        "successOnSoft": "#3d5c2a",
        "warningOnSoft": "#675837",
        "dangerOnSoft": "#8b1e1e",
        "infoOnSoft": "#2a3a5a",
        "focus": "#8b1e1e",
        "link": "#8b1e1e",
        "overlay": "#141210",
        "inverse": "#231c12",
        "inverseInk": "#efe4c8",
        "accent": "#8b1e1e",
        "accentInk": "#fffdf8",
        "positive": "#3d5c2a"
      },
      "tags": [
        "paper",
        "retro",
        "editorial"
      ]
    },
    {
      "id": "neon-alley",
      "name": "Neon Alley",
      "url": "https://designlounge.vercel.app/themes/neon-alley",
      "tokens": {
        "bg": "#0a0612",
        "surface": "#140c20",
        "surface2": "#1e1230",
        "surface3": "#332845",
        "ink": "#f2e9ff",
        "ink2": "#b8a0d4",
        "ink3": "#8c7ba4",
        "line": "#2a1a44",
        "lineStrong": "#76698b",
        "primary": "#ff4fa3",
        "primaryInk": "#141210",
        "primarySoft": "#451835",
        "secondary": "#19e6c1",
        "secondaryInk": "#141210",
        "secondarySoft": "#0e3c3c",
        "tertiary": "#7f49eb",
        "tertiaryInk": "#fffdf8",
        "tertiarySoft": "#29184b",
        "success": "#19e6c1",
        "successInk": "#141210",
        "successSoft": "#0e3c3c",
        "warning": "#ffb020",
        "warningInk": "#141210",
        "warningSoft": "#452f15",
        "danger": "#ff4fa3",
        "dangerInk": "#141210",
        "dangerSoft": "#451835",
        "info": "#7f49eb",
        "infoInk": "#fffdf8",
        "infoSoft": "#29184b",
        "successOnSoft": "#19e6c1",
        "warningOnSoft": "#ffb020",
        "dangerOnSoft": "#ff4fa3",
        "infoOnSoft": "#9c72ef",
        "focus": "#ff4fa3",
        "link": "#ff4fa3",
        "overlay": "#070605",
        "inverse": "#f2e9ff",
        "inverseInk": "#0a0612",
        "accent": "#ff4fa3",
        "accentInk": "#141210",
        "positive": "#19e6c1"
      },
      "tags": [
        "cyber",
        "dark",
        "y2k"
      ]
    },
    {
      "id": "linen-shop",
      "name": "Linen Shop",
      "url": "https://designlounge.vercel.app/themes/linen-shop",
      "tokens": {
        "bg": "#efe7dc",
        "surface": "#f8f2e8",
        "surface2": "#e2d6c6",
        "surface3": "#d7cbbc",
        "ink": "#2a211b",
        "ink2": "#6a5a4c",
        "ink3": "#6f6154",
        "line": "#d4c6b4",
        "lineStrong": "#93877a",
        "primary": "#9d4b2c",
        "primaryInk": "#fffdf8",
        "primarySoft": "#e4d1c3",
        "secondary": "#6a7a5a",
        "secondaryInk": "#fffdf8",
        "secondarySoft": "#dcd8ca",
        "tertiary": "#b08a4a",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#e6dac8",
        "success": "#4a6b3a",
        "successInk": "#fffdf8",
        "successSoft": "#d8d6c5",
        "warning": "#b08a4a",
        "warningInk": "#141210",
        "warningSoft": "#e6dac8",
        "danger": "#9d4b2c",
        "dangerInk": "#fffdf8",
        "dangerSoft": "#e4d1c3",
        "info": "#4a5a6b",
        "infoInk": "#fffdf8",
        "infoSoft": "#d8d3cc",
        "successOnSoft": "#415e33",
        "warningOnSoft": "#6a522c",
        "dangerOnSoft": "#8a4227",
        "infoOnSoft": "#4a5a6b",
        "focus": "#9d4b2c",
        "link": "#9d4b2c",
        "overlay": "#141210",
        "inverse": "#2a211b",
        "inverseInk": "#efe7dc",
        "accent": "#9d4b2c",
        "accentInk": "#fffdf8",
        "positive": "#4a6b3a"
      },
      "tags": [
        "soft",
        "organic",
        "fashion"
      ]
    },
    {
      "id": "copper-works",
      "name": "Copper Works",
      "url": "https://designlounge.vercel.app/themes/copper-works",
      "tokens": {
        "bg": "#1a1410",
        "surface": "#241c16",
        "surface2": "#30261e",
        "surface3": "#433930",
        "ink": "#f0e6d6",
        "ink2": "#b4a08a",
        "ink3": "#9b8d79",
        "line": "#3a3026",
        "lineStrong": "#7f7569",
        "primary": "#c46a32",
        "primaryInk": "#141210",
        "primarySoft": "#432918",
        "secondary": "#8fbf7a",
        "secondaryInk": "#141210",
        "secondarySoft": "#363d29",
        "tertiary": "#c4a86a",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#433826",
        "success": "#8fbf7a",
        "successInk": "#141210",
        "successSoft": "#363d29",
        "warning": "#c46a32",
        "warningInk": "#141210",
        "warningSoft": "#432918",
        "danger": "#e07060",
        "dangerInk": "#141210",
        "dangerSoft": "#4a2a23",
        "info": "#7a9ab4",
        "infoInk": "#141210",
        "infoSoft": "#313437",
        "successOnSoft": "#8fbf7a",
        "warningOnSoft": "#d18c61",
        "dangerOnSoft": "#e48173",
        "infoOnSoft": "#8aa6bd",
        "focus": "#c46a32",
        "link": "#c46a32",
        "overlay": "#070605",
        "inverse": "#f0e6d6",
        "inverseInk": "#1a1410",
        "accent": "#c46a32",
        "accentInk": "#141210",
        "positive": "#8fbf7a"
      },
      "tags": [
        "industrial",
        "warm",
        "craft"
      ]
    },
    {
      "id": "glacier",
      "name": "Glacier",
      "url": "https://designlounge.vercel.app/themes/glacier",
      "tokens": {
        "bg": "#f2f6f8",
        "surface": "#ffffff",
        "surface2": "#e0e8ee",
        "surface3": "#d4dce3",
        "ink": "#1a2430",
        "ink2": "#4a5a68",
        "ink3": "#606e7b",
        "line": "#c8d4dc",
        "lineStrong": "#86919b",
        "primary": "#3a8aa8",
        "primaryInk": "#141210",
        "primarySoft": "#d8e7ed",
        "secondary": "#4a5a68",
        "secondaryInk": "#fffdf8",
        "secondarySoft": "#dae0e4",
        "tertiary": "#3b9376",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#d6e7e4",
        "success": "#3b9376",
        "successInk": "#141210",
        "successSoft": "#d6e7e4",
        "warning": "#c28a20",
        "warningInk": "#141210",
        "warningSoft": "#ebe7da",
        "danger": "#b53838",
        "dangerInk": "#fffdf8",
        "dangerSoft": "#e9dbdd",
        "info": "#3a8aa8",
        "infoInk": "#141210",
        "infoSoft": "#d8e7ed",
        "successOnSoft": "#286451",
        "warningOnSoft": "#845d16",
        "dangerOnSoft": "#9f3131",
        "infoOnSoft": "#2d6a82",
        "focus": "#3a8aa8",
        "link": "#2f7088",
        "overlay": "#141210",
        "inverse": "#1a2430",
        "inverseInk": "#f2f6f8",
        "accent": "#3a8aa8",
        "accentInk": "#141210",
        "positive": "#3b9376"
      },
      "tags": [
        "minimal",
        "cool",
        "soft"
      ]
    },
    {
      "id": "festival",
      "name": "Festival",
      "url": "https://designlounge.vercel.app/themes/festival",
      "tokens": {
        "bg": "#f6f1ea",
        "surface": "#fffaf4",
        "surface2": "#ebe0d2",
        "surface3": "#dfd5cc",
        "ink": "#1f2a6b",
        "ink2": "#4a4e8a",
        "ink3": "#606494",
        "line": "#d4c8ba",
        "lineStrong": "#8f8c9c",
        "primary": "#ff4f8b",
        "primaryInk": "#141210",
        "primarySoft": "#f7dadd",
        "secondary": "#1f2a6b",
        "secondaryInk": "#fffdf8",
        "secondarySoft": "#d8d5d8",
        "tertiary": "#f0c84a",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#f5ebd4",
        "success": "#1f2a6b",
        "successInk": "#fffdf8",
        "successSoft": "#d8d5d8",
        "warning": "#f0c84a",
        "warningInk": "#141210",
        "warningSoft": "#f5ebd4",
        "danger": "#ff4f8b",
        "dangerInk": "#141210",
        "dangerSoft": "#f7dadd",
        "info": "#1f2a6b",
        "infoInk": "#fffdf8",
        "infoSoft": "#d8d5d8",
        "successOnSoft": "#1f2a6b",
        "warningOnSoft": "#705d22",
        "dangerOnSoft": "#ad375e",
        "infoOnSoft": "#1f2a6b",
        "focus": "#ff4f8b",
        "link": "#ba3a66",
        "overlay": "#141210",
        "inverse": "#1f2a6b",
        "inverseInk": "#f6f1ea",
        "accent": "#ff4f8b",
        "accentInk": "#141210",
        "positive": "#1f2a6b"
      },
      "tags": [
        "riso",
        "playful",
        "loud"
      ]
    },
    {
      "id": "courtroom",
      "name": "Courtroom",
      "url": "https://designlounge.vercel.app/themes/courtroom",
      "tokens": {
        "bg": "#f3eee2",
        "surface": "#faf6ec",
        "surface2": "#e4dcc8",
        "surface3": "#d8d1be",
        "ink": "#14241c",
        "ink2": "#4a5a4c",
        "ink3": "#5e6e5e",
        "line": "#d0c6ae",
        "lineStrong": "#898877",
        "primary": "#b5381f",
        "primaryInk": "#fffdf8",
        "primarySoft": "#ead5c7",
        "secondary": "#14241c",
        "secondaryInk": "#fffdf8",
        "secondarySoft": "#d4d2c6",
        "tertiary": "#b08a3e",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#eae0cb",
        "success": "#2a5c3a",
        "successInk": "#fffdf8",
        "successSoft": "#d7daca",
        "warning": "#b08a3e",
        "warningInk": "#141210",
        "warningSoft": "#eae0cb",
        "danger": "#b5381f",
        "dangerInk": "#fffdf8",
        "dangerSoft": "#ead5c7",
        "info": "#3d4f6b",
        "infoInk": "#fffdf8",
        "infoSoft": "#dad8d1",
        "successOnSoft": "#2a5c3a",
        "warningOnSoft": "#785d2a",
        "dangerOnSoft": "#9f311b",
        "infoOnSoft": "#3d4f6b",
        "focus": "#b5381f",
        "link": "#b5381f",
        "overlay": "#141210",
        "inverse": "#14241c",
        "inverseInk": "#f3eee2",
        "accent": "#b5381f",
        "accentInk": "#fffdf8",
        "positive": "#2a5c3a"
      },
      "tags": [
        "classic",
        "luxe",
        "civic"
      ]
    },
    {
      "id": "playroom",
      "name": "Playroom",
      "url": "https://designlounge.vercel.app/themes/playroom",
      "tokens": {
        "bg": "#fff4d6",
        "surface": "#fffaf0",
        "surface2": "#ffe8a8",
        "surface3": "#f2dca2",
        "ink": "#2c2140",
        "ink2": "#5a4e78",
        "ink3": "#706488",
        "line": "#ead8a0",
        "lineStrong": "#a2927c",
        "primary": "#ff6b4a",
        "primaryInk": "#141210",
        "primarySoft": "#ffe1c2",
        "secondary": "#2c2140",
        "secondaryInk": "#fffdf8",
        "secondarySoft": "#e1d6c1",
        "tertiary": "#f0c84a",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#fdeec2",
        "success": "#2f9e5b",
        "successInk": "#141210",
        "successSoft": "#e2e8c5",
        "warning": "#f0c84a",
        "warningInk": "#141210",
        "warningSoft": "#fdeec2",
        "danger": "#ff6b4a",
        "dangerInk": "#141210",
        "dangerSoft": "#ffe1c2",
        "info": "#4a6ab4",
        "infoInk": "#fffdf8",
        "infoSoft": "#e6e1d1",
        "successOnSoft": "#206b3e",
        "warningOnSoft": "#7f6a27",
        "dangerOnSoft": "#98402c",
        "infoOnSoft": "#415d9e",
        "focus": "#ff6b4a",
        "link": "#ba4d36",
        "overlay": "#141210",
        "inverse": "#2c2140",
        "inverseInk": "#fff4d6",
        "accent": "#ff6b4a",
        "accentInk": "#141210",
        "positive": "#2f9e5b"
      },
      "tags": [
        "playful",
        "clay",
        "soft"
      ]
    },
    {
      "id": "oxide",
      "name": "Oxide",
      "url": "https://designlounge.vercel.app/themes/oxide",
      "tokens": {
        "bg": "#e6dcc8",
        "surface": "#f2ead8",
        "surface2": "#d4c8ae",
        "surface3": "#cabea5",
        "ink": "#2a2218",
        "ink2": "#5a5244",
        "ink3": "#665c4e",
        "line": "#c8bca4",
        "lineStrong": "#8c816f",
        "primary": "#a84828",
        "primaryInk": "#fffdf8",
        "primarySoft": "#ddc7b2",
        "secondary": "#4a6b32",
        "secondaryInk": "#fffdf8",
        "secondarySoft": "#d0ccb3",
        "tertiary": "#5a6a7a",
        "tertiaryInk": "#fffdf8",
        "tertiarySoft": "#d2ccbd",
        "success": "#3d6b2a",
        "successInk": "#fffdf8",
        "successSoft": "#ceccb2",
        "warning": "#c49a2a",
        "warningInk": "#141210",
        "warningSoft": "#e1d3b2",
        "danger": "#8a2a2a",
        "dangerInk": "#fffdf8",
        "dangerSoft": "#d9c3b2",
        "info": "#3d4f6b",
        "infoInk": "#fffdf8",
        "infoSoft": "#cec8bb",
        "successOnSoft": "#365e25",
        "warningOnSoft": "#675217",
        "dangerOnSoft": "#8a2a2a",
        "infoOnSoft": "#3d4f6b",
        "focus": "#a84828",
        "link": "#974124",
        "overlay": "#141210",
        "inverse": "#2a2218",
        "inverseInk": "#e6dcc8",
        "accent": "#a84828",
        "accentInk": "#fffdf8",
        "positive": "#3d6b2a"
      },
      "tags": [
        "industrial",
        "organic",
        "warm"
      ]
    },
    {
      "id": "y2k-chrome",
      "name": "Y2K Chrome",
      "url": "https://designlounge.vercel.app/themes/y2k-chrome",
      "tokens": {
        "bg": "#e8ecf2",
        "surface": "#f4f6fa",
        "surface2": "#d0d6e0",
        "surface3": "#c4cad4",
        "ink": "#10131a",
        "ink2": "#4a5260",
        "ink3": "#5d636f",
        "line": "#c0c6d0",
        "lineStrong": "#7d828b",
        "primary": "#2b62eb",
        "primaryInk": "#fffdf8",
        "primarySoft": "#cedaf4",
        "secondary": "#ff4fa3",
        "secondaryInk": "#141210",
        "secondarySoft": "#ebd6e7",
        "tertiary": "#1aa87a",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#cbe2e1",
        "success": "#1aa87a",
        "successInk": "#141210",
        "successSoft": "#cbe2e1",
        "warning": "#e6b020",
        "warningInk": "#141210",
        "warningSoft": "#e8e4d5",
        "danger": "#ff4fa3",
        "dangerInk": "#141210",
        "dangerSoft": "#ebd6e7",
        "info": "#2b62eb",
        "infoInk": "#fffdf8",
        "infoSoft": "#cedaf4",
        "successOnSoft": "#106449",
        "warningOnSoft": "#795d11",
        "dangerOnSoft": "#983062",
        "infoOnSoft": "#2656cf",
        "focus": "#2b62eb",
        "link": "#2758d4",
        "overlay": "#141210",
        "inverse": "#10131a",
        "inverseInk": "#e8ecf2",
        "accent": "#2b62eb",
        "accentInk": "#fffdf8",
        "positive": "#1aa87a"
      },
      "tags": [
        "y2k",
        "retro",
        "playful"
      ]
    },
    {
      "id": "hud-teal",
      "name": "HUD Teal",
      "url": "https://designlounge.vercel.app/themes/hud-teal",
      "tokens": {
        "bg": "#07090d",
        "surface": "#0e1218",
        "surface2": "#161c26",
        "surface3": "#29303a",
        "ink": "#d6e2f0",
        "ink2": "#8aa0b8",
        "ink3": "#6d8198",
        "line": "#1e2834",
        "lineStrong": "#646f7b",
        "primary": "#19e6c1",
        "primaryInk": "#141210",
        "primarySoft": "#0b3e38",
        "secondary": "#e6c419",
        "secondaryInk": "#141210",
        "secondarySoft": "#3d3610",
        "tertiary": "#5aa8e6",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#1b2f41",
        "success": "#19e6c1",
        "successInk": "#141210",
        "successSoft": "#0b3e38",
        "warning": "#e6c419",
        "warningInk": "#141210",
        "warningSoft": "#3d3610",
        "danger": "#ff5a4a",
        "dangerInk": "#141210",
        "dangerSoft": "#431c1c",
        "info": "#5aa8e6",
        "infoInk": "#141210",
        "infoSoft": "#1b2f41",
        "successOnSoft": "#19e6c1",
        "warningOnSoft": "#e6c419",
        "dangerOnSoft": "#ff5a4a",
        "infoOnSoft": "#5aa8e6",
        "focus": "#19e6c1",
        "link": "#19e6c1",
        "overlay": "#070605",
        "inverse": "#d6e2f0",
        "inverseInk": "#07090d",
        "accent": "#19e6c1",
        "accentInk": "#141210",
        "positive": "#19e6c1"
      },
      "tags": [
        "cyber",
        "dark",
        "tech"
      ]
    },
    {
      "id": "lokta",
      "name": "Lokta",
      "url": "https://designlounge.vercel.app/themes/lokta",
      "tokens": {
        "bg": "#f4ead6",
        "surface": "#fbf6ea",
        "surface2": "#e8dcc4",
        "surface3": "#dcd1bc",
        "ink": "#1c2744",
        "ink2": "#3e4a66",
        "ink3": "#616a81",
        "line": "#d9cbb3",
        "lineStrong": "#918d89",
        "primary": "#c8102e",
        "primaryInk": "#fffdf8",
        "primarySoft": "#eecbbe",
        "secondary": "#1c2744",
        "secondaryInk": "#fffdf8",
        "secondarySoft": "#d6cfc2",
        "tertiary": "#8a6232",
        "tertiaryInk": "#fffdf8",
        "tertiarySoft": "#e5d7bf",
        "success": "#1f6b45",
        "successInk": "#fffdf8",
        "successSoft": "#d6d8c2",
        "warning": "#a15c12",
        "warningInk": "#fffdf8",
        "warningSoft": "#e8d6bb",
        "danger": "#9b1b2e",
        "dangerInk": "#fffdf8",
        "dangerSoft": "#e8cdbe",
        "info": "#1c2744",
        "infoInk": "#fffdf8",
        "infoSoft": "#d6cfc2",
        "successOnSoft": "#1b5e3d",
        "warningOnSoft": "#7d470e",
        "dangerOnSoft": "#9b1b2e",
        "infoOnSoft": "#1c2744",
        "focus": "#c8102e",
        "link": "#c8102e",
        "overlay": "#141210",
        "inverse": "#1c2744",
        "inverseInk": "#f4ead6",
        "accent": "#c8102e",
        "accentInk": "#fffdf8",
        "positive": "#1f6b45"
      },
      "tags": [
        "paper",
        "warm",
        "editorial"
      ]
    },
    {
      "id": "lokta-night",
      "name": "Lokta Night",
      "url": "https://designlounge.vercel.app/themes/lokta-night",
      "tokens": {
        "bg": "#121820",
        "surface": "#1a2230",
        "surface2": "#243044",
        "surface3": "#394353",
        "ink": "#f4ead6",
        "ink2": "#c9bfae",
        "ink3": "#9a9183",
        "line": "#314056",
        "lineStrong": "#7b8187",
        "primary": "#e85a68",
        "primaryInk": "#141210",
        "primarySoft": "#452831",
        "secondary": "#f4ead6",
        "secondaryInk": "#141210",
        "secondarySoft": "#484a4c",
        "tertiary": "#d4b06a",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#413c32",
        "success": "#7dba9a",
        "successInk": "#141210",
        "successSoft": "#2c3f3d",
        "warning": "#e0a34b",
        "warningInk": "#141210",
        "warningSoft": "#43392a",
        "danger": "#ff8a96",
        "dangerInk": "#141210",
        "dangerSoft": "#4b333c",
        "info": "#9bb4d4",
        "infoInk": "#141210",
        "infoSoft": "#333d4b",
        "successOnSoft": "#7dba9a",
        "warningOnSoft": "#e0a34b",
        "dangerOnSoft": "#ff8a96",
        "infoOnSoft": "#9bb4d4",
        "focus": "#e85a68",
        "link": "#e85a68",
        "overlay": "#070605",
        "inverse": "#f4ead6",
        "inverseInk": "#121820",
        "accent": "#e85a68",
        "accentInk": "#141210",
        "positive": "#7dba9a"
      },
      "tags": [
        "dark",
        "warm",
        "editorial"
      ]
    },
    {
      "id": "harbour-night",
      "name": "Harbour Night",
      "url": "https://designlounge.vercel.app/themes/harbour-night",
      "tokens": {
        "bg": "#121820",
        "surface": "#1a2330",
        "surface2": "#243044",
        "surface3": "#394354",
        "ink": "#f4efe4",
        "ink2": "#c5c0b4",
        "ink3": "#9a9488",
        "line": "#314056",
        "lineStrong": "#7b838c",
        "primary": "#d4b06a",
        "primaryInk": "#141210",
        "primarySoft": "#413c32",
        "secondary": "#8eb0d4",
        "secondaryInk": "#141210",
        "secondarySoft": "#303c4b",
        "tertiary": "#c47a7a",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#3d3036",
        "success": "#7dba9a",
        "successInk": "#141210",
        "successSoft": "#2c3f3d",
        "warning": "#e0a34b",
        "warningInk": "#141210",
        "warningSoft": "#43392a",
        "danger": "#e07070",
        "dangerInk": "#141210",
        "dangerSoft": "#432d33",
        "info": "#8eb0d4",
        "infoInk": "#141210",
        "infoSoft": "#303c4b",
        "successOnSoft": "#7dba9a",
        "warningOnSoft": "#e0a34b",
        "dangerOnSoft": "#e48181",
        "infoOnSoft": "#8eb0d4",
        "focus": "#d4b06a",
        "link": "#d4b06a",
        "overlay": "#070605",
        "inverse": "#f4efe4",
        "inverseInk": "#121820",
        "accent": "#d4b06a",
        "accentInk": "#141210",
        "positive": "#7dba9a"
      },
      "tags": [
        "luxe",
        "finance",
        "dark"
      ]
    },
    {
      "id": "alpine-night",
      "name": "Alpine Night",
      "url": "https://designlounge.vercel.app/themes/alpine-night",
      "tokens": {
        "bg": "#0d1a17",
        "surface": "#13231f",
        "surface2": "#1b2e29",
        "surface3": "#2f423d",
        "ink": "#e3f2ec",
        "ink2": "#9cbcb2",
        "ink3": "#7c9a92",
        "line": "#24382f",
        "lineStrong": "#6d7f77",
        "primary": "#3cc9a4",
        "primaryInk": "#141210",
        "primarySoft": "#184439",
        "secondary": "#6aaed4",
        "secondaryInk": "#141210",
        "secondarySoft": "#233e44",
        "tertiary": "#a898cc",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#323842",
        "success": "#3cc9a4",
        "successInk": "#141210",
        "successSoft": "#184439",
        "warning": "#e0a34b",
        "warningInk": "#141210",
        "warningSoft": "#403b23",
        "danger": "#ff7a6e",
        "dangerInk": "#141210",
        "dangerSoft": "#47312c",
        "info": "#6aaed4",
        "infoInk": "#141210",
        "infoSoft": "#233e44",
        "successOnSoft": "#3cc9a4",
        "warningOnSoft": "#e0a34b",
        "dangerOnSoft": "#ff7a6e",
        "infoOnSoft": "#6aaed4",
        "focus": "#3cc9a4",
        "link": "#3cc9a4",
        "overlay": "#070605",
        "inverse": "#e3f2ec",
        "inverseInk": "#0d1a17",
        "accent": "#3cc9a4",
        "accentInk": "#141210",
        "positive": "#3cc9a4"
      },
      "tags": [
        "soft",
        "health",
        "dark"
      ]
    },
    {
      "id": "loam-dusk",
      "name": "Loam Dusk",
      "url": "https://designlounge.vercel.app/themes/loam-dusk",
      "tokens": {
        "bg": "#161a13",
        "surface": "#1d2219",
        "surface2": "#262c21",
        "surface3": "#3a3f34",
        "ink": "#ecebdf",
        "ink2": "#b0b5a2",
        "ink3": "#8e9382",
        "line": "#2f3628",
        "lineStrong": "#777b6e",
        "primary": "#e08a5c",
        "primaryInk": "#141210",
        "primarySoft": "#463525",
        "secondary": "#9cbf84",
        "secondaryInk": "#141210",
        "secondarySoft": "#36422e",
        "tertiary": "#c48a9c",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#403534",
        "success": "#9cbf84",
        "successInk": "#141210",
        "successSoft": "#36422e",
        "warning": "#e0a34b",
        "warningInk": "#141210",
        "warningSoft": "#463b20",
        "danger": "#e07060",
        "dangerInk": "#141210",
        "dangerSoft": "#462f25",
        "info": "#8ab4c8",
        "infoInk": "#141210",
        "infoSoft": "#323f3e",
        "successOnSoft": "#9cbf84",
        "warningOnSoft": "#e0a34b",
        "dangerOnSoft": "#e48173",
        "infoOnSoft": "#8ab4c8",
        "focus": "#e08a5c",
        "link": "#e08a5c",
        "overlay": "#070605",
        "inverse": "#ecebdf",
        "inverseInk": "#161a13",
        "accent": "#e08a5c",
        "accentInk": "#141210",
        "positive": "#9cbf84"
      },
      "tags": [
        "organic",
        "warm",
        "dark"
      ]
    },
    {
      "id": "polar-night",
      "name": "Polar Night",
      "url": "https://designlounge.vercel.app/themes/polar-night",
      "tokens": {
        "bg": "#0e141a",
        "surface": "#141c24",
        "surface2": "#1c2630",
        "surface3": "#303a43",
        "ink": "#e4ecf2",
        "ink2": "#9db0c0",
        "ink3": "#7d8f9d",
        "line": "#25313d",
        "lineStrong": "#6e7882",
        "primary": "#6ab0d8",
        "primaryInk": "#141210",
        "primarySoft": "#243948",
        "secondary": "#9ab4c4",
        "secondaryInk": "#141210",
        "secondarySoft": "#303a43",
        "tertiary": "#e0a058",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#403629",
        "success": "#5ec8a0",
        "successInk": "#141210",
        "successSoft": "#213f3a",
        "warning": "#e0a058",
        "warningInk": "#141210",
        "warningSoft": "#403629",
        "danger": "#ff7a6e",
        "dangerInk": "#141210",
        "dangerSoft": "#482c2e",
        "info": "#6ab0d8",
        "infoInk": "#141210",
        "infoSoft": "#243948",
        "successOnSoft": "#5ec8a0",
        "warningOnSoft": "#e0a058",
        "dangerOnSoft": "#ff7a6e",
        "infoOnSoft": "#6ab0d8",
        "focus": "#6ab0d8",
        "link": "#6ab0d8",
        "overlay": "#070605",
        "inverse": "#e4ecf2",
        "inverseInk": "#0e141a",
        "accent": "#6ab0d8",
        "accentInk": "#141210",
        "positive": "#5ec8a0"
      },
      "tags": [
        "cool",
        "minimal",
        "dark"
      ]
    },
    {
      "id": "night-edition",
      "name": "Night Edition",
      "url": "https://designlounge.vercel.app/themes/night-edition",
      "tokens": {
        "bg": "#121212",
        "surface": "#1a1a1a",
        "surface2": "#232323",
        "surface3": "#383736",
        "ink": "#f0ede4",
        "ink2": "#b5b1a6",
        "ink3": "#918d83",
        "line": "#2c2c2c",
        "lineStrong": "#767572",
        "primary": "#ff4a4f",
        "primaryInk": "#141210",
        "primarySoft": "#4b1f21",
        "secondary": "#9fb0d8",
        "secondaryInk": "#141210",
        "secondarySoft": "#343842",
        "tertiary": "#e0bf5a",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#433c23",
        "success": "#7dba8a",
        "successInk": "#141210",
        "successSoft": "#2c3a2f",
        "warning": "#e0bf5a",
        "warningInk": "#141210",
        "warningSoft": "#433c23",
        "danger": "#ff4a4f",
        "dangerInk": "#141210",
        "dangerSoft": "#4b1f21",
        "info": "#9fb0d8",
        "infoInk": "#141210",
        "infoSoft": "#343842",
        "successOnSoft": "#7dba8a",
        "warningOnSoft": "#e0bf5a",
        "dangerOnSoft": "#ff6064",
        "infoOnSoft": "#9fb0d8",
        "focus": "#ff4a4f",
        "link": "#ff4a4f",
        "overlay": "#070605",
        "inverse": "#f0ede4",
        "inverseInk": "#121212",
        "accent": "#ff4a4f",
        "accentInk": "#141210",
        "positive": "#7dba8a"
      },
      "tags": [
        "editorial",
        "swiss",
        "dark"
      ]
    },
    {
      "id": "greenhouse-night",
      "name": "Greenhouse Night",
      "url": "https://designlounge.vercel.app/themes/greenhouse-night",
      "tokens": {
        "bg": "#111a0f",
        "surface": "#172215",
        "surface2": "#1f2c1c",
        "surface3": "#33402f",
        "ink": "#e6f0dc",
        "ink2": "#a8bc98",
        "ink3": "#87987b",
        "line": "#283a24",
        "lineStrong": "#707f6a",
        "primary": "#8cc45e",
        "primaryInk": "#141210",
        "primarySoft": "#2f4322",
        "secondary": "#b8d8a0",
        "secondaryInk": "#141210",
        "secondarySoft": "#394832",
        "tertiary": "#e89a9a",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#453930",
        "success": "#8cc45e",
        "successInk": "#141210",
        "successSoft": "#2f4322",
        "warning": "#e0a34b",
        "warningInk": "#141210",
        "warningSoft": "#433b1d",
        "danger": "#ff7a6e",
        "dangerInk": "#141210",
        "dangerSoft": "#4a3126",
        "info": "#7ab8c8",
        "infoInk": "#141210",
        "infoSoft": "#2a403b",
        "successOnSoft": "#8cc45e",
        "warningOnSoft": "#e0a34b",
        "dangerOnSoft": "#ff7a6e",
        "infoOnSoft": "#7ab8c8",
        "focus": "#8cc45e",
        "link": "#8cc45e",
        "overlay": "#070605",
        "inverse": "#e6f0dc",
        "inverseInk": "#111a0f",
        "accent": "#8cc45e",
        "accentInk": "#141210",
        "positive": "#8cc45e"
      },
      "tags": [
        "organic",
        "playful",
        "dark"
      ]
    },
    {
      "id": "basalt-hall",
      "name": "Basalt Hall",
      "url": "https://designlounge.vercel.app/themes/basalt-hall",
      "tokens": {
        "bg": "#141311",
        "surface": "#1c1a17",
        "surface2": "#25231f",
        "surface3": "#393733",
        "ink": "#f1ede4",
        "ink2": "#b8b2a5",
        "ink3": "#948f83",
        "line": "#2e2b26",
        "lineStrong": "#78756e",
        "primary": "#c9a45a",
        "primaryInk": "#141210",
        "primarySoft": "#3f3623",
        "secondary": "#a3adb8",
        "secondaryInk": "#141210",
        "secondarySoft": "#363839",
        "tertiary": "#c47a7a",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#3e2c2a",
        "success": "#8fbf7a",
        "successInk": "#141210",
        "successSoft": "#323c2a",
        "warning": "#e0a34b",
        "warningInk": "#141210",
        "warningSoft": "#45361f",
        "danger": "#e07060",
        "dangerInk": "#141210",
        "dangerSoft": "#452924",
        "info": "#8ea4c4",
        "infoInk": "#141210",
        "infoSoft": "#31363c",
        "successOnSoft": "#8fbf7a",
        "warningOnSoft": "#e0a34b",
        "dangerOnSoft": "#e48173",
        "infoOnSoft": "#8ea4c4",
        "focus": "#c9a45a",
        "link": "#c9a45a",
        "overlay": "#070605",
        "inverse": "#f1ede4",
        "inverseInk": "#141311",
        "accent": "#c9a45a",
        "accentInk": "#141210",
        "positive": "#8fbf7a"
      },
      "tags": [
        "classic",
        "luxe",
        "dark"
      ]
    },
    {
      "id": "night-shift",
      "name": "Night Shift",
      "url": "https://designlounge.vercel.app/themes/night-shift",
      "tokens": {
        "bg": "#131416",
        "surface": "#1a1c1f",
        "surface2": "#23262a",
        "surface3": "#373a3d",
        "ink": "#eceae4",
        "ink2": "#a8aaad",
        "ink3": "#87898c",
        "line": "#2c2f33",
        "lineStrong": "#757676",
        "primary": "#ff6a33",
        "primaryInk": "#141210",
        "primarySoft": "#4c291d",
        "secondary": "#8aa0b8",
        "secondaryInk": "#141210",
        "secondarySoft": "#30363d",
        "tertiary": "#f0c040",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#483d20",
        "success": "#7dba8a",
        "successInk": "#141210",
        "successSoft": "#2c3c32",
        "warning": "#f0c040",
        "warningInk": "#141210",
        "warningSoft": "#483d20",
        "danger": "#ff6a33",
        "dangerInk": "#141210",
        "dangerSoft": "#4c291d",
        "info": "#8aa0b8",
        "infoInk": "#141210",
        "infoSoft": "#30363d",
        "successOnSoft": "#7dba8a",
        "warningOnSoft": "#f0c040",
        "dangerOnSoft": "#ff7c4b",
        "infoOnSoft": "#8aa0b8",
        "focus": "#ff6a33",
        "link": "#ff6a33",
        "overlay": "#070605",
        "inverse": "#eceae4",
        "inverseInk": "#131416",
        "accent": "#ff6a33",
        "accentInk": "#141210",
        "positive": "#7dba8a"
      },
      "tags": [
        "industrial",
        "utility",
        "dark"
      ]
    },
    {
      "id": "sakura-night",
      "name": "Sakura Night",
      "url": "https://designlounge.vercel.app/themes/sakura-night",
      "tokens": {
        "bg": "#1a1213",
        "surface": "#23191a",
        "surface2": "#2e2122",
        "surface3": "#423535",
        "ink": "#f6e8e4",
        "ink2": "#c8aaa4",
        "ink3": "#a28881",
        "line": "#3a2a2b",
        "lineStrong": "#817271",
        "primary": "#ff6b6b",
        "primaryInk": "#141210",
        "primarySoft": "#512728",
        "secondary": "#f6e8e4",
        "secondaryInk": "#141210",
        "secondarySoft": "#4f4545",
        "tertiary": "#d8a8a0",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#483635",
        "success": "#8fbf8a",
        "successInk": "#141210",
        "successSoft": "#363c30",
        "warning": "#e0a34b",
        "warningInk": "#141210",
        "warningSoft": "#4a3520",
        "danger": "#ff6b6b",
        "dangerInk": "#141210",
        "dangerSoft": "#512728",
        "info": "#a898cc",
        "infoInk": "#141210",
        "infoSoft": "#3c323f",
        "successOnSoft": "#8fbf8a",
        "warningOnSoft": "#e0a34b",
        "dangerOnSoft": "#ff6b6b",
        "infoOnSoft": "#a898cc",
        "focus": "#ff6b6b",
        "link": "#ff6b6b",
        "overlay": "#070605",
        "inverse": "#f6e8e4",
        "inverseInk": "#1a1213",
        "accent": "#ff6b6b",
        "accentInk": "#141210",
        "positive": "#8fbf8a"
      },
      "tags": [
        "paper",
        "soft",
        "dark"
      ]
    },
    {
      "id": "night-market",
      "name": "Night Market",
      "url": "https://designlounge.vercel.app/themes/night-market",
      "tokens": {
        "bg": "#1a130c",
        "surface": "#231a11",
        "surface2": "#2e2317",
        "surface3": "#42372a",
        "ink": "#f6ead2",
        "ink2": "#c8b08c",
        "ink3": "#a28d6f",
        "line": "#3a2d1e",
        "lineStrong": "#817562",
        "primary": "#ff6a48",
        "primaryInk": "#141210",
        "primarySoft": "#51281a",
        "secondary": "#f0c040",
        "secondaryInk": "#141210",
        "secondarySoft": "#4d3d18",
        "tertiary": "#8fc46a",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#363d23",
        "success": "#8fc46a",
        "successInk": "#141210",
        "successSoft": "#363d23",
        "warning": "#f0c040",
        "warningInk": "#141210",
        "warningSoft": "#4d3d18",
        "danger": "#ff6a48",
        "dangerInk": "#141210",
        "dangerSoft": "#51281a",
        "info": "#7ab0d4",
        "infoInk": "#141210",
        "infoSoft": "#31393c",
        "successOnSoft": "#8fc46a",
        "warningOnSoft": "#f0c040",
        "dangerOnSoft": "#ff7c5e",
        "infoOnSoft": "#7ab0d4",
        "focus": "#ff6a48",
        "link": "#ff6a48",
        "overlay": "#070605",
        "inverse": "#f6ead2",
        "inverseInk": "#1a130c",
        "accent": "#ff6a48",
        "accentInk": "#141210",
        "positive": "#8fc46a"
      },
      "tags": [
        "playful",
        "warm",
        "dark"
      ]
    },
    {
      "id": "fog-night",
      "name": "Fog Night",
      "url": "https://designlounge.vercel.app/themes/fog-night",
      "tokens": {
        "bg": "#0f1317",
        "surface": "#151a1f",
        "surface2": "#1d232a",
        "surface3": "#31373e",
        "ink": "#e8edf1",
        "ink2": "#9aa6b1",
        "ink3": "#7d8892",
        "line": "#262e36",
        "lineStrong": "#70777d",
        "primary": "#5a9bff",
        "primaryInk": "#141210",
        "primarySoft": "#21344f",
        "secondary": "#a0aec0",
        "secondaryInk": "#141210",
        "secondarySoft": "#323840",
        "tertiary": "#3cc9a4",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#1a3f39",
        "success": "#4cc28a",
        "successInk": "#141210",
        "successSoft": "#1e3d33",
        "warning": "#e0a34b",
        "warningInk": "#141210",
        "warningSoft": "#413623",
        "danger": "#ff6b6b",
        "dangerInk": "#141210",
        "dangerSoft": "#49282b",
        "info": "#5a9bff",
        "infoInk": "#141210",
        "infoSoft": "#21344f",
        "successOnSoft": "#4cc28a",
        "warningOnSoft": "#e0a34b",
        "dangerOnSoft": "#ff6b6b",
        "infoOnSoft": "#5a9bff",
        "focus": "#5a9bff",
        "link": "#5a9bff",
        "overlay": "#070605",
        "inverse": "#e8edf1",
        "inverseInk": "#0f1317",
        "accent": "#5a9bff",
        "accentInk": "#141210",
        "positive": "#4cc28a"
      },
      "tags": [
        "minimal",
        "cool",
        "dark"
      ]
    },
    {
      "id": "reading-room",
      "name": "Reading Room",
      "url": "https://designlounge.vercel.app/themes/reading-room",
      "tokens": {
        "bg": "#17140e",
        "surface": "#1f1b13",
        "surface2": "#29241a",
        "surface3": "#3d372b",
        "ink": "#efe4c8",
        "ink2": "#bfb08c",
        "ink3": "#998c70",
        "line": "#332c20",
        "lineStrong": "#7a7260",
        "primary": "#e06a5a",
        "primaryInk": "#141210",
        "primarySoft": "#472920",
        "secondary": "#8ea4cc",
        "secondaryInk": "#141210",
        "secondarySoft": "#34373c",
        "tertiary": "#d4b87a",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#443b28",
        "success": "#9cbf84",
        "successInk": "#141210",
        "successSoft": "#373d2a",
        "warning": "#d4b87a",
        "warningInk": "#141210",
        "warningSoft": "#443b28",
        "danger": "#e06a5a",
        "dangerInk": "#141210",
        "dangerSoft": "#472920",
        "info": "#8ea4cc",
        "infoInk": "#141210",
        "infoSoft": "#34373c",
        "successOnSoft": "#9cbf84",
        "warningOnSoft": "#d4b87a",
        "dangerOnSoft": "#e47c6e",
        "infoOnSoft": "#8ea4cc",
        "focus": "#e06a5a",
        "link": "#e06a5a",
        "overlay": "#070605",
        "inverse": "#efe4c8",
        "inverseInk": "#17140e",
        "accent": "#e06a5a",
        "accentInk": "#141210",
        "positive": "#9cbf84"
      },
      "tags": [
        "paper",
        "retro",
        "dark"
      ]
    },
    {
      "id": "glacier-night",
      "name": "Glacier Night",
      "url": "https://designlounge.vercel.app/themes/glacier-night",
      "tokens": {
        "bg": "#0f151a",
        "surface": "#151d24",
        "surface2": "#1d2730",
        "surface3": "#313b44",
        "ink": "#e8f0f4",
        "ink2": "#a0b2c0",
        "ink3": "#7f8f9c",
        "line": "#26323c",
        "lineStrong": "#707a82",
        "primary": "#6ac0dc",
        "primaryInk": "#141210",
        "primarySoft": "#253e49",
        "secondary": "#a0b2c0",
        "secondaryInk": "#141210",
        "secondarySoft": "#323b42",
        "tertiary": "#5ac89a",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#214039",
        "success": "#5ac89a",
        "successInk": "#141210",
        "successSoft": "#214039",
        "warning": "#e0b050",
        "warningInk": "#141210",
        "warningSoft": "#413a27",
        "danger": "#ff7a6e",
        "dangerInk": "#141210",
        "dangerSoft": "#492d2e",
        "info": "#6ac0dc",
        "infoInk": "#141210",
        "infoSoft": "#253e49",
        "successOnSoft": "#5ac89a",
        "warningOnSoft": "#e0b050",
        "dangerOnSoft": "#ff7a6e",
        "infoOnSoft": "#6ac0dc",
        "focus": "#6ac0dc",
        "link": "#6ac0dc",
        "overlay": "#070605",
        "inverse": "#e8f0f4",
        "inverseInk": "#0f151a",
        "accent": "#6ac0dc",
        "accentInk": "#141210",
        "positive": "#5ac89a"
      },
      "tags": [
        "minimal",
        "cool",
        "dark"
      ]
    },
    {
      "id": "festival-night",
      "name": "Festival Night",
      "url": "https://designlounge.vercel.app/themes/festival-night",
      "tokens": {
        "bg": "#12142e",
        "surface": "#1a1d3c",
        "surface2": "#23274c",
        "surface3": "#383b5c",
        "ink": "#f6f1ea",
        "ink2": "#c4c0d8",
        "ink3": "#8c88a8",
        "line": "#2e3258",
        "lineStrong": "#7a7b8f",
        "primary": "#ff5f97",
        "primaryInk": "#141210",
        "primarySoft": "#4b2647",
        "secondary": "#f6f1ea",
        "secondaryInk": "#141210",
        "secondarySoft": "#49495b",
        "tertiary": "#f0c84a",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#473f35",
        "success": "#6ad4a8",
        "successInk": "#141210",
        "successSoft": "#27424b",
        "warning": "#f0c84a",
        "warningInk": "#141210",
        "warningSoft": "#473f35",
        "danger": "#ff5f97",
        "dangerInk": "#141210",
        "dangerSoft": "#4b2647",
        "info": "#9aa8ff",
        "infoInk": "#141210",
        "infoSoft": "#333860",
        "successOnSoft": "#6ad4a8",
        "warningOnSoft": "#f0c84a",
        "dangerOnSoft": "#ff72a3",
        "infoOnSoft": "#9aa8ff",
        "focus": "#ff5f97",
        "link": "#ff5f97",
        "overlay": "#070605",
        "inverse": "#f6f1ea",
        "inverseInk": "#12142e",
        "accent": "#ff5f97",
        "accentInk": "#141210",
        "positive": "#6ad4a8"
      },
      "tags": [
        "riso",
        "playful",
        "dark"
      ]
    },
    {
      "id": "chambers",
      "name": "Chambers",
      "url": "https://designlounge.vercel.app/themes/chambers",
      "tokens": {
        "bg": "#0f1813",
        "surface": "#15211a",
        "surface2": "#1d2b22",
        "surface3": "#323f35",
        "ink": "#f3eee2",
        "ink2": "#b8b6a4",
        "ink3": "#959683",
        "line": "#26362c",
        "lineStrong": "#747c71",
        "primary": "#e2654a",
        "primaryInk": "#141210",
        "primarySoft": "#422a20",
        "secondary": "#c9c2a8",
        "secondaryInk": "#141210",
        "secondarySoft": "#3c4137",
        "tertiary": "#d4b06a",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#3e3c28",
        "success": "#8fbf8a",
        "successInk": "#141210",
        "successSoft": "#2e4030",
        "warning": "#d4b06a",
        "warningInk": "#141210",
        "warningSoft": "#3e3c28",
        "danger": "#e2654a",
        "dangerInk": "#141210",
        "dangerSoft": "#422a20",
        "info": "#8ea4c4",
        "infoInk": "#141210",
        "infoSoft": "#2d3a3d",
        "successOnSoft": "#8fbf8a",
        "warningOnSoft": "#d4b06a",
        "dangerOnSoft": "#e57760",
        "infoOnSoft": "#8ea4c4",
        "focus": "#e2654a",
        "link": "#e2654a",
        "overlay": "#070605",
        "inverse": "#f3eee2",
        "inverseInk": "#0f1813",
        "accent": "#e2654a",
        "accentInk": "#141210",
        "positive": "#8fbf8a"
      },
      "tags": [
        "classic",
        "luxe",
        "dark"
      ]
    },
    {
      "id": "bedtime",
      "name": "Bedtime",
      "url": "https://designlounge.vercel.app/themes/bedtime",
      "tokens": {
        "bg": "#1e1830",
        "surface": "#272040",
        "surface2": "#31294e",
        "surface3": "#463d5c",
        "ink": "#fff4d6",
        "ink2": "#d2c6e0",
        "ink3": "#9a8eb4",
        "line": "#3a3158",
        "lineStrong": "#857b88",
        "primary": "#ff7f62",
        "primaryInk": "#141210",
        "primarySoft": "#54313c",
        "secondary": "#fff4d6",
        "secondaryInk": "#141210",
        "secondarySoft": "#544d58",
        "tertiary": "#f0c84a",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#504236",
        "success": "#6ad49a",
        "successInk": "#141210",
        "successSoft": "#304549",
        "warning": "#f0c84a",
        "warningInk": "#141210",
        "warningSoft": "#504236",
        "danger": "#ff7f62",
        "dangerInk": "#141210",
        "dangerSoft": "#54313c",
        "info": "#8aa4ff",
        "infoInk": "#141210",
        "infoSoft": "#383a62",
        "successOnSoft": "#6ad49a",
        "warningOnSoft": "#f0c84a",
        "dangerOnSoft": "#ff8e75",
        "infoOnSoft": "#8aa4ff",
        "focus": "#ff7f62",
        "link": "#ff7f62",
        "overlay": "#070605",
        "inverse": "#fff4d6",
        "inverseInk": "#1e1830",
        "accent": "#ff7f62",
        "accentInk": "#141210",
        "positive": "#6ad49a"
      },
      "tags": [
        "playful",
        "clay",
        "dark"
      ]
    },
    {
      "id": "oxide-night",
      "name": "Oxide Night",
      "url": "https://designlounge.vercel.app/themes/oxide-night",
      "tokens": {
        "bg": "#17140f",
        "surface": "#1f1b15",
        "surface2": "#29241c",
        "surface3": "#3d372e",
        "ink": "#ece4d2",
        "ink2": "#b8ad96",
        "ink3": "#948b78",
        "line": "#332d23",
        "lineStrong": "#797366",
        "primary": "#d4683e",
        "primaryInk": "#141210",
        "primarySoft": "#44281a",
        "secondary": "#8fb06a",
        "secondaryInk": "#141210",
        "secondarySoft": "#343925",
        "tertiary": "#8ea0b4",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#343637",
        "success": "#8fb06a",
        "successInk": "#141210",
        "successSoft": "#343925",
        "warning": "#d4a84a",
        "warningInk": "#141210",
        "warningSoft": "#44381d",
        "danger": "#e07060",
        "dangerInk": "#141210",
        "dangerSoft": "#472a22",
        "info": "#8ea0b4",
        "infoInk": "#141210",
        "infoSoft": "#343637",
        "successOnSoft": "#8fb06a",
        "warningOnSoft": "#d4a84a",
        "dangerOnSoft": "#e48173",
        "infoOnSoft": "#8ea0b4",
        "focus": "#d4683e",
        "link": "#d4683e",
        "overlay": "#070605",
        "inverse": "#ece4d2",
        "inverseInk": "#17140f",
        "accent": "#d4683e",
        "accentInk": "#141210",
        "positive": "#8fb06a"
      },
      "tags": [
        "industrial",
        "organic",
        "dark"
      ]
    },
    {
      "id": "chrome-midnight",
      "name": "Chrome Midnight",
      "url": "https://designlounge.vercel.app/themes/chrome-midnight",
      "tokens": {
        "bg": "#0c0e14",
        "surface": "#13161f",
        "surface2": "#1b1f2b",
        "surface3": "#30343f",
        "ink": "#e8ecf2",
        "ink2": "#a0a8b8",
        "ink3": "#7f8696",
        "line": "#262b3a",
        "lineStrong": "#707480",
        "primary": "#5a8cff",
        "primaryInk": "#141210",
        "primarySoft": "#1f2c4c",
        "secondary": "#ff6fb4",
        "secondaryInk": "#141210",
        "secondarySoft": "#46253a",
        "tertiary": "#2ac890",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#133b32",
        "success": "#2ac890",
        "successInk": "#141210",
        "successSoft": "#133b32",
        "warning": "#e6b020",
        "warningInk": "#141210",
        "warningSoft": "#403517",
        "danger": "#ff6fb4",
        "dangerInk": "#141210",
        "dangerSoft": "#46253a",
        "info": "#5a8cff",
        "infoInk": "#141210",
        "infoSoft": "#1f2c4c",
        "successOnSoft": "#2ac890",
        "warningOnSoft": "#e6b020",
        "dangerOnSoft": "#ff6fb4",
        "infoOnSoft": "#6e9aff",
        "focus": "#5a8cff",
        "link": "#5a8cff",
        "overlay": "#070605",
        "inverse": "#e8ecf2",
        "inverseInk": "#0c0e14",
        "accent": "#5a8cff",
        "accentInk": "#141210",
        "positive": "#2ac890"
      },
      "tags": [
        "y2k",
        "retro",
        "dark"
      ]
    },
    {
      "id": "signal-paper",
      "name": "Signal Paper",
      "url": "https://designlounge.vercel.app/themes/signal-paper",
      "tokens": {
        "bg": "#eef3ec",
        "surface": "#f8fbf6",
        "surface2": "#dde6da",
        "surface3": "#d1dace",
        "ink": "#0f1f14",
        "ink2": "#3e5a46",
        "ink3": "#5c7362",
        "line": "#c6d4c6",
        "lineStrong": "#808f82",
        "primary": "#117f42",
        "primaryInk": "#fffdf8",
        "primarySoft": "#cfe4d5",
        "secondary": "#9a7a12",
        "secondaryInk": "#141210",
        "secondarySoft": "#e2e2cd",
        "tertiary": "#2a6f86",
        "tertiaryInk": "#fffdf8",
        "tertiarySoft": "#d3e1de",
        "success": "#117f42",
        "successInk": "#fffdf8",
        "successSoft": "#cfe4d5",
        "warning": "#9a7a12",
        "warningInk": "#141210",
        "warningSoft": "#e2e2cd",
        "danger": "#c4121a",
        "dangerInk": "#fffdf8",
        "dangerSoft": "#e8d4cf",
        "info": "#2a6f86",
        "infoInk": "#fffdf8",
        "infoSoft": "#d3e1de",
        "successOnSoft": "#0f703a",
        "warningOnSoft": "#785e0e",
        "dangerOnSoft": "#ac1017",
        "infoOnSoft": "#256276",
        "focus": "#117f42",
        "link": "#117f42",
        "overlay": "#141210",
        "inverse": "#0f1f14",
        "inverseInk": "#eef3ec",
        "accent": "#117f42",
        "accentInk": "#fffdf8",
        "positive": "#117f42"
      },
      "tags": [
        "terminal",
        "tech",
        "light"
      ]
    },
    {
      "id": "matinee",
      "name": "Matinee",
      "url": "https://designlounge.vercel.app/themes/matinee",
      "tokens": {
        "bg": "#f6ede6",
        "surface": "#fdf7f2",
        "surface2": "#ead9ce",
        "surface3": "#decdc3",
        "ink": "#2a1218",
        "ink2": "#6a4650",
        "ink3": "#775d60",
        "line": "#e0c8bd",
        "lineStrong": "#9b837e",
        "primary": "#8a2a44",
        "primaryInk": "#fffdf8",
        "primarySoft": "#e7d2cf",
        "secondary": "#a87a2a",
        "secondaryInk": "#141210",
        "secondarySoft": "#ebddcc",
        "tertiary": "#4a6a5a",
        "tertiaryInk": "#fffdf8",
        "tertiarySoft": "#dedbd2",
        "success": "#3d6b4a",
        "successInk": "#fffdf8",
        "successSoft": "#dcdbd0",
        "warning": "#a87a2a",
        "warningInk": "#141210",
        "warningSoft": "#ebddcc",
        "danger": "#9b2c2c",
        "dangerInk": "#fffdf8",
        "dangerSoft": "#e9d2cc",
        "info": "#3d4f6b",
        "infoInk": "#fffdf8",
        "infoSoft": "#dcd7d5",
        "successOnSoft": "#365e41",
        "warningOnSoft": "#72531d",
        "dangerOnSoft": "#9b2c2c",
        "infoOnSoft": "#3d4f6b",
        "focus": "#8a2a44",
        "link": "#8a2a44",
        "overlay": "#141210",
        "inverse": "#2a1218",
        "inverseInk": "#f6ede6",
        "accent": "#8a2a44",
        "accentInk": "#fffdf8",
        "positive": "#3d6b4a"
      },
      "tags": [
        "luxe",
        "deco",
        "light"
      ]
    },
    {
      "id": "circuit-bench",
      "name": "Circuit Bench",
      "url": "https://designlounge.vercel.app/themes/circuit-bench",
      "tokens": {
        "bg": "#eceef0",
        "surface": "#f9fafb",
        "surface2": "#dcdfe3",
        "surface3": "#d0d3d6",
        "ink": "#0e0f12",
        "ink2": "#4a515c",
        "ink3": "#656c76",
        "line": "#c9ced5",
        "lineStrong": "#82858b",
        "primary": "#4f7d00",
        "primaryInk": "#fffdf8",
        "primarySoft": "#d6dece",
        "secondary": "#1f5fd6",
        "secondaryInk": "#fffdf8",
        "secondarySoft": "#cfdaec",
        "tertiary": "#b87400",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#e5ddce",
        "success": "#2f7a4a",
        "successInk": "#fffdf8",
        "successSoft": "#d2ded9",
        "warning": "#b87400",
        "warningInk": "#141210",
        "warningSoft": "#e5ddce",
        "danger": "#c4121a",
        "dangerInk": "#fffdf8",
        "dangerSoft": "#e6cfd2",
        "info": "#1f5fd6",
        "infoInk": "#fffdf8",
        "infoSoft": "#cfdaec",
        "successOnSoft": "#296b41",
        "warningOnSoft": "#7e4f00",
        "dangerOnSoft": "#ac1017",
        "infoOnSoft": "#1b54bc",
        "focus": "#4f7d00",
        "link": "#477100",
        "overlay": "#141210",
        "inverse": "#0e0f12",
        "inverseInk": "#eceef0",
        "accent": "#4f7d00",
        "accentInk": "#fffdf8",
        "positive": "#2f7a4a"
      },
      "tags": [
        "industrial",
        "tech",
        "light"
      ]
    },
    {
      "id": "planetarium",
      "name": "Planetarium",
      "url": "https://designlounge.vercel.app/themes/planetarium",
      "tokens": {
        "bg": "#eef1f6",
        "surface": "#fafbfd",
        "surface2": "#dde3ec",
        "surface3": "#d0d6e0",
        "ink": "#0b1220",
        "ink2": "#44526a",
        "ink3": "#606c81",
        "line": "#c8d0dc",
        "lineStrong": "#808895",
        "primary": "#8e650f",
        "primaryInk": "#fffdf8",
        "primarySoft": "#e2dfd6",
        "secondary": "#319374",
        "secondaryInk": "#141210",
        "secondarySoft": "#d1e3e2",
        "tertiary": "#5a4a8a",
        "tertiaryInk": "#fffdf8",
        "tertiarySoft": "#d9dae7",
        "success": "#319374",
        "successInk": "#141210",
        "successSoft": "#d1e3e2",
        "warning": "#b07a14",
        "warningInk": "#141210",
        "warningSoft": "#e5e0d6",
        "danger": "#b53838",
        "dangerInk": "#fffdf8",
        "dangerSoft": "#e6d7db",
        "info": "#2a5aa8",
        "infoInk": "#fffdf8",
        "infoSoft": "#d3dceb",
        "successOnSoft": "#21644f",
        "warningOnSoft": "#78530e",
        "dangerOnSoft": "#9f3131",
        "infoOnSoft": "#2a5aa8",
        "focus": "#8e650f",
        "link": "#8e650f",
        "overlay": "#141210",
        "inverse": "#0b1220",
        "inverseInk": "#eef1f6",
        "accent": "#8e650f",
        "accentInk": "#fffdf8",
        "positive": "#319374"
      },
      "tags": [
        "luxe",
        "cool",
        "light"
      ]
    },
    {
      "id": "arcade-day",
      "name": "Arcade Day",
      "url": "https://designlounge.vercel.app/themes/arcade-day",
      "tokens": {
        "bg": "#f6f0fa",
        "surface": "#fdfaff",
        "surface2": "#eadff2",
        "surface3": "#ddd2e6",
        "ink": "#160c24",
        "ink2": "#5a4a74",
        "ink3": "#746a88",
        "line": "#dccdea",
        "lineStrong": "#91849f",
        "primary": "#d4207a",
        "primaryInk": "#fffdf8",
        "primarySoft": "#f1d3e8",
        "secondary": "#22937f",
        "secondaryInk": "#141210",
        "secondarySoft": "#d6e2e7",
        "tertiary": "#6a2fe0",
        "tertiaryInk": "#fffdf8",
        "tertiarySoft": "#e2d5f6",
        "success": "#22937f",
        "successInk": "#141210",
        "successSoft": "#d6e2e7",
        "warning": "#b87400",
        "warningInk": "#141210",
        "warningSoft": "#eddfd7",
        "danger": "#d4207a",
        "dangerInk": "#fffdf8",
        "dangerSoft": "#f1d3e8",
        "info": "#6a2fe0",
        "infoInk": "#fffdf8",
        "infoSoft": "#e2d5f6",
        "successOnSoft": "#176457",
        "warningOnSoft": "#7e4f00",
        "dangerOnSoft": "#a5195e",
        "infoOnSoft": "#6a2fe0",
        "focus": "#d4207a",
        "link": "#bf1d6e",
        "overlay": "#141210",
        "inverse": "#160c24",
        "inverseInk": "#f6f0fa",
        "accent": "#d4207a",
        "accentInk": "#fffdf8",
        "positive": "#22937f"
      },
      "tags": [
        "cyber",
        "y2k",
        "light"
      ]
    },
    {
      "id": "cockpit-day",
      "name": "Cockpit Day",
      "url": "https://designlounge.vercel.app/themes/cockpit-day",
      "tokens": {
        "bg": "#eef2f4",
        "surface": "#fafcfd",
        "surface2": "#dde4e9",
        "surface3": "#d0d7dc",
        "ink": "#07090d",
        "ink2": "#3e4e60",
        "ink3": "#5b6979",
        "line": "#c8d2da",
        "lineStrong": "#7f868c",
        "primary": "#0a8f78",
        "primaryInk": "#141210",
        "primarySoft": "#cee4e3",
        "secondary": "#8a7200",
        "secondaryInk": "#fffdf8",
        "secondarySoft": "#e0e0d2",
        "tertiary": "#2a6fae",
        "tertiaryInk": "#fffdf8",
        "tertiarySoft": "#d3e0ea",
        "success": "#0a8f78",
        "successInk": "#141210",
        "successSoft": "#cee4e3",
        "warning": "#8a7200",
        "warningInk": "#fffdf8",
        "warningSoft": "#e0e0d2",
        "danger": "#c4121a",
        "dangerInk": "#fffdf8",
        "dangerSoft": "#e8d3d5",
        "info": "#2a6fae",
        "infoInk": "#fffdf8",
        "infoSoft": "#d3e0ea",
        "successOnSoft": "#086f5d",
        "warningOnSoft": "#6a5800",
        "dangerOnSoft": "#ac1017",
        "infoOnSoft": "#256299",
        "focus": "#0a8f78",
        "link": "#087461",
        "overlay": "#141210",
        "inverse": "#07090d",
        "inverseInk": "#eef2f4",
        "accent": "#0a8f78",
        "accentInk": "#141210",
        "positive": "#0a8f78"
      },
      "tags": [
        "cyber",
        "tech",
        "light"
      ]
    },
    {
      "id": "inkwell",
      "name": "Inkwell",
      "url": "https://designlounge.vercel.app/themes/inkwell",
      "tokens": {
        "bg": "#f6f1e4",
        "surface": "#fffaf0",
        "surface2": "#efe6d2",
        "surface3": "#e2dac8",
        "ink": "#1c2430",
        "ink2": "#3d4a5c",
        "ink3": "#6a6256",
        "line": "#e2d5bc",
        "lineStrong": "#979287",
        "primary": "#1d4e89",
        "primaryInk": "#fffdf8",
        "primarySoft": "#d8dad7",
        "secondary": "#b42323",
        "secondaryInk": "#fffdf8",
        "secondarySoft": "#edd4c9",
        "tertiary": "#8a6a2f",
        "tertiaryInk": "#fffdf8",
        "tertiarySoft": "#e7decb",
        "success": "#2f6b4a",
        "successInk": "#fffdf8",
        "successSoft": "#dadece",
        "warning": "#a16207",
        "warningInk": "#fffdf8",
        "warningSoft": "#eaddc5",
        "danger": "#b42323",
        "dangerInk": "#fffdf8",
        "dangerSoft": "#edd4c9",
        "info": "#1d4e89",
        "infoInk": "#fffdf8",
        "infoSoft": "#d8dad7",
        "successOnSoft": "#2f6b4a",
        "warningOnSoft": "#7d4c05",
        "dangerOnSoft": "#b42323",
        "infoOnSoft": "#1d4e89",
        "focus": "#1d4e89",
        "link": "#1d4e89",
        "overlay": "#141210",
        "inverse": "#1c2430",
        "inverseInk": "#f6f1e4",
        "accent": "#1d4e89",
        "accentInk": "#fffdf8",
        "positive": "#2f6b4a"
      },
      "tags": [
        "paper",
        "warm",
        "light"
      ]
    },
    {
      "id": "lamp-desk",
      "name": "Lamp Desk",
      "url": "https://designlounge.vercel.app/themes/lamp-desk",
      "tokens": {
        "bg": "#1a1612",
        "surface": "#241e18",
        "surface2": "#2e261e",
        "surface3": "#423a31",
        "ink": "#f3ead8",
        "ink2": "#cbbfa8",
        "ink3": "#9c9080",
        "line": "#3a3128",
        "lineStrong": "#80776b",
        "primary": "#9ec0ea",
        "primaryInk": "#141210",
        "primarySoft": "#3a3f46",
        "secondary": "#e08080",
        "secondaryInk": "#141210",
        "secondarySoft": "#4a2f2c",
        "tertiary": "#e0c27a",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#4a3f2b",
        "success": "#8fbf8a",
        "successInk": "#141210",
        "successSoft": "#363f2f",
        "warning": "#e0b050",
        "warningInk": "#141210",
        "warningSoft": "#4a3b21",
        "danger": "#e08080",
        "dangerInk": "#141210",
        "dangerSoft": "#4a2f2c",
        "info": "#9ec0ea",
        "infoInk": "#141210",
        "infoSoft": "#3a3f46",
        "successOnSoft": "#8fbf8a",
        "warningOnSoft": "#e0b050",
        "dangerOnSoft": "#e48f8f",
        "infoOnSoft": "#9ec0ea",
        "focus": "#9ec0ea",
        "link": "#9ec0ea",
        "overlay": "#070605",
        "inverse": "#f3ead8",
        "inverseInk": "#1a1612",
        "accent": "#9ec0ea",
        "accentInk": "#141210",
        "positive": "#8fbf8a"
      },
      "tags": [
        "paper",
        "warm",
        "dark"
      ]
    },
    {
      "id": "coin-op",
      "name": "Coin-op",
      "url": "https://designlounge.vercel.app/themes/coin-op",
      "tokens": {
        "bg": "#0c0e12",
        "surface": "#141820",
        "surface2": "#1c2230",
        "surface3": "#323742",
        "ink": "#f4f0e6",
        "ink2": "#b7c0c8",
        "ink3": "#7d8794",
        "line": "#2a3344",
        "lineStrong": "#777b82",
        "primary": "#ffd23f",
        "primaryInk": "#141210",
        "primarySoft": "#463d1d",
        "secondary": "#3dff9a",
        "secondaryInk": "#141210",
        "secondarySoft": "#184833",
        "tertiary": "#ff4d6a",
        "tertiaryInk": "#141210",
        "tertiarySoft": "#461d27",
        "success": "#3dff9a",
        "successInk": "#141210",
        "successSoft": "#184833",
        "warning": "#ffd23f",
        "warningInk": "#141210",
        "warningSoft": "#463d1d",
        "danger": "#ff4d6a",
        "dangerInk": "#141210",
        "dangerSoft": "#461d27",
        "info": "#7ec8ff",
        "infoInk": "#141210",
        "infoSoft": "#273b4b",
        "successOnSoft": "#3dff9a",
        "warningOnSoft": "#ffd23f",
        "dangerOnSoft": "#ff627c",
        "infoOnSoft": "#7ec8ff",
        "focus": "#ffd23f",
        "link": "#ffd23f",
        "overlay": "#070605",
        "inverse": "#f4f0e6",
        "inverseInk": "#0c0e12",
        "accent": "#ffd23f",
        "accentInk": "#141210",
        "positive": "#3dff9a"
      },
      "tags": [
        "pixel",
        "retro",
        "dark"
      ]
    },
    {
      "id": "ticket-booth",
      "name": "Ticket Booth",
      "url": "https://designlounge.vercel.app/themes/ticket-booth",
      "tokens": {
        "bg": "#f3efe4",
        "surface": "#fffdf6",
        "surface2": "#e7e0d0",
        "surface3": "#dad4c5",
        "ink": "#16181e",
        "ink2": "#3c4250",
        "ink3": "#6c6458",
        "line": "#d9d0bc",
        "lineStrong": "#8f8a80",
        "primary": "#c96925",
        "primaryInk": "#141210",
        "primarySoft": "#ecdac7",
        "secondary": "#0d7a45",
        "secondaryInk": "#fffdf8",
        "secondarySoft": "#d3dfce",
        "tertiary": "#1d4e89",
        "tertiaryInk": "#fffdf8",
        "tertiarySoft": "#d5d8d7",
        "success": "#0d7a45",
        "successInk": "#fffdf8",
        "successSoft": "#d3dfce",
        "warning": "#a16207",
        "warningInk": "#fffdf8",
        "warningSoft": "#e8dbc5",
        "danger": "#b42323",
        "dangerInk": "#fffdf8",
        "dangerSoft": "#ead2c9",
        "info": "#1d4e89",
        "infoInk": "#fffdf8",
        "infoSoft": "#d5d8d7",
        "successOnSoft": "#0b6b3d",
        "warningOnSoft": "#7d4c05",
        "dangerOnSoft": "#b42323",
        "infoOnSoft": "#1d4e89",
        "focus": "#c96925",
        "link": "#a3561e",
        "overlay": "#141210",
        "inverse": "#16181e",
        "inverseInk": "#f3efe4",
        "accent": "#c96925",
        "accentInk": "#141210",
        "positive": "#0d7a45"
      },
      "tags": [
        "pixel",
        "retro",
        "light"
      ]
    }
  ],
  "icons": {
    "credit": "Lounge Icons · Designed using Design Lounge · designlounge.vercel.app",
    "url": "https://designlounge.vercel.app/icons",
    "ids": [
      "search",
      "menu",
      "x",
      "plus",
      "minus",
      "check",
      "more-h",
      "more-v",
      "filter",
      "sliders",
      "settings",
      "eye",
      "eye-off",
      "lock",
      "unlock",
      "user",
      "users",
      "bell",
      "home",
      "arrow-left",
      "arrow-right",
      "arrow-up",
      "arrow-down",
      "chevron-left",
      "chevron-right",
      "chevron-up",
      "chevron-down",
      "external",
      "compass",
      "map-pin",
      "sidebar",
      "layout",
      "play",
      "pause",
      "skip-back",
      "skip-fwd",
      "volume",
      "mic",
      "image",
      "film",
      "music",
      "camera",
      "headphones",
      "cart",
      "bag",
      "card",
      "tag",
      "gift",
      "receipt",
      "percent",
      "mail",
      "send",
      "message",
      "phone",
      "at",
      "link",
      "share",
      "hash",
      "file",
      "folder",
      "folder-plus",
      "download",
      "upload",
      "clipboard",
      "copy",
      "trash",
      "archive",
      "edit",
      "pen",
      "type",
      "bold",
      "italic",
      "list",
      "align-left",
      "crop",
      "layers",
      "info",
      "alert",
      "success",
      "error",
      "help",
      "loader",
      "wifi",
      "battery",
      "sun",
      "moon",
      "lamp",
      "book",
      "bookmark",
      "star",
      "heart",
      "flag",
      "clock",
      "calendar",
      "globe",
      "briefcase",
      "terminal",
      "code",
      "spark"
    ]
  },
  "motion": {
    "easings": [
      {
        "id": "standard",
        "name": "Lounge standard",
        "css": "cubic-bezier(0.2, 0.7, 0.2, 1)",
        "feel": "Decisive, a little heavy at the start, lands clean.",
        "use": "Default for UI moves: width, opacity, colour, small translates."
      },
      {
        "id": "expo-out",
        "name": "Expo out",
        "css": "cubic-bezier(0.16, 1, 0.3, 1)",
        "feel": "Fast start, long settle. The “it arrived” curve.",
        "use": "Hero reveals, shared-element expands, sheets rising."
      },
      {
        "id": "ios-sheet",
        "name": "iOS sheet",
        "css": "cubic-bezier(0.32, 0.72, 0, 1)",
        "feel": "Apple’s sheet: almost linear, then a soft stop.",
        "use": "Bottom sheets, drawers, large vertical translates."
      },
      {
        "id": "enter",
        "name": "Enter",
        "css": "cubic-bezier(0.16, 1, 0.3, 1)",
        "feel": "Same as expo out; named so agents pick it for incoming.",
        "use": "Anything that appears: toasts, menus, tooltips."
      },
      {
        "id": "exit",
        "name": "Exit",
        "css": "cubic-bezier(0.4, 0, 1, 1)",
        "feel": "Leaves quickly. Don’t linger on things going away.",
        "use": "Dismissals under 180ms. Pair with enter, never the reverse."
      },
      {
        "id": "emphasized",
        "name": "Emphasized",
        "css": "cubic-bezier(0.2, 0, 0, 1)",
        "feel": "Material 3 Expressive. Slow, then a committed finish.",
        "use": "Container transforms, FAB morphs, large layout changes."
      },
      {
        "id": "emphasized-decel",
        "name": "Emphasized decelerate",
        "css": "cubic-bezier(0.05, 0.7, 0.1, 1)",
        "feel": "Incoming M3 motion. Soft arrival.",
        "use": "Elements entering a scene in Material language."
      },
      {
        "id": "emphasized-accel",
        "name": "Emphasized accelerate",
        "css": "cubic-bezier(0.3, 0, 0.8, 0.15)",
        "feel": "Outgoing M3 motion. Leaves with intent.",
        "use": "Elements exiting a Material scene."
      },
      {
        "id": "spring-soft",
        "name": "Soft spring (approx)",
        "css": "cubic-bezier(0.22, 1.2, 0.36, 1)",
        "feel": "A polite overshoot. One bounce, then still.",
        "use": "Likes, checkboxes, small toggles. Never on layout width."
      },
      {
        "id": "spring-snappy",
        "name": "Snappy spring (approx)",
        "css": "cubic-bezier(0.34, 1.4, 0.64, 1)",
        "feel": "Playful overshoot. Use once per screen.",
        "use": "Onboarding, clay/playful kits, success states."
      },
      {
        "id": "linear",
        "name": "Linear",
        "css": "linear",
        "feel": "No personality. Correct for loops and progress.",
        "use": "Marquees, indeterminate bars, rotating loaders."
      },
      {
        "id": "in-out",
        "name": "In–out cubic",
        "css": "cubic-bezier(0.65, 0, 0.35, 1)",
        "feel": "Symmetric. Good when the move will reverse.",
        "use": "Theme toggles, accordion height, play/pause morphs."
      }
    ],
    "durations": [
      {
        "id": "micro",
        "ms": 120,
        "name": "Micro",
        "use": "Colour, opacity, focus rings, checkbox ticks."
      },
      {
        "id": "fast",
        "ms": 160,
        "name": "Fast",
        "use": "Hover lifts, tooltip fade, underline grow."
      },
      {
        "id": "ui",
        "ms": 200,
        "name": "UI",
        "use": "Buttons, chips, segmented controls."
      },
      {
        "id": "layout",
        "ms": 320,
        "name": "Layout",
        "use": "Sidebar width, grid reflow, tab panels."
      },
      {
        "id": "sheet",
        "ms": 400,
        "name": "Sheet",
        "use": "Drawers, dialogs, shared-element expands."
      },
      {
        "id": "hero",
        "ms": 640,
        "name": "Hero",
        "use": "First-paint reveals, page curtains, logo draws."
      },
      {
        "id": "cinematic",
        "ms": 900,
        "name": "Cinematic",
        "use": "Once-per-session intros. Never loop this long."
      }
    ],
    "recipes": [
      {
        "id": "fade-rise",
        "name": "Fade and rise"
      },
      {
        "id": "underline-grow",
        "name": "Underline grow"
      },
      {
        "id": "rail-collapse",
        "name": "Sidebar rail"
      },
      {
        "id": "sheet-up",
        "name": "Sheet up"
      },
      {
        "id": "dialog-scale",
        "name": "Dialog in"
      },
      {
        "id": "toast-stack",
        "name": "Toast enter"
      },
      {
        "id": "tab-ink",
        "name": "Tab ink bar"
      },
      {
        "id": "count-up",
        "name": "Count up"
      },
      {
        "id": "draw-stroke",
        "name": "SVG stroke draw"
      },
      {
        "id": "marquee",
        "name": "Marquee"
      },
      {
        "id": "like-pop",
        "name": "Like pop"
      },
      {
        "id": "page-curtain",
        "name": "Page curtain"
      },
      {
        "id": "shared-expand",
        "name": "Shared expand"
      },
      {
        "id": "skeleton-swap",
        "name": "Skeleton to content"
      },
      {
        "id": "magnetic",
        "name": "Magnetic pull"
      },
      {
        "id": "theme-circle",
        "name": "Theme circle wipe"
      }
    ]
  },
  "collections": [
    {
      "slug": "first-impressions",
      "title": "First impressions",
      "kicker": "Nº 01",
      "blurb": "Landing pages, onboarding, empty states and the 404. The screens people meet before they trust you.",
      "pieces": [
        "editorial-landing-hero",
        "brutalist-studio-home",
        "mobile-landing-sticky-cta",
        "ios-onboarding-carousel",
        "empty-state-line-illustration",
        "terminal-404",
        "luxe-product-detail",
        "shop-collection",
        "shop-product",
        "shop-cart",
        "qty-stepper",
        "order-confirmed",
        "swiss-grid-pricing",
        "landing-fashion-atelier",
        "landing-wellness-retreat"
      ]
    },
    {
      "slug": "website-in-parts",
      "title": "A website, in parts",
      "kicker": "Nº 02",
      "blurb": "Heroes, navs, features, pricing, proof, contact and the sign-off. Assemble a marketing site from pieces that already agree with each other.",
      "pieces": [
        "hero-asymmetric-type-lockup",
        "hero-swiss-grid-wordmark",
        "hero-editorial-name-rotator",
        "navbar-island-morph",
        "features-tabbed-preview",
        "bento-feature-grid",
        "integrations-connect",
        "link-orbit",
        "gooey-nav",
        "changelog-timeline",
        "careers-role-list",
        "testimonials-quote-carousel",
        "logos-mono-marquee",
        "pricing-annual-toggle-roll",
        "faq-two-column-search",
        "contact-giant-email-copy",
        "footer-giant-wordmark-reveal",
        "cta-split-dark-band",
        "card-product-quick-add",
        "card-article-mix",
        "card-holo-foil",
        "hero-split-ui-stack",
        "hero-search-marketplace",
        "features-alternating-rows",
        "faq-category-accordion",
        "footer-sitemap-columns"
      ]
    },
    {
      "slug": "portfolio-sites",
      "title": "Sites that show the work",
      "kicker": "Nº 03",
      "blurb": "Personal and studio portfolios: the index, the case study, the photographer’s rail, the architect’s list. Steal a structure, not a personality.",
      "pieces": [
        "portfolio-architect-index",
        "portfolio-index-hover-preview",
        "portfolio-photographer-horizontal",
        "portfolio-case-study-long",
        "portfolio-motion-showreel",
        "gallery-contact-sheet",
        "brutalist-studio-home",
        "profile-creator-masthead",
        "gallery-film-strip",
        "gallery-museum-placard",
        "frame-circle-cut",
        "mockup-phone-showcase",
        "mockup-laptop-browser"
      ]
    },
    {
      "slug": "landing-pages",
      "title": "Landing pages with a point of view",
      "kicker": "Nº 04",
      "blurb": "Full first pages for fashion, wellness, fintech, a dev tool and an agency. Each one is a complete argument, not a template.",
      "pieces": [
        "landing-fashion-atelier",
        "landing-wellness-retreat",
        "landing-fintech-light",
        "landing-devtool-dark",
        "landing-agency-case-wall",
        "editorial-landing-hero",
        "mobile-landing-sticky-cta",
        "realestate-listing-detail",
        "restaurant-menu-page",
        "course-landing-curriculum",
        "job-board-search",
        "event-ticket-checkout",
        "donation-page-impact",
        "clinic-home-booking",
        "gym-membership-home",
        "law-firm-home",
        "crypto-exchange-trade",
        "school-admissions-home",
        "architecture-studio-index"
      ]
    },
    {
      "slug": "proof-and-close",
      "title": "Proof, and the close",
      "kicker": "Nº 05",
      "blurb": "Testimonials, logos, FAQs, stats and the last ask. The blocks that turn a visitor into a customer without raising their voice.",
      "pieces": [
        "testimonials-quote-carousel",
        "testimonials-wall-grid",
        "logos-mono-marquee",
        "faq-two-column-search",
        "stats-ticker-band",
        "cta-split-dark-band",
        "cta-sticky-mobile-bar",
        "newsletter-fold-inline",
        "newsletter-close-band",
        "team-hover-portrait-grid",
        "testimonials-masonry-wall",
        "testimonials-metric-tabs",
        "logos-grid-case-hover",
        "stats-count-up-band",
        "cta-giant-email-band",
        "pricing-usage-slider",
        "contact-project-brief-steps"
      ]
    },
    {
      "slug": "navigation-sorted",
      "title": "Navigation, sorted",
      "kicker": "Nº 06",
      "blurb": "Sidebars, rails, tab bars, drawers and palettes. Every way to get around a product, from a 64px icon rail to a floating glass capsule.",
      "pieces": [
        "collapsing-sidebar-rail",
        "command-palette",
        "search-results-filters",
        "breadcrumb",
        "tree-nav",
        "editorial-mega-menu",
        "nested-dropdown-menu",
        "ios-glass-tab-bar",
        "m3-navigation-drawer",
        "mobile-fullscreen-menu",
        "tablet-sidebar-overlay-pin",
        "tabs-morphing-underline",
        "segmented-control-sliding",
        "navbar-split-centered-logo",
        "navbar-hide-on-scroll",
        "navbar-vertical-rail",
        "mega-menu-product-grid",
        "sidebar-workspace-switcher",
        "sidebar-docs-toc",
        "hamburger-circle-reveal",
        "hamburger-drawer-accordion",
        "mobile-web-bottom-nav",
        "dock-magnify-desktop",
        "dock-editor-tools",
        "dock-presence-bar",
        "spotlight-command-bar"
      ]
    },
    {
      "slug": "loading-states",
      "title": "Loading states that earn the wait",
      "kicker": "Nº 07",
      "blurb": "Skeletons that match their content, loaders with three elements, buttons that carry their own progress. Nothing spins for the sake of spinning.",
      "pieces": [
        "skeleton-to-content-swap",
        "orbit-dots-loader",
        "ink-fill-progress",
        "button-state-morph",
        "pwa-app-shell",
        "ios-pull-to-refresh",
        "load-failed-retry",
        "mobile-load-failed",
        "mobile-filter-chips-list",
        "error-404-editorial",
        "loader-spinner-set",
        "loader-text-shimmer",
        "button-download-progress"
      ]
    },
    {
      "slug": "sheets-and-overlays",
      "title": "Sheets, dialogs and things on top",
      "kicker": "Nº 08",
      "blurb": "Bottom sheets with detents, dialogs with real focus traps, toasts that stack, panels that anchor. Layering done with restraint.",
      "pieces": [
        "ios-bottom-sheet-detents",
        "modal-dialog-focus-trap",
        "tooltip",
        "popover-panel",
        "inline-alert",
        "account-menu-panel",
        "pwa-install-sheet",
        "notification-center-panel",
        "toast-stack",
        "pwa-update-toast",
        "m3-fab-menu",
        "dropdown-kebab-actions",
        "dropdown-share-menu",
        "dropdown-menubar-file",
        "dropdown-filter-sort",
        "notif-incoming-call",
        "notif-deploy-status",
        "notif-delivery-live",
        "notif-payment-received",
        "spotlight-command-bar"
      ]
    },
    {
      "slug": "forms-people-finish",
      "title": "Forms people finish",
      "kicker": "Nº 09",
      "blurb": "Steppers, inline validation, one-page checkout, sign-in that respects the keyboard. The boring parts, made unboring by getting the details right.",
      "pieces": [
        "multi-step-form-stepper",
        "inline-form-validation",
        "text-field",
        "textarea-field",
        "password-field",
        "select-field",
        "combobox",
        "token-field",
        "otp-code",
        "rating-score",
        "radio-group",
        "checkbox-group",
        "switch-row",
        "slider-field",
        "calendar-month",
        "time-field",
        "upload-file-queue",
        "prompt-composer",
        "mobile-one-page-checkout",
        "split-sign-in",
        "date-range-picker",
        "settings-page-sticky-nav",
        "billing-plan-summary",
        "onboarding-checklist",
        "input-otp-underline",
        "input-phone-country",
        "button-hold-to-confirm"
      ]
    },
    {
      "slug": "control-set",
      "title": "The control set",
      "kicker": "Nº 17",
      "blurb": "The field, the button, the badge, the alert, the path, and the pages of a list. One control language, before any screen invents a second.",
      "pieces": [
        "text-field",
        "textarea-field",
        "password-field",
        "radio-group",
        "checkbox-group",
        "slider-field",
        "select-field",
        "combobox",
        "token-field",
        "otp-code",
        "rating-score",
        "calendar-month",
        "time-field",
        "switch-row",
        "button-roles",
        "breadcrumb",
        "tree-nav",
        "pagination",
        "filter-toolbar",
        "qty-stepper",
        "progress-bar",
        "property-list",
        "content-card",
        "status-badge",
        "inline-alert",
        "tooltip",
        "popover-panel",
        "consent-bar",
        "chat-thread",
        "order-confirmed",
        "split-button",
        "drag-to-confirm",
        "dial-knob",
        "undo-toast",
        "code-snippet-tabs",
        "selection-bar",
        "shortcut-sheet",
        "inline-edit",
        "minute-wheel",
        "stretch-switch",
        "edge-light-button",
        "shred-button",
        "receipt-slip",
        "focus-dim",
        "analog-stick",
        "chip-bucket",
        "press-well",
        "curve-drawer",
        "button-3d-press",
        "button-inset-soft",
        "button-sheen-pill",
        "button-add-to-cart",
        "button-follow-bookmark",
        "button-copy-share"
      ]
    },
    {
      "slug": "native-feel",
      "title": "Native feel, web materials",
      "kicker": "Nº 10",
      "blurb": "iOS 26 glass, Material 3 Expressive shapes, and the PWA moments in between: install, offline, update.",
      "pieces": [
        "ios-glass-tab-bar",
        "phone-tab-plain",
        "spend-list",
        "mobile-inbox-list",
        "chat-thread",
        "mobile-run-detail",
        "mobile-list-empty",
        "mobile-load-failed",
        "ios-fintech-home",
        "ios-swipe-row-actions",
        "ios-now-playing",
        "ios-grouped-settings",
        "ios-onboarding-carousel",
        "m3-expressive-home",
        "m3-fab-menu",
        "pwa-install-sheet",
        "pwa-connectivity-banner",
        "pwa-news-reader",
        "m3-navigation-bar",
        "phone-splash-launch",
        "phone-sign-in",
        "phone-sign-up-steps",
        "phone-paywall-plans",
        "phone-profile-header",
        "phone-comments-sheet",
        "phone-product-detail",
        "phone-notifications-list",
        "phone-form-fields",
        "phone-permission-prompt",
        "phone-photo-picker",
        "pwa-offline-library",
        "pwa-outbox-sync",
        "phone-search-results",
        "phone-map-listings",
        "phone-feed-posts",
        "phone-wallet-cards",
        "phone-video-player",
        "phone-booking-slots",
        "phone-order-tracking",
        "phone-ride-request",
        "phone-qr-scanner",
        "phone-calendar-agenda",
        "phone-workout-timer",
        "phone-lesson-quiz",
        "phone-account-edit",
        "phone-delete-account",
        "phone-subscription-manage",
        "phone-notification-settings",
        "phone-privacy-data",
        "phone-rating-prompt",
        "phone-large-text-layout",
        "m3-sign-in",
        "m3-settings-list",
        "m3-list-detail",
        "m3-top-app-bar-scroll",
        "m3-modal-bottom-sheet",
        "phone-forgot-password",
        "phone-code-entry",
        "phone-app-lock",
        "phone-cart",
        "phone-checkout",
        "phone-orders",
        "phone-composer",
        "phone-photo-viewer",
        "phone-skeleton-list",
        "m3-dialog",
        "m3-snackbar",
        "m3-search-results"
      ]
    },
    {
      "slug": "dashboards-and-data",
      "title": "Dashboards and dense data",
      "kicker": "Nº 11",
      "blurb": "Tables you can live in, KPI rows, boards, bento grids and counters that roll. Density without noise.",
      "pieces": [
        "analytics-dashboard-overview",
        "dense-data-table",
        "audit-activity-log",
        "record-detail-header",
        "people-role-list",
        "pagination",
        "filter-toolbar",
        "status-badge",
        "chart-bar-week",
        "chart-line-range",
        "chart-rank-spend",
        "budget-meter",
        "spend-list",
        "kpi-delta",
        "saved-banner",
        "list-empty-plain",
        "tablet-dashboard-grid",
        "kanban-board",
        "bento-feature-grid",
        "odometer-counter",
        "funnel-chart",
        "week-schedule",
        "agent-step-trace",
        "node-graph",
        "cited-answer",
        "collapsing-sidebar-rail",
        "tablet-split-view-mail",
        "ai-chat-workspace",
        "settings-team-members",
        "file-upload-manager",
        "calendar-week-planner",
        "onboarding-workspace-setup",
        "tablet-pos-register",
        "tablet-notes-three-pane",
        "tablet-cook-mode",
        "tablet-kiosk-checkin",
        "table-orders-status",
        "table-transactions-ledger",
        "table-users-select",
        "table-tasks-inline",
        "card-terminal-log",
        "card-progress-goals"
      ]
    },
    {
      "slug": "motion-with-a-reason",
      "title": "Motion with a reason",
      "kicker": "Nº 12",
      "blurb": "Transitions that explain where things went. Every duration and curve here is doing a job: continuity, hierarchy, or feedback.",
      "pieces": [
        "shared-element-expand",
        "m3-container-transform",
        "page-transition-curtain",
        "logo-draw-intro",
        "ios-app-switcher-stack",
        "ios-context-menu-lift",
        "staggered-list-reveal",
        "ios-large-title-collapse",
        "m3-search-bar-morph",
        "tabs-morphing-underline",
        "segmented-control-sliding",
        "lamp-theme-toggle",
        "optimistic-like-button",
        "card-flip-3d",
        "gooey-menu",
        "folder-reveal",
        "split-flap-board",
        "book-page-flip",
        "coverflow-strip",
        "lens-bento",
        "polaroid-fan",
        "pan-canvas",
        "scan-page",
        "glitch-text",
        "greeting-loader",
        "corner-player",
        "scroll-velocity-type",
        "grow-grid",
        "overlap-slider",
        "scroll-split",
        "trail-type",
        "letter-sleeve",
        "spring-deck",
        "page-transition-tile-wipe",
        "preloader-counter-intro",
        "webgl-shader-hero",
        "object-3d-turntable",
        "hero-video-loop",
        "three-orbit-object",
        "three-scroll-world",
        "three-room-look",
        "game-title-screen",
        "game-playfield",
        "game-hud",
        "game-card-table",
        "game-lobby",
        "game-leaderboard",
        "handwritten-homepage",
        "handwritten-letter"
      ]
    },
    {
      "slug": "typography-first",
      "title": "Typography does the work",
      "kicker": "Nº 13",
      "blurb": "Pieces where the type is the design: editorial heroes, kinetic marquees, reading pages with a proper measure, spreads that behave like print.",
      "pieces": [
        "editorial-landing-hero",
        "kinetic-type-marquee",
        "text-scramble-reveal",
        "paper-article-reader",
        "book-page-flip",
        "scroll-velocity-type",
        "greeting-loader",
        "trail-type",
        "magazine-editorial-grid",
        "blog-issue-index",
        "luxe-serif-style",
        "tablet-two-column-reader",
        "swiss-poster-style",
        "text-annotated-underlines",
        "card-drop-cap-editorial",
        "card-pull-quote",
        "card-magazine-cover"
      ]
    },
    {
      "slug": "design-languages",
      "title": "Whole design languages",
      "kicker": "Nº 14",
      "blurb": "Not a component, a dialect. Each of these is a complete visual grammar you can hand to an agent as the style guide for a product.",
      "pieces": [
        "terminal-ui-style",
        "swiss-poster-style",
        "paper-ink-style",
        "neo-brutalist-style",
        "luxe-serif-style",
        "bauhaus-style",
        "y2k-chrome-style",
        "cyber-hud-style",
        "organic-garden-style",
        "riso-print-style",
        "deco-hotel-style",
        "pixel-arcade-style",
        "clay-soft-style",
        "handwritten-style"
      ]
    },
    {
      "slug": "cursor-play",
      "title": "Cursor and hover play",
      "kicker": "Nº 15",
      "blurb": "Pieces that answer the pointer: magnetic buttons, image trails, letters that get heavier as you approach, cards that tilt and flip.",
      "pieces": [
        "magnetic-buttons",
        "hover-image-trail",
        "variable-font-proximity",
        "hover-tilt-cards",
        "spotlight-hover-grid",
        "card-flip-3d",
        "kinetic-type-marquee",
        "cursor-ink-blob"
      ]
    },
    {
      "slug": "scroll-driven",
      "title": "Scroll as the timeline",
      "kicker": "Nº 16",
      "blurb": "Motion tied to scroll position, not the clock: stacking cards, clip reveals, sticky stories, collapsing titles, reading progress.",
      "pieces": [
        "stacking-cards-scroll",
        "features-sticky-scroll-steps",
        "sticky-split-story",
        "scroll-reading-progress",
        "ios-large-title-collapse",
        "accordion-grid-rows",
        "parallax-layered-hero",
        "scroll-scrub-product-sequence",
        "scroll-zoom-portal",
        "smooth-scroll-inertia",
        "scroll-word-highlight",
        "text-mask-scroll-reveal",
        "mobile-scroll-story"
      ]
    },
    {
      "slug": "widgets-and-faces",
      "title": "Widgets and faces",
      "kicker": "Nº 18",
      "blurb": "Clocks, rings, timers and live tiles. The small faces of a bigger app, for home screens, watches and dashboards.",
      "pieces": [
        "widget-heart-rate",
        "widget-sleep-score",
        "widget-activity-rings",
        "widget-hydration",
        "widget-analog-clock",
        "widget-world-clocks",
        "widget-pomodoro",
        "widget-stopwatch-laps",
        "widget-compass",
        "widget-weather-glance",
        "widget-device-battery",
        "widget-control-toggles",
        "widget-ride-pickup",
        "widget-flight-arrival",
        "widget-now-playing",
        "widget-voice-assistant",
        "mockup-watch-faces",
        "card-event-countdown"
      ]
    },
    {
      "slug": "social-cards",
      "title": "Social cards",
      "kicker": "Nº 19",
      "blurb": "Posts, profiles, repos and chat in the shapes people already know, with invented brands.",
      "pieces": [
        "social-microblog-post",
        "social-photo-post",
        "social-pro-post",
        "social-thread-card",
        "social-profile-card",
        "social-repo-card",
        "social-contribution-graph",
        "social-chat-server-card",
        "social-pro-profile",
        "social-microblog-profile",
        "profile-editorial-staff",
        "profile-contact-card",
        "card-music-playlist"
      ]
    },
    {
      "slug": "paper-and-objects",
      "title": "Paper and objects",
      "kicker": "Nº 20",
      "blurb": "Tickets, postcards, polaroids, albums and stamps. Real things people recognise, made in CSS.",
      "pieces": [
        "card-postcard-stamp",
        "card-polaroid-frames",
        "card-stamped-document",
        "card-folder-tabs",
        "card-cinema-ticket",
        "card-boarding-pass",
        "card-cafe-menu-board",
        "card-event-ticket-stub",
        "card-retail-price-tag",
        "card-glass-credit",
        "card-journal-page",
        "card-sticky-notepad",
        "card-daily-quote",
        "card-stacked-deck",
        "gallery-film-strip",
        "gallery-photo-album",
        "gallery-museum-placard",
        "gallery-wall-frames",
        "mockup-ipod-classic"
      ]
    },
    {
      "slug": "grounds-and-presses",
      "title": "Backgrounds and buttons",
      "kicker": "Nº 21",
      "blurb": "Surfaces to set a page on and buttons worth pressing: gradients, patterns, keycaps, sheens and holds.",
      "pieces": [
        "background-aurora-mesh",
        "background-sunrise-horizon",
        "background-halftone-pop",
        "background-terrazzo",
        "background-graph-paper",
        "background-diagonal-boxes",
        "background-ink-wash",
        "background-linen-weave",
        "button-3d-press",
        "button-inset-soft",
        "button-sheen-pill",
        "button-hold-to-confirm",
        "button-add-to-cart",
        "button-follow-bookmark",
        "button-download-progress",
        "button-copy-share",
        "frame-transform-box"
      ]
    }
  ]
}