The live demo was built from exactly this text — nothing added.

# Service Status Page

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
Build an original single-page service status website for [BRAND], an invented [SERVICE] for [AUDIENCE]. Present a coherent set of fictional operational data: an overall healthy state, six components with fixed 90-day uptime histories, four resolved or completed incident entries with timestamped updates, and a subscription form with an honest static-demo confirmation. Keep all variable-driven copy, component records, daily status values, and incident narratives in src/content.ts; rewrite the service-specific details when the variables change while preserving the layout, record counts, and interaction model.

- Audience: The primary readers are [AUDIENCE] checking whether [BRAND] is available, plus support and operations teams who need a concise public incident record.
- Goal: Let a visitor understand overall health within five seconds, compare component reliability over 90 days, inspect exactly how past incidents progressed, and choose local demo notification preferences without implying that a real subscription occurred.
- Tone: Calm, precise, accountable, and quietly confident. Use plain operational language, useful timestamps, and direct explanations; never turn the page into a sales pitch or manufacture urgency.

## Stack
- Framework: Vite 6 + React 19 + TypeScript
- Styling: Tailwind CSS 4
- Libraries: lucide-react (ISC), @tailwindcss/vite (MIT), @fontsource-variable/manrope (OFL), @fontsource-variable/inter (OFL), @fontsource/ibm-plex-mono (OFL)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Set the npm build script to tsc -b && vite build; configure Vite with base: './', build.sourcemap: false, and an empty outDir named dist.
  - Use @tailwindcss/vite and @import "tailwindcss" in src/index.css; define the listed colors, fonts, spacing, shadows, and keyframes as CSS custom properties and Tailwind theme tokens.
  - Import Manrope Variable, Inter Variable, and IBM Plex Mono weights 400 and 500 from their Fontsource packages in src/main.tsx so every font file is bundled locally.
  - Keep all default and variable-derived copy, the fixed October sample reference date, six component records, four incident records, and every 90-day status series in src/content.ts; never scatter brand-specific copy through components.
  - Use small React components for the header, aggregate health chart, component row, incident accordion, and subscribe form. Use React state only for chart inspection, incident expansion, and form validation or confirmation; do not add a router or global state library.
  - Represent the 90 daily values as typed arrays committed in src/content.ts, ordered oldest to newest and ending on the fixed sample date October 25. Do not use random values, current-time requests, or remote data.

## Variables
- [BRAND] — Brand name (default: "Fablegrid"). An invented product or company name; use it in the header, hero copy, subscribe panel, footer, and document title.
- [SERVICE] — Service description (default: "cloud application platform"). A lowercase phrase describing the service whose health is being reported.
- [AUDIENCE] — Primary audience (default: "product engineering teams"). The people who rely on this service; rewrite component descriptions and incident language to suit them.
- [SUPPORT_EMAIL] — Support email (default: "[email protected]"). A support address appropriate to the invented brand; use a reserved .example domain for demo content.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/service-status-page in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

## Design
### Colors
- Canvas `#F3F6F2` — Page background with a faint 32 px CSS grid at 3 percent ink opacity.
- Surface `#FFFFFF` — Component table, incident cards, form fields, and tooltip surfaces.
- Ink `#13241D` — Primary headings, body emphasis, and dark text.
- Muted `#63736B` — Secondary copy, timestamps, labels, and chart axis text.
- Line `#D8E1DA` — Hairline borders, row separators, and inactive tracks.
- Operational `#16865A` — Healthy status text, icons, and light-surface uptime bars.
- Operational Soft `#E3F4E9` — Overall-state badge and healthy pill backgrounds.
- Degraded `#C48618` — Degraded-performance bars and amber status indicators.
- Outage `#D6574B` — Outage bars and error indicators; always pair with text or an icon.
- Panel `#10291F` — Hero aggregate chart and subscribe panel background.
- Panel Text `#F2FAF5` — Primary text on dark panels.
- Panel Muted `#A8BDB1` — Secondary text and labels on dark panels.
- Panel Bar `#48D28D` — Healthy bars on the dark aggregate chart.

### Typography
- Display and section headings: Manrope Variable (OFL), weights 500/600/700
- Body, navigation, controls, and operational copy: Inter Variable (OFL), weights 400/500/600
- Uptime values, timestamps, chart labels, and compact metadata: IBM Plex Mono (OFL), weights 400/500

