diff --git a/apps/mobile/src/app/(tabs)/index.tsx b/apps/mobile/src/app/(tabs)/index.tsx
index fa5f425..d4cdaff 100644
--- a/apps/mobile/src/app/(tabs)/index.tsx
+++ b/apps/mobile/src/app/(tabs)/index.tsx
@@ -117,7 +117,7 @@ function Chips({
                 height: 38,
                 paddingHorizontal: 14,
                 borderRadius: 999,
-                backgroundColor: on ? colors.accent : colors.surface2,
+                backgroundColor: on ? colors['accent-fill'] : colors.surface2,
                 borderWidth: 1,
                 borderColor: on ? colors.accent : colors.line,
               }}
diff --git a/apps/mobile/src/ui/kit.tsx b/apps/mobile/src/ui/kit.tsx
index 1ad1400..9617ed4 100644
--- a/apps/mobile/src/ui/kit.tsx
+++ b/apps/mobile/src/ui/kit.tsx
@@ -107,7 +107,7 @@ export function Button({
 }) {
   const s = useStyles();
   const colors = useColors();
-  const bg = { primary: colors.accent, secondary: colors.surface3, ghost: 'transparent', danger: colors['danger-soft'] }[variant];
+  const bg = { primary: colors['accent-fill'], secondary: colors.surface3, ghost: 'transparent', danger: colors['danger-soft'] }[variant];
   const fg = { primary: '#fff', secondary: colors.text, ghost: colors.text2, danger: colors.danger }[variant];
   return (
     <Pressable
@@ -282,7 +282,7 @@ export function Segmented<T extends string>({
           onPress={() => onChange(o.value)}
           accessibilityRole="tab"
           accessibilityState={{ selected: value === o.value }}
-          style={[s.segment, value === o.value && { backgroundColor: colors.accent }]}
+          style={[s.segment, value === o.value && { backgroundColor: colors['accent-fill'] }]}
         >
           <Text style={{ color: value === o.value ? '#fff' : colors.text2, fontWeight: '600', fontSize: 13 }}>{o.label}</Text>
         </Pressable>