Teletext demo
Teletext

A nostalgic broadcast aesthetic recreating teletext services like BBC Ceefax and ITV Oracle, with chunky pixel graphics, a limited primary-color palette, and monospaced text on low-resolution grid displays.
Category: Retro & Pop
Era: 1970s–1990s Retro
Prompt: 14.3 KB · 2014 words
# BUILD PROMPT — "TELETEXT" THEMED LANDING PAGE (FOR THE CODING AI)

**Role & Mission:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page in a single attempt. Theme: **Teletext** — 1970s–90s broadcast teletext/videotex (BBC Ceefax, ITV Oracle, French Minitel, teletext subtitle overlays). Required sections: Header/Nav, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.

---

## 0. THEME DIRECTION — NON-NEGOTIABLE AESTHETIC

- **Signature look:** Strict 7-color palette only — black `#000000`, red `#ff0000`, green `#00ff00`, yellow `#ffff00`, blue `#0000ff`, magenta `#ff00ff`, cyan `#00ffff`, white `#ffffff` — on a black broadcast screen. No smooth gradients, no border-radius anywhere, no soft/realistic shadows, no blurring filters or opacity fades (keep edges crisp and un-anti-aliased).
- **Graphics idiom:** Extremely low-res blocky mosaic "character graphics" built exclusively from Unicode block characters (`█ ▓ ▒ ░ ▄ ▀ ■`) — never raster images, never SVG.
- **Navigation motif:** Every section carries a teletext page number (P100 Hero, P200 Features, P300 How It Works, P400 Testimonials, P500 Pricing, P600 FAQ, P700 Final CTA, P900 Footer), rendered like authentic teletext header bars; nav and footer links are labeled with page numbers (e.g., `P200<`).
- **Motion idiom:** State changes snap instantly (`steps(1, end)`), like broadcast hardware. Blinking block cursors and flashing text are the only animation vocabulary — always gated behind `prefers-reduced-motion`, never applied to essential content.
- **Reference spec:** `references/00-flagship-implementation-specs/teletext.md` — the supplied token block and base classes (`.nav`, `.btn`, `.card`, `.input`, `.badge`) are the foundation; adapt them to the mandatory canonical token names below. Do not maintain a parallel `--color-*` token system.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
- All styling lives in `style.css`. The `style="..."` attribute is forbidden.
- Target every rule via class/ID selectors. HTML must remain semantic and style-agnostic — retheming the site must require CSS edits only.

**1.2 CSS Variables & Theme Tokens**
- Store all tokens in `:root` (theme classes override). Canonical mandatory names, mapped to the Teletext palette:
  - **Colors:** `--bg-primary: #000000; --bg-secondary: #1a1a1a; --text-primary: #ffffff; --text-secondary: #00ff00; --primary: #00ff00; --secondary: #0000ff;` plus extended palette tokens `--tt-red: #ff0000; --tt-yellow: #ffff00; --tt-blue: #0000ff; --tt-magenta: #ff00ff; --tt-cyan: #00ffff; --tt-white: #ffffff; --tt-black: #000000;` and feedback tokens `--text-success: #00ff00; --text-error: #ff0000; --border-default: #00ffff; --border-error: #ff0000; --border-success: #00ff00;`
  - **Palette discipline:** Only the 7 palette colors may be used for fills, text, and borders. Exception clause: neutral grays are permitted only for disabled/placeholder surfaces, and the light-mode background must be `#fefefe` (never `#ffffff` as a background). Replace the reference's off-palette hover `#ff4444` with an in-palette snap (red → magenta).
  - **Contrast pairing (enforced in every theme):** yellow/green/cyan/magenta/white backgrounds always pair with black text; black backgrounds pair with white or bright palette text; red/blue backgrounds pair with white text. In light mode, green/yellow/cyan must never be running text on `#fefefe` (contrast failure) — render them as colored chips or borders carrying black text instead.
  - **Radius:** `--radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px;` — hard corners are theme law.
  - **Shadows:** `--shadow-sm: 4px 4px 0 var(--tt-cyan); --shadow-md: 8px 8px 0 var(--tt-blue);` — hard-edged offset block shadows only. Exception clause: the theme's "shadow/blur" effect is expressed exclusively through these block shadows plus one optional CRT phosphor glow token `--glow: 0 0 10px rgba(0,255,0,0.35)`, usable at most on the hero headline.
  - **Spacing & transitions:** `--spacing-gap: 24px; --transition-fast: 0s steps(1, end); --transition-normal: 0s steps(1, end); --ease-standard: steps(1, end);` Exception clause: instant snap transitions deliberately replace smooth easing to preserve authentic teletext hardware behavior; `prefers-reduced-motion` must still disable all blink, spinner, and transform effects.
  - **Elevation:** `--z-dropdown: 10; --z-modal: 100; --z-toast: 1000;` — apply to sticky nav and toasts to prevent stacking conflicts.
  - **Texture:** `--mosaic-block: repeating-linear-gradient(0deg, currentColor 0 2px, transparent 2px 4px);` for scanline overlays. Exception clause: this hard-stop repeating gradient is the only gradient permitted; smooth color gradients remain forbidden.
  - **Type scale:** keep the supplied rem scale (`--text-xs` through `--text-5xl`).

