@@ -289,7 +289,7 @@ function WelcomeStep(
289289 return (
290290 < div className = "flex flex-col gap-3" data-testid = "voice-prefix-welcome" >
291291 < div className = "flex items-center gap-3" >
292- < span className = "inline-flex h-10 w-10 items-center justify-center rounded-sm bg-accent/15 text-accent " >
292+ < span className = "inline-flex h-10 w-10 items-center justify-center rounded-sm bg-[#0B35F1]/10 text-[#0B35F1] " >
293293 < Sparkles className = "h-5 w-5" />
294294 </ span >
295295 < p className = "text-sm" >
@@ -305,7 +305,7 @@ function WelcomeStep(
305305 </ Button >
306306 { permissionGranted === false ? (
307307 < p
308- className = "text-xs text-warn "
308+ className = "text-xs text-[var(--onboarding-text-muted)] "
309309 data-testid = "voice-prefix-welcome-mic-denied"
310310 >
311311 Microphone access was denied. You can grant it later in system
@@ -314,7 +314,7 @@ function WelcomeStep(
314314 ) : null }
315315 { permissionGranted === true ? (
316316 < p
317- className = "text-xs text-ok "
317+ className = "text-xs text-[#0B35F1] "
318318 data-testid = "voice-prefix-welcome-mic-granted"
319319 >
320320 Microphone access granted.
@@ -356,7 +356,7 @@ function VoiceReadinessStep(
356356 </ p >
357357 ) : null }
358358 < div
359- className = "rounded-sm bg-bg/40 p-3"
359+ className = "rounded-sm bg-white/30 p-3"
360360 data-testid = "voice-prefix-bundle-readiness"
361361 >
362362 < div className = "flex flex-col gap-2" >
@@ -366,7 +366,7 @@ function VoiceReadinessStep(
366366 : readiness ?. status === "assets-ready" ||
367367 readiness ?. status === "ready"
368368 ? "Voice assets added"
369- : "Voice bundle" }
369+ : "Voice bundle" }
370370 </ p >
371371 < p className = "text-xs text-muted" >
372372 { readiness ?. message ??
@@ -381,7 +381,10 @@ function VoiceReadinessStep(
381381 aria-valuemax = { 100 }
382382 data-testid = "voice-prefix-bundle-progress"
383383 >
384- < div className = "h-full bg-accent" style = { { width : `${ percent } %` } } />
384+ < div
385+ className = "h-full bg-[#0B35F1]"
386+ style = { { width : `${ percent } %` } }
387+ />
385388 </ div >
386389 ) : null }
387390 < div className = "flex flex-wrap items-center gap-2" >
@@ -453,11 +456,14 @@ function AgentSpeaksStep(props: VoicePrefixStepsProps): React.ReactElement {
453456 { playing ? "Playing..." : played ? "Replay greeting" : "Play greeting" }
454457 </ Button >
455458 { error ? (
456- < p className = "text-xs text-warn" data-testid = "voice-prefix-agent-error" >
459+ < p
460+ className = "text-xs text-[var(--onboarding-text-muted)]"
461+ data-testid = "voice-prefix-agent-error"
462+ >
457463 { error }
458464 </ p >
459465 ) : null }
460- < p className = "rounded-sm bg-bg/40 p-2 text-xs italic text-muted" >
466+ < p className = "rounded-sm bg-white/30 p-2 text-xs italic text-muted" >
461467 { AGENT_GREETING_SCRIPT }
462468 </ p >
463469 </ div >
@@ -618,7 +624,7 @@ function UserSpeaksStep(props: VoicePrefixStepsProps): React.ReactElement {
618624 className = "rounded-sm bg-warn/10 p-2 text-xs"
619625 data-testid = "voice-prefix-user-speaks-error"
620626 >
621- < p className = "font-medium text-warn " >
627+ < p className = "font-medium text-[var(--onboarding-text-muted)] " >
622628 We couldn't reach the voice service. Try again in a moment, or skip
623629 this step and come back to it from Settings.
624630 </ p >
@@ -636,7 +642,7 @@ function UserSpeaksStep(props: VoicePrefixStepsProps): React.ReactElement {
636642 </ p >
637643 ) : done ? (
638644 < p
639- className = "text-sm text-ok "
645+ className = "text-sm text-[#0B35F1] "
640646 data-testid = "voice-prefix-user-speaks-done"
641647 >
642648 Captured { state . capturedPromptIds . length } of{ " " }
@@ -649,7 +655,7 @@ function UserSpeaksStep(props: VoicePrefixStepsProps): React.ReactElement {
649655 { state . session . prompts . length } · ~{ currentPrompt . targetSeconds } s
650656 </ p >
651657 < p
652- className = "rounded-sm bg-bg/40 p-3 text-sm"
658+ className = "rounded-sm bg-white/30 p-3 text-sm"
653659 data-testid = "voice-prefix-user-speaks-prompt"
654660 >
655661 "{ currentPrompt . text } "
@@ -717,7 +723,7 @@ function OwnerConfirmStep(props: VoicePrefixStepsProps): React.ReactElement {
717723 >
718724 < div className = "flex items-center gap-3" >
719725 < Crown
720- className = "h-5 w-5 text-accent "
726+ className = "h-5 w-5 text-[#0B35F1] "
721727 data-testid = "voice-prefix-owner-confirm-crown"
722728 />
723729 < p className = "text-sm" >
@@ -732,7 +738,7 @@ function OwnerConfirmStep(props: VoicePrefixStepsProps): React.ReactElement {
732738 type = "text"
733739 value = { displayName }
734740 onChange = { ( e ) => setDisplayName ( e . target . value ) }
735- className = "rounded-sm bg-bg/40 px-2 py-1 text-sm"
741+ className = "rounded-sm bg-white/30 px-2 py-1 text-sm"
736742 data-testid = "voice-prefix-owner-confirm-name"
737743 />
738744 </ label >
@@ -887,13 +893,13 @@ function FamilyStep(props: VoicePrefixStepsProps): React.ReactElement {
887893 { captured . map ( ( m ) => (
888894 < li
889895 key = { m . profileId ?? m . displayName }
890- className = "flex items-center gap-2 rounded-sm bg-bg /25 p-1.5"
896+ className = "flex items-center gap-2 rounded-sm bg-white /25 p-1.5"
891897 >
892898 < span className = "font-medium" > { m . displayName } </ span >
893899 < span className = "text-muted" > · { m . relationship } </ span >
894900 { m . entityId ? (
895901 < span
896- className = "ml-auto text-ok text-[10px]"
902+ className = "ml-auto text-[#0B35F1] text-[10px]"
897903 data-testid = "voice-prefix-family-captured"
898904 >
899905 captured
@@ -919,15 +925,15 @@ function FamilyStep(props: VoicePrefixStepsProps): React.ReactElement {
919925 ) }
920926
921927 { phase === "idle" ? (
922- < div className = "flex flex-col gap-2 rounded-sm bg-bg/35 p-3" >
928+ < div className = "flex flex-col gap-2 rounded-sm bg-white/30 p-3" >
923929 < label className = "flex flex-col gap-1 text-xs text-muted" >
924930 Name
925931 < input
926932 type = "text"
927933 value = { draftName }
928934 placeholder = "e.g. Alex"
929935 onChange = { ( e ) => setDraftName ( e . target . value ) }
930- className = "rounded-sm bg-bg/45 px-2 py-1 text-sm text-txt"
936+ className = "rounded-sm bg-white/40 px-2 py-1 text-sm text-txt"
931937 data-testid = "voice-prefix-family-name-input"
932938 />
933939 </ label >
@@ -938,19 +944,19 @@ function FamilyStep(props: VoicePrefixStepsProps): React.ReactElement {
938944 value = { draftRelationship }
939945 placeholder = "family, colleague, …"
940946 onChange = { ( e ) => setDraftRelationship ( e . target . value ) }
941- className = "rounded-sm bg-bg/45 px-2 py-1 text-sm text-txt"
947+ className = "rounded-sm bg-white/40 px-2 py-1 text-sm text-txt"
942948 data-testid = "voice-prefix-family-relationship-input"
943949 />
944950 </ label >
945951 { captureError ? (
946952 < p
947- className = "text-xs text-danger "
953+ className = "text-xs text-[var(--onboarding-text-muted)] "
948954 data-testid = "voice-prefix-family-error"
949955 >
950956 { captureError }
951957 </ p >
952958 ) : null }
953- < p className = "rounded-sm bg-bg/40 p-2 text-xs italic text-muted" >
959+ < p className = "rounded-sm bg-white/30 p-2 text-xs italic text-muted" >
954960 "{ FAMILY_CAPTURE_PROMPT } "
955961 </ p >
956962 < Button
@@ -965,10 +971,10 @@ function FamilyStep(props: VoicePrefixStepsProps): React.ReactElement {
965971 </ div >
966972 ) : phase === "recording" ? (
967973 < div
968- className = "flex items-center gap-2 rounded-sm bg-accent/8 p-3 text-sm"
974+ className = "flex items-center gap-2 rounded-sm bg-[#0B35F1]/10 p-3 text-sm"
969975 data-testid = "voice-prefix-family-recording"
970976 >
971- < Mic className = "h-4 w-4 animate-pulse text-accent " />
977+ < Mic className = "h-4 w-4 animate-pulse text-[#0B35F1] " />
972978 Recording… { countdown } s — ask { draftName } to read the prompt aloud.
973979 </ div >
974980 ) : (
0 commit comments