About this set
A sign-in window styled like a command-line session. A title bar with red, amber and green dots reads auth@prod: ~/login; below it, green monospace lines show the last login address and a note that the session needs authentication, then a > identify yourself prompt with a blinking block cursor. The form asks for a username and password under $-prefixed labels and submits with an outlined [ authenticate ] button that fills green on hover. A faint scanline pattern runs across the page. Use it for developer tools, internal consoles, CTF sites or anything aimed at people who live in a terminal. The decorative characters (the prompt arrow, the dollar signs, the comment slashes and the cursor) are wrapped in aria-hidden spans, so screen readers read plain labels such as username. The dim grey text and placeholders were brightened to meet 4.5:1 on the dark background, field borders were raised to 3:1, and the cursor stops blinking under prefers-reduced-motion. The Bootstrap version uses .card with a .card-header title bar, .form-control and an outline .btn.
What’s included
- Window chrome, monospace prompts and a blinking block cursor
- Decorative prompt characters hidden from screen readers
- Username field with autocomplete, autocapitalize and spellcheck off
- Dim text brightened to WCAG AA on the dark background
- Cursor blink disabled under prefers-reduced-motion
Accessibility
Labels are visible and read as plain words because the $ and > glyphs are aria-hidden, as is the window title bar. Inputs show a green border and ring on focus, and the button and link show a 2px green outline on keyboard focus. The blink animation and transitions stop under prefers-reduced-motion.
Customise it
Change --tm-green, --tm-bright, --tm-dim and --tm-line on .tm, or swap the font stack for your own monospace font. In Tailwind edit the --color-tm-* theme colours.
