Textmode Overlay

Overview

Textmode Overlay is a free, open-source browser extension that converts visible canvas and video elements into live ASCII art, embodying a **Retro-Technical Maximalism** aesthetic that celebrates the visual language of 1980s terminal graphics and creative coding culture. The brand serves developers, digital artists, and creative technologists who view ASCII conversion not as nostalgia but as a legitimate artistic medium—a way to extract signal from visual noise and render complex media through the constraint of character-based representation. The UI evokes the austere clarity of a Unix terminal: pure black backgrounds (#0a0a0a), monospace typography rendered in crisp off-white (#f2f2ec), and a single crimson accent (#b11226 / #ef4960) that signals interactivity and urgency without softness or decoration.

The brand voice is precise, technical, and unapologetically direct. Vocabulary favors concrete terms: "canvas," "WebGL2," "pixel access," "character ramp," "post-processing stack"—never "beautiful" or "intuitive." The tone assumes the user is competent and curious, interested in how things work at the systems level. Example sentence in brand voice: "Select any visible canvas or video. Render it live. Export the frame." The design system rejects rounded corners, gradients, and soft shadows; instead, it embraces hard edges, 1px borders, and the raw geometry of a grid.

Colors

The color system is built on a **high-contrast monochrome foundation** with a single, strategically deployed accent. The primary surface is pure black (#0a0a0a), the deepest value in the palette, used for the page background and the dominant visual field. On-surface text is off-white (#f2f2ec), chosen to reduce eye strain during extended terminal-style interaction while maintaining the authentic feel of aged CRT phosphor. The secondary text color (#d8d8d2) provides a muted alternative for metadata, timestamps, and disabled states, creating a three-tier hierarchy without introducing new hues.

The tertiary accent—crimson (#b11226 for brand identity, #ef4960 for interactive states)—is the only chromatic departure and serves as the primary call-to-action color. It appears on the "ADD TO CHROM

Typography

The type system is anchored to **Monogram Extended**, a geometric, all-caps display typeface that reinforces the retro-technical brand identity. Every heading—from the 160px hero title down to 20px body copy—uses Monogram Extended at 400 weight, creating visual consistency and a distinctive, unmistakable voice. The display size (160px, line-height 110px, letter-spacing 0.015em) is reserved for hero headlines and dominates the page; headline-lg (96px, line-height 72px) is used for section titles; headline-md (80px, line-height 60px) for subsection headers. Body copy runs at 24px (line-height 28px) for primary content and 20px (line-height 24px) for secondary content, both in Monogram Extended to maintain tonal consistency. Labels and metadata use either Monogram Extended at 16px or Inter at

Layout

The page uses a **fixed 1100px container max-width** centered on larger viewports, with a fluid gutter of clamp(0.75rem, 1.8vw, 1.75rem) on left and right edges. The grid is 12 columns, but sections often use semantic column groupings: hero-bottom uses a 4fr 5fr 3fr split; privacy-section uses 2fr 6fr 4fr. Sections are separated by 1px solid borders in the outline color (#5a5a56), creating a visual rhythm that echoes the grid lines of a terminal. Vertical spacing between sections uses a semantic scale: lg spacing (40px) for section separation, md spacing (24px) for component groups, sm spacing (12px) for inline elements. The hero section occupies the full viewport height minus the header (calc(100svh - 3.75rem)), establishing an immediate sense of scale and presence. Padding within section

Elevation & Depth

Depth is conveyed through **layered borders and hard-edged shadows**, not soft blur. The base elevation (Level 1) is the black background (#0a0a0a) with no shadow. Level 2 (cards, panels) adds a 1px solid border in the outline color (#5a5a56) and uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to separate the element from the background. Level 3 (modals, elevated panels) uses a stronger shadow: box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45), which creates visible separation without introducing blur or glassmorphism. Interactive elements (buttons, links) do not use shadows; instead, they invert the

Shapes

The shape philosophy is **Architectural Sharpness**: minimal rounding, hard edges, and grid-aligned geometry that echoes the pixel-perfect constraints of ASCII art and terminal interfaces. Buttons use border-radius: 0.5rem (8px) for a subtle softening that prevents the UI from feeling harsh, but never more. Cards and panels use the same 8px radius, maintaining consistency. Input fields use border-radius: 0.5rem. The demo-stage and workflow-grid elements use no rounding (border-radius: 0px), emphasizing their role as structural containers. The only exception is the badge component, which uses b

Components

Action Elements Buttons are the primary interactive affordance. The button-primary component uses background: {colors.primary} (#f2f2ec), color: {colors.on-primary} (#0a0a0a), padding: 12.8px 16px, height: 44px, and border-radius: 8px. On hover, the colors invert (background: #0a0a0a, color: #f2f2ec) with a 0.12s transition. The button-secondary variant uses a transparent background with a 1px border in {colors.primary}, padding: 0px 12px, height: 32px, and border-radius: 12px (md). The header-install button is a prominent call-to-action using the same primary styling but with min-width: 8.5rem and padding: 0 20px to accommodate the "INSTALL ↗" label. All buttons use text-transform: uppercase and letter-spacing: 0.04em to reinforce the technical aesthetic.

Containers & Surfaces Ca

Do's and Don'ts

**Do**

• Do use Monogram Extended for all headings and body copy to maintain tonal consistency and reinforce the retro-technical brand identity.
• Do invert button colors on hover (background and text swap) with a 0.12s transition to signal interactivity without animation fatigue.
• Do use 1px solid borders in the outline color (#5a5a56) to separate sections and create a grid-aligned visual rhythm.
• Do reserve the crimson accent (#b11226 / #ef4960) exclusively for call-to-action buttons, focus states, and error conditions to maximize its impact.
• Do apply text-rendering: geometricprecision on the body element to ensure crisp, pixel-aligned rendering of monospace-style letterforms.

**Don't**

• Don't use rounded corners greater than 8px; the brand rejects soft, decorative rounding in favor of architectural sharpness.
• Don't introduce new colors beyond the defined palette; the monochrome foundation with a single accent is non-negotiable.
• Don't use gradients, blur effects, or glassmorphism; the aesthetic is austere and grid-aligned, not ethereal.
• Don't animate elements for longer than 0.12s (fast) or 0.18s (state); the brand values responsiveness and clarity over flourish.
• Don't use system fonts or generic sans-serif fallbacks; Monogram Extended and Inter are the only approved typefaces.