Nemos

Overview

Nemos is an enterprise authentication gateway designed for financial and operational intelligence platforms. The design system prioritizes security perception, professional credibility, and user confidence through a dark-mode-first interface that reduces cognitive load during sensitive login workflows. The aesthetic is 'Secure Minimalism'—a disciplined, low-distraction approach that treats the login form as the sole focus, with a deep teal background (#102331) and strategic blue accents (#5fa3d0) that signal trustworthiness without visual noise. The brand voice is calm, authoritative, and reassuring: never apologetic, never casual. Example: 'Entity ID is required to access your account' rather than 'Oops, you forgot something!'

Colors

The color system is built on a dark-mode foundation optimized for reduced eye strain during authentication. Primary (#5fa3d0) is a mid-tone blue used exclusively for interactive CTAs (the 'Sign In' button) and focus states on inputs; it is never used for body text or backgrounds. Secondary (#6c757d) is a neutral gray reserved for disabled states and secondary UI chrome. Tertiary (#17a2b8) is a cyan accent for status indicators and success states. The surface stack progresses from the darkest container-lowest (#050d14) for nested elements to container-highest (#2a4558) for elevated modals. On-surface text (#e8eef5) maintains WCAG AAA contrast (ratio 14.2:1) against the base surface (#102331). Error red (#dc3545) is used sparingly for validation messages with a 1px left border at rgba(220, 5

Typography

The type system uses a single sans-serif family (Arial, with -apple-system and Segoe UI fallbacks) to ensure consistent rendering across enterprise environments and reduce font-loading friction. Display (56px, 700 weight) is reserved for hero headlines; Headline-lg (36px, 600 weight) for section titles; Body-md (16px, 400 weight) for form labels and helper text. The login form uses label-md (14px, 600 weight, 0.02em letter-spacing) for field labels to establish clear hierarchy without visual clutter. All body text uses a 1.5 line-height (24px for 16px base) to improve readability on screens. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) on small labels (label-sm) when placed over the gradient background to ensure legibility.

Layout

The layout uses a fixed 960px container centered on the viewport, with a 12-column grid for responsive scaling. The login form occupies 8 columns (centered via offset-2) on desktop, collapsing to full-width on tablets and mobile. Vertical rhythm is maintained through consistent spacing: form fields are separated by md spacing (24px), sections by lg spacing (40px). The card container uses md padding (24px) internally, with gutter spacing (24px) between the logo and form. White-space is aggressive—empty space around the form is intentional, signaling focus and reducing decision fatigue. The footer is fixed at the bottom with py-2 (16px vertical padding) and uses secondary text color (#6c757d) at 80% opacity to de-emphasize legal copy.

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle background layering. Level 1 (Base): the body background (#102331) with no shadow. Level 2 (Card): the login fieldset uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) and a 1px border at surface-variant (#2a3a47) to separate from the background. Level 3 (Hover/Focus): interactive elements elevate to 0 4px 12px rgba(0, 0, 0, 0.2) on hover, with a 200ms cubic-bezier(0.4, 0, 0.2, 1) transition. Input fields use an inset shadow (inset 0 1px 2px rgba(0, 0, 0, 0.06)) to create a recessed appearance, signaling they are receptive to input.

Shapes

The shape philosophy is 'Geometric Precision'—rounded corners are used sparingly and consistently to signal interactive affordance without softening the professional tone. Buttons and input fields use DEFAULT radius (0.5rem / 8px) for a subtle, modern appearance. Cards use md radius (0.75rem / 12px) to distinguish container boundaries. The dropdown panel uses 4px radius (0.25rem) for tighter, more technical appearance. Never use full radius (9999px) for primary CTAs; reserve it for badges and status indicators only. The rationale: sharp corners convey security and precision; rounded corners co

Components

Action Elements The primary button ('Sign In') uses a solid background at {colors.primary} (#5fa3d0) with white text, 48px height, and md padding (24px horizontal). On hover, the background darkens to #4a8fb8 with an elevated shadow (0 4px 12px rgba(0, 0, 0, 0.2)) and a 2px upward transform over 200ms. On active/press, the shadow reduces to 0 2px 4px and the transform resets, creating tactile feedback. Secondary buttons (e.g., 'Contact Support') use a transparent background with a 1px outline at {colors.outline} (#7a8490) and primary text color; on hover, the background fills with surface-container-high (#1f3a4a).

Containers & Surfaces The login card (fieldset.loginDisplay) uses surface-container (#152a38) background with a 1px border at surface-variant (#2a3a47) and md shadow (0

Do's and Don'ts

**Do**

• Do use primary blue (#5fa3d0) exclusively for interactive CTAs and focus states; never use it for body text or passive backgrounds.
• Do maintain the dark background (#102331) as the constant foundation; all form elements should float above it with subtle shadows (0 3px 8px rgba(0, 0, 0, 0.15)).
• Do apply 200ms cubic-bezier(0.4, 0, 0.2, 1) transitions to all interactive state changes (hover, focus, active) for smooth, professional feedback.
• Do use label-md (14px, 600 weight) for all form field labels and keep them positioned above inputs with 8px margin-bottom for clear visual hierarchy.
• Do ensure all text meets WCAG AAA contrast: on-surface (#e8eef5) on surface (#102331) achieves 14.2:1 ratio; never use secondary gray for body text.

**Don't**

• Don't use secondary gray (#6c757d) for primary CTAs or interactive elements; reserve it for disabled states and secondary UI chrome only.
• Don't apply border-radius greater than 1rem (16px) to buttons or input fields; sharp corners signal security and precision.
• Don't use light backgrounds or near-white surfaces; the dark mode is non-negotiable for this brand and reduces cognitive load during authentication.
• Don't animate the form container or logo; only interactive elements (buttons, inputs on focus, links on hover) should transition; static elements reduce distraction.
• Don't use multiple accent colors in a single form; primary blue is the sole accent; tertiary cyan is reserved for status indicators outside the login flow.