# Design Lounge
> A live library of interface design by Susan Acharya (https://acharyasusan.com.np).
> Designed using Design Lounge · https://www.designlounge.live

Humans browse. Coding agents rebuild. Every piece is a self-contained HTML demo plus a markdown brief at /p/<slug>.md.
Free to use in products. Keep the credit comment. Do not republish the catalogue as a catalogue.

## Skill
Install with: npx skills add SusanAcharya/Design-Lounge
The skill ships with the catalogue (palettes, type, briefs). After install, the agent reads those files. It does not need this website to be up.

## How to use this library (agents)
1. If the project already has a design system, keep it. Take structure and motion from piece briefs. Do not add a second palette.
2. If the human is starting a product, pick a recipe from /start. Choose one theme, one pairing, one family. Show the theme page, the type page, and each piece demo, and ask once before code. If they said to just build it, skip the question. Write the same links into DESIGN.md as Sources.
3. Search this file or GET https://www.designlounge.live/api/pieces.json for the closest pieces. If none fit, say so.
4. Open the brief: https://www.designlounge.live/p/<slug>.md. Rebuild the structure. Map colours onto the locked tokens. Family wins radius, shadow, and density.
5. Hold the result to the brief's checklist and to one system: same type, icons, spacing, and components on every screen of the pass. Before layout, name who it is for, the decision, the one thing they see first, and the next action. That first thing is the largest type on the view. The next action names the screen it opens. A shop is collection, product, cart, checkout. A tablet uses the tablet recipe.
6. Open the finished screens at their frame size. Say what you see: the largest type, the one button, and any sentence that would still be true for a different product. A gradient, a default font, three identical cards, and a generic headline fail. Fix them and look again. When the fails are none, make one correction: too loud, too even, too dense, too much chrome, or the wrong noun. Do not call the UI done from the source.
7. Match the theme to the product. Read bestFor. A clinic is Alpine Clinic. A payroll run is Harbour Ledger. A Nepali personal finance app is Lokta and the Devanagari pairing, recipe personal. A clay shop uses the commerce recipe. Do not lock the first palette because it is first. Name the theme you rejected.

## Map
- Kit — Compose: https://www.designlounge.live/kit. Pick a kind, a palette, a pairing, a family. Get a brief.
- System — Ingredients: https://www.designlounge.live/system. Type, themes, icons, motion. Pick these first.
- Index — By name: https://www.designlounge.live/c. Hero, footer, portfolio, loader — what a designer would call it.
- Shelves — By problem: https://www.designlounge.live/collections. Curated reading lists: navigation, first impressions, languages.
- Start a product: https://www.designlounge.live/start
- Compose a kit (pick palette + type + components, live preview): https://www.designlounge.live/kit
- Kit brief (raw MD): https://www.designlounge.live/kit/brief/{kind}/{theme}/{pairing}/{family}.md

## Starting a product
When a human is starting a product or design system, pick the closest recipe and assemble from it. Do not skip the theme and pairing.
- Websites: https://www.designlounge.live/start#web. The kind of site. Open one, then the screens that belong to it.
- Apps: https://www.designlounge.live/start#app. The kind of phone. A bank, a clinic, a shop in the hand.
- [Real estate](https://www.designlounge.live/start#real-estate): 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. A property listing, an agent, or a rental site. Marble Hall for a high price, Fog City for city rentals.
- [A restaurant](https://www.designlounge.live/start#restaurant): 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. A restaurant, a cafe, or a bar people visit. Not a food shop that ships; that is food.
- [A school or course](https://www.designlounge.live/start#education): 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,bento-feature-grid,hero-asymmetric-type-lockup,editorial-landing-hero,sticky-split-story. An online course, a school, a college, or a bootcamp.
- [A job board](https://www.designlounge.live/start#jobs): 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. A job board, a careers page with many roles, or a hiring marketplace.
- [A nonprofit](https://www.designlounge.live/start#nonprofit): 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. A charity, a fundraiser, or a community group asking for money or time.
- [A clinic](https://www.designlounge.live/start#clinic): 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. A dental, physio, vet, or doctor clinic people book. A retreat is wellness.
- [A gym](https://www.designlounge.live/start#gym): 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. A gym, a boxing club, a yoga or spin studio with a timetable.
- [A firm](https://www.designlounge.live/start#professional): 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. A law firm, an accountant, a consultant, or an advisory practice.
- [A marketing site](https://www.designlounge.live/start#marketing-site): 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,hero-swiss-grid-wordmark,hero-bauhaus-composition,editorial-landing-hero. A company, studio or product needs a public website with a point of view — not a template.
- [A SaaS site](https://www.designlounge.live/start#saas): 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,hero-ai-prompt-cycle,hero-live-browser-card,hero-asymmetric-type-lockup. A software product needs a public page. Fog City, because this is SaaS. Atelier Noir is a fashion room, so it loses.
- [A portfolio](https://www.designlounge.live/start#portfolio): 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,brutalist-studio-home,gallery-contact-sheet,masonry-gallery-captions,gallery-wall-frames. A visual designer, photographer, architect, or studio whose work is images. Someone who ships software takes portfolio-builder instead.
- [A builder’s portfolio](https://www.designlounge.live/start#portfolio-builder): 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,hero-swiss-grid-wordmark,hero-flashlight-reveal,hero-editorial-name-rotator,hero-live-browser-card,app-icon-shelf-gallery. 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.
- [Fintech](https://www.designlounge.live/start#fintech): 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,hero-product-window-tilt,hero-swiss-grid-wordmark,hero-asymmetric-type-lockup. Banking, payments, or a ledger someone is deciding to trust.
- [Fashion](https://www.designlounge.live/start#fashion): 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,hero-flashlight-reveal,hero-editorial-name-rotator,editorial-landing-hero. Clothes, fragrance, or a luxury good. Linen and a Didone, not a product sans.
- [A food shop](https://www.designlounge.live/start#food): 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. A kitchen, a stall, or a menu people order from.
- [Wellness](https://www.designlounge.live/start#wellness): 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. 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.
- [A hotel](https://www.designlounge.live/start#hotel): 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. A hotel, a house, or a night people reserve.
- [An agency](https://www.designlounge.live/start#agency): 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,hero-bauhaus-composition,hero-swiss-grid-wordmark. A studio selling the work, after dark.
- [Documentation](https://www.designlounge.live/start#docs): 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. A guide, an API, or a changelog people keep open.
- [A music site](https://www.designlounge.live/start#music): 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. A label, a release, or a night. Neon, not a paper magazine.
- [A personal site](https://www.designlounge.live/start#personal-site): 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,editorial-landing-hero,handwritten-homepage,hero-silk-ribbon-ticker. A person, not a studio. The writing is the work.
- [An event](https://www.designlounge.live/start#event): 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. A festival, a launch night, or a programme with hours.
- [A museum](https://www.designlounge.live/start#museum): 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. A gallery, a collection, or a room people walk.
- [A landing page](https://www.designlounge.live/start#landing): 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,luxe-product-detail,hero-swiss-grid-wordmark,hero-bauhaus-composition. A launch, a waitlist, or one product page, including a tilt, a sticky scroll, or a hover on the product.
- [A mobile app](https://www.designlounge.live/start#mobile-app): 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. 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.
- [A design system](https://www.designlounge.live/start#design-system): 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. A new product needs a grammar — tokens and taste — before components.
- [A dashboard](https://www.designlounge.live/start#dashboard): 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. An internal tool, analytics home, or ops screen people will live in all day.
- [A web app](https://www.designlounge.live/start#web-app): 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,features-thread-to-issue-board,table-tasks-inline. The app itself, in a browser. Not the marketing site (that is saas) and not a staff dashboard.
- [A shop](https://www.designlounge.live/start#commerce): 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,hero-bauhaus-composition,hero-product-window-tilt. A product, a bowl, a kit — something people buy without a carnival.
- [A tablet](https://www.designlounge.live/start#tablet): 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. Someone holds the product in two hands. The frame is 1180 wide, and a phone list does not belong there.
- [An editorial product](https://www.designlounge.live/start#editorial): 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. A magazine, a journal, a long-read product where the type is the design.
- [A bank app](https://www.designlounge.live/start#bank): 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. A phone someone opens to see their money. Not the staff ledger.
- [A health app](https://www.designlounge.live/start#health): 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. Fitness, a clinic, or a body people check daily.
- [Messages](https://www.designlounge.live/start#messages): 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. Chat, mail, or a list of conversations.
- [A music app](https://www.designlounge.live/start#music-app): 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. A song, a queue, a night. The player is the product.
- [A news app](https://www.designlounge.live/start#news): 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. News or a magazine someone reads on a phone.
- [A shop app](https://www.designlounge.live/start#shop-app): 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. Buying on a phone. The bag is the next screen, not a carnival.
- [A social app](https://www.designlounge.live/start#social): 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. People, posts, or stories. One feed, not a dashboard.
- [Weather](https://www.designlounge.live/start#weather): 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. A forecast. One place, the next hours, nothing else.
- [A field app](https://www.designlounge.live/start#field): 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. Staff on a phone, outside. A yard, a route, a job.
- [A personal app](https://www.designlounge.live/start#personal): 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. Money, health, or home for the person using it. A Nepali finance app starts here.
- [A game](https://www.designlounge.live/start#game): 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. 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.
- [A handwritten site](https://www.designlounge.live/start#notebook): 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. A personal site, a cafe, a workshop, or a letter. Notes in the margin of a normal site use Handwritten Notes instead.

## Machine endpoints
- https://www.designlounge.live/llms.txt
- https://www.designlounge.live/api/pieces.json
- https://www.designlounge.live/search.json
- https://www.designlounge.live/agents
- https://www.designlounge.live/start
- https://www.designlounge.live/system

## Sources
Public sites the screens study. One product, one site. Do not blend two. Do not copy the palette. The locked Lounge theme still wins. A new link in websites.txt shows up at https://www.designlounge.live/sources.
- [Abel](https://abelfragrance.com/): A perfume shop. The range, the scent types, a quiz, a journal. A catalogue. One product at a time.
- [Igloo](https://www.igloo.inc/): An onchain community. The public HTML is a shell, so the lesson is the mission they publish, not a layout. A product with one job. Do not invent a homepage they did not ship.
- [Don't Board Me](https://dontboardme.com/): In-home pet care. A loud line, then the services, then book. A service with a next step. The headline can shout. The booking stays plain.
- [Noomo](https://noomoagency.com/): A Los Angeles studio. 3D stories and sites that stop a scroll. One scroll, one story. Motion carries the page.
- [Synchronized](https://synchronized.studio/): A digital studio. The word archive repeats until the work is the page. Lead with the work. Say the name until it holds.
- [Mendo](https://mendo.nl/): A bookshop in Amsterdam. Books as objects, and a journal beside the shop. Paper, type, and the object. The shop stays quiet.
- [Nixon](https://www.nixon.com/): Watches. The page could not be read from here, so no screen claims it yet. No screen claims this site yet.
- [Dragone](https://dragone.com/): Live shows. A dark front, then the shows, the news, and a way to partner. A show with a way in. Spectacle, then the ask.
- [Nothin'](https://www.noth.in/): A Paris studio. Ideas, not a pile of content. One line does the work. A short sentence, large. The rest of the page waits.
- [Stripe](https://stripe.com/): A payments company. One bright ribbon, a light headline, and the product shown working in every card. Let one big moving thing carry the colour. Keep the words light and the cards real.
- [UseArticle](https://www.usearticle.com/): A tool that writes and posts articles on a schedule. The page shows the product running, not a picture of it. Let the visitor press the controls and watch the card change. Thick black edges and hard shadows keep it friendly.
- [Linear](https://linear.app/): A tool for building software. A dark page where the real app is the picture. Show the product doing the work. Fade it at the edges and keep one colour for what matters.
- [Tailwind CSS docs](https://tailwindcss.com/docs/installation/using-vite): The install page for a CSS framework. Numbered steps, each with its own small code box. Put each instruction next to its code. Draw the grid with thin lines and let the empty sides carry a faint hatch.
- [Wickret](https://wickret.cuberto.com/): A concept bank app page by a studio. One huge headline, toys floating around it, then a phone. Let the big words move. Letters can break apart and come back as new words.
- [Lama Lama](https://lamalama.com/): An Amsterdam agency. A dark page with a dot screen hero and a small bar that talks back. A tiny nav bar can carry the voice. Change its one line for each section.
- [MindMarket](https://mindmarket.com/): A research agency. Big friendly type on bright green, cartoon people, white cards along a winding path. One path ties the page together. Cards sit beside it, and the numbers pile up as you scroll.
- [The F-List](https://f-list.cleancreatives.org/): A watchdog report on ad agencies. Black and yellow, tall narrow type, lines hidden under black bars. Make the reveal the message. Bars lift off the text, and badges explain the list.
- [Bermawy](https://bermawy.com/): A personal site typed on graph paper. A torn photo, clipped cards, a notebook of articles. A toy console plays the talks. Let one toy be the real control. Keep the rest plain and on paper.
- [Haunted Boulder City](https://www.hauntedbouldercity.com/): A ghost walking tour. Fog, night photos and huge narrow type. The story slides sideways as you scroll. Pin the screen and let scroll turn the pages. Only the line you are on gets to shout.
- [GMX Digital](https://gmxdigital.com/en/): A film studio for buildings that are not built yet. Dark, slow, and it plays like a film. Keep the headline still and let the scenes change behind it. A thin line counts down each one.
- [Sibal Design](https://sibaldesign.com/): One designer, shown like a ship screen. You press Enter, it loads, then the work opens in frames. Make the entrance a choice and keep it short. Then let each project show its steps, one at a time.
- [MWDT](https://mwdtinc.com/): A machine shop. A dark hero card, a steel part, and a button to ask for a quote. Let the product break out of the box. One light line, one heavy line, one button.
- [Moremedia](https://www.moremedia.at/): An agency in Austria. Big tight type, real work, and services you open one at a time. Set the services as tall labels. Open one, and keep the rest as type.
- [Susan Acharya](https://acharyasusan.com.np/): A product lead's portfolio. A night valley drawn by hand. Small people play in it while you read. Draw one scene and let it move a little. The words stay calm on top.
- [60fps](https://60fps.design/): A big library of short clips. Small moments from phone apps, tagged by gesture, pattern and effect. Show one small moment at a time, and let the tags do the sorting.
- [Icon Museum](http://icon.museum/): A gallery of app icons. Each one sits on a glass shelf. Click one to see it big with its colours. Let the icons be the only colour. Give each one a shelf, a lift on hover, and a quiet label.

## Libraries
- Type pairings (44): https://www.designlounge.live/type
- Themes (60): https://www.designlounge.live/themes
- Lounge Icons (99): https://www.designlounge.live/icons — Lounge Icons · Designed using Design Lounge · www.designlounge.live
- Motion recipes (16): https://www.designlounge.live/motion

## Type pairings
- [Gallery Wall](https://www.designlounge.live/type/gallery-wall): Instrument Serif + Inter. Quiet confidence. A serif with ink-trap italics over a neutral grotesk. Best for: Designer portfolios, Studio sites, Case studies.
- [The Lounge](https://www.designlounge.live/type/the-lounge): Fraunces + Instrument Sans. Warm, literary, a little soft. The house pairing of this site. Best for: Editorial products, Libraries, Long reads.
- [Newsroom](https://www.designlounge.live/type/newsroom): Newsreader + Work Sans. Serious reporting with a friendly sans for the furniture. Best for: News, Newsletters, Publishing.
- [Swiss Precision](https://www.designlounge.live/type/swiss-precision): Schibsted Grotesk + Schibsted Grotesk. Grid-first. Tight grotesk, mono for data and captions. Best for: Dashboards, Wayfinding, Data products.
- [Brutal Grotesk](https://www.designlounge.live/type/brutal-grotesk): Archivo Black + Archivo. Loud headlines, plain body, nothing in between. Best for: Agencies, Launches, Posters.
- [Maison](https://www.designlounge.live/type/maison): Bodoni Moda + Tenor Sans. High-contrast Didone with an airy humanist. Restraint as luxury. Best for: Fashion, Hotels, Fragrance.
- [Studio Display](https://www.designlounge.live/type/studio-display): Syne + Manrope. Art-school geometry with a calm, readable companion. Best for: Creative studios, Events, Culture.
- [Developer Docs](https://www.designlounge.live/type/developer-docs): Geist + Geist. Neutral, technical, legible at 13px. Built for code next to prose. Best for: Docs, Dev tools, APIs.
- [Bookish](https://www.designlounge.live/type/bookish): Libre Caslon Text + Karla. Old-style serif reading comfort with a friendly grotesk for UI. Best for: Reading apps, Book shops, Journals.
- [Poster Condensed](https://www.designlounge.live/type/poster-condensed): Bebas Neue + Space Mono. Tall and urgent. Condensed caps with a mono to keep it honest. Best for: Events, Sports, Music.
- [Deco Hotel](https://www.designlounge.live/type/deco-hotel): Italiana + Josefin Sans. Thin, tall, 1920s. Geometric sans for the room numbers. Best for: Hospitality, Bars, Invitations.
- [Atelier](https://www.designlounge.live/type/atelier): Gloock + Figtree. A heavy display serif with a soft, rounded geometric for everything else. Best for: Fashion e-commerce, Beauty, Lifestyle.
- [Arcade](https://www.designlounge.live/type/arcade): Silkscreen + Space Mono. Bitmap caps over a mono body. Insert coin. Best for: Games, Hackathons, Retro products.
- [HUD](https://www.designlounge.live/type/hud): Chakra Petch + Share Tech Mono. Angular, technical, cockpit-adjacent. Pairs with cut corners and scanlines. Best for: Gaming, Security, Mission control.
- [Candy Clay](https://www.designlounge.live/type/candy-clay): Bagel Fat One + Fredoka. Puffy, round, delighted. Built for chunky buttons. Best for: Kids, Consumer apps, Games.
- [Friendly SaaS](https://www.designlounge.live/type/friendly-saas): Plus Jakarta Sans + Plus Jakarta Sans. Modern product sans with a mono for numbers and keys. Best for: SaaS, Fintech, Startups.
- [Devanagari](https://www.designlounge.live/type/devanagari): Noto Serif Devanagari + Mukta. A Nepali display serif for headings and amounts. Mukta for the interface. The currency word and the digits share one face. Best for: Nepal, Personal finance, Civic.
- [Bauhaus School](https://www.designlounge.live/type/bauhaus-school): Outfit + DM Mono. Geometric heavyweight with a mono for the rules. Best for: Education, Exhibitions, Architecture.
- [Wide Tech](https://www.designlounge.live/type/wide-tech): Unbounded + Onest. Extended display, crisp neutral body. Feels engineered and expensive. Best for: Hardware, Mobility, Crypto.
- [Garden Journal](https://www.designlounge.live/type/garden-journal): Young Serif + Hanken Grotesk. Chunky friendly serif, generous grotesk. Earthy and kind. Best for: Food, Wellness, Lifestyle.
- [Literary](https://www.designlounge.live/type/literary): Cormorant Garamond + Work Sans. Calligraphic Garamond display with a quiet sans for UI. Best for: Poetry, Publishers, Weddings.
- [Riso Zine](https://www.designlounge.live/type/riso-zine): Rubik Mono One + Rubik. Monoline heavyweight caps and its own family for body. Photocopied joy. Best for: Zines, Festivals, Merch.
- [Industrial Label](https://www.designlounge.live/type/industrial-label): Big Shoulders Display + IBM Plex Sans. Tall stencil-adjacent caps and a workhorse sans. Best for: Logistics, Manufacturing, Outdoor.
- [Letter Hand](https://www.designlounge.live/type/letter-hand): Gochi Hand + Patrick Hand. The whole site is handwritten. A loose script for titles, a clear printed hand for everything you read. Best for: Personal sites, Cafes, Workshops, Letters.
- [Handwritten Notes](https://www.designlounge.live/type/handwritten-notes): Caveat + Inter. A real hand for annotations, a neutral grotesk for the rest. Best for: Whiteboards, Education, Personal sites.
- [Slab Ledger](https://www.designlounge.live/type/slab-ledger): Zilla Slab + IBM Plex Mono. Sturdy slab with a mono. Ledgers, receipts, honesty. Best for: Finance, Invoicing, Co-ops.
- [Red Hat Pair](https://www.designlounge.live/type/red-hat): Red Hat Display + Red Hat Mono. One superfamily: display and mono designed together. Best for: Enterprise, Open source, Docs.
- [Y2K Chrome](https://www.designlounge.live/type/y2k-chrome): Michroma + Figtree. Wide, sci-fi, millennium. Wants bevels and sparkles. Best for: Music, Fashion drops, Nightlife.
- [Signal Mono](https://www.designlounge.live/type/signal-mono): Space Grotesk + Space Grotesk. Space-age grotesk and its mono sibling. Tech without coldness. Best for: Startups, AI tools, Hardware.
- [Playground](https://www.designlounge.live/type/playground): Baloo 2 + Nunito. Round and bouncy with a sturdy, readable body. Best for: Kids, Learning, Community.
- [Magazine Contrast](https://www.designlounge.live/type/magazine-contrast): DM Serif Display + DM Sans. Display serif and its matched sans, designed as a pair. Best for: Magazines, Brand sites, Restaurants.
- [Neo Grotesk Mono](https://www.designlounge.live/type/neo-grotesk-mono): Familjen Grotesk + Familjen Grotesk. Scandinavian grotesk with a characterful mono. Best for: Agencies, Product sites, Annual reports.
- [Variable Expressive](https://www.designlounge.live/type/variable-expressive): Anybody + Epilogue. A width-and-weight variable display with a crisp body. Begs to animate. Best for: Kinetic type, Music, Campaigns.
- [Academic](https://www.designlounge.live/type/academic): Literata + Public Sans. A screen-first book serif with a civic sans. Best for: Research, Government, Universities.
- [Cinema](https://www.designlounge.live/type/cinema): Anton + Crimson Pro. Poster-tall condensed caps over a bookish serif. Credits energy. Best for: Film, Theatre, Festivals.
- [Monumental](https://www.designlounge.live/type/monumental): Cinzel + Spectral. Roman inscriptional caps with a refined text serif. Best for: Museums, Wine, Heritage.
- [Terminal Native](https://www.designlounge.live/type/terminal-native): JetBrains Mono + IBM Plex Sans. A mono that reads like prose, with a plain sans for marketing copy. Best for: CLIs, Dev portfolios, Changelogs.
- [Neon Marquee](https://www.designlounge.live/type/neon-marquee): Monoton + Josefin Sans. Inline tube lettering with a geometric sans. Use once, big. Best for: Bars, Arcades, Night markets.
- [Indie Maker](https://www.designlounge.live/type/indie-maker): Bricolage Grotesque + Bricolage Grotesque. One variable family doing both jobs at two optical sizes. Best for: Indie products, Newsletters, Personal sites.
- [AI Editorial](https://www.designlounge.live/type/ai-editorial): Instrument Serif + JetBrains Mono. The 2026 look: a delicate serif with a precise mono. Thoughtful machines. Best for: AI products, Research labs, Tools.
- [Lettera](https://www.designlounge.live/type/lettera): Playfair Display + Karla. Classic high-contrast serif with a warm sans. Timeless, never wrong. Best for: Brands, Restaurants, Weddings.
- [Pixel Soft](https://www.designlounge.live/type/pixel-soft): Pixelify Sans + Lexend. A friendly pixel face with a hyper-legible sans. Retro without the eye strain. Best for: Productivity games, Kids, Crypto.
- [Classic Garamond](https://www.designlounge.live/type/classic-garamond): EB Garamond + Hanken Grotesk. The book face of record, with a sober grotesk for navigation. Best for: Literary magazines, Law, Archives.
- [Geometric Modern](https://www.designlounge.live/type/geometric-modern): Sora + Sora. Clean geometric sans in two weights. The safe-but-sharp product default. Best for: Apps, Marketplaces, Health.

## Themes
- [Paper & Ink](https://www.designlounge.live/themes/paper-ink): primary #a8661a / secondary #3f6b4a / tertiary #3d4f6b. Warm newsprint. The default of a well-printed book, not a template.
- [Night Desk](https://www.designlounge.live/themes/night-desk): primary #e0a34b / secondary #8fbf7a / tertiary #c48a8a. A lamp over a dark table. Warm paper type on near-black.
- [Alpine Clinic](https://www.designlounge.live/themes/alpine-clinic): primary #22937a / secondary #2a6f97 / tertiary #6b5a8a. Cool, washed, trustworthy. Mint air and a precise teal.
- [Harbour Ledger](https://www.designlounge.live/themes/harbour-ledger): primary #b08a3e / secondary #1e3a5f / tertiary #8a3a3a. Navy wool, cream paper, a brass stamp.
- [Kiln](https://www.designlounge.live/themes/kiln): primary #c9693b / secondary #4f6b3a / tertiary #3a4558. Fired clay, sand, charcoal. A studio that still has dust on the floor.
- [Signal Green](https://www.designlounge.live/themes/signal-green): primary #3ddc84 / secondary #e6c35c / tertiary #7ab8c8. A terminal that grew up. Phosphor on soot, no nostalgia drag.
- [Atelier Noir](https://www.designlounge.live/themes/atelier-noir): primary #c9a54a / secondary #8a3a3a / tertiary #62707f. Bone type on black. Luxury as the absence of extra lines.
- [Loam](https://www.designlounge.live/themes/loam): primary #c46a3c / secondary #4a6b38 / tertiary #6a3a4a. Garden journal. Olive, cream, a rust that looks like soil.
- [Ice Station](https://www.designlounge.live/themes/ice-station): primary #2a6f97 / secondary #5a7a8a / tertiary #b86a1a. Pale, northern, a little severe. Blue-gray air.
- [Press Room](https://www.designlounge.live/themes/press-room): primary #c4121a / secondary #1a2744 / tertiary #c49a2a. Newsprint and one red. Headlines do the shouting.
- [Velvet Club](https://www.designlounge.live/themes/velvet-club): primary #d4a24a / secondary #8a2a44 / tertiary #6a8a7a. Burgundy walls, a gold rail, last orders at two.
- [Greenhouse](https://www.designlounge.live/themes/greenhouse): primary #4f7a32 / secondary #2a4a28 / tertiary #c46a6a. Leaf-filtered light. Soft, wet, growing.
- [Circuit](https://www.designlounge.live/themes/circuit): primary #c6ff3d / secondary #3d8aff / tertiary #ffb020. Engineered and a little expensive. Lime on charcoal.
- [Marble Hall](https://www.designlounge.live/themes/marble-hall): primary #8a6a2f / secondary #4a5560 / tertiary #6a2a2a. White stone, dove shadows, a brass plaque.
- [Cinder](https://www.designlounge.live/themes/cinder): primary #ff5a1f / secondary #3a4a5a / tertiary #e6b020. Yard ops. Safety orange on poured concrete.
- [Sakura Desk](https://www.designlounge.live/themes/sakura-desk): primary #c43b3b / secondary #2a1716 / tertiary #d4a09a. Blush paper, black ink, one stamp of red.
- [Observatory](https://www.designlounge.live/themes/observatory): primary #e0b44a / secondary #5ec8a0 / tertiary #6a5a9a. Deep navy, star-gold, a little ice on the glass.
- [Market Stall](https://www.designlounge.live/themes/market-stall): primary #d23a1e / secondary #d4a020 / tertiary #3d6b2a. Turmeric, tomato, kraft paper. Loud in a friendly way.
- [Fog City](https://www.designlounge.live/themes/fog-city): primary #0e66eb / secondary #3d4a5c / tertiary #22937a. Cool gray, white, one cobalt. Civic and calm.
- [Archive](https://www.designlounge.live/themes/archive): primary #8b1e1e / secondary #2a3a5a / tertiary #c4a86a. Manila folders, faded navy, a stamp of red.
- [Neon Alley](https://www.designlounge.live/themes/neon-alley): primary #ff4fa3 / secondary #19e6c1 / tertiary #7f49eb. Black wet street, magenta and cyan tubes.
- [Linen Shop](https://www.designlounge.live/themes/linen-shop): primary #9d4b2c / secondary #6a7a5a / tertiary #b08a4a. Flax, clay, sage. Washed twice so it arrives soft.
- [Copper Works](https://www.designlounge.live/themes/copper-works): primary #c46a32 / secondary #8fbf7a / tertiary #c4a86a. Soot walls, a copper pipe, cream labels.
- [Glacier](https://www.designlounge.live/themes/glacier): primary #3a8aa8 / secondary #4a5a68 / tertiary #3b9376. Almost white, a glacial blue, slate type.
- [Festival](https://www.designlounge.live/themes/festival): primary #ff4f8b / secondary #1f2a6b / tertiary #f0c84a. Two inks, one drum. Fluoro pink on indigo cream.
- [Courtroom](https://www.designlounge.live/themes/courtroom): primary #b5381f / secondary #14241c / tertiary #b08a3e. Deep green leather, cream paper, a gold rule.
- [Playroom](https://www.designlounge.live/themes/playroom): primary #ff6b4a / secondary #2c2140 / tertiary #f0c84a. Butter walls, coral buttons, a navy that keeps it honest.
- [Oxide](https://www.designlounge.live/themes/oxide): primary #a84828 / secondary #4a6b32 / tertiary #5a6a7a. Rusted metal, olive, bone. A shed that still works.
- [Y2K Chrome](https://www.designlounge.live/themes/y2k-chrome): primary #2b62eb / secondary #ff4fa3 / tertiary #1aa87a. Ice silver, bevels, one electric blue. Millennium optimism.
- [HUD Teal](https://www.designlounge.live/themes/hud-teal): primary #19e6c1 / secondary #e6c419 / tertiary #5aa8e6. Cockpit glass. Signal teal, scanline black.
- [Lokta](https://www.designlounge.live/themes/lokta): primary #c8102e / secondary #1c2744 / tertiary #8a6232. Lokta paper, flag crimson, navy ink. A Nepali surface, not a Western fintech skin.
- [Lokta Night](https://www.designlounge.live/themes/lokta-night): primary #e85a68 / secondary #f4ead6 / tertiary #d4b06a. The same crimson on navy after dark. The paper colour moves into the type.
- [Harbour Night](https://www.designlounge.live/themes/harbour-night): primary #d4b06a / secondary #8eb0d4 / tertiary #c47a7a. The same ledger after the lamps go down. Cream type, a brighter brass stamp.
- [Alpine Night](https://www.designlounge.live/themes/alpine-night): primary #3cc9a4 / secondary #6aaed4 / tertiary #a898cc. The clinic after hours. Mint light on a deep pine glass.
- [Loam Dusk](https://www.designlounge.live/themes/loam-dusk): primary #e08a5c / secondary #9cbf84 / tertiary #c48a9c. The garden at dusk. Olive shadows, a rust that glows.
- [Polar Night](https://www.designlounge.live/themes/polar-night): primary #6ab0d8 / secondary #9ab4c4 / tertiary #e0a058. The station in winter. Blue-black air, one amber lamp.
- [Night Edition](https://www.designlounge.live/themes/night-edition): primary #ff4a4f / secondary #9fb0d8 / tertiary #e0bf5a. The late edition. Newsprint white on press black, the same red.
- [Greenhouse Night](https://www.designlounge.live/themes/greenhouse-night): primary #8cc45e / secondary #b8d8a0 / tertiary #e89a9a. Grow lights after dark. Soft green on deep leaf.
- [Basalt Hall](https://www.designlounge.live/themes/basalt-hall): primary #c9a45a / secondary #a3adb8 / tertiary #c47a7a. The hall after closing. Dark stone, the brass plaque lit.
- [Night Shift](https://www.designlounge.live/themes/night-shift): primary #ff6a33 / secondary #8aa0b8 / tertiary #f0c040. The yard under floodlights. Safety orange on wet asphalt.
- [Sakura Night](https://www.designlounge.live/themes/sakura-night): primary #ff6b6b / secondary #f6e8e4 / tertiary #d8a8a0. The desk by lamplight. Blush type on plum ink, the red stamp brighter.
- [Night Market](https://www.designlounge.live/themes/night-market): primary #ff6a48 / secondary #f0c040 / tertiary #8fc46a. The stalls after sunset. Turmeric and tomato under bulbs.
- [Fog Night](https://www.designlounge.live/themes/fog-night): primary #5a9bff / secondary #a0aec0 / tertiary #3cc9a4. The city at night. Slate, white type, the same cobalt brighter.
- [Reading Room](https://www.designlounge.live/themes/reading-room): primary #e06a5a / secondary #8ea4cc / tertiary #d4b87a. The archive after hours. Manila type on dark oak, a red stamp.
- [Glacier Night](https://www.designlounge.live/themes/glacier-night): primary #6ac0dc / secondary #a0b2c0 / tertiary #5ac89a. Ice under moonlight. Slate dark, a glacial blue that glows.
- [Festival Night](https://www.designlounge.live/themes/festival-night): primary #ff5f97 / secondary #f6f1ea / tertiary #f0c84a. The second night of the festival. Cream ink on indigo, fluoro pink.
- [Chambers](https://www.designlounge.live/themes/chambers): primary #e2654a / secondary #c9c2a8 / tertiary #d4b06a. The judge's chambers at night. Green leather dark, a gold rule.
- [Bedtime](https://www.designlounge.live/themes/bedtime): primary #ff7f62 / secondary #fff4d6 / tertiary #f0c84a. The playroom with the lights low. Butter type on a navy blanket.
- [Oxide Night](https://www.designlounge.live/themes/oxide-night): primary #d4683e / secondary #8fb06a / tertiary #8ea0b4. The shed with the door shut. Rust glowing on dark iron.
- [Chrome Midnight](https://www.designlounge.live/themes/chrome-midnight): primary #5a8cff / secondary #ff6fb4 / tertiary #2ac890. The mixtape at midnight. Gunmetal, the same electric blue.
- [Signal Paper](https://www.designlounge.live/themes/signal-paper): primary #117f42 / secondary #9a7a12 / tertiary #2a6f86. The terminal printed out. Green-black type on pale paper.
- [Matinee](https://www.designlounge.live/themes/matinee): primary #8a2a44 / secondary #a87a2a / tertiary #4a6a5a. The club in the afternoon. Rose plaster, burgundy, a gold rail.
- [Circuit Bench](https://www.designlounge.live/themes/circuit-bench): primary #4f7d00 / secondary #1f5fd6 / tertiary #b87400. The test bench in daylight. Charcoal type, a deep lime.
- [Planetarium](https://www.designlounge.live/themes/planetarium): primary #8e650f / secondary #319374 / tertiary #5a4a8a. The observatory by day. Pale sky, navy type, a gold chart line.
- [Arcade Day](https://www.designlounge.live/themes/arcade-day): primary #d4207a / secondary #22937f / tertiary #6a2fe0. The arcade with the shutters up. Lilac light, magenta and teal.
- [Cockpit Day](https://www.designlounge.live/themes/cockpit-day): primary #0a8f78 / secondary #8a7200 / tertiary #2a6fae. The cockpit in sunlight. Pale glass, ink type, signal teal.
- [Inkwell](https://www.designlounge.live/themes/inkwell): primary #1d4e89 / secondary #b42323 / tertiary #8a6a2f. A letter on warm paper. Blue-black ink, one red correction.
- [Lamp Desk](https://www.designlounge.live/themes/lamp-desk): primary #9ec0ea / secondary #e08080 / tertiary #e0c27a. The same letter after dark. Warm ink on a brown desk.
- [Coin-op](https://www.designlounge.live/themes/coin-op): primary #ffd23f / secondary #3dff9a / tertiary #ff4d6a. A cabinet in a dark arcade. Amber coin light, CRT green.
- [Ticket Booth](https://www.designlounge.live/themes/ticket-booth): primary #c96925 / secondary #0d7a45 / tertiary #1d4e89. The arcade in daylight. Cream tickets, a red stamp, green ink.

## Easings
- Lounge standard: cubic-bezier(0.2, 0.7, 0.2, 1) — Default for UI moves: width, opacity, colour, small translates.
- Expo out: cubic-bezier(0.16, 1, 0.3, 1) — Hero reveals, shared-element expands, sheets rising.
- iOS sheet: cubic-bezier(0.32, 0.72, 0, 1) — Bottom sheets, drawers, large vertical translates.
- Enter: cubic-bezier(0.16, 1, 0.3, 1) — Anything that appears: toasts, menus, tooltips.
- Exit: cubic-bezier(0.4, 0, 1, 1) — Dismissals under 180ms. Pair with enter, never the reverse.
- Emphasized: cubic-bezier(0.2, 0, 0, 1) — Container transforms, FAB morphs, large layout changes.
- Emphasized decelerate: cubic-bezier(0.05, 0.7, 0.1, 1) — Elements entering a scene in Material language.
- Emphasized accelerate: cubic-bezier(0.3, 0, 0.8, 0.15) — Elements exiting a Material scene.
- Soft spring (approx): cubic-bezier(0.22, 1.2, 0.36, 1) — Likes, checkboxes, small toggles. Never on layout width.
- Snappy spring (approx): cubic-bezier(0.34, 1.4, 0.64, 1) — Onboarding, clay/playful kits, success states.
- Linear: linear — Marquees, indeterminate bars, rotating loaders.
- In–out cubic: cubic-bezier(0.65, 0, 0.35, 1) — Theme toggles, accordion height, play/pause morphs.

## Motion recipes
- Fade and rise: opacity, transform 0 / translateY(12px) → 1 / none in 520ms (expo-out). Reduced: opacity only, 1ms
- Underline grow: transform (scaleX) 0, origin left → 1 in 200ms (standard). Reduced: instant underline
- Sidebar rail: width 240px → 64px in 320ms (standard). Reduced: width snap, no label slide
- Sheet up: transform translateY(100%) → 0 in 400ms (ios-sheet). Reduced: opacity 160ms, no travel
- Dialog in: opacity, transform 0 / scale(.96) → 1 / 1 in 240ms (expo-out). Reduced: opacity only
- Toast enter: transform, opacity translateY(8px) → 0 in 200ms (enter). Reduced: opacity 120ms
- Tab ink bar: left, width previous rect → new rect in 280ms (standard). Reduced: snap
- Count up: text content 0 → target in 800ms (expo-out (via JS ease)). Reduced: set final number immediately
- SVG stroke draw: stroke-dashoffset path length → 0 in 700ms (standard). Reduced: offset 0 immediately
- Marquee: transform 0 → −50% in 40–70s linear infinite (linear). Reduced: static, no animation
- Like pop: transform 1 → 1.18 then 1 in 280ms (spring-soft). Reduced: colour change only
- Page curtain: clip-path or translateY inset(0 0 100% 0) → inset(0) in 640ms out, 520ms in (emphasized / expo-out). Reduced: crossfade 160ms
- Shared expand: top/left/width/height or grid-row card rect → stage rect in 400ms (emphasized). Reduced: instant swap
- Skeleton to content: opacity, filter skeleton 1 / content 0 → inverse in 240ms (standard). Reduced: instant swap
- Magnetic pull: transform 0,0 → dx*0.28, dy*0.28 in 160ms (standard). Reduced: no follow
- Theme circle wipe: clip-path on view transition circle(0 at origin) → circle(max radius) in 520ms (standard). Reduced: instant theme swap

## Shelf groups
- Build a site: The pages a visitor meets first, then the blocks you assemble them from. Shelves: first-impressions, website-in-parts, portfolio-sites, landing-pages, proof-and-close.
- Ship a product: Navigation, waiting, forms, native feel, and the screens people live in. Shelves: navigation-sorted, loading-states, sheets-and-overlays, forms-people-finish, control-set, native-feel, dashboards-and-data.
- Taste and craft: Motion, type, whole design languages, and the pointer as a material. Shelves: motion-with-a-reason, typography-first, design-languages, cursor-play, scroll-driven, widgets-and-faces, social-cards, paper-and-objects, grounds-and-presses.

## Collections
- [First impressions](https://www.designlounge.live/collections/first-impressions): 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.
- [A website, in parts](https://www.designlounge.live/collections/website-in-parts): 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.
- [Sites that show the work](https://www.designlounge.live/collections/portfolio-sites): 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.
- [Landing pages with a point of view](https://www.designlounge.live/collections/landing-pages): 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.
- [Proof, and the close](https://www.designlounge.live/collections/proof-and-close): 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.
- [Navigation, sorted](https://www.designlounge.live/collections/navigation-sorted): 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.
- [Loading states that earn the wait](https://www.designlounge.live/collections/loading-states): 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.
- [Sheets, dialogs and things on top](https://www.designlounge.live/collections/sheets-and-overlays): 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.
- [Forms people finish](https://www.designlounge.live/collections/forms-people-finish): 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.
- [The control set](https://www.designlounge.live/collections/control-set): 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.
- [Native feel, web materials](https://www.designlounge.live/collections/native-feel): 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.
- [Dashboards and dense data](https://www.designlounge.live/collections/dashboards-and-data): 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.
- [Motion with a reason](https://www.designlounge.live/collections/motion-with-a-reason): 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.
- [Typography does the work](https://www.designlounge.live/collections/typography-first): 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.
- [Whole design languages](https://www.designlounge.live/collections/design-languages): 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.
- [Cursor and hover play](https://www.designlounge.live/collections/cursor-play): 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.
- [Scroll as the timeline](https://www.designlounge.live/collections/scroll-driven): 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.
- [Widgets and faces](https://www.designlounge.live/collections/widgets-and-faces): 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.
- [Social cards](https://www.designlounge.live/collections/social-cards): 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.
- [Paper and objects](https://www.designlounge.live/collections/paper-and-objects): 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.
- [Backgrounds and buttons](https://www.designlounge.live/collections/grounds-and-presses): 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.

## Pieces (520)
- [Analytics dashboard overview](https://www.designlounge.live/p/analytics-dashboard-overview) (analytics-dashboard-overview) — 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 styles:minimal,soft motion:subtle source:dontboardme brief:https://www.designlounge.live/p/analytics-dashboard-overview.md demo:https://www.designlounge.live/demo/analytics-dashboard-overview.html
- [Avatar stack with presence](https://www.designlounge.live/p/avatar-stack-presence) (avatar-stack-presence) — 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 styles:dark,minimal,soft motion:subtle source:60fps brief:https://www.designlounge.live/p/avatar-stack-presence.md demo:https://www.designlounge.live/demo/avatar-stack-presence.html
- [Bento feature grid](https://www.designlounge.live/p/bento-feature-grid) (bento-feature-grid) — 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 styles:minimal,soft,paper motion:subtle source:stripe brief:https://www.designlounge.live/p/bento-feature-grid.md demo:https://www.designlounge.live/demo/bento-feature-grid.html
- [Bottom sheet with three detents](https://www.designlounge.live/p/ios-bottom-sheet-detents) (ios-bottom-sheet-detents) — 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 styles:minimal,soft motion:rich source:dontboardme brief:https://www.designlounge.live/p/ios-bottom-sheet-detents.md demo:https://www.designlounge.live/demo/ios-bottom-sheet-detents.html
- [Brutalist studio home](https://www.designlounge.live/p/brutalist-studio-home) (brutalist-studio-home) — 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 styles:brutalist,swiss motion:subtle source:moremedia brief:https://www.designlounge.live/p/brutalist-studio-home.md demo:https://www.designlounge.live/demo/brutalist-studio-home.html
- [Button state morph](https://www.designlounge.live/p/button-state-morph) (button-state-morph) — 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 styles:minimal,soft motion:subtle source:wickret brief:https://www.designlounge.live/p/button-state-morph.md demo:https://www.designlounge.live/demo/button-state-morph.html
- [Collapsing sidebar rail](https://www.designlounge.live/p/collapsing-sidebar-rail) (collapsing-sidebar-rail) — 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 styles:minimal,dark motion:subtle source:tailwind brief:https://www.designlounge.live/p/collapsing-sidebar-rail.md demo:https://www.designlounge.live/demo/collapsing-sidebar-rail.html
- [Command palette](https://www.designlounge.live/p/command-palette) (command-palette) — 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 styles:minimal,dark motion:subtle source:tailwind brief:https://www.designlounge.live/p/command-palette.md demo:https://www.designlounge.live/demo/command-palette.html
- [Date range picker](https://www.designlounge.live/p/date-range-picker) (date-range-picker) — 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 styles:swiss,minimal motion:subtle source:linear brief:https://www.designlounge.live/p/date-range-picker.md demo:https://www.designlounge.live/demo/date-range-picker.html
- [Dense data table](https://www.designlounge.live/p/dense-data-table) (dense-data-table) — 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 styles:minimal,swiss motion:subtle source:60fps brief:https://www.designlounge.live/p/dense-data-table.md demo:https://www.designlounge.live/demo/dense-data-table.html
- [Documentation three-column layout](https://www.designlounge.live/p/docs-three-column) (docs-three-column) — 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 styles:minimal motion:subtle source:tailwind brief:https://www.designlounge.live/p/docs-three-column.md demo:https://www.designlounge.live/demo/docs-three-column.html
- [Editorial landing hero](https://www.designlounge.live/p/editorial-landing-hero) (editorial-landing-hero) — 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 styles:editorial,paper motion:rich source:susan brief:https://www.designlounge.live/p/editorial-landing-hero.md demo:https://www.designlounge.live/demo/editorial-landing-hero.html
- [Editorial mega menu](https://www.designlounge.live/p/editorial-mega-menu) (editorial-mega-menu) — 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 styles:editorial,paper motion:subtle source:lamalama brief:https://www.designlounge.live/p/editorial-mega-menu.md demo:https://www.designlounge.live/demo/editorial-mega-menu.html
- [Empty state with line illustration](https://www.designlounge.live/p/empty-state-line-illustration) (empty-state-line-illustration) — 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 styles:minimal,editorial,soft motion:subtle source:60fps brief:https://www.designlounge.live/p/empty-state-line-illustration.md demo:https://www.designlounge.live/demo/empty-state-line-illustration.html
- [Filter chips product list](https://www.designlounge.live/p/mobile-filter-chips-list) (mobile-filter-chips-list) — 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 styles:minimal,soft motion:subtle source:stripe brief:https://www.designlounge.live/p/mobile-filter-chips-list.md demo:https://www.designlounge.live/demo/mobile-filter-chips-list.html
- [Fintech home](https://www.designlounge.live/p/ios-fintech-home) (ios-fintech-home) — 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 styles:minimal,glass motion:subtle source:mwdt brief:https://www.designlounge.live/p/ios-fintech-home.md demo:https://www.designlounge.live/demo/ios-fintech-home.html
- [Floating glass tab bar](https://www.designlounge.live/p/ios-glass-tab-bar) (ios-glass-tab-bar) — 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 styles:glass,soft motion:subtle source:60fps brief:https://www.designlounge.live/p/ios-glass-tab-bar.md demo:https://www.designlounge.live/demo/ios-glass-tab-bar.html
- [Floating tool palette](https://www.designlounge.live/p/tablet-floating-tool-palette) (tablet-floating-tool-palette) — 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 styles:dark,industrial,minimal motion:subtle source:tailwind brief:https://www.designlounge.live/p/tablet-floating-tool-palette.md demo:https://www.designlounge.live/demo/tablet-floating-tool-palette.html
- [Full-screen mobile menu](https://www.designlounge.live/p/mobile-fullscreen-menu) (mobile-fullscreen-menu) — 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 styles:editorial,paper,dark motion:rich source:lamalama brief:https://www.designlounge.live/p/mobile-fullscreen-menu.md demo:https://www.designlounge.live/demo/mobile-fullscreen-menu.html
- [Grouped settings list](https://www.designlounge.live/p/ios-grouped-settings) (ios-grouped-settings) — 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 styles:minimal,soft motion:subtle source:tailwind brief:https://www.designlounge.live/p/ios-grouped-settings.md demo:https://www.designlounge.live/demo/ios-grouped-settings.html
- [Hover tilt cards](https://www.designlounge.live/p/hover-tilt-cards) (hover-tilt-cards) — 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 styles:dark,minimal motion:rich source:flist brief:https://www.designlounge.live/p/hover-tilt-cards.md demo:https://www.designlounge.live/demo/hover-tilt-cards.html
- [Ink-fill upload progress](https://www.designlounge.live/p/ink-fill-progress) (ink-fill-progress) — 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 styles:paper,brutalist,minimal motion:rich source:60fps brief:https://www.designlounge.live/p/ink-fill-progress.md demo:https://www.designlounge.live/demo/ink-fill-progress.html
- [Inline form validation](https://www.designlounge.live/p/inline-form-validation) (inline-form-validation) — 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 styles:editorial,soft,minimal motion:subtle source:mendo brief:https://www.designlounge.live/p/inline-form-validation.md demo:https://www.designlounge.live/demo/inline-form-validation.html
- [Kanban board](https://www.designlounge.live/p/kanban-board) (kanban-board) — 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 styles:minimal,soft motion:subtle source:moremedia brief:https://www.designlounge.live/p/kanban-board.md demo:https://www.designlounge.live/demo/kanban-board.html
- [Kinetic type marquee](https://www.designlounge.live/p/kinetic-type-marquee) (kinetic-type-marquee) — 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 styles:kinetic,editorial,paper motion:rich source:susan brief:https://www.designlounge.live/p/kinetic-type-marquee.md demo:https://www.designlounge.live/demo/kinetic-type-marquee.html
- [Lamp pull-cord theme toggle](https://www.designlounge.live/p/lamp-theme-toggle) (lamp-theme-toggle) — 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 styles:editorial,paper,dark motion:rich source:60fps brief:https://www.designlounge.live/p/lamp-theme-toggle.md demo:https://www.designlounge.live/demo/lamp-theme-toggle.html
- [Large title collapse on scroll](https://www.designlounge.live/p/ios-large-title-collapse) (ios-large-title-collapse) — 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 styles:paper,editorial,glass motion:subtle source:susan brief:https://www.designlounge.live/p/ios-large-title-collapse.md demo:https://www.designlounge.live/demo/ios-large-title-collapse.html
- [Luxe product detail](https://www.designlounge.live/p/luxe-product-detail) (luxe-product-detail) — 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 styles:luxe,editorial motion:subtle source:abel brief:https://www.designlounge.live/p/luxe-product-detail.md demo:https://www.designlounge.live/demo/luxe-product-detail.html
- [Luxe serif design style](https://www.designlounge.live/p/luxe-serif-style) (luxe-serif-style) — 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 styles:luxe,editorial,minimal motion:subtle source:linear brief:https://www.designlounge.live/p/luxe-serif-style.md demo:https://www.designlounge.live/demo/luxe-serif-style.html
- [M3 expanding FAB menu](https://www.designlounge.live/p/m3-fab-menu) (m3-fab-menu) — 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 styles:material,dark motion:rich source:usearticle brief:https://www.designlounge.live/p/m3-fab-menu.md demo:https://www.designlounge.live/demo/m3-fab-menu.html
- [M3 Expressive home feed](https://www.designlounge.live/p/m3-expressive-home) (m3-expressive-home) — 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 styles:material,soft,playful motion:rich source:dontboardme brief:https://www.designlounge.live/p/m3-expressive-home.md demo:https://www.designlounge.live/demo/m3-expressive-home.html
- [M3 modal navigation drawer](https://www.designlounge.live/p/m3-navigation-drawer) (m3-navigation-drawer) — 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 styles:material,minimal,soft motion:subtle source:60fps brief:https://www.designlounge.live/p/m3-navigation-drawer.md demo:https://www.designlounge.live/demo/m3-navigation-drawer.html
- [M3 search bar morph](https://www.designlounge.live/p/m3-search-bar-morph) (m3-search-bar-morph) — 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 styles:material,dark,kinetic motion:rich source:dontboardme brief:https://www.designlounge.live/p/m3-search-bar-morph.md demo:https://www.designlounge.live/demo/m3-search-bar-morph.html
- [Magazine editorial grid](https://www.designlounge.live/p/magazine-editorial-grid) (magazine-editorial-grid) — 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 styles:editorial,paper motion:subtle source:mendo brief:https://www.designlounge.live/p/magazine-editorial-grid.md demo:https://www.designlounge.live/demo/magazine-editorial-grid.html
- [Masonry gallery with captions](https://www.designlounge.live/p/masonry-gallery-captions) (masonry-gallery-captions) — 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 styles:dark,minimal motion:subtle source:60fps brief:https://www.designlounge.live/p/masonry-gallery-captions.md demo:https://www.designlounge.live/demo/masonry-gallery-captions.html
- [Mobile landing with sticky CTA](https://www.designlounge.live/p/mobile-landing-sticky-cta) (mobile-landing-sticky-cta) — 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 styles:editorial,paper,soft motion:subtle source:stripe brief:https://www.designlounge.live/p/mobile-landing-sticky-cta.md demo:https://www.designlounge.live/demo/mobile-landing-sticky-cta.html
- [Modal dialog with focus trap](https://www.designlounge.live/p/modal-dialog-focus-trap) (modal-dialog-focus-trap) — 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 styles:minimal,soft motion:subtle source:icm brief:https://www.designlounge.live/p/modal-dialog-focus-trap.md demo:https://www.designlounge.live/demo/modal-dialog-focus-trap.html
- [Multi-step form stepper](https://www.designlounge.live/p/multi-step-form-stepper) (multi-step-form-stepper) — 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 styles:soft,minimal motion:subtle source:mindmarket brief:https://www.designlounge.live/p/multi-step-form-stepper.md demo:https://www.designlounge.live/demo/multi-step-form-stepper.html
- [Neo-brutalist design style](https://www.designlounge.live/p/neo-brutalist-style) (neo-brutalist-style) — 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 styles:brutalist,playful motion:subtle source:icm brief:https://www.designlounge.live/p/neo-brutalist-style.md demo:https://www.designlounge.live/demo/neo-brutalist-style.html
- [Nested dropdown menu](https://www.designlounge.live/p/nested-dropdown-menu) (nested-dropdown-menu) — 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 styles:industrial,dark motion:subtle source:tailwind brief:https://www.designlounge.live/p/nested-dropdown-menu.md demo:https://www.designlounge.live/demo/nested-dropdown-menu.html
- [Notification center panel](https://www.designlounge.live/p/notification-center-panel) (notification-center-panel) — 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 styles:dark,minimal,industrial motion:subtle source:mwdt brief:https://www.designlounge.live/p/notification-center-panel.md demo:https://www.designlounge.live/demo/notification-center-panel.html
- [Now playing](https://www.designlounge.live/p/ios-now-playing) (ios-now-playing) — 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 styles:dark,luxe,glass motion:rich source:dragone brief:https://www.designlounge.live/p/ios-now-playing.md demo:https://www.designlounge.live/demo/ios-now-playing.html
- [Odometer counter](https://www.designlounge.live/p/odometer-counter) (odometer-counter) — 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 styles:paper,editorial,minimal motion:subtle source:stripe brief:https://www.designlounge.live/p/odometer-counter.md demo:https://www.designlounge.live/demo/odometer-counter.html
- [Onboarding carousel](https://www.designlounge.live/p/ios-onboarding-carousel) (ios-onboarding-carousel) — 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 styles:dark,editorial,soft motion:subtle source:60fps brief:https://www.designlounge.live/p/ios-onboarding-carousel.md demo:https://www.designlounge.live/demo/ios-onboarding-carousel.html
- [Onboarding checklist card](https://www.designlounge.live/p/onboarding-checklist) (onboarding-checklist) — 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 styles:soft,minimal motion:subtle source:60fps brief:https://www.designlounge.live/p/onboarding-checklist.md demo:https://www.designlounge.live/demo/onboarding-checklist.html
- [One-page mobile checkout](https://www.designlounge.live/p/mobile-one-page-checkout) (mobile-one-page-checkout) — 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 styles:minimal,soft motion:subtle source:abel brief:https://www.designlounge.live/p/mobile-one-page-checkout.md demo:https://www.designlounge.live/demo/mobile-one-page-checkout.html
- [Optimistic like button](https://www.designlounge.live/p/optimistic-like-button) (optimistic-like-button) — 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 styles:dark,playful,minimal motion:rich source:60fps brief:https://www.designlounge.live/p/optimistic-like-button.md demo:https://www.designlounge.live/demo/optimistic-like-button.html
- [Orbit dots loader family](https://www.designlounge.live/p/orbit-dots-loader) (orbit-dots-loader) — 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 styles:minimal,kinetic motion:rich source:60fps brief:https://www.designlounge.live/p/orbit-dots-loader.md demo:https://www.designlounge.live/demo/orbit-dots-loader.html
- [Page transition curtain](https://www.designlounge.live/p/page-transition-curtain) (page-transition-curtain) — 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 styles:luxe,editorial,dark motion:rich source:gmx brief:https://www.designlounge.live/p/page-transition-curtain.md demo:https://www.designlounge.live/demo/page-transition-curtain.html
- [Paper and ink design style](https://www.designlounge.live/p/paper-ink-style) (paper-ink-style) — 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 styles:paper,editorial motion:subtle source:stripe brief:https://www.designlounge.live/p/paper-ink-style.md demo:https://www.designlounge.live/demo/paper-ink-style.html
- [Paper article reader](https://www.designlounge.live/p/paper-article-reader) (paper-article-reader) — 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 styles:paper,editorial motion:subtle source:mendo brief:https://www.designlounge.live/p/paper-article-reader.md demo:https://www.designlounge.live/demo/paper-article-reader.html
- [Pull to refresh with drawn ring](https://www.designlounge.live/p/ios-pull-to-refresh) (ios-pull-to-refresh) — 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 styles:dark,terminal,minimal motion:rich source:sibal brief:https://www.designlounge.live/p/ios-pull-to-refresh.md demo:https://www.designlounge.live/demo/ios-pull-to-refresh.html
- [PWA app shell hydration](https://www.designlounge.live/p/pwa-app-shell) (pwa-app-shell) — 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 styles:dark,industrial,minimal motion:subtle source:sibal brief:https://www.designlounge.live/p/pwa-app-shell.md demo:https://www.designlounge.live/demo/pwa-app-shell.html
- [PWA connectivity banner](https://www.designlounge.live/p/pwa-connectivity-banner) (pwa-connectivity-banner) — 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 styles:minimal,swiss,soft motion:subtle source:60fps brief:https://www.designlounge.live/p/pwa-connectivity-banner.md demo:https://www.designlounge.live/demo/pwa-connectivity-banner.html
- [PWA install sheet](https://www.designlounge.live/p/pwa-install-sheet) (pwa-install-sheet) — 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 styles:paper,editorial,soft motion:rich source:stripe brief:https://www.designlounge.live/p/pwa-install-sheet.md demo:https://www.designlounge.live/demo/pwa-install-sheet.html
- [PWA news reader](https://www.designlounge.live/p/pwa-news-reader) (pwa-news-reader) — 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 styles:editorial,paper motion:subtle source:mendo brief:https://www.designlounge.live/p/pwa-news-reader.md demo:https://www.designlounge.live/demo/pwa-news-reader.html
- [PWA update toast](https://www.designlounge.live/p/pwa-update-toast) (pwa-update-toast) — 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 styles:dark,kinetic,minimal motion:rich source:60fps brief:https://www.designlounge.live/p/pwa-update-toast.md demo:https://www.designlounge.live/demo/pwa-update-toast.html
- [Scroll reading progress](https://www.designlounge.live/p/scroll-reading-progress) (scroll-reading-progress) — 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 styles:editorial,dark motion:subtle source:haunted brief:https://www.designlounge.live/p/scroll-reading-progress.md demo:https://www.designlounge.live/demo/scroll-reading-progress.html
- [Settings page with sticky nav](https://www.designlounge.live/p/settings-page-sticky-nav) (settings-page-sticky-nav) — 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 styles:minimal,soft motion:subtle source:mindmarket brief:https://www.designlounge.live/p/settings-page-sticky-nav.md demo:https://www.designlounge.live/demo/settings-page-sticky-nav.html
- [Sidebar with overlay and pin modes](https://www.designlounge.live/p/tablet-sidebar-overlay-pin) (tablet-sidebar-overlay-pin) — 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 styles:minimal,soft,paper motion:subtle source:60fps brief:https://www.designlounge.live/p/tablet-sidebar-overlay-pin.md demo:https://www.designlounge.live/demo/tablet-sidebar-overlay-pin.html
- [Skeleton to content swap](https://www.designlounge.live/p/skeleton-to-content-swap) (skeleton-to-content-swap) — 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 styles:minimal,soft,editorial motion:subtle source:60fps brief:https://www.designlounge.live/p/skeleton-to-content-swap.md demo:https://www.designlounge.live/demo/skeleton-to-content-swap.html
- [Sliding segmented control](https://www.designlounge.live/p/segmented-control-sliding) (segmented-control-sliding) — 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 styles:luxe,dark motion:subtle source:tailwind brief:https://www.designlounge.live/p/segmented-control-sliding.md demo:https://www.designlounge.live/demo/segmented-control-sliding.html
- [Split sign-in](https://www.designlounge.live/p/split-sign-in) (split-sign-in) — 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 styles:editorial,soft motion:subtle source:igloo brief:https://www.designlounge.live/p/split-sign-in.md demo:https://www.designlounge.live/demo/split-sign-in.html
- [Spotlight hover grid](https://www.designlounge.live/p/spotlight-hover-grid) (spotlight-hover-grid) — 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 styles:dark,minimal,industrial motion:subtle source:noomo brief:https://www.designlounge.live/p/spotlight-hover-grid.md demo:https://www.designlounge.live/demo/spotlight-hover-grid.html
- [Staggered list reveal](https://www.designlounge.live/p/staggered-list-reveal) (staggered-list-reveal) — 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 styles:minimal,swiss motion:subtle source:noomo brief:https://www.designlounge.live/p/staggered-list-reveal.md demo:https://www.designlounge.live/demo/staggered-list-reveal.html
- [Sticky split scroll story](https://www.designlounge.live/p/sticky-split-story) (sticky-split-story) — 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 styles:editorial,dark motion:rich source:haunted brief:https://www.designlounge.live/p/sticky-split-story.md demo:https://www.designlounge.live/demo/sticky-split-story.html
- [Story viewer with hold to pause](https://www.designlounge.live/p/mobile-story-viewer) (mobile-story-viewer) — 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 styles:dark,kinetic motion:rich source:dragone brief:https://www.designlounge.live/p/mobile-story-viewer.md demo:https://www.designlounge.live/demo/mobile-story-viewer.html
- [Swipe-to-reveal row actions](https://www.designlounge.live/p/ios-swipe-row-actions) (ios-swipe-row-actions) — 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 styles:minimal,paper motion:rich source:60fps brief:https://www.designlounge.live/p/ios-swipe-row-actions.md demo:https://www.designlounge.live/demo/ios-swipe-row-actions.html
- [Swiss grid pricing](https://www.designlounge.live/p/swiss-grid-pricing) (swiss-grid-pricing) — 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 styles:swiss,minimal motion:subtle source:abel brief:https://www.designlounge.live/p/swiss-grid-pricing.md demo:https://www.designlounge.live/demo/swiss-grid-pricing.html
- [Swiss poster style](https://www.designlounge.live/p/swiss-poster-style) (swiss-poster-style) — 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 styles:swiss,brutalist motion:subtle source:moremedia brief:https://www.designlounge.live/p/swiss-poster-style.md demo:https://www.designlounge.live/demo/swiss-poster-style.html
- [Tablet mail split view](https://www.designlounge.live/p/tablet-split-view-mail) (tablet-split-view-mail) — 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 styles:minimal,swiss motion:subtle source:igloo brief:https://www.designlounge.live/p/tablet-split-view-mail.md demo:https://www.designlounge.live/demo/tablet-split-view-mail.html
- [Tablet ops dashboard grid](https://www.designlounge.live/p/tablet-dashboard-grid) (tablet-dashboard-grid) — 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 styles:dark,terminal,industrial motion:subtle source:icm brief:https://www.designlounge.live/p/tablet-dashboard-grid.md demo:https://www.designlounge.live/demo/tablet-dashboard-grid.html
- [Tabs with morphing underline](https://www.designlounge.live/p/tabs-morphing-underline) (tabs-morphing-underline) — 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 styles:editorial,dark motion:subtle source:tailwind brief:https://www.designlounge.live/p/tabs-morphing-underline.md demo:https://www.designlounge.live/demo/tabs-morphing-underline.html
- [Terminal 404](https://www.designlounge.live/p/terminal-404) (terminal-404) — 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 styles:terminal,dark motion:rich source:mindmarket brief:https://www.designlounge.live/p/terminal-404.md demo:https://www.designlounge.live/demo/terminal-404.html
- [Terminal UI style sheet](https://www.designlounge.live/p/terminal-ui-style) (terminal-ui-style) — 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 styles:terminal,dark motion:none source:abel brief:https://www.designlounge.live/p/terminal-ui-style.md demo:https://www.designlounge.live/demo/terminal-ui-style.html
- [Text scramble reveal](https://www.designlounge.live/p/text-scramble-reveal) (text-scramble-reveal) — 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 styles:terminal,minimal,paper motion:rich source:susan brief:https://www.designlounge.live/p/text-scramble-reveal.md demo:https://www.designlounge.live/demo/text-scramble-reveal.html
- [Toast stack](https://www.designlounge.live/p/toast-stack) (toast-stack) — 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 styles:dark,soft motion:rich source:60fps brief:https://www.designlounge.live/p/toast-stack.md demo:https://www.designlounge.live/demo/toast-stack.html
- [Two-column tablet reader](https://www.designlounge.live/p/tablet-two-column-reader) (tablet-two-column-reader) — 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 styles:paper,editorial motion:subtle source:mendo brief:https://www.designlounge.live/p/tablet-two-column-reader.md demo:https://www.designlounge.live/demo/tablet-two-column-reader.html
- [3D card flip trio](https://www.designlounge.live/p/card-flip-3d) (card-flip-3d) — 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 styles:luxe,dark motion:rich source:flist brief:https://www.designlounge.live/p/card-flip-3d.md demo:https://www.designlounge.live/demo/card-flip-3d.html
- [Grid-rows FAQ accordion](https://www.designlounge.live/p/accordion-grid-rows) (accordion-grid-rows) — 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 styles:paper,editorial,minimal motion:subtle source:haunted brief:https://www.designlounge.live/p/accordion-grid-rows.md demo:https://www.designlounge.live/demo/accordion-grid-rows.html
- [Hover image trail](https://www.designlounge.live/p/hover-image-trail) (hover-image-trail) — 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 styles:editorial,paper,minimal motion:rich source:noomo brief:https://www.designlounge.live/p/hover-image-trail.md demo:https://www.designlounge.live/demo/hover-image-trail.html
- [iOS app switcher stack](https://www.designlounge.live/p/ios-app-switcher-stack) (ios-app-switcher-stack) — 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 styles:dark,kinetic motion:rich source:noomo brief:https://www.designlounge.live/p/ios-app-switcher-stack.md demo:https://www.designlounge.live/demo/ios-app-switcher-stack.html
- [iOS context menu lift](https://www.designlounge.live/p/ios-context-menu-lift) (ios-context-menu-lift) — 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 styles:minimal,soft motion:rich source:mindmarket brief:https://www.designlounge.live/p/ios-context-menu-lift.md demo:https://www.designlounge.live/demo/ios-context-menu-lift.html
- [Logo draw site intro](https://www.designlounge.live/p/logo-draw-intro) (logo-draw-intro) — 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 styles:swiss,brutalist,kinetic motion:rich source:noomo brief:https://www.designlounge.live/p/logo-draw-intro.md demo:https://www.designlounge.live/demo/logo-draw-intro.html
- [Magnetic buttons](https://www.designlounge.live/p/magnetic-buttons) (magnetic-buttons) — 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 styles:dark,industrial,kinetic motion:rich source:noomo brief:https://www.designlounge.live/p/magnetic-buttons.md demo:https://www.designlounge.live/demo/magnetic-buttons.html
- [Shared element expand](https://www.designlounge.live/p/shared-element-expand) (shared-element-expand) — 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 styles:editorial,paper,soft motion:rich source:60fps brief:https://www.designlounge.live/p/shared-element-expand.md demo:https://www.designlounge.live/demo/shared-element-expand.html
- [Variable font proximity headline](https://www.designlounge.live/p/variable-font-proximity) (variable-font-proximity) — 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 styles:editorial,paper,kinetic motion:rich source:susan brief:https://www.designlounge.live/p/variable-font-proximity.md demo:https://www.designlounge.live/demo/variable-font-proximity.html
- [Account menu panel](https://www.designlounge.live/p/account-menu-panel) (account-menu-panel) — A 280px account menu under the avatar: identity, three destinations, sign out, arrow keys, and Escape returning focus. platform:web type:component category:overlays styles:minimal motion:none source:tailwind brief:https://www.designlounge.live/p/account-menu-panel.md demo:https://www.designlounge.live/demo/account-menu-panel.html
- [Activity rings with weekly picker](https://www.designlounge.live/p/ios-health-activity-rings) (ios-health-activity-rings) — 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 styles:dark,minimal motion:rich source:mendo brief:https://www.designlounge.live/p/ios-health-activity-rings.md demo:https://www.designlounge.live/demo/ios-health-activity-rings.html
- [Agency landing with case wall](https://www.designlounge.live/p/landing-agency-case-wall) (landing-agency-case-wall) — 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 styles:brutalist,swiss motion:subtle source:moremedia brief:https://www.designlounge.live/p/landing-agency-case-wall.md demo:https://www.designlounge.live/demo/landing-agency-case-wall.html
- [AI prompt cycle hero](https://www.designlounge.live/p/hero-ai-prompt-cycle) (hero-ai-prompt-cycle) — 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 styles:minimal,soft motion:rich source:stripe brief:https://www.designlounge.live/p/hero-ai-prompt-cycle.md demo:https://www.designlounge.live/demo/hero-ai-prompt-cycle.html
- [Annual toggle with rolling prices](https://www.designlounge.live/p/pricing-annual-toggle-roll) (pricing-annual-toggle-roll) — 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 styles:minimal,soft motion:rich source:abel brief:https://www.designlounge.live/p/pricing-annual-toggle-roll.md demo:https://www.designlounge.live/demo/pricing-annual-toggle-roll.html
- [Architect index with plan drawings](https://www.designlounge.live/p/portfolio-architect-index) (portfolio-architect-index) — 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 styles:swiss,minimal motion:subtle source:moremedia brief:https://www.designlounge.live/p/portfolio-architect-index.md demo:https://www.designlounge.live/demo/portfolio-architect-index.html
- [Asymmetric type lockup hero](https://www.designlounge.live/p/hero-asymmetric-type-lockup) (hero-asymmetric-type-lockup) — 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 styles:editorial,kinetic motion:rich source:haunted brief:https://www.designlounge.live/p/hero-asymmetric-type-lockup.md demo:https://www.designlounge.live/demo/hero-asymmetric-type-lockup.html
- [Audit activity log](https://www.designlounge.live/p/audit-activity-log) (audit-activity-log) — 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 styles:minimal,industrial motion:none source:60fps brief:https://www.designlounge.live/p/audit-activity-log.md demo:https://www.designlounge.live/demo/audit-activity-log.html
- [Bauhaus composition hero](https://www.designlounge.live/p/hero-bauhaus-composition) (hero-bauhaus-composition) — 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 styles:bauhaus,swiss motion:rich source:moremedia brief:https://www.designlounge.live/p/hero-bauhaus-composition.md demo:https://www.designlounge.live/demo/hero-bauhaus-composition.html
- [Bauhaus design language kit](https://www.designlounge.live/p/bauhaus-style) (bauhaus-style) — 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 styles:bauhaus,swiss motion:subtle source:abel brief:https://www.designlounge.live/p/bauhaus-style.md demo:https://www.designlounge.live/demo/bauhaus-style.html
- [Billing plan summary](https://www.designlounge.live/p/billing-plan-summary) (billing-plan-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 styles:minimal,paper motion:none source:stripe brief:https://www.designlounge.live/p/billing-plan-summary.md demo:https://www.designlounge.live/demo/billing-plan-summary.html
- [Centered colophon footer](https://www.designlounge.live/p/footer-centered-colophon) (footer-centered-colophon) — 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 styles:minimal,paper motion:subtle source:susan brief:https://www.designlounge.live/p/footer-centered-colophon.md demo:https://www.designlounge.live/demo/footer-centered-colophon.html
- [Checkbox draw list](https://www.designlounge.live/p/checkbox-draw-list) (checkbox-draw-list) — 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 styles:minimal,paper motion:subtle source:tailwind brief:https://www.designlounge.live/p/checkbox-draw-list.md demo:https://www.designlounge.live/demo/checkbox-draw-list.html
- [Clay soft design language kit](https://www.designlounge.live/p/clay-soft-style) (clay-soft-style) — 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 styles:clay,playful motion:subtle source:abel brief:https://www.designlounge.live/p/clay-soft-style.md demo:https://www.designlounge.live/demo/clay-soft-style.html
- [Conversational contact form](https://www.designlounge.live/p/contact-conversational-form) (contact-conversational-form) — 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 styles:editorial,playful motion:subtle source:dontboardme brief:https://www.designlounge.live/p/contact-conversational-form.md demo:https://www.designlounge.live/demo/contact-conversational-form.html
- [Creator profile with masthead](https://www.designlounge.live/p/profile-creator-masthead) (profile-creator-masthead) — 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 styles:editorial,paper motion:subtle source:icm brief:https://www.designlounge.live/p/profile-creator-masthead.md demo:https://www.designlounge.live/demo/profile-creator-masthead.html
- [CTA split dark band](https://www.designlounge.live/p/cta-split-dark-band) (cta-split-dark-band) — 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 styles:dark,industrial motion:subtle source:mwdt brief:https://www.designlounge.live/p/cta-split-dark-band.md demo:https://www.designlounge.live/demo/cta-split-dark-band.html
- [Cyber HUD design language kit](https://www.designlounge.live/p/cyber-hud-style) (cyber-hud-style) — 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 styles:cyber,dark motion:subtle source:mwdt brief:https://www.designlounge.live/p/cyber-hud-style.md demo:https://www.designlounge.live/demo/cyber-hud-style.html
- [Dark devtool landing page](https://www.designlounge.live/p/landing-devtool-dark) (landing-devtool-dark) — 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 styles:dark,terminal motion:subtle source:linear brief:https://www.designlounge.live/p/landing-devtool-dark.md demo:https://www.designlounge.live/demo/landing-devtool-dark.html
- [Deco hotel design language kit](https://www.designlounge.live/p/deco-hotel-style) (deco-hotel-style) — 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 styles:deco,luxe motion:subtle source:linear brief:https://www.designlounge.live/p/deco-hotel-style.md demo:https://www.designlounge.live/demo/deco-hotel-style.html
- [Dot wave background](https://www.designlounge.live/p/background-dot-wave) (background-dot-wave) — 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 styles:minimal,dark motion:subtle source:lamalama brief:https://www.designlounge.live/p/background-dot-wave.md demo:https://www.designlounge.live/demo/background-dot-wave.html
- [Editorial name rotator hero](https://www.designlounge.live/p/hero-editorial-name-rotator) (hero-editorial-name-rotator) — 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 styles:editorial,luxe,dark motion:rich source:gmx brief:https://www.designlounge.live/p/hero-editorial-name-rotator.md demo:https://www.designlounge.live/demo/hero-editorial-name-rotator.html
- [Enterprise sitemap footer](https://www.designlounge.live/p/footer-enterprise-sitemap) (footer-enterprise-sitemap) — 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 styles:minimal,swiss motion:subtle source:tailwind brief:https://www.designlounge.live/p/footer-enterprise-sitemap.md demo:https://www.designlounge.live/demo/footer-enterprise-sitemap.html
- [FAQ two-column search](https://www.designlounge.live/p/faq-two-column-search) (faq-two-column-search) — 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 styles:minimal,swiss motion:subtle source:dontboardme brief:https://www.designlounge.live/p/faq-two-column-search.md demo:https://www.designlounge.live/demo/faq-two-column-search.html
- [Fashion atelier landing page](https://www.designlounge.live/p/landing-fashion-atelier) (landing-fashion-atelier) — 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 styles:luxe,editorial motion:subtle source:gmx brief:https://www.designlounge.live/p/landing-fashion-atelier.md demo:https://www.designlounge.live/demo/landing-fashion-atelier.html
- [Flashlight reveal hero](https://www.designlounge.live/p/hero-flashlight-reveal) (hero-flashlight-reveal) — 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 styles:dark,kinetic motion:rich source:lamalama brief:https://www.designlounge.live/p/hero-flashlight-reveal.md demo:https://www.designlounge.live/demo/hero-flashlight-reveal.html
- [Floating pill navbar](https://www.designlounge.live/p/navbar-floating-pill-shrink) (navbar-floating-pill-shrink) — 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 styles:glass,minimal motion:subtle source:lamalama brief:https://www.designlounge.live/p/navbar-floating-pill-shrink.md demo:https://www.designlounge.live/demo/navbar-floating-pill-shrink.html
- [Giant email, click to copy](https://www.designlounge.live/p/contact-giant-email-copy) (contact-giant-email-copy) — 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 styles:brutalist,kinetic motion:rich source:dontboardme brief:https://www.designlounge.live/p/contact-giant-email-copy.md demo:https://www.designlounge.live/demo/contact-giant-email-copy.html
- [Giant wordmark reveal footer](https://www.designlounge.live/p/footer-giant-wordmark-reveal) (footer-giant-wordmark-reveal) — 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 styles:minimal,dark motion:rich source:linear brief:https://www.designlounge.live/p/footer-giant-wordmark-reveal.md demo:https://www.designlounge.live/demo/footer-giant-wordmark-reveal.html
- [Ink blob cursor](https://www.designlounge.live/p/cursor-ink-blob) (cursor-ink-blob) — 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 styles:organic,kinetic motion:rich source:noomo brief:https://www.designlounge.live/p/cursor-ink-blob.md demo:https://www.designlounge.live/demo/cursor-ink-blob.html
- [Island morph navbar](https://www.designlounge.live/p/navbar-island-morph) (navbar-island-morph) — 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 styles:dark,kinetic motion:rich source:lamalama brief:https://www.designlounge.live/p/navbar-island-morph.md demo:https://www.designlounge.live/demo/navbar-island-morph.html
- [KPI row with sparklines](https://www.designlounge.live/p/charts-kpi-spark-row) (charts-kpi-spark-row) — 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 styles:minimal,industrial motion:subtle source:dontboardme brief:https://www.designlounge.live/p/charts-kpi-spark-row.md demo:https://www.designlounge.live/demo/charts-kpi-spark-row.html
- [Light fintech landing with tilting card](https://www.designlounge.live/p/landing-fintech-light) (landing-fintech-light) — 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 styles:minimal,soft motion:subtle source:stripe brief:https://www.designlounge.live/p/landing-fintech-light.md demo:https://www.designlounge.live/demo/landing-fintech-light.html
- [Logos mono marquee](https://www.designlounge.live/p/logos-mono-marquee) (logos-mono-marquee) — 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 styles:minimal,swiss motion:subtle source:moremedia brief:https://www.designlounge.live/p/logos-mono-marquee.md demo:https://www.designlounge.live/demo/logos-mono-marquee.html
- [Long-form product case study](https://www.designlounge.live/p/portfolio-case-study-long) (portfolio-case-study-long) — 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 styles:editorial,soft motion:subtle source:susan brief:https://www.designlounge.live/p/portfolio-case-study-long.md demo:https://www.designlounge.live/demo/portfolio-case-study-long.html
- [M3 container transform](https://www.designlounge.live/p/m3-container-transform) (m3-container-transform) — 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 styles:material,soft motion:rich source:60fps brief:https://www.designlounge.live/p/m3-container-transform.md demo:https://www.designlounge.live/demo/m3-container-transform.html
- [M3 expressive music player](https://www.designlounge.live/p/m3-music-player-expressive) (m3-music-player-expressive) — 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 styles:material,dark motion:rich source:dragone brief:https://www.designlounge.live/p/m3-music-player-expressive.md demo:https://www.designlounge.live/demo/m3-music-player-expressive.html
- [Magic link sent](https://www.designlounge.live/p/auth-magic-link-sent) (auth-magic-link-sent) — 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 styles:soft,playful motion:rich source:igloo brief:https://www.designlounge.live/p/auth-magic-link-sent.md demo:https://www.designlounge.live/demo/auth-magic-link-sent.html
- [Marker highlight draw](https://www.designlounge.live/p/text-marker-highlight-draw) (text-marker-highlight-draw) — 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 styles:editorial,paper motion:rich source:susan brief:https://www.designlounge.live/p/text-marker-highlight-draw.md demo:https://www.designlounge.live/demo/text-marker-highlight-draw.html
- [Mask line reveal](https://www.designlounge.live/p/text-mask-line-reveal) (text-mask-line-reveal) — 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 styles:editorial,luxe,dark motion:rich source:flist brief:https://www.designlounge.live/p/text-mask-line-reveal.md demo:https://www.designlounge.live/demo/text-mask-line-reveal.html
- [Mobile inbox list](https://www.designlounge.live/p/mobile-inbox-list) (mobile-inbox-list) — 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 styles:minimal,paper motion:none source:igloo brief:https://www.designlounge.live/p/mobile-inbox-list.md demo:https://www.designlounge.live/demo/mobile-inbox-list.html
- [Mobile run detail](https://www.designlounge.live/p/mobile-run-detail) (mobile-run-detail) — 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 styles:minimal,paper motion:none source:tailwind brief:https://www.designlounge.live/p/mobile-run-detail.md demo:https://www.designlounge.live/demo/mobile-run-detail.html
- [Motion designer showreel index](https://www.designlounge.live/p/portfolio-motion-showreel) (portfolio-motion-showreel) — 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 styles:dark,kinetic motion:rich source:lamalama brief:https://www.designlounge.live/p/portfolio-motion-showreel.md demo:https://www.designlounge.live/demo/portfolio-motion-showreel.html
- [Newsletter fold inline](https://www.designlounge.live/p/newsletter-fold-inline) (newsletter-fold-inline) — 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 styles:paper,editorial motion:subtle source:mendo brief:https://www.designlounge.live/p/newsletter-fold-inline.md demo:https://www.designlounge.live/demo/newsletter-fold-inline.html
- [Newsletter split footer](https://www.designlounge.live/p/footer-newsletter-split) (footer-newsletter-split) — 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 styles:editorial,paper motion:subtle source:susan brief:https://www.designlounge.live/p/footer-newsletter-split.md demo:https://www.designlounge.live/demo/footer-newsletter-split.html
- [Organic garden design language kit](https://www.designlounge.live/p/organic-garden-style) (organic-garden-style) — 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 styles:organic,soft motion:subtle source:stripe brief:https://www.designlounge.live/p/organic-garden-style.md demo:https://www.designlounge.live/demo/organic-garden-style.html
- [Paper grain and ink blots](https://www.designlounge.live/p/background-paper-grain) (background-paper-grain) — 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 styles:paper,editorial motion:subtle source:susan brief:https://www.designlounge.live/p/background-paper-grain.md demo:https://www.designlounge.live/demo/background-paper-grain.html
- [Passkey setup with face-scan ring](https://www.designlounge.live/p/auth-passkey-setup) (auth-passkey-setup) — 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 styles:glass,minimal motion:rich source:igloo brief:https://www.designlounge.live/p/auth-passkey-setup.md demo:https://www.designlounge.live/demo/auth-passkey-setup.html
- [People by role](https://www.designlounge.live/p/people-role-list) (people-role-list) — 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 styles:minimal,paper motion:none source:synchronized brief:https://www.designlounge.live/p/people-role-list.md demo:https://www.designlounge.live/demo/people-role-list.html
- [Photographer horizontal gallery](https://www.designlounge.live/p/portfolio-photographer-horizontal) (portfolio-photographer-horizontal) — 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 styles:editorial,dark,luxe motion:rich source:gmx brief:https://www.designlounge.live/p/portfolio-photographer-horizontal.md demo:https://www.designlounge.live/demo/portfolio-photographer-horizontal.html
- [Pixel arcade design language kit](https://www.designlounge.live/p/pixel-arcade-style) (pixel-arcade-style) — 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 styles:pixel,retro motion:subtle source:usearticle brief:https://www.designlounge.live/p/pixel-arcade-style.md demo:https://www.designlounge.live/demo/pixel-arcade-style.html
- [Portfolio index with hover preview](https://www.designlounge.live/p/portfolio-index-hover-preview) (portfolio-index-hover-preview) — 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 styles:minimal,editorial motion:rich source:susan brief:https://www.designlounge.live/p/portfolio-index-hover-preview.md demo:https://www.designlounge.live/demo/portfolio-index-hover-preview.html
- [Product window tilt hero](https://www.designlounge.live/p/hero-product-window-tilt) (hero-product-window-tilt) — 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 styles:dark,minimal motion:rich source:linear brief:https://www.designlounge.live/p/hero-product-window-tilt.md demo:https://www.designlounge.live/demo/hero-product-window-tilt.html
- [Record detail header](https://www.designlounge.live/p/record-detail-header) (record-detail-header) — 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 styles:minimal,industrial motion:none source:stripe brief:https://www.designlounge.live/p/record-detail-header.md demo:https://www.designlounge.live/demo/record-detail-header.html
- [Riso print design language kit](https://www.designlounge.live/p/riso-print-style) (riso-print-style) — 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 styles:riso,playful motion:subtle source:mendo brief:https://www.designlounge.live/p/riso-print-style.md demo:https://www.designlounge.live/demo/riso-print-style.html
- [Search results with filters](https://www.designlounge.live/p/search-results-filters) (search-results-filters) — 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 styles:editorial,paper motion:none source:icm brief:https://www.designlounge.live/p/search-results-filters.md demo:https://www.designlounge.live/demo/search-results-filters.html
- [Split letter wave](https://www.designlounge.live/p/text-split-letter-wave) (text-split-letter-wave) — 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 styles:kinetic,playful motion:rich source:wickret brief:https://www.designlounge.live/p/text-split-letter-wave.md demo:https://www.designlounge.live/demo/text-split-letter-wave.html
- [Split map contact form](https://www.designlounge.live/p/contact-split-map-form) (contact-split-map-form) — 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 styles:minimal,soft motion:subtle source:dontboardme brief:https://www.designlounge.live/p/contact-split-map-form.md demo:https://www.designlounge.live/demo/contact-split-map-form.html
- [Stacking cards on scroll](https://www.designlounge.live/p/stacking-cards-scroll) (stacking-cards-scroll) — 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 styles:minimal,soft motion:rich source:mindmarket brief:https://www.designlounge.live/p/stacking-cards-scroll.md demo:https://www.designlounge.live/demo/stacking-cards-scroll.html
- [Stats ticker band](https://www.designlounge.live/p/stats-ticker-band) (stats-ticker-band) — 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 styles:kinetic,dark motion:rich source:flist brief:https://www.designlounge.live/p/stats-ticker-band.md demo:https://www.designlounge.live/demo/stats-ticker-band.html
- [Sticky comparison table](https://www.designlounge.live/p/pricing-comparison-sticky) (pricing-comparison-sticky) — 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 styles:swiss,industrial motion:subtle source:abel brief:https://www.designlounge.live/p/pricing-comparison-sticky.md demo:https://www.designlounge.live/demo/pricing-comparison-sticky.html
- [Sticky mobile CTA bar](https://www.designlounge.live/p/cta-sticky-mobile-bar) (cta-sticky-mobile-bar) — 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 styles:minimal,soft motion:subtle source:stripe brief:https://www.designlounge.live/p/cta-sticky-mobile-bar.md demo:https://www.designlounge.live/demo/cta-sticky-mobile-bar.html
- [Sticky scroll feature steps](https://www.designlounge.live/p/features-sticky-scroll-steps) (features-sticky-scroll-steps) — 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 styles:organic,paper motion:rich source:linear brief:https://www.designlounge.live/p/features-sticky-scroll-steps.md demo:https://www.designlounge.live/demo/features-sticky-scroll-steps.html
- [Studio hours and booking](https://www.designlounge.live/p/contact-booking-hours) (contact-booking-hours) — 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 styles:organic,soft motion:subtle source:dontboardme brief:https://www.designlounge.live/p/contact-booking-hours.md demo:https://www.designlounge.live/demo/contact-booking-hours.html
- [Swiss grid wordmark hero](https://www.designlounge.live/p/hero-swiss-grid-wordmark) (hero-swiss-grid-wordmark) — 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 styles:swiss,kinetic motion:rich source:lamalama brief:https://www.designlounge.live/p/hero-swiss-grid-wordmark.md demo:https://www.designlounge.live/demo/hero-swiss-grid-wordmark.html
- [Tabbed feature preview](https://www.designlounge.live/p/features-tabbed-preview) (features-tabbed-preview) — 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 styles:dark,minimal motion:subtle source:linear brief:https://www.designlounge.live/p/features-tabbed-preview.md demo:https://www.designlounge.live/demo/features-tabbed-preview.html
- [Team hover portrait grid](https://www.designlounge.live/p/team-hover-portrait-grid) (team-hover-portrait-grid) — 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 styles:editorial,luxe motion:subtle source:dontboardme brief:https://www.designlounge.live/p/team-hover-portrait-grid.md demo:https://www.designlounge.live/demo/team-hover-portrait-grid.html
- [Testimonials quote carousel](https://www.designlounge.live/p/testimonials-quote-carousel) (testimonials-quote-carousel) — 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 styles:editorial,paper motion:subtle source:dragone brief:https://www.designlounge.live/p/testimonials-quote-carousel.md demo:https://www.designlounge.live/demo/testimonials-quote-carousel.html
- [Testimonials wall grid](https://www.designlounge.live/p/testimonials-wall-grid) (testimonials-wall-grid) — 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 styles:minimal,soft motion:subtle source:linear brief:https://www.designlounge.live/p/testimonials-wall-grid.md demo:https://www.designlounge.live/demo/testimonials-wall-grid.html
- [Toggle switch set](https://www.designlounge.live/p/toggle-switch-set) (toggle-switch-set) — 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 styles:soft,playful motion:subtle source:usearticle brief:https://www.designlounge.live/p/toggle-switch-set.md demo:https://www.designlounge.live/demo/toggle-switch-set.html
- [Topographic lines background](https://www.designlounge.live/p/background-topographic-lines) (background-topographic-lines) — 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 styles:organic,paper motion:subtle source:susan brief:https://www.designlounge.live/p/background-topographic-lines.md demo:https://www.designlounge.live/demo/background-topographic-lines.html
- [Upload file queue](https://www.designlounge.live/p/upload-file-queue) (upload-file-queue) — 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 styles:paper,minimal motion:subtle source:usearticle brief:https://www.designlounge.live/p/upload-file-queue.md demo:https://www.designlounge.live/demo/upload-file-queue.html
- [Weather with an hourly scrubber](https://www.designlounge.live/p/ios-weather-hourly-scrub) (ios-weather-hourly-scrub) — 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 styles:glass,soft motion:rich source:icm brief:https://www.designlounge.live/p/ios-weather-hourly-scrub.md demo:https://www.designlounge.live/demo/ios-weather-hourly-scrub.html
- [Wellness retreat booking landing](https://www.designlounge.live/p/landing-wellness-retreat) (landing-wellness-retreat) — 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 styles:organic,soft motion:subtle source:mindmarket brief:https://www.designlounge.live/p/landing-wellness-retreat.md demo:https://www.designlounge.live/demo/landing-wellness-retreat.html
- [Y2K chrome design language kit](https://www.designlounge.live/p/y2k-chrome-style) (y2k-chrome-style) — 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 styles:y2k,retro motion:subtle source:dontboardme brief:https://www.designlounge.live/p/y2k-chrome-style.md demo:https://www.designlounge.live/demo/y2k-chrome-style.html
- [3D keycap press buttons](https://www.designlounge.live/p/button-3d-press) (button-3d-press) — 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 styles:playful,industrial motion:subtle source:wickret brief:https://www.designlounge.live/p/button-3d-press.md demo:https://www.designlounge.live/demo/button-3d-press.html
- [Add to cart that becomes a stepper](https://www.designlounge.live/p/button-add-to-cart) (button-add-to-cart) — 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 styles:soft,organic,editorial motion:rich source:usearticle brief:https://www.designlounge.live/p/button-add-to-cart.md demo:https://www.designlounge.live/demo/button-add-to-cart.html
- [Agenda calendar with quick add](https://www.designlounge.live/p/phone-calendar-agenda) (phone-calendar-agenda) — 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 styles:material,soft motion:subtle source:icm brief:https://www.designlounge.live/p/phone-calendar-agenda.md demo:https://www.designlounge.live/demo/phone-calendar-agenda.html
- [Agent step trace](https://www.designlounge.live/p/agent-step-trace) (agent-step-trace) — 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 styles:minimal,industrial motion:none source:60fps brief:https://www.designlounge.live/p/agent-step-trace.md demo:https://www.designlounge.live/demo/agent-step-trace.html
- [AI chat workspace](https://www.designlounge.live/p/ai-chat-workspace) (ai-chat-workspace) — 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 styles:paper,editorial,minimal motion:subtle source:igloo brief:https://www.designlounge.live/p/ai-chat-workspace.md demo:https://www.designlounge.live/demo/ai-chat-workspace.html
- [Alternating feature rows](https://www.designlounge.live/p/features-alternating-rows) (features-alternating-rows) — 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 styles:swiss,industrial motion:subtle source:moremedia brief:https://www.designlounge.live/p/features-alternating-rows.md demo:https://www.designlounge.live/demo/features-alternating-rows.html
- [Analog stick](https://www.designlounge.live/p/analog-stick) (analog-stick) — 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 styles:minimal,industrial motion:subtle source:abel brief:https://www.designlounge.live/p/analog-stick.md demo:https://www.designlounge.live/demo/analog-stick.html
- [App icon colour wall](https://www.designlounge.live/p/app-icon-colour-wall) (app-icon-colour-wall) — 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 styles:dark,kinetic,minimal motion:rich source:60fps brief:https://www.designlounge.live/p/app-icon-colour-wall.md demo:https://www.designlounge.live/demo/app-icon-colour-wall.html
- [App icon shelf gallery](https://www.designlounge.live/p/app-icon-shelf-gallery) (app-icon-shelf-gallery) — 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 styles:minimal,editorial,soft motion:subtle source:icm brief:https://www.designlounge.live/p/app-icon-shelf-gallery.md demo:https://www.designlounge.live/demo/app-icon-shelf-gallery.html
- [App icon spec sheet](https://www.designlounge.live/p/app-icon-spec-sheet) (app-icon-spec-sheet) — 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 styles:swiss,industrial,minimal motion:subtle source:tailwind brief:https://www.designlounge.live/p/app-icon-spec-sheet.md demo:https://www.designlounge.live/demo/app-icon-spec-sheet.html
- [Architecture studio index](https://www.designlounge.live/p/architecture-studio-index) (architecture-studio-index) — 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 styles:swiss,minimal motion:subtle source:moremedia brief:https://www.designlounge.live/p/architecture-studio-index.md demo:https://www.designlounge.live/demo/architecture-studio-index.html
- [Aurora mesh background](https://www.designlounge.live/p/background-aurora-mesh) (background-aurora-mesh) — 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 styles:dark,organic,soft motion:subtle source:lamalama brief:https://www.designlounge.live/p/background-aurora-mesh.md demo:https://www.designlounge.live/demo/background-aurora-mesh.html
- [Automation builder with live preview](https://www.designlounge.live/p/automation-config-live-preview) (automation-config-live-preview) — 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 styles:brutalist,playful,soft motion:subtle source:usearticle brief:https://www.designlounge.live/p/automation-config-live-preview.md demo:https://www.designlounge.live/demo/automation-config-live-preview.html
- [Boarding pass with fold-out details](https://www.designlounge.live/p/card-boarding-pass) (card-boarding-pass) — 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 styles:swiss,minimal motion:subtle source:icm brief:https://www.designlounge.live/p/card-boarding-pass.md demo:https://www.designlounge.live/demo/card-boarding-pass.html
- [Book page flip](https://www.designlounge.live/p/book-page-flip) (book-page-flip) — 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 styles:editorial,paper motion:subtle source:mendo brief:https://www.designlounge.live/p/book-page-flip.md demo:https://www.designlounge.live/demo/book-page-flip.html
- [Booking time slots](https://www.designlounge.live/p/phone-booking-slots) (phone-booking-slots) — 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 styles:soft,organic motion:subtle source:stripe brief:https://www.designlounge.live/p/phone-booking-slots.md demo:https://www.designlounge.live/demo/phone-booking-slots.html
- [Boxing gym home with timetable](https://www.designlounge.live/p/gym-membership-home) (gym-membership-home) — 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 styles:brutalist,dark motion:subtle source:flist brief:https://www.designlounge.live/p/gym-membership-home.md demo:https://www.designlounge.live/demo/gym-membership-home.html
- [Breadcrumb](https://www.designlounge.live/p/breadcrumb) (breadcrumb) — 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 styles:minimal,industrial motion:none source:tailwind brief:https://www.designlounge.live/p/breadcrumb.md demo:https://www.designlounge.live/demo/breadcrumb.html
- [Budget meters](https://www.designlounge.live/p/budget-meter) (budget-meter) — 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 styles:editorial,paper motion:none source:moremedia brief:https://www.designlounge.live/p/budget-meter.md demo:https://www.designlounge.live/demo/budget-meter.html
- [Button roles](https://www.designlounge.live/p/button-roles) (button-roles) — 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 styles:minimal,industrial motion:none source:wickret brief:https://www.designlounge.live/p/button-roles.md demo:https://www.designlounge.live/demo/button-roles.html
- [Café chalkboard and letterboard menu](https://www.designlounge.live/p/card-cafe-menu-board) (card-cafe-menu-board) — 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 styles:organic,retro,playful motion:subtle source:bermawy brief:https://www.designlounge.live/p/card-cafe-menu-board.md demo:https://www.designlounge.live/demo/card-cafe-menu-board.html
- [Calendar month](https://www.designlounge.live/p/calendar-month) (calendar-month) — 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 styles:minimal,industrial motion:none source:moremedia brief:https://www.designlounge.live/p/calendar-month.md demo:https://www.designlounge.live/demo/calendar-month.html
- [Calendar week planner](https://www.designlounge.live/p/calendar-week-planner) (calendar-week-planner) — 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 styles:soft,minimal motion:subtle source:icm brief:https://www.designlounge.live/p/calendar-week-planner.md demo:https://www.designlounge.live/demo/calendar-week-planner.html
- [Case file horizontal scroll](https://www.designlounge.live/p/case-file-horizontal-scroll) (case-file-horizontal-scroll) — 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 styles:dark,editorial,kinetic motion:rich source:haunted brief:https://www.designlounge.live/p/case-file-horizontal-scroll.md demo:https://www.designlounge.live/demo/case-file-horizontal-scroll.html
- [Changelog timeline](https://www.designlounge.live/p/changelog-timeline) (changelog-timeline) — 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 styles:editorial,minimal motion:subtle source:mendo brief:https://www.designlounge.live/p/changelog-timeline.md demo:https://www.designlounge.live/demo/changelog-timeline.html
- [Chaptered cinema hero](https://www.designlounge.live/p/hero-chaptered-scenes) (hero-chaptered-scenes) — 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 styles:dark,editorial,luxe motion:rich source:gmx brief:https://www.designlounge.live/p/hero-chaptered-scenes.md demo:https://www.designlounge.live/demo/hero-chaptered-scenes.html
- [Chat thread](https://www.designlounge.live/p/chat-thread) (chat-thread) — 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 styles:minimal,industrial motion:none source:igloo brief:https://www.designlounge.live/p/chat-thread.md demo:https://www.designlounge.live/demo/chat-thread.html
- [Checkbox group](https://www.designlounge.live/p/checkbox-group) (checkbox-group) — 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 styles:minimal,industrial motion:none source:moremedia brief:https://www.designlounge.live/p/checkbox-group.md demo:https://www.designlounge.live/demo/checkbox-group.html
- [Chip bucket](https://www.designlounge.live/p/chip-bucket) (chip-bucket) — Three chips sit beside a night bucket. Drag one in and it stays. Miss, and it returns. platform:web type:component category:cards styles:minimal,dark motion:none source:flist brief:https://www.designlounge.live/p/chip-bucket.md demo:https://www.designlounge.live/demo/chip-bucket.html
- [Cinema ticket with tear-off stub](https://www.designlounge.live/p/card-cinema-ticket) (card-cinema-ticket) — 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 styles:deco,retro,paper motion:subtle source:bermawy brief:https://www.designlounge.live/p/card-cinema-ticket.md demo:https://www.designlounge.live/demo/card-cinema-ticket.html
- [Cinematic video loop hero](https://www.designlounge.live/p/hero-video-loop) (hero-video-loop) — 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 styles:luxe,dark,editorial motion:rich source:gmx brief:https://www.designlounge.live/p/hero-video-loop.md demo:https://www.designlounge.live/demo/hero-video-loop.html
- [Cited answer](https://www.designlounge.live/p/cited-answer) (cited-answer) — A sentence about Gate 4. Night book starts pressed and shows its line. Hold rule swaps the quote. platform:web type:component category:reading styles:editorial,paper motion:none source:mendo brief:https://www.designlounge.live/p/cited-answer.md demo:https://www.designlounge.live/demo/cited-answer.html
- [Click-wheel player mockup](https://www.designlounge.live/p/mockup-ipod-classic) (mockup-ipod-classic) — 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 styles:y2k,playful,retro motion:subtle source:usearticle brief:https://www.designlounge.live/p/mockup-ipod-classic.md demo:https://www.designlounge.live/demo/mockup-ipod-classic.html
- [Code snippet tabs](https://www.designlounge.live/p/code-snippet-tabs) (code-snippet-tabs) — One request in curl, JavaScript, and Python. The active tab is a 32px pill. Copy writes that panel. platform:web type:component category:reading styles:terminal,minimal motion:none source:tailwind brief:https://www.designlounge.live/p/code-snippet-tabs.md demo:https://www.designlounge.live/demo/code-snippet-tabs.html
- [Combobox](https://www.designlounge.live/p/combobox) (combobox) — 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 styles:minimal,industrial motion:none source:linear brief:https://www.designlounge.live/p/combobox.md demo:https://www.designlounge.live/demo/combobox.html
- [Concert ticket stack with foil strip](https://www.designlounge.live/p/card-event-ticket-stub) (card-event-ticket-stub) — 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 styles:riso,retro,dark motion:subtle source:bermawy brief:https://www.designlounge.live/p/card-event-ticket-stub.md demo:https://www.designlounge.live/demo/card-event-ticket-stub.html
- [Connection grid](https://www.designlounge.live/p/integrations-connect) (integrations-connect) — 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 styles:editorial,minimal motion:none source:stripe brief:https://www.designlounge.live/p/integrations-connect.md demo:https://www.designlounge.live/demo/integrations-connect.html
- [Consent bar](https://www.designlounge.live/p/consent-bar) (consent-bar) — 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 styles:minimal,industrial motion:none source:tailwind brief:https://www.designlounge.live/p/consent-bar.md demo:https://www.designlounge.live/demo/consent-bar.html
- [Contact sheet](https://www.designlounge.live/p/gallery-contact-sheet) (gallery-contact-sheet) — 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 styles:paper,editorial motion:none source:icm brief:https://www.designlounge.live/p/gallery-contact-sheet.md demo:https://www.designlounge.live/demo/gallery-contact-sheet.html
- [Content card](https://www.designlounge.live/p/content-card) (content-card) — 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 styles:minimal,industrial motion:none source:icm brief:https://www.designlounge.live/p/content-card.md demo:https://www.designlounge.live/demo/content-card.html
- [Control centre toggles](https://www.designlounge.live/p/widget-control-toggles) (widget-control-toggles) — 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 styles:dark,minimal motion:subtle source:mindmarket brief:https://www.designlounge.live/p/widget-control-toggles.md demo:https://www.designlounge.live/demo/widget-control-toggles.html
- [Copy, share and copy-email buttons](https://www.designlounge.live/p/button-copy-share) (button-copy-share) — 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 styles:editorial,paper,minimal motion:subtle source:wickret brief:https://www.designlounge.live/p/button-copy-share.md demo:https://www.designlounge.live/demo/button-copy-share.html
- [Corner player](https://www.designlounge.live/p/corner-player) (corner-player) — 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 styles:dark,minimal motion:subtle source:dragone brief:https://www.designlounge.live/p/corner-player.md demo:https://www.designlounge.live/demo/corner-player.html
- [Course landing with curriculum](https://www.designlounge.live/p/course-landing-curriculum) (course-landing-curriculum) — 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 styles:editorial,paper motion:subtle source:haunted brief:https://www.designlounge.live/p/course-landing-curriculum.md demo:https://www.designlounge.live/demo/course-landing-curriculum.html
- [Coverflow strip](https://www.designlounge.live/p/coverflow-strip) (coverflow-strip) — 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 styles:dark,minimal motion:subtle source:dragone brief:https://www.designlounge.live/p/coverflow-strip.md demo:https://www.designlounge.live/demo/coverflow-strip.html
- [CTA giant email band](https://www.designlounge.live/p/cta-giant-email-band) (cta-giant-email-band) — 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 styles:kinetic,brutalist motion:rich source:haunted brief:https://www.designlounge.live/p/cta-giant-email-band.md demo:https://www.designlounge.live/demo/cta-giant-email-band.html
- [Curve drawer](https://www.designlounge.live/p/curve-drawer) (curve-drawer) — 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 styles:minimal,paper motion:subtle source:usearticle brief:https://www.designlounge.live/p/curve-drawer.md demo:https://www.designlounge.live/demo/curve-drawer.html
- [Cut-shape image frames](https://www.designlounge.live/p/frame-circle-cut) (frame-circle-cut) — 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 styles:editorial,organic,soft motion:subtle source:mindmarket brief:https://www.designlounge.live/p/frame-circle-cut.md demo:https://www.designlounge.live/demo/frame-circle-cut.html
- [Daily quote card](https://www.designlounge.live/p/card-daily-quote) (card-daily-quote) — 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 styles:soft,editorial,kinetic motion:rich source:flist brief:https://www.designlounge.live/p/card-daily-quote.md demo:https://www.designlounge.live/demo/card-daily-quote.html
- [Dark mono repository card](https://www.designlounge.live/p/social-repo-card) (social-repo-card) — 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 styles:dark,terminal,minimal motion:subtle source:stripe brief:https://www.designlounge.live/p/social-repo-card.md demo:https://www.designlounge.live/demo/social-repo-card.html
- [Dark motion shot gallery](https://www.designlounge.live/p/motion-shot-gallery-dark) (motion-shot-gallery-dark) — 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 styles:dark,minimal,kinetic motion:rich source:60fps brief:https://www.designlounge.live/p/motion-shot-gallery-dark.md demo:https://www.designlounge.live/demo/motion-shot-gallery-dark.html
- [Dental clinic home with live booking](https://www.designlounge.live/p/clinic-home-booking) (clinic-home-booking) — 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 styles:soft,minimal motion:subtle source:stripe brief:https://www.designlounge.live/p/clinic-home-booking.md demo:https://www.designlounge.live/demo/clinic-home-booking.html
- [Deploy status notification](https://www.designlounge.live/p/notif-deploy-status) (notif-deploy-status) — 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 styles:dark,terminal,minimal motion:subtle source:60fps brief:https://www.designlounge.live/p/notif-deploy-status.md demo:https://www.designlounge.live/demo/notif-deploy-status.html
- [Design-tool transform box](https://www.designlounge.live/p/frame-transform-box) (frame-transform-box) — 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 styles:dark,industrial,minimal motion:subtle source:60fps brief:https://www.designlounge.live/p/frame-transform-box.md demo:https://www.designlounge.live/demo/frame-transform-box.html
- [Desktop app menubar](https://www.designlounge.live/p/dropdown-menubar-file) (dropdown-menubar-file) — 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 styles:dark,industrial,minimal motion:subtle source:stripe brief:https://www.designlounge.live/p/dropdown-menubar-file.md demo:https://www.designlounge.live/demo/dropdown-menubar-file.html
- [Device battery widget](https://www.designlounge.live/p/widget-device-battery) (widget-device-battery) — 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 styles:clay,soft motion:subtle source:linear brief:https://www.designlounge.live/p/widget-device-battery.md demo:https://www.designlounge.live/demo/widget-device-battery.html
- [Diagonal boxes background](https://www.designlounge.live/p/background-diagonal-boxes) (background-diagonal-boxes) — 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 styles:minimal,dark,industrial motion:subtle source:lamalama brief:https://www.designlounge.live/p/background-diagonal-boxes.md demo:https://www.designlounge.live/demo/background-diagonal-boxes.html
- [Dial knob](https://www.designlounge.live/p/dial-knob) (dial-knob) — 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 styles:minimal,industrial motion:none source:moremedia brief:https://www.designlounge.live/p/dial-knob.md demo:https://www.designlounge.live/demo/dial-knob.html
- [Diamond badge rail](https://www.designlounge.live/p/diamond-badge-rail) (diamond-badge-rail) — 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 styles:dark,brutalist,industrial motion:subtle source:flist brief:https://www.designlounge.live/p/diamond-badge-rail.md demo:https://www.designlounge.live/demo/diamond-badge-rail.html
- [Digital business card](https://www.designlounge.live/p/profile-contact-card) (profile-contact-card) — 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 styles:luxe,paper motion:subtle source:dontboardme brief:https://www.designlounge.live/p/profile-contact-card.md demo:https://www.designlounge.live/demo/profile-contact-card.html
- [Docs install steps with code panels](https://www.designlounge.live/p/docs-install-steps) (docs-install-steps) — 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 styles:minimal,terminal motion:subtle source:tailwind brief:https://www.designlounge.live/p/docs-install-steps.md demo:https://www.designlounge.live/demo/docs-install-steps.html
- [Docs shell with hatched gutters](https://www.designlounge.live/p/docs-hatched-gutter-shell) (docs-hatched-gutter-shell) — 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 styles:swiss,minimal,dark motion:subtle source:tailwind brief:https://www.designlounge.live/p/docs-hatched-gutter-shell.md demo:https://www.designlounge.live/demo/docs-hatched-gutter-shell.html
- [Donation page with impact](https://www.designlounge.live/p/donation-page-impact) (donation-page-impact) — 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 styles:organic,soft motion:subtle source:mindmarket brief:https://www.designlounge.live/p/donation-page-impact.md demo:https://www.designlounge.live/demo/donation-page-impact.html
- [Dot-matrix blob field hero](https://www.designlounge.live/p/hero-dot-matrix-field) (hero-dot-matrix-field) — 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 styles:dark,industrial,kinetic motion:rich source:lamalama brief:https://www.designlounge.live/p/hero-dot-matrix-field.md demo:https://www.designlounge.live/demo/hero-dot-matrix-field.html
- [Download button with progress and retry](https://www.designlounge.live/p/button-download-progress) (button-download-progress) — 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 styles:dark,terminal,industrial motion:subtle source:usearticle brief:https://www.designlounge.live/p/button-download-progress.md demo:https://www.designlounge.live/demo/button-download-progress.html
- [Drag to confirm](https://www.designlounge.live/p/drag-to-confirm) (drag-to-confirm) — 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 styles:minimal,industrial motion:subtle source:wickret brief:https://www.designlounge.live/p/drag-to-confirm.md demo:https://www.designlounge.live/demo/drag-to-confirm.html
- [Dress-watch analog clock widget](https://www.designlounge.live/p/widget-analog-clock) (widget-analog-clock) — 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 styles:luxe,dark motion:subtle source:usearticle brief:https://www.designlounge.live/p/widget-analog-clock.md demo:https://www.designlounge.live/demo/widget-analog-clock.html
- [Drop-cap editorial card](https://www.designlounge.live/p/card-drop-cap-editorial) (card-drop-cap-editorial) — 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 styles:editorial,paper motion:subtle source:mendo brief:https://www.designlounge.live/p/card-drop-cap-editorial.md demo:https://www.designlounge.live/demo/card-drop-cap-editorial.html
- [Edge light button](https://www.designlounge.live/p/edge-light-button) (edge-light-button) — A gold edge travels around Open the gate. Click says the gate opened on this page. platform:web type:component category:buttons styles:dark,minimal motion:subtle source:wickret brief:https://www.designlounge.live/p/edge-light-button.md demo:https://www.designlounge.live/demo/edge-light-button.html
- [Editorial 404 with search](https://www.designlounge.live/p/error-404-editorial) (error-404-editorial) — 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 styles:riso,paper,editorial motion:subtle source:dontboardme brief:https://www.designlounge.live/p/error-404-editorial.md demo:https://www.designlounge.live/demo/error-404-editorial.html
- [Editorial creator profile card](https://www.designlounge.live/p/social-profile-card) (social-profile-card) — 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 styles:editorial,paper motion:subtle source:tailwind brief:https://www.designlounge.live/p/social-profile-card.md demo:https://www.designlounge.live/demo/social-profile-card.html
- [Editorial phone sign-in](https://www.designlounge.live/p/phone-sign-in) (phone-sign-in) — 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 styles:editorial,minimal motion:subtle source:igloo brief:https://www.designlounge.live/p/phone-sign-in.md demo:https://www.designlounge.live/demo/phone-sign-in.html
- [Editorial staff profile card](https://www.designlounge.live/p/profile-editorial-staff) (profile-editorial-staff) — 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 styles:editorial,paper motion:subtle source:dontboardme brief:https://www.designlounge.live/p/profile-editorial-staff.md demo:https://www.designlounge.live/demo/profile-editorial-staff.html
- [Engraved caravan footer](https://www.designlounge.live/p/footer-engraved-caravan-strip) (footer-engraved-caravan-strip) — 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 styles:dark,editorial,paper motion:rich source:susan brief:https://www.designlounge.live/p/footer-engraved-caravan-strip.md demo:https://www.designlounge.live/demo/footer-engraved-caravan-strip.html
- [Engraved disc throw loop](https://www.designlounge.live/p/throw-loop-engraved-strip) (throw-loop-engraved-strip) — 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 styles:playful,paper,minimal motion:rich source:susan brief:https://www.designlounge.live/p/throw-loop-engraved-strip.md demo:https://www.designlounge.live/demo/throw-loop-engraved-strip.html
- [Engraved moonrise hero plate](https://www.designlounge.live/p/hero-engraved-moonrise-plate) (hero-engraved-moonrise-plate) — 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 styles:editorial,dark,paper motion:rich source:susan brief:https://www.designlounge.live/p/hero-engraved-moonrise-plate.md demo:https://www.designlounge.live/demo/hero-engraved-moonrise-plate.html
- [Event countdown ticket card](https://www.designlounge.live/p/card-event-countdown) (card-event-countdown) — 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 styles:retro,riso motion:subtle source:bermawy brief:https://www.designlounge.live/p/card-event-countdown.md demo:https://www.designlounge.live/demo/card-event-countdown.html
- [Event ticket checkout](https://www.designlounge.live/p/event-ticket-checkout) (event-ticket-checkout) — 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 styles:y2k,cyber,dark motion:subtle source:abel brief:https://www.designlounge.live/p/event-ticket-checkout.md demo:https://www.designlounge.live/demo/event-ticket-checkout.html
- [Failed load with retry](https://www.designlounge.live/p/load-failed-retry) (load-failed-retry) — 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 styles:minimal,industrial motion:none source:stripe brief:https://www.designlounge.live/p/load-failed-retry.md demo:https://www.designlounge.live/demo/load-failed-retry.html
- [FAQ category accordion](https://www.designlounge.live/p/faq-category-accordion) (faq-category-accordion) — 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 styles:minimal,soft motion:subtle source:dontboardme brief:https://www.designlounge.live/p/faq-category-accordion.md demo:https://www.designlounge.live/demo/faq-category-accordion.html
- [Field compass widget](https://www.designlounge.live/p/widget-compass) (widget-compass) — 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 styles:organic,paper motion:subtle source:mindmarket brief:https://www.designlounge.live/p/widget-compass.md demo:https://www.designlounge.live/demo/widget-compass.html
- [File upload manager](https://www.designlounge.live/p/file-upload-manager) (file-upload-manager) — 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 styles:dark,industrial,terminal motion:subtle source:stripe brief:https://www.designlounge.live/p/file-upload-manager.md demo:https://www.designlounge.live/demo/file-upload-manager.html
- [Film strip with loupe](https://www.designlounge.live/p/gallery-film-strip) (gallery-film-strip) — 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 styles:dark,retro,industrial motion:subtle source:sibal brief:https://www.designlounge.live/p/gallery-film-strip.md demo:https://www.designlounge.live/demo/gallery-film-strip.html
- [Filter and sort dropdowns](https://www.designlounge.live/p/dropdown-filter-sort) (dropdown-filter-sort) — 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 styles:organic,soft,editorial motion:subtle source:usearticle brief:https://www.designlounge.live/p/dropdown-filter-sort.md demo:https://www.designlounge.live/demo/dropdown-filter-sort.html
- [Filter toolbar](https://www.designlounge.live/p/filter-toolbar) (filter-toolbar) — 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 styles:minimal,industrial motion:none source:tailwind brief:https://www.designlounge.live/p/filter-toolbar.md demo:https://www.designlounge.live/demo/filter-toolbar.html
- [Flight arrival split-flap widget](https://www.designlounge.live/p/widget-flight-arrival) (widget-flight-arrival) — 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 styles:industrial,dark,retro motion:rich source:abel brief:https://www.designlounge.live/p/widget-flight-arrival.md demo:https://www.designlounge.live/demo/widget-flight-arrival.html
- [Focus dim](https://www.designlounge.live/p/focus-dim) (focus-dim) — 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 styles:minimal,paper motion:none source:bermawy brief:https://www.designlounge.live/p/focus-dim.md demo:https://www.designlounge.live/demo/focus-dim.html
- [Folder reveal](https://www.designlounge.live/p/folder-reveal) (folder-reveal) — A manila folder starts open, three notes fanned above it. The folder button closes and opens the fan. platform:web type:animation category:cards styles:paper,editorial motion:subtle source:bermawy brief:https://www.designlounge.live/p/folder-reveal.md demo:https://www.designlounge.live/demo/folder-reveal.html
- [Follow, unfollow and save buttons](https://www.designlounge.live/p/button-follow-bookmark) (button-follow-bookmark) — 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 styles:minimal,swiss motion:subtle source:wickret brief:https://www.designlounge.live/p/button-follow-bookmark.md demo:https://www.designlounge.live/demo/button-follow-bookmark.html
- [Funnel chart](https://www.designlounge.live/p/funnel-chart) (funnel-chart) — 71 billed, of 240 that arrived. Five single-colour bars. The pressed stage becomes the number. platform:web type:component category:charts styles:minimal,industrial motion:none source:mindmarket brief:https://www.designlounge.live/p/funnel-chart.md demo:https://www.designlounge.live/demo/funnel-chart.html
- [Gamer community chat card](https://www.designlounge.live/p/social-chat-server-card) (social-chat-server-card) — 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 styles:dark,cyber,industrial motion:rich source:abel brief:https://www.designlounge.live/p/social-chat-server-card.md demo:https://www.designlounge.live/demo/social-chat-server-card.html
- [Glass credit card with flip](https://www.designlounge.live/p/card-glass-credit) (card-glass-credit) — 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 styles:glass,dark,luxe motion:rich source:flist brief:https://www.designlounge.live/p/card-glass-credit.md demo:https://www.designlounge.live/demo/card-glass-credit.html
- [Glitch text](https://www.designlounge.live/p/glitch-text) (glitch-text) — GATE 4 splits red and green for 480ms when Replay runs, then the word sits still. platform:web type:animation category:text-motion styles:dark,kinetic motion:subtle source:wickret brief:https://www.designlounge.live/p/glitch-text.md demo:https://www.designlounge.live/demo/glitch-text.html
- [Goals card with rings and confetti](https://www.designlounge.live/p/card-progress-goals) (card-progress-goals) — 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 styles:soft,playful motion:rich source:mindmarket brief:https://www.designlounge.live/p/card-progress-goals.md demo:https://www.designlounge.live/demo/card-progress-goals.html
- [Gooey menu](https://www.designlounge.live/p/gooey-menu) (gooey-menu) — 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 styles:minimal,soft motion:subtle source:wickret brief:https://www.designlounge.live/p/gooey-menu.md demo:https://www.designlounge.live/demo/gooey-menu.html
- [Gooey nav](https://www.designlounge.live/p/gooey-nav) (gooey-nav) — Four yard links. A green pill slides under the current one and softens through a goo filter. platform:web type:component category:navbar styles:minimal,soft motion:subtle source:lamalama brief:https://www.designlounge.live/p/gooey-nav.md demo:https://www.designlounge.live/demo/gooey-nav.html
- [Graph paper background](https://www.designlounge.live/p/background-graph-paper) (background-graph-paper) — 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 styles:industrial,paper,swiss motion:subtle source:lamalama brief:https://www.designlounge.live/p/background-graph-paper.md demo:https://www.designlounge.live/demo/background-graph-paper.html
- [Graph paper homepage](https://www.designlounge.live/p/graph-paper-homepage) (graph-paper-homepage) — 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 styles:paper,retro,editorial motion:subtle source:bermawy brief:https://www.designlounge.live/p/graph-paper-homepage.md demo:https://www.designlounge.live/demo/graph-paper-homepage.html
- [Greeting loader](https://www.designlounge.live/p/greeting-loader) (greeting-loader) — Hello, Namaste, Salaam, Bonjour. Each word holds 700ms, then it stops. Replay starts again. platform:web type:animation category:loaders styles:editorial,paper motion:subtle source:sibal brief:https://www.designlounge.live/p/greeting-loader.md demo:https://www.designlounge.live/demo/greeting-loader.html
- [Grow grid](https://www.designlounge.live/p/grow-grid) (grow-grid) — 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 styles:minimal,paper motion:subtle source:icm brief:https://www.designlounge.live/p/grow-grid.md demo:https://www.designlounge.live/demo/grow-grid.html
- [Halftone pop background](https://www.designlounge.live/p/background-halftone-pop) (background-halftone-pop) — 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 styles:playful,riso,retro motion:rich source:susan brief:https://www.designlounge.live/p/background-halftone-pop.md demo:https://www.designlounge.live/demo/background-halftone-pop.html
- [Hamburger circle reveal](https://www.designlounge.live/p/hamburger-circle-reveal) (hamburger-circle-reveal) — 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 styles:kinetic,dark,swiss motion:rich source:lamalama brief:https://www.designlounge.live/p/hamburger-circle-reveal.md demo:https://www.designlounge.live/demo/hamburger-circle-reveal.html
- [Hand-drawn text annotations](https://www.designlounge.live/p/text-annotated-underlines) (text-annotated-underlines) — 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 styles:editorial,paper motion:rich source:susan brief:https://www.designlounge.live/p/text-annotated-underlines.md demo:https://www.designlounge.live/demo/text-annotated-underlines.html
- [Handheld talk player](https://www.designlounge.live/p/handheld-talk-player) (handheld-talk-player) — 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 styles:retro,playful,dark motion:subtle source:bermawy brief:https://www.designlounge.live/p/handheld-talk-player.md demo:https://www.designlounge.live/demo/handheld-talk-player.html
- [Headline rise with drawn underline](https://www.designlounge.live/p/text-rise-underline-whisper) (text-rise-underline-whisper) — 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 styles:editorial,paper,minimal motion:subtle source:susan brief:https://www.designlounge.live/p/text-rise-underline-whisper.md demo:https://www.designlounge.live/demo/text-rise-underline-whisper.html
- [Hero with a live browser card](https://www.designlounge.live/p/hero-live-browser-card) (hero-live-browser-card) — 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 styles:brutalist,playful motion:subtle source:usearticle brief:https://www.designlounge.live/p/hero-live-browser-card.md demo:https://www.designlounge.live/demo/hero-live-browser-card.html
- [Hide-on-scroll navbar](https://www.designlounge.live/p/navbar-hide-on-scroll) (navbar-hide-on-scroll) — 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 styles:swiss,minimal motion:subtle source:lamalama brief:https://www.designlounge.live/p/navbar-hide-on-scroll.md demo:https://www.designlounge.live/demo/navbar-hide-on-scroll.html
- [Hold and slide to confirm](https://www.designlounge.live/p/button-hold-to-confirm) (button-hold-to-confirm) — 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 styles:industrial,minimal motion:subtle source:wickret brief:https://www.designlounge.live/p/button-hold-to-confirm.md demo:https://www.designlounge.live/demo/button-hold-to-confirm.html
- [Hold to log, streak and confetti](https://www.designlounge.live/p/streak-hold-confetti) (streak-hold-confetti) — 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 styles:dark,organic,playful motion:rich source:60fps brief:https://www.designlounge.live/p/streak-hold-confetti.md demo:https://www.designlounge.live/demo/streak-hold-confetti.html
- [Hold-to-talk voice orb](https://www.designlounge.live/p/widget-voice-assistant) (widget-voice-assistant) — 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 styles:soft,minimal motion:rich source:moremedia brief:https://www.designlounge.live/p/widget-voice-assistant.md demo:https://www.designlounge.live/demo/widget-voice-assistant.html
- [Holographic foil pass](https://www.designlounge.live/p/card-holo-foil) (card-holo-foil) — 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 styles:y2k,cyber,dark motion:rich source:flist brief:https://www.designlounge.live/p/card-holo-foil.md demo:https://www.designlounge.live/demo/card-holo-foil.html
- [Home screen icon set](https://www.designlounge.live/p/app-icon-home-screen-set) (app-icon-home-screen-set) — 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 styles:glass,soft,organic motion:subtle source:icm brief:https://www.designlounge.live/p/app-icon-home-screen-set.md demo:https://www.designlounge.live/demo/app-icon-home-screen-set.html
- [HUD boot gate](https://www.designlounge.live/p/hud-boot-gate) (hud-boot-gate) — 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 styles:cyber,terminal,dark motion:rich source:sibal brief:https://www.designlounge.live/p/hud-boot-gate.md demo:https://www.designlounge.live/demo/hud-boot-gate.html
- [Incoming call banner](https://www.designlounge.live/p/notif-incoming-call) (notif-incoming-call) — 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 styles:dark,glass,editorial motion:rich source:60fps brief:https://www.designlounge.live/p/notif-incoming-call.md demo:https://www.designlounge.live/demo/notif-incoming-call.html
- [Industrial stopwatch with lap log](https://www.designlounge.live/p/widget-stopwatch-laps) (widget-stopwatch-laps) — 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 styles:industrial,terminal,dark motion:subtle source:moremedia brief:https://www.designlounge.live/p/widget-stopwatch-laps.md demo:https://www.designlounge.live/demo/widget-stopwatch-laps.html
- [Ink wash background](https://www.designlounge.live/p/background-ink-wash) (background-ink-wash) — 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 styles:organic,paper,editorial motion:subtle source:susan brief:https://www.designlounge.live/p/background-ink-wash.md demo:https://www.designlounge.live/demo/background-ink-wash.html
- [Inline alert](https://www.designlounge.live/p/inline-alert) (inline-alert) — 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 styles:minimal,industrial motion:none source:60fps brief:https://www.designlounge.live/p/inline-alert.md demo:https://www.designlounge.live/demo/inline-alert.html
- [Inline edit](https://www.designlounge.live/p/inline-edit) (inline-edit) — The load name is text until you click it. Enter saves. Escape puts the old name back. platform:web type:component category:inputs styles:minimal,industrial motion:none source:icm brief:https://www.designlounge.live/p/inline-edit.md demo:https://www.designlounge.live/demo/inline-edit.html
- [Interval workout timer](https://www.designlounge.live/p/phone-workout-timer) (phone-workout-timer) — 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 styles:kinetic,dark motion:rich source:tailwind brief:https://www.designlounge.live/p/phone-workout-timer.md demo:https://www.designlounge.live/demo/phone-workout-timer.html
- [Isometric figure triptych](https://www.designlounge.live/p/features-isometric-fig-triptych) (features-isometric-fig-triptych) — 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 styles:dark,minimal,industrial motion:subtle source:linear brief:https://www.designlounge.live/p/features-isometric-fig-triptych.md demo:https://www.designlounge.live/demo/features-isometric-fig-triptych.html
- [Issue index](https://www.designlounge.live/p/blog-issue-index) (blog-issue-index) — 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 styles:editorial,paper motion:none source:mendo brief:https://www.designlounge.live/p/blog-issue-index.md demo:https://www.designlounge.live/demo/blog-issue-index.html
- [Job board search](https://www.designlounge.live/p/job-board-search) (job-board-search) — 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 styles:swiss,minimal motion:subtle source:tailwind brief:https://www.designlounge.live/p/job-board-search.md demo:https://www.designlounge.live/demo/job-board-search.html
- [Journal page](https://www.designlounge.live/p/card-journal-page) (card-journal-page) — 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 styles:paper,playful motion:subtle source:tailwind brief:https://www.designlounge.live/p/card-journal-page.md demo:https://www.designlounge.live/demo/card-journal-page.html
- [Kebab row actions menu](https://www.designlounge.live/p/dropdown-kebab-actions) (dropdown-kebab-actions) — 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 styles:minimal,swiss motion:subtle source:dontboardme brief:https://www.designlounge.live/p/dropdown-kebab-actions.md demo:https://www.designlounge.live/demo/dropdown-kebab-actions.html
- [Kraft box 3D turntable](https://www.designlounge.live/p/object-3d-turntable) (object-3d-turntable) — 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 styles:paper,industrial motion:rich source:abel brief:https://www.designlounge.live/p/object-3d-turntable.md demo:https://www.designlounge.live/demo/object-3d-turntable.html
- [Laptop browser mockup](https://www.designlounge.live/p/mockup-laptop-browser) (mockup-laptop-browser) — 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 styles:industrial,minimal,swiss motion:rich source:icm brief:https://www.designlounge.live/p/mockup-laptop-browser.md demo:https://www.designlounge.live/demo/mockup-laptop-browser.html
- [Law firm home, editorial](https://www.designlounge.live/p/law-firm-home) (law-firm-home) — 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 styles:luxe,editorial motion:subtle source:gmx brief:https://www.designlounge.live/p/law-firm-home.md demo:https://www.designlounge.live/demo/law-firm-home.html
- [Layered letter word-swap hero](https://www.designlounge.live/p/hero-layered-letter-swap) (hero-layered-letter-swap) — 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 styles:playful,kinetic motion:rich source:wickret brief:https://www.designlounge.live/p/hero-layered-letter-swap.md demo:https://www.designlounge.live/demo/hero-layered-letter-swap.html
- [Layered parallax landscape hero](https://www.designlounge.live/p/parallax-layered-hero) (parallax-layered-hero) — 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 styles:organic,editorial motion:rich source:susan brief:https://www.designlounge.live/p/parallax-layered-hero.md demo:https://www.designlounge.live/demo/parallax-layered-hero.html
- [Lens bento](https://www.designlounge.live/p/lens-bento) (lens-bento) — 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 styles:minimal,paper motion:subtle source:bermawy brief:https://www.designlounge.live/p/lens-bento.md demo:https://www.designlounge.live/demo/lens-bento.html
- [Lens card scroll ticker](https://www.designlounge.live/p/scroll-lens-card-ticker) (scroll-lens-card-ticker) — 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 styles:dark,playful,kinetic motion:rich source:haunted brief:https://www.designlounge.live/p/scroll-lens-card-ticker.md demo:https://www.designlounge.live/demo/scroll-lens-card-ticker.html
- [Letter sleeve](https://www.designlounge.live/p/letter-sleeve) (letter-sleeve) — A letter starts out of a charcoal sleeve. Tuck slides it in. Pull brings Gate 4 back out. platform:web type:animation category:cards styles:editorial,paper motion:subtle source:bermawy brief:https://www.designlounge.live/p/letter-sleeve.md demo:https://www.designlounge.live/demo/letter-sleeve.html
- [Linen weave background](https://www.designlounge.live/p/background-linen-weave) (background-linen-weave) — 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 styles:organic,paper,luxe motion:subtle source:susan brief:https://www.designlounge.live/p/background-linen-weave.md demo:https://www.designlounge.live/demo/background-linen-weave.html
- [Link orbit](https://www.designlounge.live/p/link-orbit) (link-orbit) — Eight yard connections on a ring around a Yard hub. One starts pressed. Choosing another rewrites the line. platform:web type:section category:features styles:editorial,paper motion:none source:moremedia brief:https://www.designlounge.live/p/link-orbit.md demo:https://www.designlounge.live/demo/link-orbit.html
- [Live checkout bento](https://www.designlounge.live/p/features-live-checkout-bento) (features-live-checkout-bento) — 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 styles:minimal,swiss motion:subtle source:moremedia brief:https://www.designlounge.live/p/features-live-checkout-bento.md demo:https://www.designlounge.live/demo/features-live-checkout-bento.html
- [Live heart-rate tile](https://www.designlounge.live/p/widget-heart-rate) (widget-heart-rate) — 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 styles:dark,industrial,kinetic motion:rich source:icm brief:https://www.designlounge.live/p/widget-heart-rate.md demo:https://www.designlounge.live/demo/widget-heart-rate.html
- [Live terminal log card](https://www.designlounge.live/p/card-terminal-log) (card-terminal-log) — 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 styles:terminal,dark,industrial motion:subtle source:flist brief:https://www.designlounge.live/p/card-terminal-log.md demo:https://www.designlounge.live/demo/card-terminal-log.html
- [Lock screen delivery live update](https://www.designlounge.live/p/notif-delivery-live) (notif-delivery-live) — 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 styles:organic,riso,soft motion:rich source:60fps brief:https://www.designlounge.live/p/notif-delivery-live.md demo:https://www.designlounge.live/demo/notif-delivery-live.html
- [Logos grid case hover](https://www.designlounge.live/p/logos-grid-case-hover) (logos-grid-case-hover) — 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 styles:luxe,minimal,editorial motion:subtle source:moremedia brief:https://www.designlounge.live/p/logos-grid-case-hover.md demo:https://www.designlounge.live/demo/logos-grid-case-hover.html
- [M3 navigation bar](https://www.designlounge.live/p/m3-navigation-bar) (m3-navigation-bar) — 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 styles:material,soft motion:subtle source:60fps brief:https://www.designlounge.live/p/m3-navigation-bar.md demo:https://www.designlounge.live/demo/m3-navigation-bar.html
- [Machined part breakout hero](https://www.designlounge.live/p/hero-machined-part-breakout) (hero-machined-part-breakout) — 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 styles:industrial,dark,swiss motion:subtle source:lamalama brief:https://www.designlounge.live/p/hero-machined-part-breakout.md demo:https://www.designlounge.live/demo/hero-machined-part-breakout.html
- [Magazine cover card](https://www.designlounge.live/p/card-magazine-cover) (card-magazine-cover) — 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 styles:editorial,riso,paper motion:subtle source:bermawy brief:https://www.designlounge.live/p/card-magazine-cover.md demo:https://www.designlounge.live/demo/card-magazine-cover.html
- [Magnifying desktop dock](https://www.designlounge.live/p/dock-magnify-desktop) (dock-magnify-desktop) — 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 styles:glass,soft motion:rich source:60fps brief:https://www.designlounge.live/p/dock-magnify-desktop.md demo:https://www.designlounge.live/demo/dock-magnify-desktop.html
- [Manila folder with tabs](https://www.designlounge.live/p/card-folder-tabs) (card-folder-tabs) — 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 styles:paper,editorial,minimal motion:subtle source:bermawy brief:https://www.designlounge.live/p/card-folder-tabs.md demo:https://www.designlounge.live/demo/card-folder-tabs.html
- [Map with price pins and listing sheet](https://www.designlounge.live/p/phone-map-listings) (phone-map-listings) — 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 styles:editorial,paper motion:subtle source:icm brief:https://www.designlounge.live/p/phone-map-listings.md demo:https://www.designlounge.live/demo/phone-map-listings.html
- [Marketplace search hero](https://www.designlounge.live/p/hero-search-marketplace) (hero-search-marketplace) — 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 styles:editorial,paper motion:subtle source:susan brief:https://www.designlounge.live/p/hero-search-marketplace.md demo:https://www.designlounge.live/demo/hero-search-marketplace.html
- [Material rod rack CTA](https://www.designlounge.live/p/cta-material-rod-rack) (cta-material-rod-rack) — 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 styles:industrial,minimal motion:subtle source:mwdt brief:https://www.designlounge.live/p/cta-material-rod-rack.md demo:https://www.designlounge.live/demo/cta-material-rod-rack.html
- [Members table with range select](https://www.designlounge.live/p/table-users-select) (table-users-select) — 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 styles:minimal,swiss motion:subtle source:60fps brief:https://www.designlounge.live/p/table-users-select.md demo:https://www.designlounge.live/demo/table-users-select.html
- [Microblog post card](https://www.designlounge.live/p/social-microblog-post) (social-microblog-post) — 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 styles:minimal,swiss motion:subtle source:icm brief:https://www.designlounge.live/p/social-microblog-post.md demo:https://www.designlounge.live/demo/social-microblog-post.html
- [Microblog profile header](https://www.designlounge.live/p/social-microblog-profile) (social-microblog-profile) — 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 styles:dark,minimal motion:subtle source:mindmarket brief:https://www.designlounge.live/p/social-microblog-profile.md demo:https://www.designlounge.live/demo/social-microblog-profile.html
- [Minute wheel](https://www.designlounge.live/p/minute-wheel) (minute-wheel) — 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 styles:minimal,industrial motion:none source:tailwind brief:https://www.designlounge.live/p/minute-wheel.md demo:https://www.designlounge.live/demo/minute-wheel.html
- [Mixed article cards](https://www.designlounge.live/p/card-article-mix) (card-article-mix) — 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 styles:editorial,paper motion:subtle source:bermawy brief:https://www.designlounge.live/p/card-article-mix.md demo:https://www.designlounge.live/demo/card-article-mix.html
- [Mobile scroll story](https://www.designlounge.live/p/mobile-scroll-story) (mobile-scroll-story) — 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 styles:riso,editorial,playful motion:rich source:susan brief:https://www.designlounge.live/p/mobile-scroll-story.md demo:https://www.designlounge.live/demo/mobile-scroll-story.html
- [Mobile website bottom bar](https://www.designlounge.live/p/mobile-web-bottom-nav) (mobile-web-bottom-nav) — 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 styles:industrial,brutalist motion:subtle source:tailwind brief:https://www.designlounge.live/p/mobile-web-bottom-nav.md demo:https://www.designlounge.live/demo/mobile-web-bottom-nav.html
- [Mood pill that morphs into a card](https://www.designlounge.live/p/mood-pill-morph-card) (mood-pill-morph-card) — 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 styles:soft,organic,playful motion:rich source:60fps brief:https://www.designlounge.live/p/mood-pill-morph-card.md demo:https://www.designlounge.live/demo/mood-pill-morph-card.html
- [Museum wall with placards](https://www.designlounge.live/p/gallery-museum-placard) (gallery-museum-placard) — 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 styles:luxe,editorial motion:subtle source:icm brief:https://www.designlounge.live/p/gallery-museum-placard.md demo:https://www.designlounge.live/demo/gallery-museum-placard.html
- [Newsletter close](https://www.designlounge.live/p/newsletter-close-band) (newsletter-close-band) — 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 styles:editorial,paper motion:none source:mendo brief:https://www.designlounge.live/p/newsletter-close-band.md demo:https://www.designlounge.live/demo/newsletter-close-band.html
- [Node graph](https://www.designlounge.live/p/node-graph) (node-graph) — Five yard nodes. Yard starts pressed and its lines turn green. Another node lights only its own lines. platform:web type:component category:data styles:minimal,paper motion:none source:60fps brief:https://www.designlounge.live/p/node-graph.md demo:https://www.designlounge.live/demo/node-graph.html
- [One number, with a delta](https://www.designlounge.live/p/kpi-delta) (kpi-delta) — 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 styles:minimal,industrial motion:none source:dontboardme brief:https://www.designlounge.live/p/kpi-delta.md demo:https://www.designlounge.live/demo/kpi-delta.html
- [One-time code](https://www.designlounge.live/p/otp-code) (otp-code) — 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 styles:minimal,industrial motion:none source:igloo brief:https://www.designlounge.live/p/otp-code.md demo:https://www.designlounge.live/demo/otp-code.html
- [Open roles](https://www.designlounge.live/p/careers-role-list) (careers-role-list) — 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 styles:editorial,minimal motion:none source:synchronized brief:https://www.designlounge.live/p/careers-role-list.md demo:https://www.designlounge.live/demo/careers-role-list.html
- [Order confirmed](https://www.designlounge.live/p/order-confirmed) (order-confirmed) — 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 styles:minimal,industrial motion:none source:abel brief:https://www.designlounge.live/p/order-confirmed.md demo:https://www.designlounge.live/demo/order-confirmed.html
- [Orders table with fulfilment](https://www.designlounge.live/p/table-orders-status) (table-orders-status) — 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 styles:soft,editorial motion:subtle source:flist brief:https://www.designlounge.live/p/table-orders-status.md demo:https://www.designlounge.live/demo/table-orders-status.html
- [Outline name marquee](https://www.designlounge.live/p/logos-outline-name-marquee) (logos-outline-name-marquee) — 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 styles:kinetic,dark,editorial motion:rich source:moremedia brief:https://www.designlounge.live/p/logos-outline-name-marquee.md demo:https://www.designlounge.live/demo/logos-outline-name-marquee.html
- [Outline to fill topic list](https://www.designlounge.live/p/outline-fill-topic-list) (outline-fill-topic-list) — 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 styles:dark,kinetic,editorial motion:rich source:haunted brief:https://www.designlounge.live/p/outline-fill-topic-list.md demo:https://www.designlounge.live/demo/outline-fill-topic-list.html
- [Overlap slider](https://www.designlounge.live/p/overlap-slider) (overlap-slider) — Five gate cards. The ones to the left of the pointer scale back. Gate 4 starts forward. platform:web type:component category:media styles:dark,minimal motion:subtle source:dragone brief:https://www.designlounge.live/p/overlap-slider.md demo:https://www.designlounge.live/demo/overlap-slider.html
- [Page transition tile wipe](https://www.designlounge.live/p/page-transition-tile-wipe) (page-transition-tile-wipe) — 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 styles:swiss,kinetic,minimal motion:rich source:60fps brief:https://www.designlounge.live/p/page-transition-tile-wipe.md demo:https://www.designlounge.live/demo/page-transition-tile-wipe.html
- [Pagination](https://www.designlounge.live/p/pagination) (pagination) — 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 styles:minimal,industrial motion:none source:60fps brief:https://www.designlounge.live/p/pagination.md demo:https://www.designlounge.live/demo/pagination.html
- [Pan canvas](https://www.designlounge.live/p/pan-canvas) (pan-canvas) — A yard map bigger than the frame. Drag to pan. Arrow keys nudge the view by 40px. platform:web type:layout category:gallery styles:dark,minimal motion:none source:60fps brief:https://www.designlounge.live/p/pan-canvas.md demo:https://www.designlounge.live/demo/pan-canvas.html
- [Paper contribution heatmap](https://www.designlounge.live/p/social-contribution-graph) (social-contribution-graph) — 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 styles:paper,editorial,minimal motion:subtle source:moremedia brief:https://www.designlounge.live/p/social-contribution-graph.md demo:https://www.designlounge.live/demo/social-contribution-graph.html
- [Paper docs with scrollspy TOC](https://www.designlounge.live/p/sidebar-docs-toc) (sidebar-docs-toc) — 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 styles:paper,editorial motion:subtle source:tailwind brief:https://www.designlounge.live/p/sidebar-docs-toc.md demo:https://www.designlounge.live/demo/sidebar-docs-toc.html
- [Paper hydration tumbler](https://www.designlounge.live/p/widget-hydration) (widget-hydration) — 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 styles:paper,minimal,editorial motion:subtle source:tailwind brief:https://www.designlounge.live/p/widget-hydration.md demo:https://www.designlounge.live/demo/widget-hydration.html
- [Password field](https://www.designlounge.live/p/password-field) (password-field) — 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 styles:minimal,industrial motion:none source:abel brief:https://www.designlounge.live/p/password-field.md demo:https://www.designlounge.live/demo/password-field.html
- [Payment received banner](https://www.designlounge.live/p/notif-payment-received) (notif-payment-received) — 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 styles:material,playful,soft motion:rich source:60fps brief:https://www.designlounge.live/p/notif-payment-received.md demo:https://www.designlounge.live/demo/notif-payment-received.html
- [Phone comments sheet](https://www.designlounge.live/p/phone-comments-sheet) (phone-comments-sheet) — 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 styles:dark,minimal motion:subtle source:igloo brief:https://www.designlounge.live/p/phone-comments-sheet.md demo:https://www.designlounge.live/demo/phone-comments-sheet.html
- [Phone empty list](https://www.designlounge.live/p/mobile-list-empty) (mobile-list-empty) — 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 styles:minimal,industrial motion:none source:60fps brief:https://www.designlounge.live/p/mobile-list-empty.md demo:https://www.designlounge.live/demo/mobile-list-empty.html
- [Phone failed load](https://www.designlounge.live/p/mobile-load-failed) (mobile-load-failed) — 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 styles:minimal,industrial motion:none source:abel brief:https://www.designlounge.live/p/mobile-load-failed.md demo:https://www.designlounge.live/demo/mobile-load-failed.html
- [Phone form fields](https://www.designlounge.live/p/phone-form-fields) (phone-form-fields) — 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 styles:industrial,minimal motion:subtle source:usearticle brief:https://www.designlounge.live/p/phone-form-fields.md demo:https://www.designlounge.live/demo/phone-form-fields.html
- [Phone input with country picker](https://www.designlounge.live/p/input-phone-country) (input-phone-country) — 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 styles:minimal,soft,swiss motion:subtle source:dontboardme brief:https://www.designlounge.live/p/input-phone-country.md demo:https://www.designlounge.live/demo/input-phone-country.html
- [Phone launch splash lift](https://www.designlounge.live/p/phone-splash-launch) (phone-splash-launch) — 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 styles:industrial,dark,kinetic motion:rich source:sibal brief:https://www.designlounge.live/p/phone-splash-launch.md demo:https://www.designlounge.live/demo/phone-splash-launch.html
- [Phone notification centre](https://www.designlounge.live/p/phone-notifications-list) (phone-notifications-list) — 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 styles:swiss,minimal motion:subtle source:60fps brief:https://www.designlounge.live/p/phone-notifications-list.md demo:https://www.designlounge.live/demo/phone-notifications-list.html
- [Phone order tracking](https://www.designlounge.live/p/phone-order-tracking) (phone-order-tracking) — 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 styles:playful,brutalist motion:rich source:abel brief:https://www.designlounge.live/p/phone-order-tracking.md demo:https://www.designlounge.live/demo/phone-order-tracking.html
- [Phone paywall with two plans](https://www.designlounge.live/p/phone-paywall-plans) (phone-paywall-plans) — 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 styles:editorial,paper motion:subtle source:abel brief:https://www.designlounge.live/p/phone-paywall-plans.md demo:https://www.designlounge.live/demo/phone-paywall-plans.html
- [Phone permission prompt](https://www.designlounge.live/p/phone-permission-prompt) (phone-permission-prompt) — 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 styles:soft,organic motion:subtle source:mwdt brief:https://www.designlounge.live/p/phone-permission-prompt.md demo:https://www.designlounge.live/demo/phone-permission-prompt.html
- [Phone photo picker](https://www.designlounge.live/p/phone-photo-picker) (phone-photo-picker) — 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 styles:dark,minimal motion:subtle source:mindmarket brief:https://www.designlounge.live/p/phone-photo-picker.md demo:https://www.designlounge.live/demo/phone-photo-picker.html
- [Phone product page](https://www.designlounge.live/p/phone-product-detail) (phone-product-detail) — 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 styles:paper,retro,clay motion:subtle source:abel brief:https://www.designlounge.live/p/phone-product-detail.md demo:https://www.designlounge.live/demo/phone-product-detail.html
- [Phone profile header](https://www.designlounge.live/p/phone-profile-header) (phone-profile-header) — 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 styles:soft,glass,minimal motion:subtle source:mindmarket brief:https://www.designlounge.live/p/phone-profile-header.md demo:https://www.designlounge.live/demo/phone-profile-header.html
- [Phone QR ticket scanner](https://www.designlounge.live/p/phone-qr-scanner) (phone-qr-scanner) — 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 styles:dark,minimal motion:rich source:tailwind brief:https://www.designlounge.live/p/phone-qr-scanner.md demo:https://www.designlounge.live/demo/phone-qr-scanner.html
- [Phone ride request](https://www.designlounge.live/p/phone-ride-request) (phone-ride-request) — 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 styles:industrial,dark motion:subtle source:tailwind brief:https://www.designlounge.live/p/phone-ride-request.md demo:https://www.designlounge.live/demo/phone-ride-request.html
- [Phone search with live results](https://www.designlounge.live/p/phone-search-results) (phone-search-results) — 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 styles:minimal,swiss motion:subtle source:tailwind brief:https://www.designlounge.live/p/phone-search-results.md demo:https://www.designlounge.live/demo/phone-search-results.html
- [Phone showcase mockup](https://www.designlounge.live/p/mockup-phone-showcase) (mockup-phone-showcase) — 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 styles:luxe,editorial,minimal motion:rich source:icm brief:https://www.designlounge.live/p/mockup-phone-showcase.md demo:https://www.designlounge.live/demo/mockup-phone-showcase.html
- [Phone video player](https://www.designlounge.live/p/phone-video-player) (phone-video-player) — 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 styles:dark,minimal motion:rich source:dragone brief:https://www.designlounge.live/p/phone-video-player.md demo:https://www.designlounge.live/demo/phone-video-player.html
- [Photo album with page turns](https://www.designlounge.live/p/gallery-photo-album) (gallery-photo-album) — 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 styles:paper,retro,organic motion:rich source:icm brief:https://www.designlounge.live/p/gallery-photo-album.md demo:https://www.designlounge.live/demo/gallery-photo-album.html
- [Photo post with carousel](https://www.designlounge.live/p/social-photo-post) (social-photo-post) — 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 styles:dark,minimal motion:rich source:tailwind brief:https://www.designlounge.live/p/social-photo-post.md demo:https://www.designlounge.live/demo/social-photo-post.html
- [Plain list empty](https://www.designlounge.live/p/list-empty-plain) (list-empty-plain) — An empty runs list: a heading, one sentence, and one button. No illustration, no second action, no joke. platform:web type:pattern category:feedback styles:minimal,industrial motion:none source:60fps brief:https://www.designlounge.live/p/list-empty-plain.md demo:https://www.designlounge.live/demo/list-empty-plain.html
- [Plain phone tabs](https://www.designlounge.live/p/phone-tab-plain) (phone-tab-plain) — 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 styles:minimal,paper motion:none source:tailwind brief:https://www.designlounge.live/p/phone-tab-plain.md demo:https://www.designlounge.live/demo/phone-tab-plain.html
- [Playlist card with now playing](https://www.designlounge.live/p/card-music-playlist) (card-music-playlist) — 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 styles:soft,editorial motion:subtle source:bermawy brief:https://www.designlounge.live/p/card-music-playlist.md demo:https://www.designlounge.live/demo/card-music-playlist.html
- [Polaroid fan](https://www.designlounge.live/p/polaroid-fan) (polaroid-fan) — Five prints start fanned. Click stacks them. Click again opens the arc. platform:web type:animation category:cards styles:paper,editorial motion:subtle source:bermawy brief:https://www.designlounge.live/p/polaroid-fan.md demo:https://www.designlounge.live/demo/polaroid-fan.html
- [Polaroid frames, three ways](https://www.designlounge.live/p/card-polaroid-frames) (card-polaroid-frames) — 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 styles:brutalist,playful,paper motion:subtle source:bermawy brief:https://www.designlounge.live/p/card-polaroid-frames.md demo:https://www.designlounge.live/demo/card-polaroid-frames.html
- [Popover panel](https://www.designlounge.live/p/popover-panel) (popover-panel) — 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 styles:minimal,industrial motion:none source:abel brief:https://www.designlounge.live/p/popover-panel.md demo:https://www.designlounge.live/demo/popover-panel.html
- [Postcard with stamp and postmark](https://www.designlounge.live/p/card-postcard-stamp) (card-postcard-stamp) — 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 styles:retro,paper,playful motion:rich source:bermawy brief:https://www.designlounge.live/p/card-postcard-stamp.md demo:https://www.designlounge.live/demo/card-postcard-stamp.html
- [Preloader counter intro](https://www.designlounge.live/p/preloader-counter-intro) (preloader-counter-intro) — 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 styles:brutalist,kinetic,paper motion:rich source:noomo brief:https://www.designlounge.live/p/preloader-counter-intro.md demo:https://www.designlounge.live/demo/preloader-counter-intro.html
- [Presence dock with follow mode](https://www.designlounge.live/p/dock-presence-bar) (dock-presence-bar) — 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 styles:editorial,minimal motion:rich source:tailwind brief:https://www.designlounge.live/p/dock-presence-bar.md demo:https://www.designlounge.live/demo/dock-presence-bar.html
- [Press well](https://www.designlounge.live/p/press-well) (press-well) — 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 styles:minimal,industrial motion:subtle source:wickret brief:https://www.designlounge.live/p/press-well.md demo:https://www.designlounge.live/demo/press-well.html
- [Process step dossier](https://www.designlounge.live/p/process-step-dossier) (process-step-dossier) — 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 styles:industrial,dark,swiss motion:subtle source:lamalama brief:https://www.designlounge.live/p/process-step-dossier.md demo:https://www.designlounge.live/demo/process-step-dossier.html
- [Product cards with quick add](https://www.designlounge.live/p/card-product-quick-add) (card-product-quick-add) — 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 styles:retro,paper motion:subtle source:bermawy brief:https://www.designlounge.live/p/card-product-quick-add.md demo:https://www.designlounge.live/demo/card-product-quick-add.html
- [Product mega menu grid](https://www.designlounge.live/p/mega-menu-product-grid) (mega-menu-product-grid) — 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 styles:swiss,minimal motion:subtle source:lamalama brief:https://www.designlounge.live/p/mega-menu-product-grid.md demo:https://www.designlounge.live/demo/mega-menu-product-grid.html
- [Professional network post](https://www.designlounge.live/p/social-pro-post) (social-pro-post) — 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 styles:editorial,paper motion:subtle source:stripe brief:https://www.designlounge.live/p/social-pro-post.md demo:https://www.designlounge.live/demo/social-pro-post.html
- [Professional network profile card](https://www.designlounge.live/p/social-pro-profile) (social-pro-profile) — 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 styles:minimal,swiss motion:subtle source:abel brief:https://www.designlounge.live/p/social-pro-profile.md demo:https://www.designlounge.live/demo/social-pro-profile.html
- [Progress bar](https://www.designlounge.live/p/progress-bar) (progress-bar) — 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 styles:minimal,industrial motion:none source:60fps brief:https://www.designlounge.live/p/progress-bar.md demo:https://www.designlounge.live/demo/progress-bar.html
- [Prompt composer](https://www.designlounge.live/p/prompt-composer) (prompt-composer) — 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 styles:minimal,industrial motion:none source:tailwind brief:https://www.designlounge.live/p/prompt-composer.md demo:https://www.designlounge.live/demo/prompt-composer.html
- [Property list](https://www.designlounge.live/p/property-list) (property-list) — 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 styles:minimal,industrial motion:none source:60fps brief:https://www.designlounge.live/p/property-list.md demo:https://www.designlounge.live/demo/property-list.html
- [Pull-quote testimonial card](https://www.designlounge.live/p/card-pull-quote) (card-pull-quote) — 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 styles:editorial,dark motion:subtle source:linear brief:https://www.designlounge.live/p/card-pull-quote.md demo:https://www.designlounge.live/demo/card-pull-quote.html
- [PWA offline library](https://www.designlounge.live/p/pwa-offline-library) (pwa-offline-library) — 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 styles:editorial,dark motion:subtle source:mendo brief:https://www.designlounge.live/p/pwa-offline-library.md demo:https://www.designlounge.live/demo/pwa-offline-library.html
- [PWA outbox sync](https://www.designlounge.live/p/pwa-outbox-sync) (pwa-outbox-sync) — 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 styles:industrial,minimal motion:subtle source:60fps brief:https://www.designlounge.live/p/pwa-outbox-sync.md demo:https://www.designlounge.live/demo/pwa-outbox-sync.html
- [Quantity stepper](https://www.designlounge.live/p/qty-stepper) (qty-stepper) — 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 styles:minimal,industrial motion:none source:abel brief:https://www.designlounge.live/p/qty-stepper.md demo:https://www.designlounge.live/demo/qty-stepper.html
- [Quarter line chart](https://www.designlounge.live/p/chart-line-range) (chart-line-range) — 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 styles:minimal,industrial motion:subtle source:icm brief:https://www.designlounge.live/p/chart-line-range.md demo:https://www.designlounge.live/demo/chart-line-range.html
- [Radio group](https://www.designlounge.live/p/radio-group) (radio-group) — 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 styles:minimal,industrial motion:none source:usearticle brief:https://www.designlounge.live/p/radio-group.md demo:https://www.designlounge.live/demo/radio-group.html
- [Ranked spend](https://www.designlounge.live/p/chart-rank-spend) (chart-rank-spend) — 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 styles:editorial,paper motion:subtle source:dontboardme brief:https://www.designlounge.live/p/chart-rank-spend.md demo:https://www.designlounge.live/demo/chart-rank-spend.html
- [Rating score](https://www.designlounge.live/p/rating-score) (rating-score) — 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 styles:minimal,industrial motion:none source:icm brief:https://www.designlounge.live/p/rating-score.md demo:https://www.designlounge.live/demo/rating-score.html
- [Real estate listing detail](https://www.designlounge.live/p/realestate-listing-detail) (realestate-listing-detail) — 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 styles:luxe,minimal motion:subtle source:abel brief:https://www.designlounge.live/p/realestate-listing-detail.md demo:https://www.designlounge.live/demo/realestate-listing-detail.html
- [Receipt slip](https://www.designlounge.live/p/receipt-slip) (receipt-slip) — 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 styles:minimal,paper motion:subtle source:abel brief:https://www.designlounge.live/p/receipt-slip.md demo:https://www.designlounge.live/demo/receipt-slip.html
- [Redaction bar reveal](https://www.designlounge.live/p/redaction-bar-reveal) (redaction-bar-reveal) — 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 styles:editorial,brutalist,paper motion:subtle source:susan brief:https://www.designlounge.live/p/redaction-bar-reveal.md demo:https://www.designlounge.live/demo/redaction-bar-reveal.html
- [Restaurant menu page](https://www.designlounge.live/p/restaurant-menu-page) (restaurant-menu-page) — 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 styles:retro,riso motion:subtle source:haunted brief:https://www.designlounge.live/p/restaurant-menu-page.md demo:https://www.designlounge.live/demo/restaurant-menu-page.html
- [Ride pickup live activity](https://www.designlounge.live/p/widget-ride-pickup) (widget-ride-pickup) — 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 styles:paper,minimal,playful motion:rich source:usearticle brief:https://www.designlounge.live/p/widget-ride-pickup.md demo:https://www.designlounge.live/demo/widget-ride-pickup.html
- [Rolling total with a jelly period switch](https://www.designlounge.live/p/rolling-total-period-switch) (rolling-total-period-switch) — 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 styles:minimal,kinetic,swiss motion:rich source:60fps brief:https://www.designlounge.live/p/rolling-total-period-switch.md demo:https://www.designlounge.live/demo/rolling-total-period-switch.html
- [Salon wall planner](https://www.designlounge.live/p/gallery-wall-frames) (gallery-wall-frames) — 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 styles:soft,organic,playful motion:rich source:60fps brief:https://www.designlounge.live/p/gallery-wall-frames.md demo:https://www.designlounge.live/demo/gallery-wall-frames.html
- [Saved banner](https://www.designlounge.live/p/saved-banner) (saved-banner) — 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 styles:editorial,paper motion:none source:60fps brief:https://www.designlounge.live/p/saved-banner.md demo:https://www.designlounge.live/demo/saved-banner.html
- [Scan page](https://www.designlounge.live/p/scan-page) (scan-page) — 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 styles:minimal,industrial motion:subtle source:60fps brief:https://www.designlounge.live/p/scan-page.md demo:https://www.designlounge.live/demo/scan-page.html
- [School admissions home](https://www.designlounge.live/p/school-admissions-home) (school-admissions-home) — 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 styles:bauhaus,paper motion:subtle source:linear brief:https://www.designlounge.live/p/school-admissions-home.md demo:https://www.designlounge.live/demo/school-admissions-home.html
- [Scroll split](https://www.designlounge.live/p/scroll-split) (scroll-split) — Gate 4, Night book, and Month close start as one board. Scroll opens a 16px gap between them. platform:web type:animation category:scroll styles:editorial,paper motion:subtle source:susan brief:https://www.designlounge.live/p/scroll-split.md demo:https://www.designlounge.live/demo/scroll-split.html
- [Scroll velocity type](https://www.designlounge.live/p/scroll-velocity-type) (scroll-velocity-type) — Hold the line sits sticky. Scrolling opens its tracking up to 0.2em, then the tracking settles. platform:web type:animation category:scroll styles:editorial,paper motion:subtle source:susan brief:https://www.designlounge.live/p/scroll-velocity-type.md demo:https://www.designlounge.live/demo/scroll-velocity-type.html
- [Scroll word highlight](https://www.designlounge.live/p/scroll-word-highlight) (scroll-word-highlight) — 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 styles:editorial,minimal,paper motion:rich source:susan brief:https://www.designlounge.live/p/scroll-word-highlight.md demo:https://www.designlounge.live/demo/scroll-word-highlight.html
- [Scroll zoom portal](https://www.designlounge.live/p/scroll-zoom-portal) (scroll-zoom-portal) — 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 styles:bauhaus,playful motion:rich source:mindmarket brief:https://www.designlounge.live/p/scroll-zoom-portal.md demo:https://www.designlounge.live/demo/scroll-zoom-portal.html
- [Scroll-scrubbed product teardown](https://www.designlounge.live/p/scroll-scrub-product-sequence) (scroll-scrub-product-sequence) — 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 styles:luxe,dark motion:rich source:gmx brief:https://www.designlounge.live/p/scroll-scrub-product-sequence.md demo:https://www.designlounge.live/demo/scroll-scrub-product-sequence.html
- [Section-tagline nav pill](https://www.designlounge.live/p/navbar-section-tagline-pill) (navbar-section-tagline-pill) — 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 styles:minimal,industrial,swiss motion:subtle source:lamalama brief:https://www.designlounge.live/p/navbar-section-tagline-pill.md demo:https://www.designlounge.live/demo/navbar-section-tagline-pill.html
- [Select field](https://www.designlounge.live/p/select-field) (select-field) — 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 styles:minimal,industrial motion:none source:dontboardme brief:https://www.designlounge.live/p/select-field.md demo:https://www.designlounge.live/demo/select-field.html
- [Selection bar](https://www.designlounge.live/p/selection-bar) (selection-bar) — Checking loads raises a dark bar: the count, Clear, Export, and Archive. Zero checks hides it. platform:web type:component category:data styles:minimal,industrial motion:none source:60fps brief:https://www.designlounge.live/p/selection-bar.md demo:https://www.designlounge.live/demo/selection-bar.html
- [Share menu with invites and QR](https://www.designlounge.live/p/dropdown-share-menu) (dropdown-share-menu) — 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 styles:riso,paper,editorial motion:subtle source:abel brief:https://www.designlounge.live/p/dropdown-share-menu.md demo:https://www.designlounge.live/demo/dropdown-share-menu.html
- [Sheen pill buttons](https://www.designlounge.live/p/button-sheen-pill) (button-sheen-pill) — 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 styles:luxe,dark,minimal motion:subtle source:wickret brief:https://www.designlounge.live/p/button-sheen-pill.md demo:https://www.designlounge.live/demo/button-sheen-pill.html
- [Shop cart](https://www.designlounge.live/p/shop-cart) (shop-cart) — 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 styles:organic,minimal motion:none source:abel brief:https://www.designlounge.live/p/shop-cart.md demo:https://www.designlounge.live/demo/shop-cart.html
- [Shop collection](https://www.designlounge.live/p/shop-collection) (shop-collection) — 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 styles:organic,minimal motion:none source:abel brief:https://www.designlounge.live/p/shop-collection.md demo:https://www.designlounge.live/demo/shop-collection.html
- [Shop drawer with accordion sections](https://www.designlounge.live/p/hamburger-drawer-accordion) (hamburger-drawer-accordion) — 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 styles:soft,organic,editorial motion:subtle source:60fps brief:https://www.designlounge.live/p/hamburger-drawer-accordion.md demo:https://www.designlounge.live/demo/hamburger-drawer-accordion.html
- [Shop product](https://www.designlounge.live/p/shop-product) (shop-product) — 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 styles:organic,minimal motion:none source:abel brief:https://www.designlounge.live/p/shop-product.md demo:https://www.designlounge.live/demo/shop-product.html
- [Shortcut sheet](https://www.designlounge.live/p/shortcut-sheet) (shortcut-sheet) — A 480px sheet of yard shortcuts. The row for the key you press picks up a green wash. platform:web type:component category:utility styles:minimal,paper motion:none source:tailwind brief:https://www.designlounge.live/p/shortcut-sheet.md demo:https://www.designlounge.live/demo/shortcut-sheet.html
- [Shred button](https://www.designlounge.live/p/shred-button) (shred-button) — Shred draft cuts a note into strips that fall. Restore brings the note back. platform:web type:animation category:buttons styles:minimal,paper motion:subtle source:wickret brief:https://www.designlounge.live/p/shred-button.md demo:https://www.designlounge.live/demo/shred-button.html
- [Sidebar with workspace switcher](https://www.designlounge.live/p/sidebar-workspace-switcher) (sidebar-workspace-switcher) — 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 styles:minimal,dark motion:subtle source:tailwind brief:https://www.designlounge.live/p/sidebar-workspace-switcher.md demo:https://www.designlounge.live/demo/sidebar-workspace-switcher.html
- [Silk ribbon hero with live ticker](https://www.designlounge.live/p/hero-silk-ribbon-ticker) (hero-silk-ribbon-ticker) — 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 styles:minimal,editorial motion:rich source:stripe brief:https://www.designlounge.live/p/hero-silk-ribbon-ticker.md demo:https://www.designlounge.live/demo/hero-silk-ribbon-ticker.html
- [Sitemap columns footer](https://www.designlounge.live/p/footer-sitemap-columns) (footer-sitemap-columns) — 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 styles:dark,minimal motion:subtle source:linear brief:https://www.designlounge.live/p/footer-sitemap-columns.md demo:https://www.designlounge.live/demo/footer-sitemap-columns.html
- [Sleep score with scrubbable hypnogram](https://www.designlounge.live/p/widget-sleep-score) (widget-sleep-score) — 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 styles:soft,dark,editorial motion:subtle source:linear brief:https://www.designlounge.live/p/widget-sleep-score.md demo:https://www.designlounge.live/demo/widget-sleep-score.html
- [Slider field](https://www.designlounge.live/p/slider-field) (slider-field) — 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 styles:minimal,industrial motion:none source:abel brief:https://www.designlounge.live/p/slider-field.md demo:https://www.designlounge.live/demo/slider-field.html
- [Smooth scroll with inertia](https://www.designlounge.live/p/smooth-scroll-inertia) (smooth-scroll-inertia) — 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 styles:editorial,dark,kinetic motion:rich source:haunted brief:https://www.designlounge.live/p/smooth-scroll-inertia.md demo:https://www.designlounge.live/demo/smooth-scroll-inertia.html
- [Social feed with stories and posts](https://www.designlounge.live/p/phone-feed-posts) (phone-feed-posts) — 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 styles:playful,minimal motion:subtle source:bermawy brief:https://www.designlounge.live/p/phone-feed-posts.md demo:https://www.designlounge.live/demo/phone-feed-posts.html
- [Soft inset clay buttons](https://www.designlounge.live/p/button-inset-soft) (button-inset-soft) — 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 styles:soft,clay,minimal motion:subtle source:wickret brief:https://www.designlounge.live/p/button-inset-soft.md demo:https://www.designlounge.live/demo/button-inset-soft.html
- [Spend list](https://www.designlounge.live/p/spend-list) (spend-list) — 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 styles:editorial,paper motion:none source:moremedia brief:https://www.designlounge.live/p/spend-list.md demo:https://www.designlounge.live/demo/spend-list.html
- [Spinner specimen set](https://www.designlounge.live/p/loader-spinner-set) (loader-spinner-set) — 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 styles:dark,swiss,kinetic motion:rich source:sibal brief:https://www.designlounge.live/p/loader-spinner-set.md demo:https://www.designlounge.live/demo/loader-spinner-set.html
- [Split button](https://www.designlounge.live/p/split-button) (split-button) — One primary action and a 44px chevron that opens three related ways to send the same note. platform:web type:component category:buttons styles:minimal,industrial motion:none source:wickret brief:https://www.designlounge.live/p/split-button.md demo:https://www.designlounge.live/demo/split-button.html
- [Split hero with UI card stack](https://www.designlounge.live/p/hero-split-ui-stack) (hero-split-ui-stack) — 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 styles:soft,minimal motion:subtle source:stripe brief:https://www.designlounge.live/p/hero-split-ui-stack.md demo:https://www.designlounge.live/demo/hero-split-ui-stack.html
- [Split navbar with centred wordmark](https://www.designlounge.live/p/navbar-split-centered-logo) (navbar-split-centered-logo) — 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 styles:luxe,editorial motion:subtle source:lamalama brief:https://www.designlounge.live/p/navbar-split-centered-logo.md demo:https://www.designlounge.live/demo/navbar-split-centered-logo.html
- [Split-flap board](https://www.designlounge.live/p/split-flap-board) (split-flap-board) — Three departure rows flip from a dot to the gate text. Replay runs the flaps again. platform:web type:animation category:text-motion styles:dark,kinetic motion:rich source:wickret brief:https://www.designlounge.live/p/split-flap-board.md demo:https://www.designlounge.live/demo/split-flap-board.html
- [Spotlight search with preview](https://www.designlounge.live/p/spotlight-command-bar) (spotlight-command-bar) — 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 styles:glass,minimal motion:subtle source:tailwind brief:https://www.designlounge.live/p/spotlight-command-bar.md demo:https://www.designlounge.live/demo/spotlight-command-bar.html
- [Spring deck](https://www.designlounge.live/p/spring-deck) (spring-deck) — Three notes in a pile. Drag the front one, Gate 4. Release and it springs back. platform:web type:component category:cards styles:editorial,paper motion:subtle source:bermawy brief:https://www.designlounge.live/p/spring-deck.md demo:https://www.designlounge.live/demo/spring-deck.html
- [Stamped document](https://www.designlounge.live/p/card-stamped-document) (card-stamped-document) — 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 styles:paper,retro,editorial motion:rich source:bermawy brief:https://www.designlounge.live/p/card-stamped-document.md demo:https://www.designlounge.live/demo/card-stamped-document.html
- [Stats count-up band](https://www.designlounge.live/p/stats-count-up-band) (stats-count-up-band) — 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 styles:editorial,dark motion:rich source:flist brief:https://www.designlounge.live/p/stats-count-up-band.md demo:https://www.designlounge.live/demo/stats-count-up-band.html
- [Status badge](https://www.designlounge.live/p/status-badge) (status-badge) — 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 styles:minimal,industrial motion:none source:60fps brief:https://www.designlounge.live/p/status-badge.md demo:https://www.designlounge.live/demo/status-badge.html
- [Stepped project brief form](https://www.designlounge.live/p/contact-project-brief-steps) (contact-project-brief-steps) — 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 styles:brutalist,editorial motion:subtle source:dontboardme brief:https://www.designlounge.live/p/contact-project-brief-steps.md demo:https://www.designlounge.live/demo/contact-project-brief-steps.html
- [Sticker activity rings](https://www.designlounge.live/p/widget-activity-rings) (widget-activity-rings) — 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 styles:playful,bauhaus motion:rich source:usearticle brief:https://www.designlounge.live/p/widget-activity-rings.md demo:https://www.designlounge.live/demo/widget-activity-rings.html
- [Sticky notes board](https://www.designlounge.live/p/card-sticky-notepad) (card-sticky-notepad) — 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 styles:playful,paper,dark motion:rich source:tailwind brief:https://www.designlounge.live/p/card-sticky-notepad.md demo:https://www.designlounge.live/demo/card-sticky-notepad.html
- [Stretch switch](https://www.designlounge.live/p/stretch-switch) (stretch-switch) — 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 styles:minimal,industrial motion:subtle source:linear brief:https://www.designlounge.live/p/stretch-switch.md demo:https://www.designlounge.live/demo/stretch-switch.html
- [Sunrise horizon background](https://www.designlounge.live/p/background-sunrise-horizon) (background-sunrise-horizon) — 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 styles:editorial,paper,minimal motion:subtle source:susan brief:https://www.designlounge.live/p/background-sunrise-horizon.md demo:https://www.designlounge.live/demo/background-sunrise-horizon.html
- [Swinging kraft hang tag](https://www.designlounge.live/p/card-retail-price-tag) (card-retail-price-tag) — 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 styles:paper,editorial,retro motion:rich source:abel brief:https://www.designlounge.live/p/card-retail-price-tag.md demo:https://www.designlounge.live/demo/card-retail-price-tag.html
- [Swipe deck with undo](https://www.designlounge.live/p/card-stacked-deck) (card-stacked-deck) — 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 styles:editorial,organic motion:rich source:flist brief:https://www.designlounge.live/p/card-stacked-deck.md demo:https://www.designlounge.live/demo/card-stacked-deck.html
- [Swipe to pay, ember bloom](https://www.designlounge.live/p/swipe-pay-ember-bloom) (swipe-pay-ember-bloom) — 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 styles:dark,kinetic,minimal motion:rich source:60fps brief:https://www.designlounge.live/p/swipe-pay-ember-bloom.md demo:https://www.designlounge.live/demo/swipe-pay-ember-bloom.html
- [Switch row](https://www.designlounge.live/p/switch-row) (switch-row) — 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 styles:minimal,industrial motion:subtle source:wickret brief:https://www.designlounge.live/p/switch-row.md demo:https://www.designlounge.live/demo/switch-row.html
- [Tablet cafe register](https://www.designlounge.live/p/tablet-pos-register) (tablet-pos-register) — 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 styles:soft,organic motion:subtle source:abel brief:https://www.designlounge.live/p/tablet-pos-register.md demo:https://www.designlounge.live/demo/tablet-pos-register.html
- [Tablet kiosk check-in](https://www.designlounge.live/p/tablet-kiosk-checkin) (tablet-kiosk-checkin) — 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 styles:industrial,minimal motion:subtle source:tailwind brief:https://www.designlounge.live/p/tablet-kiosk-checkin.md demo:https://www.designlounge.live/demo/tablet-kiosk-checkin.html
- [Tablet notes in three panes](https://www.designlounge.live/p/tablet-notes-three-pane) (tablet-notes-three-pane) — 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 styles:paper,editorial motion:subtle source:icm brief:https://www.designlounge.live/p/tablet-notes-three-pane.md demo:https://www.designlounge.live/demo/tablet-notes-three-pane.html
- [Tablet recipe cook mode](https://www.designlounge.live/p/tablet-cook-mode) (tablet-cook-mode) — 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 styles:playful,organic motion:subtle source:tailwind brief:https://www.designlounge.live/p/tablet-cook-mode.md demo:https://www.designlounge.live/demo/tablet-cook-mode.html
- [Tactile chip tabs with a stretch](https://www.designlounge.live/p/tactile-chip-tabs-stretch) (tactile-chip-tabs-stretch) — 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 styles:clay,soft,organic motion:rich source:60fps brief:https://www.designlounge.live/p/tactile-chip-tabs-stretch.md demo:https://www.designlounge.live/demo/tactile-chip-tabs-stretch.html
- [Tasks table with inline editing](https://www.designlounge.live/p/table-tasks-inline) (table-tasks-inline) — 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 styles:playful,brutalist motion:rich source:flist brief:https://www.designlounge.live/p/table-tasks-inline.md demo:https://www.designlounge.live/demo/table-tasks-inline.html
- [Team members settings](https://www.designlounge.live/p/settings-team-members) (settings-team-members) — 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 styles:swiss,minimal motion:subtle source:abel brief:https://www.designlounge.live/p/settings-team-members.md demo:https://www.designlounge.live/demo/settings-team-members.html
- [Terminal crypto trading screen](https://www.designlounge.live/p/crypto-exchange-trade) (crypto-exchange-trade) — 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 styles:terminal,dark motion:subtle source:stripe brief:https://www.designlounge.live/p/crypto-exchange-trade.md demo:https://www.designlounge.live/demo/crypto-exchange-trade.html
- [Terrazzo background](https://www.designlounge.live/p/background-terrazzo) (background-terrazzo) — 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 styles:organic,minimal,paper motion:subtle source:susan brief:https://www.designlounge.live/p/background-terrazzo.md demo:https://www.designlounge.live/demo/background-terrazzo.html
- [Testimonials masonry wall](https://www.designlounge.live/p/testimonials-masonry-wall) (testimonials-masonry-wall) — 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 styles:paper,riso,editorial motion:subtle source:dragone brief:https://www.designlounge.live/p/testimonials-masonry-wall.md demo:https://www.designlounge.live/demo/testimonials-masonry-wall.html
- [Testimonials metric tabs](https://www.designlounge.live/p/testimonials-metric-tabs) (testimonials-metric-tabs) — 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 styles:dark,minimal motion:subtle source:linear brief:https://www.designlounge.live/p/testimonials-metric-tabs.md demo:https://www.designlounge.live/demo/testimonials-metric-tabs.html
- [Text field](https://www.designlounge.live/p/text-field) (text-field) — 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 styles:minimal,industrial motion:none source:mindmarket brief:https://www.designlounge.live/p/text-field.md demo:https://www.designlounge.live/demo/text-field.html
- [Text loaders for AI states](https://www.designlounge.live/p/loader-text-shimmer) (loader-text-shimmer) — 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 styles:editorial,paper,minimal motion:rich source:60fps brief:https://www.designlounge.live/p/loader-text-shimmer.md demo:https://www.designlounge.live/demo/loader-text-shimmer.html
- [Text mask scroll reveal](https://www.designlounge.live/p/text-mask-scroll-reveal) (text-mask-scroll-reveal) — 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 styles:kinetic,dark,brutalist motion:rich source:haunted brief:https://www.designlounge.live/p/text-mask-scroll-reveal.md demo:https://www.designlounge.live/demo/text-mask-scroll-reveal.html
- [Textarea field](https://www.designlounge.live/p/textarea-field) (textarea-field) — 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 styles:minimal,industrial motion:none source:tailwind brief:https://www.designlounge.live/p/textarea-field.md demo:https://www.designlounge.live/demo/textarea-field.html
- [Thread to issue board](https://www.designlounge.live/p/features-thread-to-issue-board) (features-thread-to-issue-board) — 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 styles:dark,minimal motion:rich source:linear brief:https://www.designlounge.live/p/features-thread-to-issue-board.md demo:https://www.designlounge.live/demo/features-thread-to-issue-board.html
- [Threaded conversation card](https://www.designlounge.live/p/social-thread-card) (social-thread-card) — 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 styles:playful,brutalist motion:subtle source:icm brief:https://www.designlounge.live/p/social-thread-card.md demo:https://www.designlounge.live/demo/social-thread-card.html
- [Three passes, one frame](https://www.designlounge.live/p/stage-passes-compare) (stage-passes-compare) — 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 styles:paper,editorial,minimal motion:subtle source:stripe brief:https://www.designlounge.live/p/stage-passes-compare.md demo:https://www.designlounge.live/demo/stage-passes-compare.html
- [Three-step phone sign-up](https://www.designlounge.live/p/phone-sign-up-steps) (phone-sign-up-steps) — 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 styles:soft,material,organic motion:subtle source:igloo brief:https://www.designlounge.live/p/phone-sign-up-steps.md demo:https://www.designlounge.live/demo/phone-sign-up-steps.html
- [Tilted stat card stack](https://www.designlounge.live/p/stats-tilted-card-stack) (stats-tilted-card-stack) — 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 styles:playful,soft motion:rich source:mindmarket brief:https://www.designlounge.live/p/stats-tilted-card-stack.md demo:https://www.designlounge.live/demo/stats-tilted-card-stack.html
- [Time field](https://www.designlounge.live/p/time-field) (time-field) — 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 styles:minimal,industrial motion:none source:usearticle brief:https://www.designlounge.live/p/time-field.md demo:https://www.designlounge.live/demo/time-field.html
- [Token field](https://www.designlounge.live/p/token-field) (token-field) — 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 styles:minimal,industrial motion:none source:mindmarket brief:https://www.designlounge.live/p/token-field.md demo:https://www.designlounge.live/demo/token-field.html
- [Tomato pomodoro timer widget](https://www.designlounge.live/p/widget-pomodoro) (widget-pomodoro) — 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 styles:playful,soft motion:subtle source:stripe brief:https://www.designlounge.live/p/widget-pomodoro.md demo:https://www.designlounge.live/demo/widget-pomodoro.html
- [Tooltip](https://www.designlounge.live/p/tooltip) (tooltip) — 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 styles:minimal,industrial motion:none source:linear brief:https://www.designlounge.live/p/tooltip.md demo:https://www.designlounge.live/demo/tooltip.html
- [Trail type](https://www.designlounge.live/p/trail-type) (trail-type) — HOLD is an outline. Drag it and up to eight outlines stay behind. Release clears them. platform:web type:animation category:text-motion styles:dark,kinetic motion:subtle source:wickret brief:https://www.designlounge.live/p/trail-type.md demo:https://www.designlounge.live/demo/trail-type.html
- [Transactions ledger](https://www.designlounge.live/p/table-transactions-ledger) (table-transactions-ledger) — 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 styles:editorial,minimal motion:subtle source:60fps brief:https://www.designlounge.live/p/table-transactions-ledger.md demo:https://www.designlounge.live/demo/table-transactions-ledger.html
- [Tree](https://www.designlounge.live/p/tree-nav) (tree-nav) — 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 styles:minimal,industrial motion:none source:tailwind brief:https://www.designlounge.live/p/tree-nav.md demo:https://www.designlounge.live/demo/tree-nav.html
- [Underline OTP input](https://www.designlounge.live/p/input-otp-underline) (input-otp-underline) — 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 styles:luxe,editorial,dark motion:subtle source:linear brief:https://www.designlounge.live/p/input-otp-underline.md demo:https://www.designlounge.live/demo/input-otp-underline.html
- [Undo toast](https://www.designlounge.live/p/undo-toast) (undo-toast) — Archiving a yard note raises a dark toast with Undo. It leaves after six seconds unless undone. platform:web type:component category:feedback styles:minimal,dark motion:subtle source:60fps brief:https://www.designlounge.live/p/undo-toast.md demo:https://www.designlounge.live/demo/undo-toast.html
- [Usage pricing slider](https://www.designlounge.live/p/pricing-usage-slider) (pricing-usage-slider) — 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 styles:swiss,minimal motion:subtle source:abel brief:https://www.designlounge.live/p/pricing-usage-slider.md demo:https://www.designlounge.live/demo/pricing-usage-slider.html
- [Vertical label service columns](https://www.designlounge.live/p/features-vertical-label-columns) (features-vertical-label-columns) — 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 styles:swiss,minimal,editorial motion:subtle source:moremedia brief:https://www.designlounge.live/p/features-vertical-label-columns.md demo:https://www.designlounge.live/demo/features-vertical-label-columns.html
- [Vertical rail navbar](https://www.designlounge.live/p/navbar-vertical-rail) (navbar-vertical-rail) — 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 styles:brutalist,riso motion:subtle source:lamalama brief:https://www.designlounge.live/p/navbar-vertical-rail.md demo:https://www.designlounge.live/demo/navbar-vertical-rail.html
- [Vinyl now-playing widget](https://www.designlounge.live/p/widget-now-playing) (widget-now-playing) — 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 styles:retro,playful motion:subtle source:icm brief:https://www.designlounge.live/p/widget-now-playing.md demo:https://www.designlounge.live/demo/widget-now-playing.html
- [Wallet card stack](https://www.designlounge.live/p/phone-wallet-cards) (phone-wallet-cards) — 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 styles:luxe,dark,minimal motion:rich source:abel brief:https://www.designlounge.live/p/phone-wallet-cards.md demo:https://www.designlounge.live/demo/phone-wallet-cards.html
- [Watch crown mockup](https://www.designlounge.live/p/mockup-watch-faces) (mockup-watch-faces) — 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 styles:dark,industrial,kinetic motion:rich source:usearticle brief:https://www.designlounge.live/p/mockup-watch-faces.md demo:https://www.designlounge.live/demo/mockup-watch-faces.html
- [Weather glance widget, three sizes](https://www.designlounge.live/p/widget-weather-glance) (widget-weather-glance) — 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 styles:glass,soft motion:rich source:mindmarket brief:https://www.designlounge.live/p/widget-weather-glance.md demo:https://www.designlounge.live/demo/widget-weather-glance.html
- [WebGL shader hero](https://www.designlounge.live/p/webgl-shader-hero) (webgl-shader-hero) — 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 styles:dark,minimal motion:rich source:lamalama brief:https://www.designlounge.live/p/webgl-shader-hero.md demo:https://www.designlounge.live/demo/webgl-shader-hero.html
- [Week schedule](https://www.designlounge.live/p/week-schedule) (week-schedule) — 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 styles:editorial,paper motion:none source:icm brief:https://www.designlounge.live/p/week-schedule.md demo:https://www.designlounge.live/demo/week-schedule.html
- [Weekly bar chart](https://www.designlounge.live/p/chart-bar-week) (chart-bar-week) — 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 styles:minimal,industrial motion:subtle source:linear brief:https://www.designlounge.live/p/chart-bar-week.md demo:https://www.designlounge.live/demo/chart-bar-week.html
- [Whiteboard tool dock](https://www.designlounge.live/p/dock-editor-tools) (dock-editor-tools) — 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 styles:playful,paper,brutalist motion:subtle source:60fps brief:https://www.designlounge.live/p/dock-editor-tools.md demo:https://www.designlounge.live/demo/dock-editor-tools.html
- [Winding ribbon scroll story](https://www.designlounge.live/p/winding-ribbon-scroll-story) (winding-ribbon-scroll-story) — 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 styles:playful,organic motion:rich source:mindmarket brief:https://www.designlounge.live/p/winding-ribbon-scroll-story.md demo:https://www.designlounge.live/demo/winding-ribbon-scroll-story.html
- [Word-bank lesson card](https://www.designlounge.live/p/phone-lesson-quiz) (phone-lesson-quiz) — 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 styles:playful,clay motion:rich source:60fps brief:https://www.designlounge.live/p/phone-lesson-quiz.md demo:https://www.designlounge.live/demo/phone-lesson-quiz.html
- [Workspace setup with live preview](https://www.designlounge.live/p/onboarding-workspace-setup) (onboarding-workspace-setup) — 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 styles:bauhaus,minimal motion:subtle source:60fps brief:https://www.designlounge.live/p/onboarding-workspace-setup.md demo:https://www.designlounge.live/demo/onboarding-workspace-setup.html
- [World clocks meeting planner](https://www.designlounge.live/p/widget-world-clocks) (widget-world-clocks) — 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 styles:swiss,minimal motion:subtle source:usearticle brief:https://www.designlounge.live/p/widget-world-clocks.md demo:https://www.designlounge.live/demo/widget-world-clocks.html
- [Bramble parlour lobby](https://www.designlounge.live/p/game-lobby) (game-lobby) — 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 styles:editorial,soft motion:subtle source:icm brief:https://www.designlounge.live/p/game-lobby.md demo:https://www.designlounge.live/demo/game-lobby.html
- [Callouts on a review still](https://www.designlounge.live/p/shot-callout-pins) (shot-callout-pins) — 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 styles:editorial,minimal motion:subtle source:abel brief:https://www.designlounge.live/p/shot-callout-pins.md demo:https://www.designlounge.live/demo/shot-callout-pins.html
- [Chitthi code entry](https://www.designlounge.live/p/phone-code-entry) (phone-code-entry) — 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 styles:editorial,minimal motion:subtle source:igloo brief:https://www.designlounge.live/p/phone-code-entry.md demo:https://www.designlounge.live/demo/phone-code-entry.html
- [Coffer drawer lock](https://www.designlounge.live/p/phone-app-lock) (phone-app-lock) — 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 styles:luxe,dark motion:subtle source:igloo brief:https://www.designlounge.live/p/phone-app-lock.md demo:https://www.designlounge.live/demo/phone-app-lock.html
- [Delete account with a 30-day undo](https://www.designlounge.live/p/phone-delete-account) (phone-delete-account) — 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 styles:dark,minimal motion:subtle source:dontboardme brief:https://www.designlounge.live/p/phone-delete-account.md demo:https://www.designlounge.live/demo/phone-delete-account.html
- [Duskwell mission HUD](https://www.designlounge.live/p/game-hud) (game-hud) — 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 styles:cyber,dark motion:subtle source:tailwind brief:https://www.designlounge.live/p/game-hud.md demo:https://www.designlounge.live/demo/game-hud.html
- [Edit profile with live username check](https://www.designlounge.live/p/phone-account-edit) (phone-account-edit) — 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 styles:paper,minimal motion:subtle source:mwdt brief:https://www.designlounge.live/p/phone-account-edit.md demo:https://www.designlounge.live/demo/phone-account-edit.html
- [Full-bleed photo viewer](https://www.designlounge.live/p/phone-photo-viewer) (phone-photo-viewer) — 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 styles:dark,editorial motion:subtle source:dragone brief:https://www.designlounge.live/p/phone-photo-viewer.md demo:https://www.designlounge.live/demo/phone-photo-viewer.html
- [Handwritten homepage](https://www.designlounge.live/p/handwritten-homepage) (handwritten-homepage) — 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 styles:paper motion:subtle source:linear brief:https://www.designlounge.live/p/handwritten-homepage.md demo:https://www.designlounge.live/demo/handwritten-homepage.html
- [Handwritten night letter](https://www.designlounge.live/p/handwritten-letter) (handwritten-letter) — 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 styles:paper,editorial motion:subtle source:mendo brief:https://www.designlounge.live/p/handwritten-letter.md demo:https://www.designlounge.live/demo/handwritten-letter.html
- [Large text layout rules](https://www.designlounge.live/p/phone-large-text-layout) (phone-large-text-layout) — 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 styles:dark,minimal motion:none source:tailwind brief:https://www.designlounge.live/p/phone-large-text-layout.md demo:https://www.designlounge.live/demo/phone-large-text-layout.html
- [Letter hand kit](https://www.designlounge.live/p/handwritten-style) (handwritten-style) — 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 styles:paper motion:subtle source:tailwind brief:https://www.designlounge.live/p/handwritten-style.md demo:https://www.designlounge.live/demo/handwritten-style.html
- [Linnet pairs table](https://www.designlounge.live/p/game-card-table) (game-card-table) — 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 styles:organic,soft motion:subtle source:dragone brief:https://www.designlounge.live/p/game-card-table.md demo:https://www.designlounge.live/demo/game-card-table.html
- [Lit study on a quiet stage](https://www.designlounge.live/p/three-orbit-object) (three-orbit-object) — 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 styles:dark,minimal motion:rich source:icm brief:https://www.designlounge.live/p/three-orbit-object.md demo:https://www.designlounge.live/demo/three-orbit-object.html
- [Live cursors on a board](https://www.designlounge.live/p/live-cursors-board) (live-cursors-board) — 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 styles:editorial,paper motion:rich source:noomo brief:https://www.designlounge.live/p/live-cursors-board.md demo:https://www.designlounge.live/demo/live-cursors-board.html
- [Look around a small room](https://www.designlounge.live/p/three-room-look) (three-room-look) — 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 styles:editorial,soft motion:subtle source:stripe brief:https://www.designlounge.live/p/three-room-look.md demo:https://www.designlounge.live/demo/three-room-look.html
- [M3 basic and destructive dialogs](https://www.designlounge.live/p/m3-dialog) (m3-dialog) — 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 styles:material,editorial motion:subtle source:abel brief:https://www.designlounge.live/p/m3-dialog.md demo:https://www.designlounge.live/demo/m3-dialog.html
- [M3 collapsing large top app bar](https://www.designlounge.live/p/m3-top-app-bar-scroll) (m3-top-app-bar-scroll) — 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 styles:material,soft motion:rich source:mindmarket brief:https://www.designlounge.live/p/m3-top-app-bar-scroll.md demo:https://www.designlounge.live/demo/m3-top-app-bar-scroll.html
- [M3 list to detail with predictive back](https://www.designlounge.live/p/m3-list-detail) (m3-list-detail) — 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 styles:material,soft motion:rich source:60fps brief:https://www.designlounge.live/p/m3-list-detail.md demo:https://www.designlounge.live/demo/m3-list-detail.html
- [M3 modal bottom sheet with predictive back](https://www.designlounge.live/p/m3-modal-bottom-sheet) (m3-modal-bottom-sheet) — 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 styles:material,dark,organic motion:rich source:mwdt brief:https://www.designlounge.live/p/m3-modal-bottom-sheet.md demo:https://www.designlounge.live/demo/m3-modal-bottom-sheet.html
- [M3 search results](https://www.designlounge.live/p/m3-search-results) (m3-search-results) — 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 styles:material,organic motion:subtle source:tailwind brief:https://www.designlounge.live/p/m3-search-results.md demo:https://www.designlounge.live/demo/m3-search-results.html
- [M3 settings list](https://www.designlounge.live/p/m3-settings-list) (m3-settings-list) — 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 styles:material,minimal motion:subtle source:linear brief:https://www.designlounge.live/p/m3-settings-list.md demo:https://www.designlounge.live/demo/m3-settings-list.html
- [M3 sign-in with passkey](https://www.designlounge.live/p/m3-sign-in) (m3-sign-in) — 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 styles:material,soft motion:subtle source:igloo brief:https://www.designlounge.live/p/m3-sign-in.md demo:https://www.designlounge.live/demo/m3-sign-in.html
- [M3 snackbar with undo](https://www.designlounge.live/p/m3-snackbar) (m3-snackbar) — 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 styles:material,dark motion:subtle source:60fps brief:https://www.designlounge.live/p/m3-snackbar.md demo:https://www.designlounge.live/demo/m3-snackbar.html
- [Mallow Court brick rally](https://www.designlounge.live/p/game-playfield) (game-playfield) — 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 styles:playful,soft motion:rich source:bermawy brief:https://www.designlounge.live/p/game-playfield.md demo:https://www.designlounge.live/demo/game-playfield.html
- [Manage subscription, honest cancel](https://www.designlounge.live/p/phone-subscription-manage) (phone-subscription-manage) — 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 styles:editorial,minimal motion:subtle source:moremedia brief:https://www.designlounge.live/p/phone-subscription-manage.md demo:https://www.designlounge.live/demo/phone-subscription-manage.html
- [New note composer](https://www.designlounge.live/p/phone-composer) (phone-composer) — 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 styles:paper,editorial motion:subtle source:igloo brief:https://www.designlounge.live/p/phone-composer.md demo:https://www.designlounge.live/demo/phone-composer.html
- [Pebbleline attract screen](https://www.designlounge.live/p/game-title-screen) (game-title-screen) — 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 styles:pixel,retro motion:subtle source:haunted brief:https://www.designlounge.live/p/game-title-screen.md demo:https://www.designlounge.live/demo/game-title-screen.html
- [Phone checkout](https://www.designlounge.live/p/phone-checkout) (phone-checkout) — 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 styles:minimal,swiss motion:subtle source:abel brief:https://www.designlounge.live/p/phone-checkout.md demo:https://www.designlounge.live/demo/phone-checkout.html
- [Phone notification settings](https://www.designlounge.live/p/phone-notification-settings) (phone-notification-settings) — 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 styles:minimal,organic motion:subtle source:stripe brief:https://www.designlounge.live/p/phone-notification-settings.md demo:https://www.designlounge.live/demo/phone-notification-settings.html
- [Phone past orders](https://www.designlounge.live/p/phone-orders) (phone-orders) — 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 styles:paper,editorial motion:subtle source:abel brief:https://www.designlounge.live/p/phone-orders.md demo:https://www.designlounge.live/demo/phone-orders.html
- [Phone privacy and data](https://www.designlounge.live/p/phone-privacy-data) (phone-privacy-data) — 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 styles:dark,editorial,minimal motion:subtle source:mendo brief:https://www.designlounge.live/p/phone-privacy-data.md demo:https://www.designlounge.live/demo/phone-privacy-data.html
- [Phone rating prompt](https://www.designlounge.live/p/phone-rating-prompt) (phone-rating-prompt) — 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 styles:soft,playful,paper motion:subtle source:60fps brief:https://www.designlounge.live/p/phone-rating-prompt.md demo:https://www.designlounge.live/demo/phone-rating-prompt.html
- [Phone shopping bag](https://www.designlounge.live/p/phone-cart) (phone-cart) — 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 styles:editorial,soft motion:subtle source:abel brief:https://www.designlounge.live/p/phone-cart.md demo:https://www.designlounge.live/demo/phone-cart.html
- [Quern score ladder](https://www.designlounge.live/p/game-leaderboard) (game-leaderboard) — 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 styles:swiss,minimal motion:subtle source:60fps brief:https://www.designlounge.live/p/game-leaderboard.md demo:https://www.designlounge.live/demo/game-leaderboard.html
- [Rolling label row](https://www.designlounge.live/p/label-roll-button) (label-roll-button) — 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 styles:editorial,kinetic motion:rich source:wickret brief:https://www.designlounge.live/p/label-roll-button.md demo:https://www.designlounge.live/demo/label-roll-button.html
- [Scroll past three path models](https://www.designlounge.live/p/three-scroll-world) (three-scroll-world) — 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 styles:editorial,organic motion:rich source:susan brief:https://www.designlounge.live/p/three-scroll-world.md demo:https://www.designlounge.live/demo/three-scroll-world.html
- [Scrub a firing curve](https://www.designlounge.live/p/chart-scrub-readout) (chart-scrub-readout) — 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 styles:dark,industrial motion:subtle source:mwdt brief:https://www.designlounge.live/p/chart-scrub-readout.md demo:https://www.designlounge.live/demo/chart-scrub-readout.html
- [Skeleton list swap](https://www.designlounge.live/p/phone-skeleton-list) (phone-skeleton-list) — 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 styles:minimal,soft motion:subtle source:60fps brief:https://www.designlounge.live/p/phone-skeleton-list.md demo:https://www.designlounge.live/demo/phone-skeleton-list.html
- [Solander password reset](https://www.designlounge.live/p/phone-forgot-password) (phone-forgot-password) — 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 styles:paper,organic motion:subtle source:igloo brief:https://www.designlounge.live/p/phone-forgot-password.md demo:https://www.designlounge.live/demo/phone-forgot-password.html

## Categories
- Hero sections (/c/hero): The first 800 pixels. Headlines, entrances, the promise.
- Nav bars & menus (/c/navbar): Top bars, mega menus, full-screen mobile menus.
- Footers (/c/footer): Where the page signs off: sitemaps, wordmarks, last calls.
- Feature sections (/c/features): Grids, tabs, sticky steps. How a product explains itself.
- Pricing (/c/pricing): Plans, toggles, comparison tables, usage sliders.
- Testimonials (/c/testimonials): Quotes, walls of love, proof that people use it.
- FAQ (/c/faq): Accordions and answer pages people actually read.
- Calls to action (/c/cta): Banners and closers that ask once, clearly.
- Contact (/c/contact): Forms, booking, studio cards, the big email address.
- Logo clouds (/c/logos): Customer walls and marquees that stay quiet.
- Stats & numbers (/c/stats): Counters, bands and figures that roll into place.
- Team (/c/team): People grids, bios, hover reveals.
- Newsletter (/c/newsletter): Sign-ups with a reason to subscribe.
- Blog & editorial (/c/blog): Indexes, magazine grids, changelogs.
- Galleries (/c/gallery): Masonry, horizontal rails, lightboxes.
- Portfolio sites (/c/portfolio): Personal sites for designers, developers, photographers and studios.
- Landing pages (/c/landing): Full pages, top to bottom, for products and launches.
- Sign in & auth (/c/auth): Sign-in, magic links, passkeys, verification.
- Commerce (/c/ecommerce): Product pages, carts, checkout, filters.
- Dashboards (/c/dashboard): Overviews, KPIs, boards, home screens.
- Onboarding (/c/onboarding): First-run carousels, checklists, permission asks.
- Settings (/c/settings): Preferences and account pages done properly.
- Profiles (/c/profile): Accounts, cards, people.
- Messaging & mail (/c/messaging): Chat threads, inboxes, comments.
- Media & players (/c/media): Music, video, stories, podcasts.
- Reading & docs (/c/reading): Articles, readers, documentation.
- Errors & 404s (/c/error): The pages nobody plans for, planned.
- Tools & utilities (/c/utility): Editors, palettes, calculators, trackers.
- Navigation (/c/navigation): Sidebars, tabs, rails, palettes, breadcrumbs.
- Buttons & toggles (/c/buttons): Every way to press something.
- Inputs & forms (/c/inputs): Fields, validation, steppers, uploads.
- Cards (/c/cards): Tilting, flipping, stacking, expanding.
- Overlays (/c/overlays): Sheets, dialogs, popovers, context menus.
- Feedback & status (/c/feedback): Toasts, banners, empty states, alerts.
- Data display (/c/data): Tables, lists, timelines.
- Pickers (/c/pickers): Dates, colours, ranges, options.
- Charts (/c/charts): Lines, bars, donuts, heatmaps with real interaction.
- Widgets (/c/widgets): Clocks, rings, timers, tiles. Small live faces of a bigger app.
- Social cards (/c/social): Posts, profiles and repo cards in the shape people already know.
- Device mockups (/c/mockups): Phones, laptops, watches and browsers to present work in.
- Text animation (/c/text-motion): Reveals, scrambles, marquees, variable type.
- Scroll effects (/c/scroll): Scroll as the timeline: stacks, pins, reveals.
- Cursor & hover (/c/cursor): Things that answer the pointer.
- Transitions (/c/transitions): Page, view and shared-element moves.
- Loaders & skeletons (/c/loaders): Waiting, made honest.
- Micro-interactions (/c/micro): Likes, toggles, swipes. One small moment each.
- Backgrounds (/c/backgrounds): Generative grids, lines and textures behind content.
- Design languages (/c/design-language): Complete visual dialects shown as a kit.

## Rooms
- Screens (/rooms/screen): Whole pages and app screens, composed end to end.
- Sections (/rooms/section): Heroes, footers, pricing, contact, testimonials. The blocks a website is assembled from.
- Components (/rooms/component): Sidebars, menus, tables, pickers, sheets. The parts you bolt on.
- Animations (/rooms/animation): Loaders, transitions, reveals, morphs. Motion with a reason.
- Layouts (/rooms/layout): Grids, splits, shells, boards. How a page is carved up.
- Patterns (/rooms/pattern): Empty states, validation, install prompts, checklists. Product behaviour done right.
- Styles (/rooms/style): Whole design languages shown as a kit: type, colour, surfaces, controls.

## Styles
- Editorial (/styles/editorial): Serif headlines, generous measure, magazine rhythm.
- Swiss (/styles/swiss): Grids you can see, grotesk type, one red.
- Brutalist (/styles/brutalist): Raw structure, hard edges, no decoration.
- Glass (/styles/glass): Translucent, blurred surfaces that float over content.
- Material (/styles/material): Tonal surfaces, bold shapes, emphasized motion.
- Minimal (/styles/minimal): Only what is needed, spaced deliberately.
- Playful (/styles/playful): Bounce, colour, character. Still disciplined.
- Retro (/styles/retro): Borrowed from another decade, executed cleanly.
- Terminal (/styles/terminal): Monospace, character grids, the command line as UI.
- Paper (/styles/paper): Warm off-whites, ink, texture, print references.
- Luxe (/styles/luxe): High-contrast serifs, hairlines, restraint as luxury.
- Dark (/styles/dark): Near-black surfaces with careful contrast.
- Soft (/styles/soft): Rounded, low-contrast, tonal and gentle.
- Industrial (/styles/industrial): Utility-first, dense, engineered.
- Kinetic (/styles/kinetic): Type and layout in motion.
- Bauhaus (/styles/bauhaus): Primary colours, circles, squares, triangles. Form follows function.
- Y2K (/styles/y2k): Chrome, bevels, bubble type and millennium optimism.
- Cyber (/styles/cyber): HUD overlays, scanlines, signal colours on black.
- Organic (/styles/organic): Earth tones, soft irregular shapes, botanical calm.
- Risograph (/styles/riso): Two-ink overprints, grain, misregistration on purpose.
- Art Deco (/styles/deco): Gold hairlines, symmetry, stepped geometry, 1920s glamour.
- Pixel (/styles/pixel): Bitmap type, hard pixels, arcade palettes.
- Clay (/styles/clay): Puffy, tactile surfaces with soft inner light.

## Author
Susan Acharya — Product lead, designer and builder, Kathmandu. https://acharyasusan.com.np · iamsusanacharya@gmail.com
Portfolio: https://acharyasusan.com.np · Dribbble: https://dribbble.com/SusanAcharya · GitHub: https://github.com/SusanAcharya · LinkedIn: https://www.linkedin.com/in/AcharyaSusan · X: https://x.com/n00dlehead