Aperture — Enterprise SSO Sign-In (Navy & Amber)
Enterprise SSO sign-in screen on deep navy with a single amber accent: a SOC 2 trust badge, a primary 'Continue with SSO' button, Google/SAML fallbacks and an email field, all in one centered glass card over a soft amber-glow ambient background. Inter, single-accent navy + amber.
Summary
A full-bleed enterprise SSO sign-in screen for a fictional product, 'Aperture', on a deep navy canvas. A sticky translucent nav spans the top, a single centered auth card holds the whole login flow, and a minimal footer closes the page. The card leads with a primary amber 'Continue with SSO' button, falls back to Google + SAML providers, then to an email field, and is wrapped by an enterprise-trust frame: a 'SOC 2 Type II · Enterprise SSO' badge above and an end-to-end-encryption reassurance note below. The whole thing floats over a calm ambient background (a soft amber glow blob, a navy blob and a faint grid veil).
Style
Confident, enterprise-grade dark UI built on a navy + cream + single-amber-accent system. A deep navy canvas (#0b1f3a) with cream text (#f4ecd8) and a muted slate-blue for secondary copy (#a9b4c4). Amber (#f0b429) is the only accent, reserved for the primary CTA, the trust badge, links and focus states. Surfaces are subtle translucent glass (white at 3-4% alpha over the navy) with hairline white borders. Inter throughout (400-800). Generous rounded corners (cards ~16px, buttons/inputs ~12px), soft deep shadows, and an amber focus glow give it a premium, trustworthy feel without noise.
Layout & Structure
A single full-height page centered on one narrow auth column (max-width 420px). A sticky translucent top nav and a solid navy footer bracket a min-h-screen hero/auth main that vertically and horizontally centers the card over the ambient background. Above the card sits the heading block (trust badge + title + subtitle); the card itself stacks the auth options top to bottom (SSO -> social -> email); below it sit a security note and a 'Request access' footer link.
Sticky nav
Hero / auth main
Heading block
Auth card
Security note + footer link
Footer
Special Notes
Color tokens (exact): navy DEFAULT/800 #0b1f3a, navy-900 #081730, navy-700 #102a4d, navy-600 #16365f; cream DEFAULT #f4ecd8, cream-soft #e8ddc4, cream-dim #a9b4c4; amber DEFAULT #f0b429, amber-dark #d99c1c. Single-accent system: amber is the ONLY accent (CTA, badge, links, focus). Font: 'Inter' everywhere (weights 400/500/600/700/800) via Google Fonts. Built on Tailwind (CDN) with a custom theme (navy/cream/amber scales) and one custom class, .field-glow (focus-within amber border + 3px amber/25 ring). Icons via Iconify (phosphor 'ph:*' set + 'flat-color-icons:google'). Auth hierarchy is intentional: SSO primary, Google/SAML secondary, email last, matching an enterprise login flow. Fully responsive: the narrow 420px card recenters on all widths; nav 'Docs'/'Status' links and the footer row collapse on mobile. color-scheme implied dark, antialiased, smooth scroll.