One Link, No Passwords — Passwordless Magic-Link Sign-In
A passwordless 'magic-link' sign-in page on a soft off-white canvas with a single teal accent: sticky nav, a two-column hero (pitch + benefits) beside a magic-link login card AND a 'Check your inbox' success card, plus Google/SSO social, a 3-step how-it-works, and a dark security stat strip.
Summary
A full-width passwordless 'magic-link' sign-in landing page on a soft off-white canvas (#f8fafc) with a single teal accent. A sticky translucent top nav (Halcyon.id magic-stick logo, How it works / Security / Docs / Pricing links, a 'Sign in' link and a teal 'Get started' pill) sits above a two-column hero+login section. The left column is the marketing pitch ('One link. No passwords to forget.' headline, a 'Passwordless by default' shield pill, a 3-item benefit list, and a small avatar trust row); the right column shows BOTH auth states stacked: the login card (magic-stick glyph, 'Welcome back', a single email field, a teal 'Send magic link' button, a 'password instead' fallback, an OR divider, Google + SSO social buttons, and a Terms/Privacy line) and the success / 'Check your inbox' card (floating opened-letter glyph with a check badge, the sent-to email, a 'Your sign-in link is ready' inbox row with an Open button, and Resend / different-email actions). Below the fold: a 3-step 'How it works' section, a dark teal 'Security teams sleep better' stat strip, and a footer.
Style
Clean, trustworthy modern SaaS auth aesthetic built on a SINGLE teal accent over a soft off-white canvas (#f8fafc) and slate-grey (slate/'ink') neutrals. Inter throughout (weights 400-800), antialiased with optimizeLegibility, tight tracking on extrabold headings. Generous rounding (rounded-3xl cards, rounded-xl controls, rounded-full pills). Depth comes from a soft multi-layer 'card' shadow, a teal-tinted 'btn' shadow, a 'glyph' glow shadow on the logo tiles, an ambient teal mesh (three radial glows), and a faint 56px line grid masked by a center radial fade. A gentle floating animation lifts the success-card glyph.
Layout & Structure
A sticky full-bleed top nav above a hero+login main, then three stacked sections (How it works, Security strip, footer). The hero main is a relative 'mesh' background with a masked grid overlay; inside, a max-w-6xl section is a CSS grid that on desktop (lg) splits into a 1.05fr marketing column and a 380-440px auth column, collapsing to a single column on mobile. The auth column stacks the login card and the success card. Below: a white 'How it works' section with a centered intro and a 3-up step grid, a dark teal full-bleed stat strip, and a paper footer.
Sticky nav
Hero + login main (background)
Left marketing column
Login card (state 1)
Success / check-inbox card (state 2)
How it works section
Security stat strip
Footer
Special Notes
Single TEAL accent only (the teal ramp, primary #0f766e), kept as a FLAT color (not a gradient), over a soft off-white 'paper' #f8fafc canvas and slate 'ink' neutrals; body ink-900 #0f172a. This is the magic-link / passwordless pattern: the login card's primary action is 'Send magic link' (a single email field, no password by default) with a password fallback, and a second 'Check your inbox' success card teaches the rest of the flow. Preserve the exact field focus treatment (#0f766e border + 4px rgba(15,118,110,0.12) ring) and the named shadows (card/btn/glyph), the teal 'mesh' + masked 56px grid background, the '.glyph-glow' halos and the 'floaty' success-glyph animation. Inter throughout; rounded-3xl cards / rounded-xl controls / rounded-full pills. Icons via Iconify (solar + logos sets). The page reflows to a single column on mobile (the two-column hero stacks, the nav center links + 'Sign in' link hide). No em-dashes in copy.