Kasir

Overview

Kasir is a minimal, high-trust security verification interface designed to reassure users during browser checks and authentication flows. The aesthetic is 'Austere Clarity'—a deliberate rejection of visual noise in favor of a centered, breathing layout that communicates stability and transparency. The design uses a restrained palette of near-white surfaces (#ffffff), neutral grays (#666666, #6c757d), and a single indigo accent (#6366f1) that draws the eye to the loading state and reinforces brand presence without distraction. The emotional response is calm reassurance: users see a clean canvas, a gentle spinner, and clear messaging that says 'we're working, and we're trustworthy.' Voice: direct, patient, never urgent. Example: 'Please wait for up to 5 seconds while we verify your browser.'

Colors

The color system is built on a foundation of pure white (#ffffff) and near-black text (#1a1a1a), with a supporting cast of neutral grays that create visual hierarchy without introducing competing hues. Primary (#6366f1, indigo) is reserved exclusively for the loading spinner and interactive focus states—it appears infrequently but commands attention when it does, signaling active processing. Secondary (#666666, warm gray) is used for body copy and descriptive text, providing sufficient contrast (WCAG AA) against white while remaining subordinate to primary. The surface stack uses subtle off-whites and light grays (#f5f5f5, #f0f0f0, #e9ecef) to define container boundaries and disabled states without introducing visual clutter. Tertiary (#f0f9fa, pale cyan) is reserved for hover states on in

Typography

The type system uses DM Sans exclusively, a geometric sans-serif that conveys both precision and approachability. The hierarchy is minimal: title-lg (24px, 600 weight) for the main heading, body-md (16px, 400 weight) for supporting copy, and label-sm (12px, 500 weight) for tertiary information. Line heights are generous (1.4–1.5) to maximize readability on screens and reduce cognitive load during a security-sensitive moment. Letter-spacing is tight to neutral (0em to 0.02em) to maintain the geometric character of DM Sans without introducing artificial spacing. On smaller viewports (≤768px), the title scales down to headline-md (28px) and body text to label-md (14px), preserving hierarchy while respecting screen constraints. Apply no text-shadow or text-decoration except for focus states, w

Layout

The layout follows a 'centered column' model: a single 600px-wide container (max-width: 600px) is vertically and horizontally centered within the viewport using flexbox (display: flex; justify-content: center; align-items: center; min-height: 100vh). This creates a meditative, focused experience that draws the user's eye to the center of the screen. The container uses 20px padding (gutter spacing) to maintain breathing room on mobile devices. Internal spacing follows the 8px unit scale: the spinner sits 32px above the heading (margin-bottom: 32px = 4 units), the heading sits 16px above the body copy (margin-bottom: 16px = 2 units), and the body copy sits 24px above any interactive elements (md spacing). On tablets (≤768px), the spinner reduces to 56px and margins compress to 28px and 12px

Elevation & Depth

Elevation in this system is achieved through subtle shadows and color shifts rather than dramatic depth. The base level (Level 1) is the white background (#ffffff) with no shadow. Level 2 (dropdown panels and overlays) uses a single shadow: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), which creates a soft, diffused separation from the background without introducing visual weight. Dropdown panels also use a 1px solid border in outline (#d0d0d0) to define their boundary crisply. Level 3 (modals, if used) would employ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) with a slightly larger blur radius. Th

Shapes

The shape philosophy is 'Minimal Geometry'—rounded corners are used sparingly and only where they serve a functional purpose. Buttons and interactive elements use border-radius: 4px (DEFAULT), a subtle softening that feels modern without appearing playful or informal. Dropdown panels and cards use the same 4px radius for consistency. The spinner uses border-radius: 50% (full) to create a perfect circle, which is both geometrically pure and universally recognized as a loading indicator. Inputs and form fields also use 4px radius. No elements use sharp corners (0px radius) except the body itself

Components

Loading & Feedback The spinner-primary component is the visual anchor of the interface. It consists of a 64px square container with a 4px border in primary-container (#e5e4ff, pale indigo), with the top border colored primary (#6366f1, vivid indigo). The animation rotates continuously (animation: spin 1s linear infinite) to signal active processing. On smaller screens (≤480px), spinner-primary-sm reduces the size to 48px and border-width to 3px, maintaining visual prominence without overwhelming the viewport. The spinner uses no box-shadow—it relies on color contrast alone.

Text & Messaging The heading-primary component applies title-lg typography (24px, 600 weight, DM Sans) in on-surface color (#1a1a1a), with line-height: 1.4 and margin-bottom: 16px to create breathing room. On t

Do's and Don'ts

**Do**

• Do use primary (#6366f1) exclusively for interactive states, loading indicators, and focus outlines—never for body text or backgrounds.
• Do maintain the 600px max-width container on all screen sizes to preserve the centered, meditative layout.
• Do apply generous line-height (1.4–1.5) and letter-spacing (0em to 0.02em) to maximize readability during high-stress moments.
• Do use the 8px spacing unit scale consistently: 16px, 24px, 32px, 40px—never arbitrary values.
• Do apply the 0 3px 8px rgba(0, 0, 0, 0.15) shadow to all elevated surfaces (dropdowns, modals) for consistent depth.
• Do use DM Sans exclusively—never substitute system fonts or serif typefaces.

**Don't**

• Don't use multiple accent colors or gradients—the single indigo primary is the only chromatic accent allowed.
• Don't apply text-shadow, text-decoration, or other embellishments to body copy—clarity requires restraint.
• Don't use border-radius values larger than 4px on buttons, inputs, or cards—the aesthetic is minimal geometry, not soft organic shapes.
• Don't exceed 600px container width or center the layout off-axis—the centered column is the defining layout principle.
• Don't apply animations or transitions longer than 1s—loading states should feel responsive, not sluggish.
• Don't use color alone to communicate state—always pair color changes with text labels or icons for accessibility.