**1.3 Mandatory Dark Mode Support**
- **Dark is the default** (authentic teletext: black screen, bright palette). Also implement a light "paper teletext" theme: `--bg-primary: #fefefe; --bg-secondary: #eeeeee; --text-primary: #000000; --text-secondary: #0000ff;` with the 7 palette colors unchanged as accents/chips.
- Implement via `@media (prefers-color-scheme)` plus `.theme-dark` / `.theme-light` class overrides on `<html>`; switching must swap variables only — zero HTML restructuring.
- Persist the user's choice in `localStorage`, falling back to `prefers-color-scheme` on first visit. Ship a visible toggle in the nav (Google Material Symbols `dark_mode` / `light_mode`) with correct `aria-pressed` and `aria-label` states ("Switch to light teletext mode" / "Switch to dark teletext mode").
- The source spec declares no modes — therefore validate BOTH light and dark rendering before delivery.

**1.4 Flexbox Layout & Mobile-First Alignment**
- Build every layout structure with Flexbox; every flex container defaults to `align-items: center` unless an exception is explicitly justified.
- Mobile-first: all multi-column rows (features, steps, pricing, footer columns) collapse to a single column on small viewports; prevent horizontal scrolling at every width; minimum touch target 44×44px.

**1.5 Framework Default & Tailwind CSS Integration**
- Use Tailwind CSS (CDN or build) with a theme extension mapping utilities to the tokens above; component classes (`.btn`, `.card`, `.input-group`, `.badge`, `.nav`) must be defined as reusable classes via `@layer`/`@apply` (or equivalent custom CSS), never as one-off utility strings.

**1.6 Typography & Icons (Google Fonts Mandatory)**
- Load Google Fonts in `<head>`: **VT323** bound to `--font-base`, `--font-display`, and `--font-mono`, with `'Courier New', monospace` fallbacks. Exception clause: the reference names 'Bedstead', which is not available on Google Fonts — do not use it; VT323 is the sanctioned blocky-terminal substitute.
- Functional icons: Google Material Symbols. Exception clause for theme authenticity: decorative graphics must be Unicode block/mosaic characters (`█ ▓ ▒ ░ ▄ ▀ ■`), which are font glyphs, not SVGs. Raw inline SVGs and local icon files remain forbidden.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Buttons** (`.btn`, `.btn--primary`, `.btn--danger`)
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` uppercase monospace, min 44×44px. `.btn` = yellow bg + black text; `.btn--primary` = red bg + white text; `.btn--danger` = magenta bg + black text + 4px red border (visually distinct in both themes).
- **Hover:** instant in-palette snap (`.btn` yellow → white; `.btn--primary` red → magenta) with `cursor: pointer`.
- **Focus:** `:focus-visible` → 4px magenta outline, 2px offset, clearly visible in both themes.
- **Active/Pressed:** `transform: scale(0.97)` (snaps due to steps easing).
- **Loading:** `aria-busy="true"`, pointer events blocked (no double-clicks), label swapped for a blinking `█` block spinner; button dimensions must not change.
- **Disabled:** `opacity: 0.4`, grayscale, `cursor: not-allowed`.
- **Success/Error:** temporary snap to green bg + black text with a check Material Symbol, or red bg + white text with an error Symbol; announced via `aria-live`.

**2.2 Cards** (`.card`)
- **Default:** flex column, `--bg-primary` background, 4px solid cyan border, zero radius, `--space-4` padding.
- **Hover:** hard block shadow `--shadow-sm` appears and/or `translateY(-2px)` snap.
- **Focus-within:** border snaps to yellow when a child link/button receives focus.
- **Loading (skeleton):** blinking mosaic blocks (`▓▒░`) animation defined purely in CSS — no layout shift.
- **Empty state:** block-character glyph plus short guidance text.

**2.3 Forms & Inputs** (`.input-group`)
- **Structure:** flex container wrapping `<label>`, `<input>`, and a dedicated error/feedback container with `aria-live="polite"`.
- **States via classes:** empty; focused (4px yellow outline); filled; valid (green border + check Material Symbol); invalid (red border, red message text, error icon — never color alone); disabled; read-only.
- **Surfaces:** dark theme input = white bg + black text, placeholder `#555555`; light theme input = black bg + green text (terminal idiom).

**2.4 FAQ Accordion**
- Native `<details>` / `<summary>` (keyboard operable by default — no mouse-only patterns). Summary row: page number (P601…), question text, and a `▶` block arrow that snaps to `▼` plus yellow when open. Visible `:focus-visible` outline on summaries.