### Layout & motion
- Spacing: Use an 8 px base rhythm. The content container is max-width 1180 px with 32 px desktop gutters and 20 px mobile gutters. Header height is 72 px. Hero padding is 72 px top and 80 px bottom on desktop, 40 px top and 56 px bottom on mobile. Major sections use 88 px desktop and 60 px mobile vertical padding. Cards use 28 px desktop and 20 px mobile padding; component rows use 22 px vertical spacing. Keep body copy measure below 64 characters.
- Radius: Use 20 px for the aggregate chart and subscribe panel, 14 px for component and incident cards, 10 px for inputs and buttons, 3 px for uptime bars, and fully rounded status pills. Borders remain 1 px; use shadows sparingly with 0 18 px 50 px rgba(19,36,29,0.10) only on the hero chart and visible tooltip.
- Motion: On initial load, fade and translate the hero copy and chart upward by 12 px over 420 ms with an 80 ms stagger; never hide the core status while waiting for animation.
- Motion: Grow healthy chart bars from 65 percent to full height over 320 ms with small grouped delays capped at 360 ms; degraded and outage bars appear without bouncing.
- Motion: Expand and collapse incident updates with a 180 ms opacity and grid-row transition while rotating the chevron 180 degrees; preserve keyboard focus and aria-expanded.
- Motion: Reveal chart inspection tooltips with a 120 ms fade and 4 px upward movement, clipped or flipped so they never cause horizontal overflow.
- Motion: Use a 160 ms color transition on buttons, navigation anchors, filter states, and form focus rings; smooth-scroll anchor navigation only when reduced motion is not requested.
- Motion: Under prefers-reduced-motion, remove entrance transforms, bar stagger, smooth scrolling, and accordion animation while leaving every state immediately visible and usable.
- Imagery: Use no photographs, generated bitmaps, people, or decorative stock illustrations. The first-screen visual anchor is a rich, code-built 90-day aggregate health panel with 90 individual bars, precise metrics, a legend, grid lines, and inspection tooltips. Build the small original [BRAND] glyph from three simple CSS status bars, and use currentColor Lucide icons everywhere else.

## Pages & Sections
### [BRAND] Service Status (`index.html`)
1. **Header and overall status hero** — Create a slim shared header with an original three-bar status glyph, the wordmark '[BRAND] status', anchor links labeled 'Components', 'Incidents', and 'Subscribe', and a compact 'All systems operational' pill. The hero eyebrow reads 'SAMPLE STATUS · UPDATED 2 MIN AGO'. Show a large CheckCircle2 icon, the H1 'All systems operational', and the sentence 'The latest sample health for [BRAND]'s [SERVICE], built for [AUDIENCE].' Add two anchor CTAs: primary 'View component history' and secondary 'Get incident updates'. Under them, show compact metadata '6 / 6 components available' and '0 active incidents'. The adjacent visual panel is titled '90-day platform health', displays '99.98%' in large mono type with 'aggregate uptime' beneath, and contains exactly 90 vertical daily bars covering the fixed sample range Jul 28–Oct 25. Use 86 green bars, amber bars at zero-based indices 61, 82, and 88, and one red bar at index 73. Add hover inspection with day date, daily state, and sample uptime; provide the same daily details in an accessible off-screen table rather than making 90 separate tab stops. Finish the panel with the range labels 'Jul 28' and 'Oct 25', a three-item legend 'Operational', 'Degraded', 'Outage', and a footer row reading '90 days monitored' and '4 days with notes'.
   Layout: Place the header inside the 1180 px container with the brand at left, navigation centered, and status pill at right; on mobile keep the brand and pill on the first row and put the three anchors in a second horizontally spaced row. The hero uses a five-column / seven-column grid with 56 px gap on desktop. Left copy is vertically centered, with a 58 px / 1.04 Manrope H1 at 600 weight and -0.04 em tracking. The dark chart panel occupies the right seven columns, has 28 px padding, a faint internal grid, and a 152 px-high bar field. Bars use flexible equal widths with 2 px gaps and rounded top corners. On screens below 800 px, stack copy above the chart with a 32 px gap, reduce the H1 to 40 px, keep the chart at least 250 px wide, and retain all 90 bars using narrower gaps rather than horizontal scrolling.
   Motion: Use the specified hero entrance and grouped bar-grow animation. The CTAs and navigation receive subtle color and underline transitions; tooltips appear only on pointer inspection and never shift layout.
