The Origin

Somewhere in Portugal, in the late 1980s, a boy sat cross-legged on the floor of his parents' living room staring at a small television set. Connected to it by a thick cable was a Timex Computer 2048 — a curious little machine with rubber keys and a promise that the future was something you could type into existence.

The screen glowed green. Not the green of trees or grass, but a different green entirely — the phosphor green of early CRT monitors. A colour that existed nowhere in nature, only in the space between electricity and glass. Characters would appear on that dark background like small luminous creatures, each one placed there by a child's fingers learning that the world could be spoken to in a language made of logic.

That boy was me. And that green — that specific, warm, electric green against an almost-black teal darkness — became the first colour palette I ever loved, long before I knew what a colour palette was.

10 PRINT "HELLO WORLD"
20 PRINT "MY NAME IS TIAGO"
30 PRINT "I AM 7 YEARS OLD"
40 PRINT "THIS COMPUTER IS MAGIC"
50 GOTO 10

RUN
HELLO WORLD
MY NAME IS TIAGO
I AM 7 YEARS OLD
THIS COMPUTER IS MAGIC
HELLO WORLD
MY NAME IS TIAGO

The Timex 2048 was the Portuguese cousin of the Sinclair ZX Spectrum — a home computer that taught an entire generation to program before they could properly spell. It loaded programs from cassette tapes with a sound like a fax machine having a nightmare. Sometimes it took fifteen minutes to load a game. Sometimes it crashed at minute fourteen. You learned patience. You learned persistence. You learned that the machine did exactly what you told it to do, nothing more, nothing less.

I still have that computer. It sits on a shelf in my home, rubber keys slightly yellowed, its power supply long dead. But the memory of that screen — that glow — never faded.


The Design Philosophy

When I built my first website, I didn't think twice about the colour scheme. The background had to be dark. The text had to be green. The font had to be monospace. It wasn't a design decision — it was a homecoming.

The Green Screen is not about nostalgia for nostalgia's sake. It's about a fundamental belief: that the most honest interface is the one that gets out of the way. A dark background that doesn't fight for your attention. Text that glows just enough to be read. No distractions, no decoration for decoration's sake. Just information, clearly presented, in a palette that feels like it was designed by someone who respects your eyes.

Every colour in this system was chosen to echo the experience of looking at a phosphor terminal in a dim room — the dark teal-black of the screen before it warms up, the bright green of active text, the softer green of things that have been read, and the deep muted green of things waiting in the background.


The Palette

Backgrounds

Deep Terminal
#001a20
Primary background — the screen before power-on
Warm CRT
#002a33
Secondary background — the screen warming up
Glass Surface
rgba(0, 50, 60, 0.6)
Card backgrounds — like looking through the glass

The Greens

Phosphor Bright
#7DE38D
Primary accent — the active cursor, the living text
Phosphor Soft
#288f5b
Secondary accent — text that's been read, settled
Teal Glow
#4ecdc4
Gradient companion — the ambient light bleed

Text Hierarchy

Active Text
#e0f0e8
Primary text — the line you're reading now
Resting Text
#8fb8a0
Secondary text — supporting information
Ghost Text
#5a8a70
Muted text — metadata, timestamps, the quiet things

Replication Guide

Everything you need to rebuild this aesthetic from scratch. Fork it, remix it, make it yours.

01 — Typography

Two fonts. One for display, one for body. The body font must be monospace — it's non-negotiable. The terminal doesn't do serifs.

Headings: Space Grotesk — geometric, clean, modern

Body: Inconsolata — monospace, warm, readable

/* Import from Google Fonts */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inconsolata:wght@400;700&display=swap'); --font-display: 'Space Grotesk', sans-serif; --font-body: 'Inconsolata', monospace;

02 — The Background

Start with near-black, but never pure black. The teal undertone is what makes it feel like a screen rather than a void. Layer surfaces with transparency to create depth.

--bg-primary: #001a20; /* The void */ --bg-secondary: #002a33; /* Slightly warmer */ --bg-surface: rgba(0, 50, 60, 0.6); /* Glass cards */

03 — The Green

The accent green should feel like phosphor — bright but not neon, warm but not yellow. It should look like it's emitting light, not reflecting it.

--accent-primary: #7DE38D; /* The glow */ --accent-secondary: #288f5b; /* The afterglow */ --accent-glow: rgba(125, 227, 141, 0.15); /* Ambient bleed */

04 — Borders & Glow

Borders should be barely visible — ghosts of structure. On hover, they brighten like a monitor responding to touch. Use box-shadow with accent-glow for that phosphor bleed effect.

--border-subtle: rgba(125, 227, 141, 0.1); --border-medium: rgba(125, 227, 141, 0.2); --border-strong: rgba(125, 227, 141, 0.4); /* The phosphor glow on hover */ box-shadow: 0 0 20px rgba(125, 227, 141, 0.1);

05 — Scanlines (Optional)

For maximum authenticity, add a subtle scanline overlay using a repeating gradient. Keep the opacity very low — it should be felt more than seen.

/* CRT scanline effect */ background: repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(125, 227, 141, 0.015) 2px, rgba(125, 227, 141, 0.015) 4px );

06 — The Cursor

If you're showing a terminal element, the blinking cursor is essential. It's the heartbeat of the screen — proof the machine is alive and waiting for you.

/* The blinking cursor */ @keyframes blink { 50% { opacity: 0; } } .cursor { width: 8px; height: 16px; background: #7DE38D; animation: blink 1s step-end infinite; }

07 — Spacing

Be generous. Terminals were sparse. The empty space is as important as the content. Use an 8px base scale and let things breathe.

--space-sm: 0.5rem; /* 8px */ --space-md: 1rem; /* 16px */ --space-lg: 1.5rem; /* 24px */ --space-xl: 2rem; /* 32px */ --space-2xl: 3rem; /* 48px */ --space-3xl: 4rem; /* 64px */

The Timex 2048 taught me that a dark screen with green text is not just a colour scheme. It's a promise: type something, and the machine will answer. All these years later, this website keeps that promise alive.

← Back to Home