**2.5 Feedback Toast**
- All dynamic feedback (form success/error, theme change) renders in a fixed `aria-live="polite"` toast (top-right, `--z-toast`), styled as a teletext status bar: black bg, 4px cyan border, Material Symbol + text (never color alone), auto-dismiss, reduced-motion safe.

---

## 3. SECTION-BY-SECTION BUILD SPEC

Global: invent one coherent fictional product (e.g., a retro "VIEWDATA" team-broadcast/status service) and write real English copy for it — lorem ipsum is forbidden. Each section opens with a teletext header bar (page number left, title, colored per section from the palette). Build exactly the sections listed — do not introduce unrequested components (no modals, carousels, or chat widgets).

**3.1 Header/Nav:** blue bar, white text, 4px cyan bottom border, sticky (`--z-dropdown`). Brand = mosaic block logo (`█▓▒`) + name. Links labeled with page numbers (`P200<` …). Theme toggle per 1.3. Mobile: links wrap or stack — never horizontal scroll. Include a skip-to-content link.

**3.2 Hero (P100):** background `--bg-primary`; oversized VT323 headline (white, one word in yellow) followed by a blinking `█` cursor; green subheadline (`--text-secondary`); two CTAs (`.btn--primary` → Pricing, `.btn` → How It Works); decorative mosaic illustration built from block characters in palette colors; teletext status strip (brand · P100 · optional live clock via JS); optional `--glow` on the headline only.

**3.3 Features (P200):** yellow header bar with black text; 3 `.card`s (flex row → column): Material Symbol icon inside a colored chip (red/yellow/green with black icon), title, two-line description, page-number tag (P201–P203). Hover/focus-within per 2.2.

**3.4 How It Works (P300):** 3 steps (flex row → column): oversized numerals `01/02/03` in colored blocks (red, yellow, green + black text), step title, short copy; block-character arrows (`▶▶`) between steps, removed/stacked on mobile.

**3.5 Testimonials (P400):** 3 `.card`s with alternating border colors (magenta/cyan/green); quote in `--text-primary`, attribution in cyan; rating rendered as yellow `■■■■■` blocks plus the text "5/5" (never color alone).

**3.6 Pricing (P500):** 3 tiers (flex row → column); middle tier highlighted with a 4px yellow border + magenta "MOST POPULAR" `.badge` (black text); price in large VT323; feature list with green `■` bullets; one `.btn` per tier demonstrating the full state machine on click (loading blink → success snap + toast; double-clicks blocked).

**3.7 FAQ (P600):** 5–6 `<details>` items per 2.4, with real questions and answers about the fictional product.

**3.8 Final CTA (P700):** full-width green block with black text (holds contrast in both themes); big headline; newsletter `.input-group` (label, email input, error container) with client-side validation — invalid → red border + inline message; valid submit → button loading state → success snap + toast; privacy microcopy beneath.

**3.9 Footer (P900):** black bg, 4px cyan top border; flex-wrap columns: brand + mosaic logo + one-line tagline; secondary link groups (Product / Company / Legal — real labels); a page-number navigation row (`P100 P200 P300 …` as links); copyright line in green. All links: magenta `:focus-visible` outline.

---

## 4. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid sizing, no horizontal overflow at any viewport width.
- **Motion:** every state change snaps via the steps tokens; all blink/spinner/transform effects are disabled under `prefers-reduced-motion`.
- **Accessibility:** semantic HTML5 landmarks (`header`, `nav`, `main`, `section`, `footer`), one `h1` with logical heading order, ARIA roles/labels on custom widgets, full keyboard operability, visible focus everywhere, WCAG AA contrast in both themes, `aria-live` for all dynamic feedback, and never communicating state by color alone.
- **Mandatory visual feedback:** every click, hover, focus, and submission triggers a visible state change.
- **Destructive/distinct actions:** `.btn--danger` must remain visually distinct in both light and dark themes.

---

## 5. DELIVERABLE & OUTPUT FORMAT

- **Files:** separate `index.html`, `style.css`, `script.js`; a single `<script src="script.js" defer>` reference; no inline `<script>` blocks; no inline styles.
- **Naming:** one consistent convention everywhere (BEM: `.btn--primary`, `.card__title`); never mix conventions.
- **JS scope:** theme toggle + persistence, newsletter validation/feedback, pricing button loading demo, FAQ ARIA sync (if enhancing native `<details>`), optional hero clock — nothing beyond the specified interactions.
- **Copy:** all user-facing copy in English. Exception clause: the source spec's Portuguese notes ("the source does not declare modes; validate in light and dark before publishing") are translated and enforced as English requirements.
- **Validation gate:** verify both themes, every component state, and full keyboard navigation before delivering. Deliver the complete landing page in one attempt.