Terminal-style cyber login

Open preview

Overview

Cyber Login turns the auth screen from “a required form” into “a brand moment.” Three ingredients — dark canvas, neon accents, monospace type — plant the feeling that this product is for a specific crowd, before the user has typed a single character.

Why it works

Login screens are usually optimized for speed and trust. But for products whose brand should assert itself everywhere — Web3, security, DevTool, gaming/streaming — a flat white form throws away a chance to say “you’re in the right place.”

Structure

• Session indicator: pulsing green dot plus pseudo-system text. The page feels alive before the user touches it.
• Blinking cursor H1: terminal-prompt nod, free of charge.
• Labeled inputs: uppercase tracked labels with a cyan ”›” prefix — the decoration is also a cue.
• Gradient CTA: cyan-to-magenta pulls the eye to the final action.
• OAuth row: two columns only, monochrome borders. Adding more color here would drown the primary CTA.
• CRT scanlines + grid: repeating-linear-gradient and a radial-masked grid give the background its texture — no JS.

When to use

• When the auth screen of a Web3, DeFi, or developer-tool product should continue the brand's world, not break it
• When a security product's onboarding needs to feel "serious about this"
• Authentication flows for gaming SaaS, streaming platforms, or any product with a strong visual identity

Recommended stack

Category

Auth

Styles

Cyber / Dark / Neon / SaaS

Audience

for SaaS

SPA

No

Hosting

any

Notes

Pure HTML/CSS. JS is only needed for the actual submission/OAuth logic, not the visual system.

AI prompt

Build a cyberpunk-style login card for a developer-facing SaaS.
Visual system:
- Near-black background (#05060a) with faint CRT scanlines and a subtle
  grid that fades out from the center (radial mask).
- Two radial accent glows: magenta top-right (#ff4bcf) and cyan bottom-left (#6ef3ff).
- Monospace typography throughout (JetBrains Mono / Fira Code / ui-monospace).
- Muted gray text (#6b7a9e) for labels, bright cyan-to-magenta gradient
  for the primary CTA.
Card:
- Max-width 440px, dark panel (#0a0c14) with a thin border (#1a1f2e),
  3px radius, heavy shadow + inset glow.
- Top-left: a small uppercase "SESSION · OK" indicator with a pulsing green dot.
- Heading "sign in" with a blinking terminal cursor after it.
- 1 sentence lede with inline <code> highlighting.
- Two inputs (username, password), each with an uppercase label
  prefixed by a cyan "›" character.
- Row with "remember me" checkbox and a cyan "forgot?" link.
- Primary submit button: cyan→magenta gradient, uppercase, "> authenticate".
- Divider "— or —", then a 2-column OAuth row: GitHub and WebAuthn buttons
  with dotted bullet prefixes.
- Footer: "new here? create an account" with dashed underline on the link.
- Absolute brand mark at top-left of the page: "0x NIGHT/STACK" in muted
  uppercase, magenta "0x".
No JavaScript required for the visuals. Fully responsive down to 360px.

Same structural system, reversed palette:
- Page background #f4f6fb; card background white with 1px #e0e4f0 border.
- Cyan and magenta stay vivid, but grid/scanlines get very faint.
- Cursor blink becomes a muted black.

Replace the password input with a single "Use passkey" primary CTA:
- Large cyan-gradient button labeled "› USE PASSKEY" with a fingerprint icon.
- Keep the username field for passkey discovery.
- Move the email/password combo behind a collapsed disclosure labeled
  "Sign in with password instead".

FAQ