Preview

Overview

The Swiss Design Conversational Form pairs the timeless principles of the International Typographic Style (Josef Müller-Brockmann, Max Bill) with conversational natural-language inputs and a reactive SVG companion avatar powered by the bloub animation engine.

Instead of a cold grid of isolated labels and rectangular inputs, the form reads as an official civic declaration: "My full name is [ ... ], I was born on [ ... ] in [ ... ], and I currently live at [ ... ]".

Key Design Pillars

1. Swiss Typographic Rigor:

   • Asymmetric 3-column grid structure (Navigation & Brand | Conversational Document Canvas | Assistance & Companion Rail).
   • Strict hierarchical typography, micro-labels (01 / 05, CLEAR · HUMAN · INCLUSIVE), and subtle hairline borders.
   • Stark monochromatic Alpine mountain imagery with high contrast and subtle gradient fades.
   • Red-and-white Swiss Confederation emblem badges.

2. Conversational Natural Language:

   • 9 numbered fill-in-the-blank civic declarations.
   • Fluid inline text fields, cantonal dropdown selectors, and date pickers that harmonize directly with prose.
   • Real-time inline feedback and context helpers for official documentation standards.

3. Reactive Avatar Companion (BloubAvatar):

   • The digital assistant stays attentive in the right-hand assistance rail, tracking user focus with dynamic gaze estimation.
   • Shifts expressions (attentif while typing, heureux upon valid records, curieux when exploring services, and fier upon statutory agreement).
   • Dynamic speech bubble providing contextual guidance and reassurance at every step.

4. Process Clarity & Progress:

   • Circular SVG gauge tracking real-time progress (1 / 5, 2 / 5, etc.).
   • Persistent draft saving mechanism with instant visual feedback.
   • Inline FAQ drawers answering document validity and privacy encryption standards.

Data Model & Flow

interface SwissCitizenFiling {
  fullName: string;
  birthDate: string;
  birthCity: string;
  birthCanton: string;
  gender: string;
  identityType: string;
  addressStreet: string;
  addressLocality: string;
  addressCity: string;
  addressCanton: string;
  contactMethod: string;
  contactValue: string;
  serviceType: string;
  serviceReason: string;
  referralSource: string;
  emergencyRelation: string;
  emergencyName: string;
  emergencyContact: string;
  termsAgreed: boolean;
}