$ want_this_rendered

Build me a complete, responsive business website in the ASCII-ART style — the phosphor-terminal, line-printer look where every image is drawn from typed characters, the whole page is one fixed-width monospace typeface, and a single warm amber glow is the only color. It looks like text-mode art rendered on a near-black CRT — honest, mechanical, made of characters, not photographs. Combine this style seed with my brief below. If I don't give you the details, invent a plausible business that suits this quiet, technical, hacker-adjacent look — a synth-pedal maker, a specialty coffee roaster, an indie dev tool, a bike-repair shop — and build a full, real demo for it, not a placeholder. This style is a FAMILY, not a single template — the same seed should produce visibly different sites for different businesses. The look is largely fixed (that discipline IS the style), but the LAYOUT APPROACH, the CHARACTER-ART subjects, and the density of the amber accent are yours to shape. Pick an approach that fits my business and COMMIT to it across the whole site. ── INVARIANTS (never break these — they define the style) ── • One typeface only: IBM Plex Mono (or an equivalent fixed-width mono) for display AND body — no proportional or serif type anywhere. • Near-black canvas throughout — a deep #0A0A0A-feeling ground with a barely-lifted #141414 surface. This is a dark, low-light screen. • Feature and hero imagery is built from CHARACTER-DENSITY SHADING — map a ramp like " .:-=+*#%@" over brightness to draw shapes in text, never a real photo. A recurring reused ASCII glyph-art mark stands in for a logo. • Structure is drawn with THIN AMBER RULE LINES, not bordered card boxes — hairlines and monospace alignment do the framing; no rounded panels, no drop-shadow cards. • One accent only: a single warm amber (~#F5A623). Reserve it for links, CTAs, rule lines, and the scanline — never a second hue, never a full amber background behind body text. • Motion is "scan": content reveals row by row as a horizontal scanline sweeps down, the way line-printer and modem art actually rendered. Never a fade, slide, spring, or float. Honor prefers-reduced-motion (show everything at once) and keep ALL content visible without JavaScript — never leave a section stuck blank. • CONTRAST (WCAG 2.2 AA, non-negotiable): every text/background pair is ≥4.5:1 body, ≥3:1 large/headline. Body text is warm off-white (~#E8E6DE, never pure #FFFFFF) on the near-black ground; muted labels/hairlines use a dimmer warm grey (~#6E6B62) that still clears 4.5:1. Amber-on-near-black is your accent pairing — check it clears the threshold; never put warm-off-white on amber or amber on a light fill. ── VARIABLES (choose what fits my business, then commit) ── • LAYOUT APPROACH — choose one monospace structural feel and commit: a single centered fixed-column "terminal window" the whole site lives inside; a full-width stack of ruled character-art bands; a two-column mono grid with a persistent left rail of links; or a prompt/log-style vertical scroll where each section reads like a printed session. Settle on your own hero composition and how densely you use the amber accent. • CHARACTER-ART SUBJECTS — generate ASCII art that suits MY business (a roasted bean, a synth waveform, a wrench, a storefront), rendered from the density ramp — not a reuse of any demo's art. ── MEDIA MODEL (characters, not stock photography) ── Build nearly all visuals from TYPED CHARACTERS — character-density art for hero/feature imagery, monospace tables and ruled blocks for structure, the glyph-art mark for the logo. Only where the business genuinely needs a literal photo (a real product, the actual space) drop in a real placeholder <img>, but the signature imagery is drawn from the character ramp. Generate marks and art appropriate to MY business, never a reuse of any demo. WHAT THIS SITE MUST ACHIEVE (business goal): Make it instantly clear who this business helps and what it offers; explain the value plainly in this calm, precise voice; reduce a first-time visitor's risk with real proof (results, credentials, specs, guarantees — whatever is true); and drive one clear next step — an enquiry, a booking, a quote — as an amber text-link CTA, often ending in ">>". Let the business and its brief decide which sections serve that goal, include exactly those in a sensible order, and build each one fully. BUILD REQUIREMENTS — ship a complete, usable site, not a hero mock: • Real information architecture driven by MY business and goal — whatever sections move a stranger toward enquiring, each with one clear job, in an order that builds understanding then trust then action. Include working monospace navigation and a footer. • Don't be lazy with any section: each carries real content depth (never a title plus one thin line), proper internal hierarchy set in the mono type scale, and the full ASCII treatment — hairline rules, character art where it earns its place, the scan reveal. If a section only serves the style, cut it; if a section serves the goal but feels thin, flesh it out. • Real, tailored copy for MY business — precise, understated, technical-but-warm, written to build trust and explain, never lorem. • Fully responsive and accessible: semantic landmarks, alt text (describe what the character art depicts), and the CONTRAST invariant enforced on EVERY section. On mobile, keep the monospace, the amber accent, and the scanline; let wide character-art blocks scale or scroll rather than break. • Apply the mono type, near-black canvas, amber accent, and scan motion to EVERY section, not just the hero.