2. **Current components** — Heading: 'Components'. Supporting copy: 'Current state and the last 90 days, using fixed sample data.' Add a right-aligned legend and the label '90 days ago / Today'. Render exactly six component rows: 'Web application' with description 'Customer-facing application and session delivery' and '100.00%'; 'Public API' with 'REST endpoints and authentication' and '99.99%'; 'Developer dashboard' with 'Configuration, usage, and team controls' and '100.00%'; 'Background jobs' with 'Queues, scheduled work, and retries' and '99.96%'; 'Webhooks' with 'Outbound event delivery' and '99.92%'; 'Media delivery' with 'Asset processing and edge downloads' and '99.98%'. Every current-state pill reads 'Operational'. Each row has its own 90-bar strip: Public API is amber at index 82, Background jobs at 61, Webhooks red at 73, Media delivery amber at 88, and every other daily bar is green. Use the same fixed Jul 28–Oct 25 reference dates as the aggregate chart. Include concise per-row accessible summaries such as 'Public API: 99.99 percent uptime over 90 days; one degraded day; currently operational.' When variables change, rename and describe components to fit the new [SERVICE], while retaining six rows and the same visual status distribution.
   Layout: Use one white 14 px-radius card with separate rows rather than six floating cards. The section heading and legend share a baseline row. On desktop, each component row is a grid with a 250 px name-and-description column, a flexible daily-bar column, an 82 px right-aligned mono percentage, and a 112 px right-aligned status pill. Bars are 30 px high with 2 px gaps. Row separators are Line at 1 px. On mobile, each row becomes a padded block: name and status pill on the first line, description next, full-width bars next, and percentage plus '90-day uptime' on the final line. Never truncate component names or clip tooltips at 390 px.
   Motion: Rows do not animate on scroll. Uptime strips gently brighten on row hover; individual bar tooltips fade in over 120 ms. All information remains visible without hover or motion.
3. **Incident history** — Heading: 'Incident history'. Supporting copy: 'A clear record of what happened, what changed, and when service recovered.' Provide three filter buttons, 'All 4', 'Incidents 3', and 'Maintenance 1', with All selected initially. Render four newest-first entries. First, badge 'Resolved', title 'Media processing delays', date 'Oct 22', duration '26 min', affected component 'Media delivery', with updates: '11:08 Investigating — We are investigating longer processing queues for uploaded media.'; '11:21 Identified — A stalled worker pool has been isolated and pending jobs are moving to healthy capacity.'; '11:34 Resolved — Processing times are back to normal and all queued jobs have completed.' Second, badge 'Resolved', title 'Elevated API latency in the EU region', date 'Oct 18', duration '38 min', component 'Public API', with updates: '14:12 Investigating — We are investigating elevated response times for API requests in the EU region.'; '14:24 Identified — A saturated cache node has been isolated. Traffic is shifting to healthy capacity.'; '14:50 Resolved — Latency has returned to normal. No data loss occurred.' Third, badge 'Resolved', title 'Webhook delivery interruption', date 'Oct 9', duration '1 hr 12 min', component 'Webhooks', with updates: '09:06 Investigating — Some webhook deliveries are failing while event ingestion remains available.'; '09:41 Monitoring — Failed events are replaying successfully after we restored the delivery worker.'; '10:18 Resolved — The replay is complete and delivery success has returned to normal.' Fourth, badge 'Completed', title 'Scheduled database maintenance', date 'Sep 27', duration '20 min', component 'Background jobs', with updates: '21:55 Scheduled — Maintenance will begin at 22:00. Background jobs may pause briefly while web requests continue.'; '22:00 In progress — The primary database is being updated and queued work is temporarily paused.'; '22:20 Completed — Maintenance is complete and all paused jobs have resumed.' Open the first entry by default and collapse the other three. Allow multiple entries to be open, and rewrite incident narratives for a changed [SERVICE] without retaining cloud-specific details that no longer fit.
   Layout: Keep filters in a small segmented row below the heading, wrapping naturally on mobile. Use a vertical stack of white 14 px-radius cards with 16 px gaps. Each closed header shows a small status dot and badge at left, title and affected component in the center, then date, duration, and chevron at right. The expanded update timeline sits below a 1 px separator with a vertical Line rail, 10 px status dots, mono timestamps, bold update state, and plain explanation. On mobile, place badge and date on the first row, title on the second, component and duration on the third, and right-align the chevron; timeline timestamps sit above their update copy if space is below 360 px. Filtering changes visibility without leaving blank wrappers.
   Motion: Accordion updates use the 180 ms expansion and chevron transition. Filter changes use a 140 ms fade, with no large list reordering or scroll jumps. Reduced-motion users get instantaneous state changes.
