{
 "about": "AgentGid live templates: live sites built from open data, with design tokens, licenses and a prompt to rebuild each one.",
 "examples": [
  {
   "slug": "quake-watch",
   "title": "Quake Watch",
   "kind": "Live data dashboard",
   "tags": [
    "Dashboard",
    "Map",
    "Dark",
    "Live data"
   ],
   "summary": "A dark, glassy dashboard that plots every magnitude 2.5+ earthquake of the last 24 hours on a world map.",
   "about": [
    "Quake Watch reads the public USGS summary feed in the browser and turns it into a control-room screen: a hero with three live counters, a world map where each quake drops in as a glowing dot sized by magnitude, and a list that links every event to its USGS page.",
    "The map is plain inline SVG: a Natural Earth land outline, a graticule and one circle per quake, placed with a simple equirectangular projection. No map library, no tiles, no API key. The whole page is one HTML file of vanilla JavaScript."
   ],
   "card_url": "https://agentgid.com/templates/quake-watch/",
   "live_url": "https://agentgid.com/templates/quake-watch/live/",
   "screenshot": "https://agentgid.com/templates/quake-watch/shot.jpg",
   "screenshot_phone": "https://agentgid.com/templates/quake-watch/shot-phone.jpg",
   "sections": [
    "Hero with a static feed status line, gradient headline and three stat cards",
    "World map with pulsing quake dots and a hover tooltip",
    "Segmented magnitude filter (all, 4+, 5+)",
    "Event list with magnitude chips, depth, coordinates and time ago"
   ],
   "effects": [
    "Numbers count up with an ease-out curve",
    "Dots scale in one after another, rings pulse by magnitude",
    "Sliding pill under the active filter",
    "List rows rise into view on scroll",
    "Skeleton shimmer while the feed loads",
    "Everything calms down under prefers-reduced-motion"
   ],
   "palette": [
    {
     "name": "Night",
     "hex": "#07090d"
    },
    {
     "name": "Ink",
     "hex": "#eef2f6"
    },
    {
     "name": "Muted",
     "hex": "#8592a0"
    },
    {
     "name": "Minor",
     "hex": "#39c6ff"
    },
    {
     "name": "Moderate",
     "hex": "#ffb020"
    },
    {
     "name": "Strong",
     "hex": "#ff4d2e"
    }
   ],
   "fonts": [
    {
     "family": "Space Grotesk",
     "use": "Headings and text",
     "license": "SIL Open Font License"
    },
    {
     "family": "JetBrains Mono",
     "use": "Numbers and badges",
     "license": "SIL Open Font License"
    }
   ],
   "stack": "One HTML file with inline CSS and vanilla JavaScript. No build step, no framework, no API keys.",
   "data_sources": [
    {
     "name": "USGS earthquake GeoJSON feed",
     "url": "https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php",
     "terms": "Public domain, credit the U.S. Geological Survey"
    },
    {
     "name": "Natural Earth 1:110m land",
     "url": "https://www.naturalearthdata.com/",
     "terms": "Public domain"
    }
   ],
   "photos": [
    {
     "photo": "hero",
     "author": "ignartonosbg",
     "author_url": "https://pixabay.com/users/ignartonosbg-21428489/",
     "page_url": "https://pixabay.com/photos/mountain-dawn-clouds-light-sky-10357205/",
     "license": "Pixabay Content License"
    }
   ],
   "design_md_url": "https://agentgid.com/templates/quake-watch/DESIGN.md",
   "design_md": "# Quake Watch — DESIGN.md\n\nDark control-room dashboard for live event data on a map. Family: data-dense, dark.\n\n## 1. Visual theme and atmosphere\n\nA night-shift operations screen. Calm dark surfaces, one warm accent, and color that only ever means something: the magnitude of a quake. Mood: alert, precise, quiet until something happens.\n\n## 2. Color palette and roles\n\n```\n--bg:      #07090d   /* page */\n--panel:   rgba(18, 24, 33, .72)   /* glass panels over the page */\n--line:    rgba(255, 255, 255, .08)\n--ink:     #eef2f6\n--mute:    #8592a0\n--m2:      #39c6ff   /* data: magnitude 2.5–4 */\n--m4:      #ffb020   /* data: magnitude 4–5, also the headline accent end */\n--m5:      #ff4d2e   /* data: magnitude 5+, the one action accent */\n```\n\nRule: the three magnitude colors are a data scale, not decoration. The only chromatic action color is the coral of the primary button (`#ff7a5c` to `#ffd1c4`, same hue as `--m5`). No teal, no purple.\n\n## 3. Typography\n\n- Headline and text: **Space Grotesk** 400/500/700. Headline `clamp(44px, 7vw, 84px)`, line-height 0.95, tracking −0.03em.\n- Numbers, badges, times: **JetBrains Mono** 500/700, tabular.\n- Second headline line takes a `--m5` to `--m4` gradient; nothing else uses gradient text.\n\n## 4. Components\n\n- **Status line:** small square glyph in `--m5` plus text \"USGS feed · updated HH:MM\". Static, never animated.\n- **Stat card:** `--panel`, 1px `--line`, radius 18px, mono number 30px over a 13px label. Three in a row, also on phones.\n- **Primary button:** coral gradient, dark text, radius 14px. **Ghost button:** transparent, 1px `--line`.\n- **Map:** inline SVG, equirectangular, Natural Earth land in a low-contrast fill, faint graticule. One circle per event: radius from magnitude, fill from the data scale.\n- **Segmented filter:** three options in a pill track; a sliding thumb marks the active one.\n- **Event row:** magnitude chip (mono, data color), place, depth and coordinates, time ago, arrow. The whole row links to the USGS event page.\n\n## 5. Layout\n\n- Max width 1160px, 20px gutter. Order: hero, map card, filter + list.\n- Radii: 28px hero, 24px cards, 18px rows and stats, 14px buttons.\n- Phones: stats stay three across (smaller numbers), time and arrow hide in rows.\n\n## 6. Depth\n\nGlass panels with a 1px light border and one deep soft shadow (`0 20px 60px -20px rgba(0,0,0,.8)`). No stacked shadows, no card inside a card beyond the stat tiles in the hero.\n\n## 7. Motion\n\n- Counters count up once (900 ms, ease-out cubic): they state the result.\n- Event dots scale in one after another; a ring pulses on each dot. The pulse encodes \"this is an event\", not decoration.\n- List rows rise into view once. Skeleton shimmer only while the feed loads.\n- `prefers-reduced-motion`: everything is shown at its end state, counters print the final number.\n\n## 8. Do and don't\n\nDo: keep color for data; say where the data came from and when it was updated; link every event to its source.\nDon't: animated \"live\" dots, a second accent, three-column feature grids, decorative gradients on panels.\n\n## 9. Agent prompt guide\n\nBias: dark, data-first, one warm accent, mono numbers, map as the hero's proof.\nReject: neon teal, purple gradients, blinking status, illustrations, marketing copy in place of numbers.\n\n## Data and credits\n\nUSGS earthquake GeoJSON feed (public domain, credit the U.S. Geological Survey). Natural Earth 1:110m land (public domain). Hero photo from Pixabay, file kept with the page, author credited. Code MIT-0.\n",
   "catalog": [
    [
     "pixabay",
     "Pixabay",
     "Hero photo, downloaded and credited"
    ],
    [
     "google-fonts",
     "Google Fonts",
     "Space Grotesk and JetBrains Mono"
    ]
   ],
   "code_license": "MIT-0",
   "good_reference_for": [
    "Monitoring and status dashboards",
    "Any app that puts events on a map",
    "Dark data-heavy landing pages"
   ],
   "prompt": "Build a single-file dark dashboard (HTML, CSS, vanilla JS, no build step) that loads the USGS 'all magnitude 2.5+ past day' GeoJSON feed. Top: glass hero card over a photo with a static status line (a small square glyph and the feed's update time, no animated dot), a two-line headline with an orange-to-amber gradient on the second line, and three stat cards (count, strongest, deepest) whose numbers count up. Below: an inline SVG world map (equirectangular, Natural Earth land path, faint graticule) with one dot per quake, colored by magnitude (cyan under 4, amber 4-5, red 5+), radius by magnitude, a pulsing ring and a hover tooltip; clicking opens the USGS event page. Then a segmented filter (All / 4+ / 5+) with a sliding pill and a list of events with magnitude chips that reveal on scroll. Fonts: Space Grotesk and JetBrains Mono. Respect prefers-reduced-motion. Credit USGS and Natural Earth in the footer."
  },
  {
   "slug": "skyline-weather",
   "title": "Skyline Weather",
   "kind": "Weather app",
   "tags": [
    "App",
    "Glassmorphism",
    "Light + dark",
    "Live data"
   ],
   "summary": "A glassmorphism weather app whose background photo, colors and falling rain or snow follow the real sky over the city.",
   "about": [
    "Type a city and Skyline Weather geocodes it, pulls the current conditions, a 24-hour curve and a 7-day outlook from Open-Meteo, and then restyles itself: a clear, cloudy, rainy or night photo crossfades in, the glass panels switch between light and dark, and a canvas draws rain or snow when the weather code calls for it.",
    "It is a small study in state-driven theming. One body class flips a set of CSS variables, so every panel, label and chart follows the time of day without a second stylesheet. The chart is hand-drawn SVG with a gradient fill and a line that draws itself in."
   ],
   "card_url": "https://agentgid.com/templates/skyline-weather/",
   "live_url": "https://agentgid.com/templates/skyline-weather/live/",
   "screenshot": "https://agentgid.com/templates/skyline-weather/shot.jpg",
   "screenshot_phone": "https://agentgid.com/templates/skyline-weather/shot-phone.jpg",
   "sections": [
    "Search bar with quick city chips",
    "Current conditions: big temperature, condition, four fact tiles",
    "24-hour temperature chart",
    "7-day outlook with temperature range bars"
   ],
   "effects": [
    "Background photo crossfades by weather and day or night",
    "Rain and snow particles on a canvas",
    "Chart line draws in, area fades in",
    "Day cards rise one after another",
    "Light and dark glass themes from one set of CSS variables"
   ],
   "palette": [
    {
     "name": "Day ink",
     "hex": "#0c1424"
    },
    {
     "name": "Night ink",
     "hex": "#eef2ff"
    },
    {
     "name": "Accent",
     "hex": "#2563eb"
    },
    {
     "name": "Night accent",
     "hex": "#93c5fd"
    },
    {
     "name": "Warm end",
     "hex": "#f97316"
    }
   ],
   "fonts": [
    {
     "family": "Manrope",
     "use": "Everything, from 13 px labels to the 150 px temperature",
     "license": "SIL Open Font License"
    }
   ],
   "stack": "One HTML file with inline CSS and vanilla JavaScript. No build step, no framework, no API keys.",
   "data_sources": [
    {
     "name": "Open-Meteo Forecast and Geocoding APIs",
     "url": "https://open-meteo.com/",
     "terms": "Data CC BY 4.0; the free API is for non-commercial use, commercial apps need an Open-Meteo plan"
    }
   ],
   "photos": [
    {
     "photo": "clear",
     "author": "SZimmermann_DE",
     "author_url": "https://pixabay.com/users/SZimmermann_DE-6079540/",
     "page_url": "https://pixabay.com/photos/city-building-cityscape-travel-4820579/",
     "license": "Pixabay Content License"
    },
    {
     "photo": "clouds",
     "author": "Michelle-Maria",
     "author_url": "https://pixabay.com/users/Michelle-Maria-165491/",
     "page_url": "https://pixabay.com/photos/trondheim-row-houses-architecture-2074284/",
     "license": "Pixabay Content License"
    },
    {
     "photo": "rain",
     "author": "Pexels",
     "author_url": "https://pixabay.com/users/Pexels-2286921/",
     "page_url": "https://pixabay.com/photos/glass-window-wet-rain-rainy-1845534/",
     "license": "Pixabay Content License"
    },
    {
     "photo": "night",
     "author": "LoboStudioHamburg",
     "author_url": "https://pixabay.com/users/LoboStudioHamburg-13838/",
     "page_url": "https://pixabay.com/photos/tokyo-japan-buildings-city-8650941/",
     "license": "Pixabay Content License"
    }
   ],
   "design_md_url": "https://agentgid.com/templates/skyline-weather/DESIGN.md",
   "design_md": "# Skyline Weather — DESIGN.md\n\nA weather app that restyles itself from live data. Family: glass / soft futurism, light and dark.\n\n## 1. Visual theme and atmosphere\n\nThe sky is the interface. A full-screen photo of the current weather sits behind frosted panels; day turns the panels light, night turns them dark. Glass is deliberate here: it lets the real sky show through. Mood: airy, calm, a little cinematic.\n\n## 2. Color palette and roles\n\n```\n/* day */\n--ink:     #0c1424\n--mute:    #4b5a72\n--glass:   rgba(255,255,255,.55)\n--edge:    rgba(255,255,255,.7)\n--accent:  #2563eb   /* the only action color: button, chart line, icons */\n/* night (body.night redefines the same variables) */\n--ink:     #eef2ff\n--mute:    #aab5d0\n--glass:   rgba(16,24,48,.5)\n--edge:    rgba(255,255,255,.12)\n--accent:  #93c5fd\n```\n\nData scale: the week's temperature range bars run blue → amber → orange (`#60a5fa`, `#fbbf24`, `#f97316`). That gradient means temperature and appears nowhere else.\n\n## 3. Typography\n\nOne family, **Manrope** 300–800. Temperature 150px weight 800, tracking −0.06em, ink fading to transparent at the bottom. Labels 12px uppercase with 0.06em tracking. Body 15px.\n\n## 4. Components\n\n- **Search:** glass bar, Phosphor magnifying glass, solid accent button \"Show the sky\" (a verb, not \"Search\").\n- **City chips:** small glass pills for one-tap cities.\n- **Now card:** pin icon + city as the page's h1, local time, the big temperature, condition with a Phosphor weather icon.\n- **Fact tiles:** four tiles (feels like, wind, humidity, sunset), each with a Phosphor icon.\n- **Hourly chart:** SVG line with an accent gradient fill, labels every 3 hours.\n- **Week:** seven day cards with icon, max, min and a range bar on the shared scale.\n\nIcons: Phosphor only (regular weight), tinted with `--accent`.\n\n## 5. Layout\n\nMax width 1040px. Now card and facts side by side (1.2 : 1), stacked under 760px. Week is 7 columns on desktop, 4 on phones. Radii 26px panels, 18px tiles and buttons.\n\n## 6. Depth\n\n`backdrop-filter: blur(22px) saturate(1.4)`, 1px `--edge` border. Depth comes from blur and the photo, not from shadows. Max nesting: panel > tile.\n\n## 7. Motion\n\n- Photo crossfade (1 s) when the weather or day/night changes: state change.\n- Rain or snow on a canvas only when the weather code says so: state.\n- Chart line draws in once; day cards rise in a short cascade.\n- `prefers-reduced-motion`: no particles, no transitions.\n\n## 8. Do and don't\n\nDo: let one body class switch the whole theme; keep the accent to actions and the chart.\nDon't: a second accent on buttons, emoji icons, glass on glass on glass, generic \"Welcome\" copy.\n\n## 9. Agent prompt guide\n\nBias: photo-led, frosted panels, one blue accent, one font, Phosphor icons.\nReject: purple gradients, mixed icon sets, emoji weather, three-level glass stacks.\n\n## Data and credits\n\nOpen-Meteo forecast and geocoding APIs (data CC BY 4.0; the free API is non-commercial, commercial apps need an Open-Meteo plan). Four sky photos from Pixabay, files kept with the page, authors credited. Phosphor Icons MIT. Code MIT-0.\n",
   "catalog": [
    [
     "pixabay",
     "Pixabay",
     "Four sky photos, downloaded and credited"
    ],
    [
     "google-fonts",
     "Google Fonts",
     "Manrope"
    ],
    [
     "phosphor",
     "Phosphor Icons",
     "Weather and interface icons, MIT"
    ]
   ],
   "code_license": "MIT-0",
   "good_reference_for": [
    "Weather and travel apps",
    "Glassmorphism UI kits",
    "Pages that theme themselves from live data"
   ],
   "prompt": "Build a single-file weather app (HTML, CSS, vanilla JS). Search a city with the Open-Meteo geocoding API, then load current weather, 24 hourly temperatures and a 7-day forecast from the Open-Meteo forecast API. Full-screen background photo chosen by weather (clear, clouds, rain, night) that crossfades between two layers; frosted glass panels (backdrop-filter blur) that switch to a dark variant at night by toggling one body class that redefines CSS variables. Layout: search bar with city chips, a big 150 px temperature card next to four fact tiles (feels like, wind, humidity, sunset), an SVG hourly chart whose line draws itself in, and seven day cards with min-max range bars on a blue-amber-orange gradient. Draw rain or snow on a full-screen canvas when the weather code says so. Icons: Phosphor (MIT), inlined as SVG and tinted with the accent color. Font: Manrope. Credit Open-Meteo (CC BY 4.0) and the photographers."
  },
  {
   "slug": "orbit-gallery",
   "title": "Orbit",
   "kind": "Image gallery",
   "tags": [
    "Gallery",
    "Dark",
    "Masonry",
    "Live data"
   ],
   "summary": "A deep-space image gallery with a twinkling star field, a giant shimmering title and cards that tilt toward the cursor.",
   "about": [
    "Orbit searches NASA's public Image and Video Library and lays the results out as a masonry wall. The hero is a full-height photo under a radial vignette, an oversized wide display title that catches one sweep of light on load, and a pill switcher for nebulae, galaxies, Jupiter and Earth.",
    "Every card leans a few degrees toward the pointer and catches a soft highlight where the cursor is, then opens in a native dialog lightbox with NASA's caption. Items whose metadata mentions a third-party copyright are filtered out before they reach the page."
   ],
   "card_url": "https://agentgid.com/templates/orbit-gallery/",
   "live_url": "https://agentgid.com/templates/orbit-gallery/live/",
   "screenshot": "https://agentgid.com/templates/orbit-gallery/shot.jpg",
   "screenshot_phone": "https://agentgid.com/templates/orbit-gallery/shot-phone.jpg",
   "sections": [
    "Full-height hero with a source label, display title and subject switcher",
    "Masonry grid of NASA images with captions",
    "Lightbox dialog with the larger image and description"
   ],
   "effects": [
    "Canvas star field that twinkles and drifts with scroll",
    "One gradient sweep across the title on load, then still",
    "3D tilt and cursor-following glare on cards",
    "Cards fade up into view on scroll",
    "Lightbox pops in with a short scale"
   ],
   "palette": [
    {
     "name": "Space",
     "hex": "#05060a"
    },
    {
     "name": "Ink",
     "hex": "#f4f1ea"
    },
    {
     "name": "Muted",
     "hex": "#9a9aa8"
    },
    {
     "name": "Violet",
     "hex": "#b388ff"
    },
    {
     "name": "Mist",
     "hex": "#c9c7d4"
    },
    {
     "name": "Card",
     "hex": "#11121a"
    }
   ],
   "fonts": [
    {
     "family": "Syne",
     "use": "Display title and captions",
     "license": "SIL Open Font License"
    },
    {
     "family": "Hanken Grotesk",
     "use": "Text and buttons",
     "license": "SIL Open Font License"
    }
   ],
   "stack": "One HTML file with inline CSS and vanilla JavaScript. No build step, no framework, no API keys.",
   "data_sources": [
    {
     "name": "NASA Image and Video Library API",
     "url": "https://images.nasa.gov/",
     "terms": "NASA material is generally not copyrighted in the US; credit NASA, no endorsement implied"
    }
   ],
   "photos": [
    {
     "photo": "hero",
     "author": "jplenio",
     "author_url": "https://pixabay.com/users/jplenio-7645255/",
     "page_url": "https://pixabay.com/photos/ocean-milky-way-boat-sailing-3605547/",
     "license": "Pixabay Content License"
    }
   ],
   "design_md_url": "https://agentgid.com/templates/orbit-gallery/DESIGN.md",
   "design_md": "# Orbit — DESIGN.md\n\nA deep-space image gallery. Family: cinematic dark.\n\n## 1. Visual theme and atmosphere\n\nA planetarium at night. Near-black space, a single violet light, and the images doing all the talking. The title is huge and wide like a film poster. Mood: wonder, depth, stillness.\n\n## 2. Color palette and roles\n\n```\n--bg:      #05060a   /* space */\n--card:    #11121a\n--ink:     #f4f1ea   /* warm white, not pure white */\n--mist:    #c9c7d4   /* intro text */\n--mute:    #9a9aa8\n--accent:  #b388ff   /* the only accent: source label, title light sweep, hover glow */\n```\n\nRule: one accent. No teal, no pink. Stars are white with a faint violet tint on the largest ones.\n\n## 3. Typography\n\n- Display: **Syne** 800, `clamp(64px, 15vw, 190px)`, line-height 0.85, tracking −0.04em, uppercase single word.\n- Text and buttons: **Hanken Grotesk** 400–600, 15–17px.\n- Captions: Syne 700 15px over a Hanken 13px meta line.\n\n## 4. Components\n\n- **Source label:** small uppercase line \"NASA Image and Video Library\" in violet with a thin violet border. Static text, no \"live\" badge.\n- **Subject switcher:** pill track on a glass strip; active pill is warm white on black with a soft violet glow.\n- **Image card:** radius 18px, caption on a bottom gradient, masonry columns (300px minimum).\n- **Lightbox:** native `<dialog>`, image up to 72vh, title and NASA description below, round close button.\n\n## 5. Layout\n\nHero fills 88vh and centers its content. Grid up to 1280px, 16px gaps, CSS columns for masonry. Phones: one column, title still fills the width.\n\n## 6. Depth\n\nDarkness is the depth. Cards get a violet glow and a 1px violet ring only on hover. The hero photo sits under a radial vignette.\n\n## 7. Motion\n\n- Star field twinkles slowly on a canvas: the one ambient motion, it sets the place.\n- The title takes one light sweep on load, then stays still.\n- Cards tilt up to 4° toward the pointer with a soft glare: feedback for the thing you are about to open.\n- Cards fade up once as they enter; the lightbox pops in with a short scale.\n- `prefers-reduced-motion`: stars drawn once, no tilt, no sweeps.\n\n## 8. Do and don't\n\nDo: let the images be the color; keep chrome thin; caption every image with its NASA center and year.\nDon't: endless shimmer loops, drifting backgrounds, a second accent, \"live\" badges.\n\n## 9. Agent prompt guide\n\nBias: black stage, one violet light, poster-size wide display type, masonry of real images, lightbox.\nReject: purple-to-pink gradients, neon teal, bobbing scroll hints, generative space art.\n\n## Data and credits\n\nNASA Image and Video Library API. NASA material is generally not copyrighted in the US; credit NASA and imply no endorsement; items whose metadata mentions a third-party copyright are filtered out. Hero photo from Pixabay, file kept with the page, author credited. Code MIT-0.\n",
   "catalog": [
    [
     "pixabay",
     "Pixabay",
     "Hero photo, downloaded and credited"
    ],
    [
     "google-fonts",
     "Google Fonts",
     "Syne and Hanken Grotesk"
    ]
   ],
   "code_license": "MIT-0",
   "good_reference_for": [
    "Portfolio and photography sites",
    "Space, science and museum pages",
    "Dark masonry galleries with a lightbox"
   ],
   "prompt": "Build a single-file dark image gallery (HTML, CSS, vanilla JS) on the NASA Image and Video Library search API (media_type=image). Hero: full viewport height, background photo under a radial vignette, a small violet source label, a huge Syne 800 title that takes one white-to-violet light sweep on load, a short intro and a glass pill switcher for four subjects. Behind everything a fixed canvas star field that twinkles. Grid: CSS columns masonry, rounded cards with a caption gradient, cards tilt up to 4 degrees toward the pointer with a radial highlight following the cursor, and fade up on scroll. Clicking opens a native <dialog> lightbox with the larger image, title and description. Skip items whose metadata mentions copyright. Fonts: Syne and Hanken Grotesk. Credit NASA without implying endorsement."
  },
  {
   "slug": "rijks-room",
   "title": "Rijks Room",
   "kind": "Museum collection",
   "tags": [
    "Gallery",
    "Editorial",
    "Light",
    "Live data"
   ],
   "summary": "An editorial museum page that hangs Dutch masters from the Rijksmuseum's open data in gilt frames on a warm paper wall.",
   "about": [
    "Rijks Room walks the Rijksmuseum's Linked Art data: a collection search by painter, then each object, its visual item and its digital object, to reach the IIIF image service. The result is a small room of up to nine paintings per artist, with titles and dates in English.",
    "The look is classic print editorial: a light Fraunces serif with an italic gold accent, a faint paper grain drawn with an SVG noise filter, frames built from CSS gradients and inset shadows, and an underline that glides between painter names. Opening a painting shows it at 1400 px from the museum's IIIF server."
   ],
   "card_url": "https://agentgid.com/templates/rijks-room/",
   "live_url": "https://agentgid.com/templates/rijks-room/live/",
   "screenshot": "https://agentgid.com/templates/rijks-room/shot.jpg",
   "screenshot_phone": "https://agentgid.com/templates/rijks-room/shot-phone.jpg",
   "sections": [
    "Small caps top bar and a two-column editorial header",
    "Wide gallery photo revealed from the center",
    "Painter tabs with a sliding gold underline",
    "Grid of framed paintings with captions",
    "Dark lightbox with the large image and a link to the museum record"
   ],
   "effects": [
    "Headline words rise in one after another",
    "Hero image opens with a clip-path reveal",
    "Frames lift and tilt slightly on hover with a warm spotlight",
    "Underline slides to the active painter",
    "Paintings fade up into view; button fills from below on hover"
   ],
   "palette": [
    {
     "name": "Paper",
     "hex": "#f4efe6"
    },
    {
     "name": "Ink",
     "hex": "#1d1a16"
    },
    {
     "name": "Muted",
     "hex": "#6f665a"
    },
    {
     "name": "Gold",
     "hex": "#a07a2c"
    },
    {
     "name": "Light gold",
     "hex": "#d4ae5a"
    },
    {
     "name": "Wall",
     "hex": "#ece4d5"
    }
   ],
   "fonts": [
    {
     "family": "Fraunces",
     "use": "Headline, painter tabs, titles",
     "license": "SIL Open Font License"
    },
    {
     "family": "Instrument Sans",
     "use": "Body text and labels",
     "license": "SIL Open Font License"
    }
   ],
   "stack": "One HTML file with inline CSS and vanilla JavaScript. No build step, no framework, no API keys.",
   "data_sources": [
    {
     "name": "Rijksmuseum open data (Linked Art + IIIF)",
     "url": "https://data.rijksmuseum.nl/",
     "terms": "Images and data shared openly by the museum; credit the Rijksmuseum"
    }
   ],
   "photos": [
    {
     "photo": "hero",
     "author": "RyanMcGuire",
     "author_url": "https://pixabay.com/users/RyanMcGuire-123690/",
     "page_url": "https://pixabay.com/photos/exhibition-art-gallery-gallery-arts-362163/",
     "license": "Pixabay Content License"
    }
   ],
   "design_md_url": "https://agentgid.com/templates/rijks-room/DESIGN.md",
   "design_md": "# Rijks Room — DESIGN.md\n\nAn editorial museum page. Family: warm editorial, light.\n\n## 1. Visual theme and atmosphere\n\nA printed exhibition catalog on warm paper. Serif display, generous margins, gilt frames, and nothing that looks like software. Mood: unhurried, cultured, tactile.\n\n## 2. Color palette and roles\n\n```\n--bg:     #f4efe6   /* paper */\n--wall:   #ece4d5   /* loading walls, mats */\n--line:   #ddd2bf\n--ink:    #1d1a16\n--mute:   #6f665a\n--gold:   #a07a2c   /* the accent: italic word, active tab underline, links */\n--gold2:  #d4ae5a   /* lighter step of the same gold, for highlights on dark */\n```\n\nFrames are their own material: a CSS gradient through dark and light browns (`#3a2c17` to `#7b5f2e`), not a palette color.\n\n## 3. Typography\n\n- Display and titles: **Fraunces** (variable, optical size 9–144). Headline 300 weight, `clamp(52px, 9vw, 128px)`, tracking −0.035em; one italic word in 600 gold.\n- Painter tabs: Fraunces italic 22px.\n- Body and labels: **Instrument Sans** 400–600, 15px; small caps style labels at 13px with 0.1–0.14em tracking.\n\nSerif headline over sans body is a stated choice of this design.\n\n## 4. Components\n\n- **Top bar:** small caps name left, place right.\n- **Header:** two columns, headline left, intro and an outline button right (\"The full collection →\"). The button fills with ink from below on hover.\n- **Painter tabs:** italic serif words with one gold underline that slides to the active tab.\n- **Framed painting:** 14px gradient frame, ivory mat, inset shadow, 4:5 image; caption in Fraunces 19px with \"painter · date\" below.\n- **Lightbox:** dark warm panel, image left, italic title, meta and a link to the museum record right.\n\n## 5. Layout\n\nMax width 1160px, 24px gutter. Grid of paintings with 250px minimum columns, 44px row gap. Phones: header stacks, hero image 200px tall.\n\n## 6. Depth\n\nFrames carry the only real shadow (one soft drop under each frame). Paper grain is an SVG noise filter at 5% opacity over the whole page.\n\n## 7. Motion\n\n- Headline words rise in once; the hero image opens from the center with a clip-path reveal.\n- Frames lift 8px and tilt −0.4° on hover with a warm light from above: you are about to pick it.\n- Underline slides between painters; paintings fade up once as they enter.\n- `prefers-reduced-motion`: all shown at rest.\n\n## 8. Do and don't\n\nDo: credit the museum on every record; let whitespace do the work; keep gold rare.\nDon't: decorative color rules beside captions, sans-serif display, bright UI colors, rounded \"app\" cards.\n\n## 9. Agent prompt guide\n\nBias: paper, serif, gold, frames, slow reveals, editorial two-column header.\nReject: dark mode by default, gradients on UI, pill-shaped tags, icon-heavy chrome.\n\n## Data and credits\n\nRijksmuseum open data (Linked Art search and IIIF images; the museum shares them openly, credit the Rijksmuseum). Gallery photo from Pixabay, file kept with the page, author credited. Code MIT-0.\n",
   "catalog": [
    [
     "pixabay",
     "Pixabay",
     "Gallery photo, downloaded and credited"
    ],
    [
     "google-fonts",
     "Google Fonts",
     "Fraunces and Instrument Sans"
    ]
   ],
   "code_license": "MIT-0",
   "good_reference_for": [
    "Museum, gallery and auction sites",
    "Editorial and magazine layouts",
    "Any warm, print-like light theme"
   ],
   "prompt": "Build a single-file editorial museum page (HTML, CSS, vanilla JS) on the Rijksmuseum open data API. Fetch https://data.rijksmuseum.nl/search/collection?type=painting&creator=NAME with Accept: application/ld+json, then for each item follow shows -> digitally_shown_by -> access_point to get the IIIF image URL (use /full/600,/ for the grid and /full/1400,/ for the lightbox); take the English title and the date. Style: warm paper background with a subtle SVG noise grain, a light Fraunces display headline with an italic gold word, small caps top bar, a wide gallery photo revealed with clip-path, painter tabs in italic serif with a sliding gold underline, and a grid of paintings in CSS-gradient gilt frames with a white mat that lift on hover. Lightbox: dark native <dialog>. Fonts: Fraunces and Instrument Sans. Credit the Rijksmuseum."
  },
  {
   "slug": "fx-board",
   "title": "FX Board",
   "kind": "Finance tool",
   "tags": [
    "Finance",
    "Cards",
    "Light",
    "Live data"
   ],
   "summary": "A crisp exchange-rate board with a running ticker, a converter whose numbers roll, and cards with 30-day sparklines.",
   "about": [
    "FX Board loads euro reference rates for twelve currencies and the last month of history from Frankfurter, then shows them three ways: a dark ticker tape that loops across the top, a converter with a swap button, and a grid of cards where each sparkline draws itself and is colored by the 30-day change.",
    "The style is Swiss-utility: off-white background, IBM Plex Sans and Mono, one acid lime accent used only for the highlighter and the swap icon. Tapping a card converts into that currency, so the cards double as the second currency picker."
   ],
   "card_url": "https://agentgid.com/templates/fx-board/",
   "live_url": "https://agentgid.com/templates/fx-board/live/",
   "screenshot": "https://agentgid.com/templates/fx-board/shot.jpg",
   "screenshot_phone": "https://agentgid.com/templates/fx-board/shot-phone.jpg",
   "sections": [
    "Looping ticker tape with up and down arrows",
    "Photo banner with highlighted headline and a live dot",
    "Converter with send and receive fields and a swap button",
    "Grid of currency cards with change badges and sparklines"
   ],
   "effects": [
    "Ticker scrolls seamlessly",
    "Converted amount rolls to the new value",
    "Swap button spins half a turn",
    "Sparklines draw in, area fills fade in",
    "Cards rise in a cascade and lift on hover"
   ],
   "palette": [
    {
     "name": "Paper",
     "hex": "#f6f6f1"
    },
    {
     "name": "Ink",
     "hex": "#101010"
    },
    {
     "name": "Muted",
     "hex": "#6b6b6b"
    },
    {
     "name": "Up",
     "hex": "#0a8f5a"
    },
    {
     "name": "Down",
     "hex": "#d1373a"
    },
    {
     "name": "Lime",
     "hex": "#d7ff3a"
    }
   ],
   "fonts": [
    {
     "family": "IBM Plex Sans",
     "use": "Headings and labels",
     "license": "SIL Open Font License"
    },
    {
     "family": "IBM Plex Mono",
     "use": "Rates, amounts and ticker",
     "license": "SIL Open Font License"
    }
   ],
   "stack": "One HTML file with inline CSS and vanilla JavaScript. No build step, no framework, no API keys.",
   "data_sources": [
    {
     "name": "Frankfurter exchange rates API",
     "url": "https://frankfurter.dev/",
     "terms": "Free to use, also commercially, as Frankfurter states"
    }
   ],
   "photos": [
    {
     "photo": "hero",
     "author": "Excellentcc",
     "author_url": "https://pixabay.com/users/Excellentcc-15820328/",
     "page_url": "https://pixabay.com/photos/city-china-shanghai-night-beijing-5156636/",
     "license": "Pixabay Content License"
    }
   ],
   "design_md_url": "https://agentgid.com/templates/fx-board/DESIGN.md",
   "design_md": "# FX Board — DESIGN.md\n\nAn exchange-rate board and converter. Family: Swiss utility, light.\n\n## 1. Visual theme and atmosphere\n\nA clean trading desk printed on off-white paper. Grid, numbers, one acid highlighter. Mood: crisp, trustworthy, slightly playful in one place only.\n\n## 2. Color palette and roles\n\n```\n--bg:     #f6f6f1   /* paper */\n--panel:  #ffffff\n--line:   #e3e3da\n--ink:    #101010\n--mute:   #6b6b6b\n--up:     #0a8f5a   /* data: rate rose over 30 days */\n--down:   #d1373a   /* data: rate fell */\n--lime:   #d7ff3a   /* the one accent: headline highlighter and the swap icon */\n```\n\nRule: green and red only for direction of change. Lime never appears on more than two elements per screen.\n\n## 3. Typography\n\n- Headings and labels: **IBM Plex Sans** 400–700. Headline 700, `clamp(40px, 7vw, 64px)`, tracking −0.03em.\n- Every number: **IBM Plex Mono** 500/600 (rates, amounts, ticker, dates).\n- Labels 11px uppercase mono with 0.1em tracking.\n\n## 4. Components\n\n- **Ticker tape:** black strip, mono 13px, pair, rate and a ▲/▼ change in green or red.\n- **Banner:** photo with a white fade from the left; a small static square with the rates date; headline with a lime highlighter on one word.\n- **Converter:** two soft fields (label, big mono amount, currency select) and a round black swap button with a lime Phosphor arrows icon; the result rolls to its new value.\n- **Currency card:** code, name, change badge, mono rate, sparkline with a 16% area fill in the direction color. Tapping a card converts into it; the selected card gets an ink outline.\n\n## 5. Layout\n\nMax width 1080px. Converter is three columns (field, swap, field), one column on phones with the swap rotated. Cards: auto-fill grid with 230px minimum. Radii: 24px banner, 22px converter, 20px cards, 16px fields.\n\n## 6. Depth\n\nMostly flat: 1px borders and one soft shadow under the converter. Cards lift slightly on hover.\n\n## 7. Motion\n\n- Ticker loops seamlessly (content doubled, −50% translate): rates as a passing stream.\n- Converted amount rolls in 500 ms; the swap button turns half a turn.\n- Sparklines draw once; cards rise in a short cascade.\n- `prefers-reduced-motion`: ticker still, numbers jump, lines drawn.\n\n## 8. Do and don't\n\nDo: mono for every number; say the date of the rates; \"Not financial advice\" in the footer.\nDon't: pulsing \"live\" dots, a second accent, colored backgrounds for whole cards, rounded pills for numbers.\n\n## 9. Agent prompt guide\n\nBias: off-white grid, Plex Sans + Plex Mono, green/red only for change, one lime highlight.\nReject: dark crypto-casino look, neon gradients, glowing charts, blinking tickers on every element.\n\n## Data and credits\n\nFrankfurter exchange rates API (blended reference rates, free to use, also commercially, as Frankfurter states). Banner photo from Pixabay, file kept with the page, author credited. Phosphor Icons MIT. Code MIT-0. Not financial advice.\n",
   "catalog": [
    [
     "pixabay",
     "Pixabay",
     "Banner photo, downloaded and credited"
    ],
    [
     "google-fonts",
     "Google Fonts",
     "IBM Plex Sans and Mono"
    ],
    [
     "phosphor",
     "Phosphor Icons",
     "Swap icon, MIT"
    ]
   ],
   "code_license": "MIT-0",
   "good_reference_for": [
    "Fintech and crypto dashboards",
    "Converters and calculators",
    "Clean light card grids"
   ],
   "prompt": "Build a single-file currency board (HTML, CSS, vanilla JS) on the Frankfurter API v2 (https://api.frankfurter.dev/v2/rates?base=eur&quotes=usd,gbp,... and the same with &from=DATE for 30 days of history). Top: a black ticker tape that loops seamlessly (content doubled, translateX -50%). Then a rounded photo banner with a fading white overlay, a small static square with the rates date and an 'FX Board' headline where 'Board' has a lime highlighter. Converter: two soft fields (amount + currency select) and a round black swap button that rotates 180 degrees; the result rolls to its new value. Grid of currency cards: code, name, change badge (green or red), rate in IBM Plex Mono and an SVG sparkline that draws itself; clicking a card converts into it. Fonts: IBM Plex Sans and Mono. Not financial advice."
  }
 ]
}