Kriss.ai

Overview

Kriss.ai is an intelligent conversational interface designed for healthcare professionals across diverse clinical environments. The design system embraces a "Context-Aware Minimalism" aesthetic—a sophisticated approach that maintains visual consistency while adapting its accent colors and messaging tone to reflect the specific clinical context (front desk, consultation room, surgery room, doctor's office). The brand personality is precise, empathetic, and operationally focused: Kriss speaks with the clarity of a medical professional, never patronizing, always actionable. The UI evokes trust through restraint—a dark, focused canvas (rgb(15, 15, 15)) with context-specific accent colors that signal the environment without overwhelming the interface. Example sentence in Kriss's voice: "This patient's insurance verification is complete—you're ready to proceed with the consultation."

Colors

The color system is built on a dark, professional foundation (surface: #0f0f0f, on-surface: #ffffff) that reduces cognitive load during high-pressure clinical workflows. Primary (#0f0f0f) serves as the neutral anchor for buttons and interactive elements, paired with white text (on-primary: #ffffff) for maximum legibility on medical displays. The innovation lies in context-specific accent colors that layer atop this foundation: Front Desk uses a warm red accent (error: #c42d2d, error-container: rgba(196, 45, 45, 0.35)) to signal administrative urgency; Consultation Room employs a calming green (secondary-container: rgba(25, 147, 23, 0.35)) to convey patient care; Surgery Room uses a clinical purple (rgba(107, 23, 147, 0.35)) for procedural precision; Doctor's Office applies a professional g

Typography

The type system uses Krissai, a custom sans-serif font family optimized for medical clarity and professional authority. Display (60px, 700 weight, -0.04em letter-spacing) anchors hero sections and major headings with commanding presence; Headline-lg (40px, 600 weight) introduces feature sections; Headline-md (28px, 600 weight) breaks content into scannable chunks. Body-lg (18px, 400 weight, 28px line-height) and Body-md (16px, 400 weight, 24px line-height) carry conversational content and chat messages, with 0.01–0.02em letter-spacing to enhance readability on screens. Label-md (14px, 600 weight) and Label-sm (12px, 500 weight) are reserved for buttons, badges, and UI chrome. All text over dark backgrounds uses white (on-surface: #ffffff) or light gray (on-surface-variant: #d0d0d0) to main

Layout

The layout system employs a fixed container max-width of 822px, centered on the viewport, creating a focused, scannable experience ideal for clinical workflows where attention is premium. The 12-column grid provides flexibility for 2-column, 3-column, and 4-column layouts depending on content density. Spacing follows a semantic scale: unit (8px) as the base increment, with sm (12px) for tight grouping, md (24px) for section separation, lg (40px) for major content blocks, and xl (64px) for page-level rhythm. Gutter spacing (24px) separates content from viewport edges on desktop; on mobile, this compresses to 12px to maximize screen real estate. The dark background (surface: #0f0f0f) acts as negative space, allowing content to float with visual weight. White-space is generous around interact

Elevation & Depth

Depth in Kriss.ai is conveyed through subtle layering rather than dramatic shadows, reflecting the clinical brand's preference for clarity over ornamentation. Level 1 (Base): The dark surface (rgb(15, 15, 15)) provides the foundation; no shadow applied. Level 2 (Standard Cards & Glass): Glass-morphic cards use backdrop-filter: blur(8px), background: rgba(255, 255, 255, 0.2), and a 1px border at rgba(255, 255, 255, 0.3) to create a frosted-lens effect. These cards receive box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), a soft, spread shadow that separates the card from the background without drawing

Shapes

The shape philosophy is "Clinical Precision"—sharp, functional corners that convey medical authority while maintaining approachability. Border-radius follows a deliberate scale: sm (3px) for tight UI elements like dropdown arrows and small buttons, creating a technical, engineered feel; DEFAULT (4px) for form inputs and small cards, balancing precision with softness; md (6px) for standard cards and panels, the workhorse radius; lg (9px) for larger interactive surfaces like chat bubbles and modals, introducing subtle warmth; xl (18px) for the most prominent containers (e.g., hero sections), sig

Components

Action Elements Buttons are the primary call-to-action mechanism. Button-primary uses background: {colors.primary} (rgb(15, 15, 15)), text: {colors.on-primary} (white), padding: 10px 30px, height: 40px, rounded: {rounded.sm} (3px), and typography: {typography.label-md}. On hover, transition to button-primary-hover with background: {colors.primary-container} (rgb(51, 51, 51)) over 0.3s, maintaining the same text color. Button-secondary uses a transparent background with a 1px border at {colors.outline} (rgb(102, 102, 102)), allowing secondary actions to recede visually. Context-specific buttons (front-desk, consultation, surgery, office) override the primary color with environment-specific accents: front-desk uses rgba(196, 45, 45, 0.35) background with rgb(108, 0, 0) text; on hover, in

Do's and Don'ts

**Do**

• Do use context-specific accent colors (red for front desk, green for consultation, purple for surgery, gold for office) to signal environment without breaking the dark, focused interface.
• Do maintain 3px–6px border-radius on interactive elements to convey clinical precision; reserve 9px+ for secondary or conversational surfaces.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to glass cards and modals to create subtle depth without visual noise.
• Do use white (on-surface: #ffffff) or light gray (on-surface-variant: #d0d0d0) text on dark backgrounds to maintain WCAG AAA contrast (7:1 minimum).
• Do transition button and input states over 0.3s to provide tactile feedback in high-stress clinical workflows.
• Do constrain chat messages to max-width: 70% and use lg (9px) border-radius to humanize the conversational interface while maintaining professionalism.

**Don't**

• Don't use bright, saturated colors as primary accents; reserve context-specific colors for secondary buttons and environment signaling only.
• Don't apply border-radius > 18px to any component; the brand rejects soft, rounded aesthetics in favor of clinical precision.
• Don't use shadows > 0 8px 24px rgba(0, 0, 0, 0.2); excessive depth contradicts the minimalist, focused design philosophy.
• Don't place small text (label-sm, 12px) over busy backgrounds without text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); legibility is non-negotiable in healthcare.
• Don't mix Krissai with system fonts or generic sans-serifs; the custom typeface is essential to brand identity and medical authority.
• Don't exceed container-max-width of 822px; wider layouts reduce focus and increase cognitive load in clinical environments.