4. **Subscribe to updates** — Create a dark panel with eyebrow 'STATUS NOTIFICATIONS', heading 'Know when things change.', and copy 'Choose the sample updates you would receive from [BRAND].' The form label reads 'Work email', with placeholder '[email protected]', an email input, and a primary button 'Subscribe to updates'. Include two checked checkboxes labeled 'Incident updates' and 'Maintenance notices', plus the small line 'Demo form only. Your address is not transmitted or stored.' Validate for a nonempty, plausible email and at least one selected notice type; show specific inline errors below the relevant control. On valid submission, replace the button contents with a check and 'Preferences saved locally', then show the confirmation 'Demo subscription confirmed for this session. No email was sent.' Keep the entered address out of localStorage and provide a 'Reset preferences' text button that restores the initial form. Include a small support line 'Questions about service health? [SUPPORT_EMAIL]'.
   Layout: The Panel-colored 20 px-radius section uses a two-column grid: explanatory copy and a Bell icon on the left five columns, form on the right seven columns, separated by 56 px. Inputs are Surface with 10 px radius, 48 px minimum height, and a visible focus ring; the submit button uses Panel Bar with Ink text. Checkboxes sit in one row on desktop and stack on narrow screens. On mobile, stack the columns with 28 px gap and make the button full width. Error and success text must reserve space or reflow without clipping.
   Motion: Use only short focus, hover, error, and confirmation transitions. The confirmation check draws in over 180 ms unless reduced motion is requested; never simulate a network loading delay.
5. **Footer** — Repeat the original three-bar glyph and '[BRAND] status'. Add 'Operational communication for [AUDIENCE].' and the explicit note 'All service names, metrics, and incidents on this page are fictional sample data.' Include text links 'Components', 'Incidents', and 'Subscribe' pointing to './index.html#components', './index.html#incidents', and './index.html#subscribe', plus the support address [SUPPORT_EMAIL]. Set the document title to '[BRAND] Service Status' and use the same three-bar glyph as a locally generated SVG favicon.
   Layout: Use a top border, 32 px vertical padding, and a desktop row with brand and sample-data note at left and anchor links at right. On mobile, stack brand, note, links, and support address with 16 px gaps. Keep footer copy in Muted and metadata in 12 px IBM Plex Mono.
   Motion: No entrance animation; only subtle link color transitions.

## Assets
- image: No bitmap images. Render the aggregate health visualization, all daily uptime strips, the three-bar brand glyph, grid texture, and SVG favicon entirely with local HTML, CSS, React, and SVG; do not call an image generator or use placeholder-image services.
- icon: Install and import CheckCircle2, ChevronDown, Bell, Mail, Activity, ArrowDownRight, RotateCcw, and AlertCircle from lucide-react (ISC). Use currentColor at 16–20 px, with aria-hidden on decorative icons and visible text labels for meaning.
- font: Self-host Manrope Variable through @fontsource-variable/manrope (OFL), Inter Variable through @fontsource-variable/inter (OFL), and IBM Plex Mono 400 and 500 through @fontsource/ibm-plex-mono (OFL). Import only the required files from npm and list each package, author or project, source URL, and license in ASSETS.md.

## Don'ts
- Do not add a backend, serverless function, API route, database, authentication, analytics, third-party status feed, external API request, or form submission to any service; all operational data is fixed local sample data and the subscribe interaction is session-local only.
- Do not claim that emails, alerts, monitoring, uptime checks, or incident updates are actually running. Never display a fake network spinner, randomly refresh health data, or persist email addresses.
- Do not use real status-provider or technology-company names, logos, slogans, product copy, actual incidents, domains, or real uptime figures presented as fact; every brand, metric, and incident must remain explicitly fictional sample content.
- Do not copy an existing status page's exact palette, layout, copy, illustrations, icons, or composition, and do not use brand-specific mascots, custom fonts, or logo sets.
- Do not use photographs, AI-generated bitmaps, stock illustrations, remote images, placeholder-image services, recognizable people, or recognizable brand assets; the polished code-built health panel is the visual anchor.
- Do not load scripts, styles, fonts, icons, or assets from a CDN. Use only the named local npm dependencies and self-hosted Fontsource files, with no commercial or restrictively licensed source.
- Do not output source maps, copy src into dist, exceed a 20 MB dist directory, use absolute asset URLs, or require more than the single npm run build command.
- Do not add client-side routing, bare-directory links, empty href attributes, SEO metadata, Open Graph tags, JSON-LD, sitemap files, or keyword-heavy copy; one index.html, local anchor links, a plain variable-driven title, and an SVG favicon are sufficient.
- Do not generate daily uptime values with Math.random, Date.now, or remote data. Preserve the fixed 90-day series, sample reference range, incident chronology, and consistent component-to-incident status mapping in src/content.ts.
- Do not hard-code Fablegrid-specific copy outside the variable defaults and content file. When variables change, rewrite brand references, service descriptions, component names, support details, and incident narratives coherently.
- Do not rely on green, amber, or red alone to communicate state. Preserve text labels, accessible icons, descriptive chart summaries, visible focus states, labeled controls, keyboard-operable accordions and filters, and reduced-motion behavior.
- Do not allow bar tooltips, navigation, status pills, long email addresses, or incident timestamps to create horizontal overflow or console errors at 1440×900 or 390×844.

---
— Prompt by VibeFather · https://vibefather.ai/t/service-status-page · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown

Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.