Best for AI website builders — Lovable, v0, Bolt

Restyle my existing site into the ASCII-ART look — the phosphor-terminal, line-printer aesthetic where imagery is drawn from typed characters, the whole page is one fixed-width monospace typeface, and a single warm amber glow is the only color. Keep ALL of my current content, copy, pages, and structure exactly as they are; change only the visual language so the page looks like text-mode art on a near-black CRT. Do not invent new pages, remove sections, or rewrite my words. This look is largely fixed — that discipline IS the style — so there is little to "choose": collapse my palette to near-black + amber, switch everything to one mono face, and convert imagery to character art. The one thing to shape is how densely you use the amber accent; keep it rationed. ── INVARIANTS (never break these) ── • Switch ALL type — headings and body — to one fixed-width monospace face (IBM Plex Mono or equivalent). Remove every proportional and serif font. • Recolor the ground to near-black (~#0A0A0A) with a barely-lifted surface (~#141414) behind text blocks. This is a dark screen. • Replace bordered card boxes and drop-shadow panels with THIN AMBER HAIRLINE RULES and monospace alignment — hairlines and columns do the framing now; no rounded corners, no soft shadows. • Reduce all color to ONE warm amber accent (~#F5A623) for links, CTAs, rule lines, and the scanline. Strip every other hue. Never an amber background behind body text. • Convert photographic/decorative imagery to CHARACTER-DENSITY ART — map a " .:-=+*#%@" ramp over brightness so shapes are drawn in text. Where a literal photo must stay, leave it as a real <img>; do not fake it with a colored div. • Replace existing transitions with the "scan" reveal: content appears row by row as a horizontal scanline sweeps down — no fades, slides, springs, or floats. Honor prefers-reduced-motion and never leave a section stuck blank; keep content visible without JavaScript. • Never: proportional/serif type, a second accent color, real full-bleed photography as the signature imagery, bordered card panels, or fade/slide entrances. Keep body text warm off-white (~#E8E6DE, never pure white) and muted labels a dimmer warm grey (~#6E6B62) that still clears contrast. Keep it responsive and accessible — enforce WCAG 2.2 AA on every block (≥4.5:1 body, ≥3:1 large; pick the ink from each block's ACTUAL background: warm off-white on near-black, amber checked against near-black; NEVER off-white on amber or amber on a light fill). Restyle what already exists so every section carries the ASCII system consistently — same content, new skin.

Paste alongside your existing site/code for an AI coding agent to apply

Design a single section in the ASCII-ART style — the phosphor-terminal, line-printer look: one fixed-width monospace typeface, a near-black canvas, imagery drawn from typed characters, and a single warm amber glow as the only color. A low-commitment preview of the style, built richly for whatever section I ask for. Tell me in your own words, alongside this prompt, which section you want and the job it has to do — a hero that lands who you are, a feature row, a pricing block, a testimonial strip, an about panel, a contact call-to-action. If I don't name one, build a bold ASCII hero for a plausible business you invent that suits this technical, hacker-adjacent style. Whatever the section, build it fully and richly — don't be lazy: real, tailored copy, proper hierarchy in the mono scale, and depth, not a title plus one thin line. ── INVARIANTS ── • One fixed-width monospace face (IBM Plex Mono or equivalent) for everything. Near-black canvas (~#0A0A0A) with a barely-lifted surface. Structure drawn with THIN AMBER HAIRLINE RULES and monospace alignment — no bordered card boxes, no rounded corners, no soft shadows. Motion is the "scan" reveal (content appears row by row as a horizontal scanline sweeps down) — no fades, slides, or floats; content visible without JavaScript, honoring prefers-reduced-motion. • Never: proportional or serif type, a second accent color, real photography as the signature imagery, bordered panels, or fade/slide entrances. ── THE ONE FIXED CHOICE ── • ACCENT — one warm amber (~#F5A623) only, for links, the CTA, rule lines, and the scanline. Keep it rationed; never an amber background behind text. Build the section from TYPED CHARACTERS — character-density art (a " .:-=+*#%@" ramp mapped over brightness) for any hero/feature imagery, monospace tables and hairline rules for structure. If the section genuinely needs a literal photo, use a real placeholder <img> — never a fake colored div standing in for it. Where the section's job calls for one, include an amber text-link CTA, often ending in ">>". Make it responsive and accessible — WCAG 2.2 AA contrast (≥4.5:1 body, ≥3:1 large): warm off-white (~#E8E6DE, never pure white) on near-black, amber checked against near-black, muted grey (~#6E6B62) that still clears the threshold; never off-white on amber or amber on a light fill. Write real, tailored copy for the subject, not lorem.

Good for a focused first pass, or a chat-based assistant like ChatGPT/Claude