@umituz/web-dashboard 6.1.0 → 6.2.0

package/src/domains/onboarding/components/screens/AppDemoScreen.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { PrimaryButton } from '../shared/PrimaryButton';
+import { PrimaryButton } from '../PrimaryButton';
 import { useOnboardingIntl } from '../OnboardingIntl';
 import type { AppDemoScreenConfig } from '../../types/screens';
 
@@ -11,18 +11,12 @@ export interface AppDemoScreenProps {
 export function AppDemoScreen({ config, onNext }: AppDemoScreenProps) {
   const { labels } = useOnboardingIntl();
   const [result, setResult] = useState<unknown>(null);
-  // The demo component is a consumer-supplied component reference held in config —
-  // aliasing it here is a lookup, not creation.
   const Demo = config.demo.component;
 
   return (
-    <div className="flex flex-1 flex-col gap-6">
-      {config.title && (
-        <h2 className="text-2xl font-semibold text-[rgb(var(--uob-text-primary))] sm:text-3xl">
-          {config.title}
-        </h2>
-      )}
-      <div className="rounded-2xl border border-[rgb(var(--uob-border))] bg-[rgb(var(--uob-surface-muted))] p-4">
+    <div className="udb-onb-proof">
+      {config.title && <h2 className="udb-onb-title">{config.title}</h2>}
+      <div className="udb-onb-demo">
         <Demo
           {...((config.demo.props ?? {}) as Record<string, unknown>)}
           onSave={(value: unknown) => {

package/src/domains/onboarding/components/screens/ComparisonScreen.tsx

@@ -1,6 +1,5 @@
 import { Check, X } from 'lucide-react';
-import { PrimaryButton } from '../shared/PrimaryButton';
-import { cn } from '../../theme/cn';
+import { PrimaryButton } from '../PrimaryButton';
 import { useOnboardingIntl } from '../OnboardingIntl';
 import type { ComparisonScreenConfig } from '../../types/screens';
 
@@ -12,13 +11,9 @@ export interface ComparisonScreenProps {
 export function ComparisonScreen({ config, onNext }: ComparisonScreenProps) {
   const { labels } = useOnboardingIntl();
   return (
-    <div className="flex flex-1 flex-col gap-6">
-      {config.title && (
-        <h2 className="text-2xl font-semibold text-[rgb(var(--uob-text-primary))] sm:text-3xl">
-          {config.title}
-        </h2>
-      )}
-      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+    <div className="udb-onb-proof">
+      {config.title && <h2 className="udb-onb-title">{config.title}</h2>}
+      <div className="udb-onb-compare">
         <ComparisonColumn heading={labels.withoutUs} items={config.before} tone="negative" />
         <ComparisonColumn heading={labels.withUs} items={config.after} tone="positive" />
       </div>
@@ -35,21 +30,16 @@ interface ComparisonColumnProps {
 
 function ComparisonColumn({ heading, items, tone }: ComparisonColumnProps) {
   const Icon = tone === 'positive' ? Check : X;
-  const colorClass =
-    tone === 'positive'
-      ? 'border-[rgb(var(--uob-success))] bg-[rgb(var(--uob-surface))]'
-      : 'border-[rgb(var(--uob-error))] bg-[rgb(var(--uob-surface))]';
-  const iconColor =
-    tone === 'positive'
-      ? 'text-[rgb(var(--uob-success))]'
-      : 'text-[rgb(var(--uob-error))]';
   return (
-    <div className={cn('flex flex-col gap-3 rounded-2xl border p-5', colorClass)}>
-      <h3 className="text-lg font-semibold text-[rgb(var(--uob-text-primary))]">{heading}</h3>
-      <ul className="flex flex-col gap-2">
+    <div className={`udb-onb-compare__col udb-onb-compare__col--${tone === 'positive' ? 'pos' : 'neg'}`}>
+      <h3 className="udb-onb-compare__heading">{heading}</h3>
+      <ul className="udb-onb-list">
         {items.map((item) => (
-          <li key={item} className="flex items-start gap-2 text-sm text-[rgb(var(--uob-text-primary))]">
-            <Icon className={cn('mt-0.5 h-4 w-4 shrink-0', iconColor)} aria-hidden="true" />
+          <li key={item} className="udb-onb-compare__item">
+            <Icon
+              className={`udb-onb-icon--sm udb-onb-compare__icon udb-onb-compare__icon--${tone === 'positive' ? 'pos' : 'neg'}`}
+              aria-hidden="true"
+            />
             <span>{item}</span>
           </li>
         ))}

package/src/domains/onboarding/components/screens/GoalQuestionScreen.tsx

@@ -1,7 +1,8 @@
 import { useCallback, useState } from 'react';
-import { OptionCard } from '../shared/OptionCard';
-import { PrimaryButton } from '../shared/PrimaryButton';
-import { QuestionWrapper } from '../shared/QuestionWrapper';
+import { OptionCard } from '@umituz/web-design-system/molecules';
+import { PrimaryButton } from '../PrimaryButton';
+import { QuestionWrapper } from '../QuestionWrapper';
+import { renderBundledIcon } from '../renderBundledIcon';
 import { useOnboardingIntl } from '../OnboardingIntl';
 import type { GoalQuestionScreenConfig } from '../../types/screens';
 
@@ -34,16 +35,18 @@ export function GoalQuestionScreen({ config, onNext, initialSelected }: GoalQues
       subtitle={multiSelect ? labels.selectAllThatApply : labels.selectOne}
     >
       <div
-        className="flex flex-col gap-2"
+        className="udb-onb-list"
         role={multiSelect ? 'group' : 'radiogroup'}
         aria-label={config.question}
       >
         {config.options.map((option) => (
           <OptionCard
             key={option.id}
-            option={option}
+            label={option.label}
+            description={option.description}
+            icon={renderBundledIcon(option.iconName)}
             selected={selected.includes(option.id)}
-            onToggle={toggle}
+            onSelect={() => toggle(option.id)}
             multiSelect={multiSelect}
           />
         ))}

package/src/domains/onboarding/components/screens/PainPointsScreen.tsx

@@ -1,7 +1,8 @@
 import { useCallback, useState } from 'react';
-import { OptionCard } from '../shared/OptionCard';
-import { PrimaryButton } from '../shared/PrimaryButton';
-import { QuestionWrapper } from '../shared/QuestionWrapper';
+import { OptionCard } from '@umituz/web-design-system/molecules';
+import { PrimaryButton } from '../PrimaryButton';
+import { QuestionWrapper } from '../QuestionWrapper';
+import { renderBundledIcon } from '../renderBundledIcon';
 import { formatLabel, useOnboardingIntl } from '../OnboardingIntl';
 import type { PainPointsScreenConfig } from '../../types/screens';
 
@@ -38,21 +39,20 @@ export function PainPointsScreen({ config, onNext, initialSelected }: PainPoints
   );
 
   return (
-    <QuestionWrapper
-      title={config.title}
-      subtitle={subtitle}
-    >
+    <QuestionWrapper title={config.title} subtitle={subtitle}>
       <div
-        className="flex flex-col gap-2"
+        className="udb-onb-list"
         role={multiSelect ? 'group' : 'radiogroup'}
         aria-label={config.title}
       >
         {config.painPoints.map((point) => (
           <OptionCard
             key={point.id}
-            option={point}
+            label={point.label}
+            description={point.description}
+            icon={renderBundledIcon(point.iconName)}
             selected={selected.includes(point.id)}
-            onToggle={toggle}
+            onSelect={() => toggle(point.id)}
             multiSelect={multiSelect}
           />
         ))}

package/src/domains/onboarding/components/screens/PaywallScreen.tsx

@@ -1,11 +1,12 @@
 import { useEffect, useState } from 'react';
 import { motion } from 'framer-motion';
 import { ShieldCheck } from 'lucide-react';
-import { PrimaryButton } from '../shared/PrimaryButton';
-import { renderBundledIcon } from '../shared/renderBundledIcon';
-import { useOnboardingAnalytics } from '../hooks/useOnboardingAnalytics';
+import { PrimaryButton } from '../PrimaryButton';
+import { renderBundledIcon } from '../renderBundledIcon';
+import { useOnboardingAnalytics } from '../../hooks/useOnboardingAnalytics';
 import { doesIconNameResolve } from '../../predicates/icon-name-resolves';
 import { formatCountWithLocale } from '../../calc/count-with-locale';
+import { cn } from '@umituz/web-design-system/utils/cn';
 import { formatLabel, useOnboardingIntl } from '../OnboardingIntl';
 import type { PaywallScreenConfig } from '../../types/screens';
 import type { AnalyticsConfig } from '../../types/config';
@@ -16,20 +17,12 @@ export interface PaywallScreenProps {
   analytics?: AnalyticsConfig;
 }
 
-/**
- * Hard paywall with trial.
- *
- * Error contract: if `onAccept` throws (network failure, provider outage), the
- * user STAYS on this screen with a retryable error. A failed purchase attempt
- * must never silently advance the user past the paywall.
- */
 export function PaywallScreen({ config, onNext, analytics }: PaywallScreenProps) {
   const { labels, locale } = useOnboardingIntl();
   const { trackEvent } = useOnboardingAnalytics(analytics);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  // "Viewed" is a view event — fire when the paywall is shown, not on interaction.
   useEffect(() => {
     trackEvent({ name: 'paywall_viewed', stepId: config.id, timestamp: Date.now() });
   }, [trackEvent, config.id]);
@@ -55,21 +48,19 @@ export function PaywallScreen({ config, onNext, analytics }: PaywallScreenProps)
   }
 
   return (
-    <div className="flex flex-1 flex-col gap-6">
-      <div className="flex flex-col gap-2 text-center">
-        <h2 className="text-3xl font-bold text-[rgb(var(--uob-text-primary))] sm:text-4xl">
-          {config.title}
-        </h2>
-        <p className="text-base text-[rgb(var(--uob-text-muted))]">{config.subtitle}</p>
+    <div className="udb-onb-proof">
+      <div className="udb-onb-question__head udb-onb-question__head--center">
+        <h2 className="udb-onb-title udb-onb-title--display">{config.title}</h2>
+        <p className="udb-onb-lead">{config.subtitle}</p>
       </div>
       <motion.div
         initial={{ scale: 0.95, opacity: 0 }}
         animate={{ scale: 1, opacity: 1 }}
         transition={{ duration: 0.3 }}
-        className="rounded-2xl border-2 border-[rgb(var(--uob-primary-500))] bg-[rgb(var(--uob-primary-50))] p-6 text-center"
+        className="udb-onb-price"
       >
-        <div className="text-3xl font-bold text-[rgb(var(--uob-primary-700))]">{config.price}</div>
-        <div className="mt-1 text-sm text-[rgb(var(--uob-text-muted))]">
+        <div className="udb-onb-price__amount">{config.price}</div>
+        <div className="udb-onb-price__terms">
           {config.trialPrice !== undefined
             ? formatLabel(labels.trialIntroPattern, {
                 price: config.trialPrice,
@@ -78,39 +69,32 @@ export function PaywallScreen({ config, onNext, analytics }: PaywallScreenProps)
             : formatLabel(labels.trialDaysPattern, { count: config.trialDays })}
         </div>
       </motion.div>
-      <ul className="flex flex-col gap-2">
+      <ul className="udb-onb-list">
         {config.features.map((feature, i) => (
           <li
             key={`${feature.text}-${i}`}
-            className={
-              feature.highlighted
-                ? 'flex items-start gap-3 rounded-lg border border-[rgb(var(--uob-primary-500))] bg-[rgb(var(--uob-primary-50))] p-3'
-                : 'flex items-start gap-3 rounded-lg border border-[rgb(var(--uob-border))] bg-[rgb(var(--uob-surface))] p-3'
-            }
+            className={cn('udb-onb-feature', feature.highlighted && 'udb-onb-feature--hl')}
           >
             {doesIconNameResolve(feature.iconName) && (
-              <span className="mt-0.5 text-[rgb(var(--uob-primary-500))]">
-                {renderBundledIcon(feature.iconName, 'h-5 w-5')}
+              <span className="udb-onb-feature__icon">
+                {renderBundledIcon(feature.iconName, 'udb-onb-icon')}
               </span>
             )}
-            <span className="text-sm text-[rgb(var(--uob-text-primary))]">{feature.text}</span>
+            <span>{feature.text}</span>
           </li>
         ))}
       </ul>
       {config.socialProof && (
-        <p className="text-center text-sm text-[rgb(var(--uob-text-muted))]">
+        <p className="udb-onb-note">
           {config.socialProof.text} ({formatCountWithLocale(config.socialProof.count, locale)}+ users)
         </p>
       )}
       {error && (
-        <p
-          role="alert"
-          className="rounded-md border border-[rgb(var(--uob-error))] bg-[rgb(var(--uob-error))]/10 p-3 text-sm text-[rgb(var(--uob-error))]"
-        >
+        <p role="alert" className="udb-onb-error">
           {error}
         </p>
       )}
-      <div className="flex flex-col gap-2">
+      <div className="udb-onb-question__body">
         <PrimaryButton onClick={handleAccept} loading={busy}>
           {config.cta}
         </PrimaryButton>
@@ -123,14 +107,14 @@ export function PaywallScreen({ config, onNext, analytics }: PaywallScreenProps)
               config.onSecondaryCta?.();
               onNext({ accepted: false, trialStarted: false });
             }}
-            className="text-sm font-semibold text-[rgb(var(--uob-text-muted))] underline-offset-4 hover:underline disabled:opacity-50"
+            className="udb-onb-link"
           >
             {config.secondaryCta}
           </button>
         )}
       </div>
-      <p className="flex items-center justify-center gap-1 text-xs text-[rgb(var(--uob-text-muted))]">
-        <ShieldCheck className="h-3.5 w-3.5" />
+      <p className="udb-onb-note">
+        <ShieldCheck className="udb-onb-icon--xs" />
         {labels.cancelAnytimeNote}
       </p>
     </div>

package/src/domains/onboarding/components/screens/PermissionPrimingScreen.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
-import { PrimaryButton } from '../shared/PrimaryButton';
-import { renderBundledIcon } from '../shared/renderBundledIcon';
-import { usePermissionPriming } from '../hooks/usePermissionPriming';
-import { useOnboardingAnalytics } from '../hooks/useOnboardingAnalytics';
+import { PrimaryButton } from '../PrimaryButton';
+import { renderBundledIcon } from '../renderBundledIcon';
+import { usePermissionPriming } from '../../hooks/usePermissionPriming';
+import { useOnboardingAnalytics } from '../../hooks/useOnboardingAnalytics';
 import { doesIconNameResolve } from '../../predicates/icon-name-resolves';
 import { isPermissionGranted } from '../../predicates/permission-granted';
 import { useOnboardingIntl } from '../OnboardingIntl';
@@ -27,13 +27,9 @@ export interface PermissionPrimingScreenProps {
 export function PermissionPrimingScreen({ config, onNext, analytics }: PermissionPrimingScreenProps) {
   const { labels } = useOnboardingIntl();
   const { trackEvent } = useOnboardingAnalytics(analytics);
-  // Hook tracks the live permission state for UI feedback; the screen invokes the
-  // consumer-provided `config.onRequest` so the consumer controls the actual mechanism.
   const { status } = usePermissionPriming(config.permission);
   const [isRequesting, setIsRequesting] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  // Configured icon wins; fall back to the permission's default glyph when the
-  // configured name is missing or not in the bundled registry.
   const iconName = doesIconNameResolve(config.iconName)
     ? config.iconName
     : PERMISSION_DEFAULT_ICON[config.permission];
@@ -71,37 +67,26 @@ export function PermissionPrimingScreen({ config, onNext, analytics }: Permissio
   }
 
   return (
-    <div className="flex flex-1 flex-col gap-6">
+    <div className="udb-onb-proof">
       {doesIconNameResolve(iconName) && (
-        <div
-          className="flex h-20 w-20 items-center justify-center rounded-2xl bg-[rgb(var(--uob-primary-50))] text-[rgb(var(--uob-primary-500))]"
-          aria-hidden="true"
-        >
-          {renderBundledIcon(iconName, 'h-10 w-10')}
+        <div className="udb-onb-hero udb-onb-hero--lg" aria-hidden="true">
+          {renderBundledIcon(iconName, 'udb-onb-icon--lg')}
         </div>
       )}
-      <div className="flex flex-col gap-2">
-        <h2 className="text-2xl font-semibold text-[rgb(var(--uob-text-primary))] sm:text-3xl">
-          {config.title}
-        </h2>
-        <p className="text-base text-[rgb(var(--uob-text-muted))]">{config.description}</p>
+      <div className="udb-onb-question__head">
+        <h2 className="udb-onb-title">{config.title}</h2>
+        <p className="udb-onb-lead">{config.description}</p>
       </div>
-      <ul className="flex flex-col gap-2">
+      <ul className="udb-onb-list">
         {config.benefits.map((benefit) => (
-          <li
-            key={benefit}
-            className="flex items-start gap-2 rounded-lg border border-[rgb(var(--uob-border))] bg-[rgb(var(--uob-surface))] p-3 text-sm text-[rgb(var(--uob-text-primary))]"
-          >
-            <span className="mt-1 h-2 w-2 shrink-0 rounded-full bg-[rgb(var(--uob-primary-500))]" />
+          <li key={benefit} className="udb-onb-benefit">
+            <span className="udb-onb-benefit__dot" />
             <span>{benefit}</span>
           </li>
         ))}
       </ul>
       {error && (
-        <p
-          role="alert"
-          className="rounded-md border border-[rgb(var(--uob-error))] bg-[rgb(var(--uob-error))]/10 p-3 text-sm text-[rgb(var(--uob-error))]"
-        >
+        <p role="alert" className="udb-onb-error">
           {error}
         </p>
       )}

package/src/domains/onboarding/components/screens/PersonalizedSolutionScreen.tsx

@@ -1,6 +1,6 @@
 import { motion } from 'framer-motion';
 import { CheckCircle2 } from 'lucide-react';
-import { PrimaryButton } from '../shared/PrimaryButton';
+import { PrimaryButton } from '../PrimaryButton';
 import { useOnboardingIntl } from '../OnboardingIntl';
 import type { PersonalizedSolutionScreenConfig } from '../../types/screens';
 
@@ -14,35 +14,22 @@ export function PersonalizedSolutionScreen({ config, onNext }: PersonalizedSolut
   const visible = config.solutions.filter((s) => config.selectedPainPointIds.includes(s.painPointId));
 
   return (
-    <div className="flex flex-1 flex-col gap-6">
-      {config.title && (
-        <h2 className="text-2xl font-semibold text-[rgb(var(--uob-text-primary))] sm:text-3xl">
-          {config.title}
-        </h2>
-      )}
-      {config.subtitle && (
-        <p className="text-base text-[rgb(var(--uob-text-muted))]">{config.subtitle}</p>
-      )}
-      <ul className="flex flex-col gap-3">
+    <div className="udb-onb-proof">
+      {config.title && <h2 className="udb-onb-title">{config.title}</h2>}
+      {config.subtitle && <p className="udb-onb-lead">{config.subtitle}</p>}
+      <ul className="udb-onb-solutions">
         {visible.map((solution, i) => (
           <motion.li
             key={solution.painPointId}
             initial={{ opacity: 0, x: -12 }}
             animate={{ opacity: 1, x: 0 }}
             transition={{ delay: i * 0.1, duration: 0.3 }}
-            className="flex items-start gap-3 rounded-xl border border-[rgb(var(--uob-border))] bg-[rgb(var(--uob-surface))] p-4"
+            className="udb-onb-solution"
           >
-            <CheckCircle2
-              className="mt-0.5 h-5 w-5 shrink-0 text-[rgb(var(--uob-success))]"
-              aria-hidden="true"
-            />
-            <div className="flex flex-1 flex-col gap-1">
-              <p className="text-base text-[rgb(var(--uob-text-primary))]">{solution.solution}</p>
-              {solution.statistic && (
-                <p className="text-sm font-semibold text-[rgb(var(--uob-primary-500))]">
-                  {solution.statistic}
-                </p>
-              )}
+            <CheckCircle2 className="udb-onb-icon udb-onb-solution__icon" aria-hidden="true" />
+            <div className="udb-onb-solution__body">
+              <p>{solution.solution}</p>
+              {solution.statistic && <p className="udb-onb-solution__stat">{solution.statistic}</p>}
             </div>
           </motion.li>
         ))}

package/src/domains/onboarding/components/screens/PreferencesScreen.tsx

@@ -1,7 +1,8 @@
 import { useId, useState } from 'react';
-import { PrimaryButton } from '../shared/PrimaryButton';
-import { QuestionWrapper } from '../shared/QuestionWrapper';
+import { PrimaryButton } from '../PrimaryButton';
+import { QuestionWrapper } from '../QuestionWrapper';
 import { useOnboardingIntl } from '../OnboardingIntl';
+import { cn } from '@umituz/web-design-system/utils/cn';
 import {
   clampValueToBounds,
   resolveSliderBounds,
@@ -64,7 +65,7 @@ export function PreferencesScreen({ config, onNext }: PreferencesScreenProps) {
 
   return (
     <QuestionWrapper title={config.title} subtitle={labels.tailorExperience}>
-      <div className="flex flex-col gap-5">
+      <div className="udb-onb-prefs">
         {config.preferences.map((item) => (
           <PreferenceRow key={item.id} item={item} value={values[item.id]} onChange={(v) => update(item.id, v)} />
         ))}
@@ -85,8 +86,8 @@ interface PreferenceRowProps {
 function PreferenceRow({ item, value, onChange }: PreferenceRowProps) {
   const fieldId = useId();
   return (
-    <div className="flex flex-col gap-2">
-      <label className="text-sm font-semibold text-[rgb(var(--uob-text-primary))]" htmlFor={fieldId}>
+    <div className="udb-onb-field">
+      <label className="udb-onb-field__label" htmlFor={fieldId}>
         {item.label}
       </label>
       <PreferenceControl item={item} value={value} onChange={onChange} fieldId={fieldId} />
@@ -104,7 +105,7 @@ function PreferenceControl({ item, value, onChange, fieldId }: PreferenceControl
       return (
         <select
           id={fieldId}
-          className="rounded-md border border-[rgb(var(--uob-border))] bg-[rgb(var(--uob-surface))] p-2 text-sm"
+          className="udb-onb-select"
           value={typeof value === 'string' ? value : ''}
           onChange={(e) => onChange(e.target.value)}
         >
@@ -118,7 +119,7 @@ function PreferenceControl({ item, value, onChange, fieldId }: PreferenceControl
     case 'multi-select': {
       const list = Array.isArray(value) ? value : [];
       return (
-        <div className="flex flex-wrap gap-2" role="group" aria-label={item.label}>
+        <div className="udb-onb-chips" role="group" aria-label={item.label}>
           {item.options?.map((opt) => {
             const isOn = list.includes(opt.id);
             return (
@@ -127,11 +128,7 @@ function PreferenceControl({ item, value, onChange, fieldId }: PreferenceControl
                 type="button"
                 aria-pressed={isOn}
                 onClick={() => onChange(toggleMulti(list, opt.id))}
-                className={
-                  isOn
-                    ? 'rounded-full bg-[rgb(var(--uob-primary-500))] px-3 py-1 text-sm text-white'
-                    : 'rounded-full border border-[rgb(var(--uob-border))] bg-[rgb(var(--uob-surface))] px-3 py-1 text-sm hover:border-[rgb(var(--uob-primary-500))]'
-                }
+                className={cn('udb-onb-chip', isOn && 'udb-onb-chip--on')}
               >
                 {opt.label}
               </button>
@@ -148,26 +145,16 @@ function PreferenceControl({ item, value, onChange, fieldId }: PreferenceControl
           role="switch"
           aria-checked={value === true}
           onClick={() => onChange(!value)}
-          className={
-            value === true
-              ? 'h-6 w-11 rounded-full bg-[rgb(var(--uob-primary-500))] p-0.5'
-              : 'h-6 w-11 rounded-full bg-[rgb(var(--uob-border))] p-0.5'
-          }
+          className={cn('udb-onb-switch', value === true && 'udb-onb-switch--on')}
         >
-          <span
-            className={
-              value === true
-                ? 'block h-5 w-5 translate-x-5 rounded-full bg-white transition-transform'
-                : 'block h-5 w-5 translate-x-0 rounded-full bg-white transition-transform'
-            }
-          />
+          <span className="udb-onb-switch__thumb" />
         </button>
       );
     case 'slider': {
       const { min, max } = resolveSliderBounds(item.min, item.max);
       const numeric = typeof value === 'number' ? value : min;
       return (
-        <div className="flex flex-col gap-1">
+        <div className="udb-onb-slider">
           <input
             type="range"
             id={fieldId}
@@ -178,9 +165,8 @@ function PreferenceControl({ item, value, onChange, fieldId }: PreferenceControl
             aria-valuemin={min}
             aria-valuemax={max}
             aria-valuenow={numeric}
-            className="w-full"
           />
-          <div className="flex justify-between text-xs text-[rgb(var(--uob-text-muted))]">
+          <div className="udb-onb-slider__scale">
             <span>{min}</span>
             <span>{numeric}</span>
             <span>{max}</span>

package/src/domains/onboarding/components/screens/ProcessingScreen.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Check } from 'lucide-react';
-import { cn } from '../../theme/cn';
+import { cn } from '@umituz/web-design-system/utils/cn';
 import { splitTotalDuration } from '../../calc/duration-equal-split';
 import type { ProcessingScreenConfig } from '../../types/screens';
 
@@ -24,13 +24,9 @@ export function ProcessingScreen({ config, onComplete }: ProcessingScreenProps)
   }, [currentStep, config.steps.length, stepDuration, onComplete]);
 
   return (
-    <div className="flex flex-1 flex-col items-center justify-center gap-8 text-center">
-      {config.title && (
-        <h2 className="text-2xl font-semibold text-[rgb(var(--uob-text-primary))] sm:text-3xl">
-          {config.title}
-        </h2>
-      )}
-      <ul className="flex w-full max-w-md flex-col gap-3" aria-live="polite">
+    <div className="udb-onb-stage">
+      {config.title && <h2 className="udb-onb-title">{config.title}</h2>}
+      <ul className="udb-onb-steps" aria-live="polite">
         {config.steps.map((step, i) => {
           const isDone = i < currentStep;
           const isActive = i === currentStep;
@@ -38,34 +34,22 @@ export function ProcessingScreen({ config, onComplete }: ProcessingScreenProps)
             <li
               key={`${step}-${i}`}
               className={cn(
-                'flex items-center gap-3 rounded-lg border p-3 text-left text-sm',
-                isDone
-                  ? 'border-[rgb(var(--uob-success))] bg-[rgb(var(--uob-success))]/10'
-                  : isActive
-                    ? 'border-[rgb(var(--uob-primary-500))] bg-[rgb(var(--uob-primary-50))]'
-                    : 'border-[rgb(var(--uob-border))] bg-[rgb(var(--uob-surface))]',
+                'udb-onb-step',
+                isDone && 'udb-onb-step--done',
+                isActive && 'udb-onb-step--active',
               )}
             >
-              <span
-                className={cn(
-                  'flex h-6 w-6 shrink-0 items-center justify-center rounded-full',
-                  isDone
-                    ? 'bg-[rgb(var(--uob-success))] text-white'
-                    : isActive
-                      ? 'bg-[rgb(var(--uob-primary-500))] text-white'
-                      : 'bg-[rgb(var(--uob-border))] text-[rgb(var(--uob-text-muted))]',
-                )}
-              >
-                {isDone ? <Check className="h-4 w-4" /> : <span className="text-xs">{i + 1}</span>}
+              <span className="udb-onb-step__badge">
+                {isDone ? <Check className="udb-onb-icon--sm" /> : <span>{i + 1}</span>}
               </span>
-              <span className="text-[rgb(var(--uob-text-primary))]">{step}</span>
+              <span>{step}</span>
               <AnimatePresence>
                 {isActive && (
                   <motion.span
                     initial={{ opacity: 0 }}
                     animate={{ opacity: 1 }}
                     exit={{ opacity: 0 }}
-                    className="ml-auto h-2 w-2 animate-pulse rounded-full bg-[rgb(var(--uob-primary-500))]"
+                    className="udb-onb-step__pulse"
                     aria-hidden="true"
                   />
                 )}