Fiix colours (#5211)

<img width="638" height="471" alt="image"
src="https://github.com/user-attachments/assets/c2352e25-6ee0-4726-9ce4-059870347ea6"
/>
<img width="638" height="450" alt="image"
src="https://github.com/user-attachments/assets/a17931ca-ffea-4dc3-a17a-629d98003da6"
/>
<img width="985" height="774" alt="image"
src="https://github.com/user-attachments/assets/b16203c6-a136-4fee-ba57-495f7b6e8c75"
/>
<img width="635" height="348" alt="image"
src="https://github.com/user-attachments/assets/4b4ab328-b2e4-442f-84a5-d947e97653ec"
/>

frontend/src/core/styles/theme.css

@@ -617,6 +617,41 @@
   border-color: var(--landing-drop-inner-paper-border) !important;
 }
 
+/* Plan section card borders - only override in dark mode */
+[data-mantine-color-scheme="dark"] .plan-card {
+  --paper-border-color: rgb(158, 158, 158) !important;
+}
+
+[data-mantine-color-scheme="dark"] .plan-card [data-size="sm"] {
+  color: rgb(221, 221, 221) !important;
+}
+
+/* Current plan badge - use light mode green in dark mode */
+[data-mantine-color-scheme="dark"] .current-plan-badge {
+  background-color: var(--color-green-300) !important;
+}
+
+/* Plan section button colors */
+.plan-button:not(:disabled):not([data-disabled]) {
+  background-color: #0A8BFF !important;
+}
+
+[data-mantine-color-scheme="dark"] .plan-button:not(:disabled):not([data-disabled]) {
+  background-color: #1C598E !important;
+}
+
+/* Lighter grey for disabled plan buttons */
+.plan-button:disabled,
+.plan-button[data-disabled] {
+  background-color: #7e7e7e !important;
+  color: white;
+}
+
+[data-mantine-color-scheme="dark"] .plan-button:disabled,
+[data-mantine-color-scheme="dark"] .plan-button[data-disabled] {
+  background-color: #6b7280 !important;
+}
+
 /* Smooth transitions for theme switching */
 * {
   transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;

frontend/src/proprietary/components/shared/config/configSections/PeopleSection.tsx

@@ -530,7 +530,6 @@ export default function PeopleSection() {
                     <Tooltip label={user.team.name} disabled={user.team.name.length <= 20} zIndex={Z_INDEX_OVER_CONFIG_MODAL}>
                       <Text
                         size="sm"
-                        c="dimmed"
                         maw={150}
                         style={{
                           overflow: 'hidden',
@@ -542,7 +541,7 @@ export default function PeopleSection() {
                       </Text>
                     </Tooltip>
                   ) : (
-                    <Text size="sm" c="dimmed">—</Text>
+                    <Text size="sm">—</Text>
                   )}
                 </Table.Td>
                   <Table.Td>
@@ -565,7 +564,7 @@ export default function PeopleSection() {
                         withArrow
                         zIndex={Z_INDEX_OVER_CONFIG_MODAL + 10}
                       >
-                        <ActionIcon variant="subtle" color="gray" size="sm">
+                        <ActionIcon variant="subtle"size="sm">
                           <LocalIcon icon="info" width="1rem" height="1rem" />
                         </ActionIcon>
                       </Tooltip>
@@ -573,7 +572,7 @@ export default function PeopleSection() {
                       {/* Actions menu */}
                       <Menu position="bottom-end" withinPortal>
                         <Menu.Target>
-                          <ActionIcon variant="subtle" color="gray" disabled={!loginEnabled}>
+                          <ActionIcon variant="subtle"  disabled={!loginEnabled}>
                             <LocalIcon icon="more-vert" width="1rem" height="1rem" />
                           </ActionIcon>
                         </Menu.Target>

frontend/src/proprietary/components/shared/config/configSections/plan/PlanCard.tsx

@@ -32,6 +32,7 @@ const PlanCard: React.FC<PlanCardProps> = ({ planGroup, isCurrentTier, isDowngra
         radius="md"
         withBorder
         style={getBaseCardStyle(isCurrentTier)}
+        className="plan-card"
       >
         {isCurrentTier && (
           <PricingBadge
@@ -67,7 +68,7 @@ const PlanCard: React.FC<PlanCardProps> = ({ planGroup, isCurrentTier, isDowngra
 
           <div style={{ flexGrow: 1 }} />
 
-          <Button variant="filled" disabled fullWidth>
+          <Button variant="filled" disabled fullWidth className="plan-button">
             {isCurrentTier
               ? t('plan.current', 'Current Plan')
               : t('plan.free.included', 'Included')}
@@ -96,6 +97,7 @@ const PlanCard: React.FC<PlanCardProps> = ({ planGroup, isCurrentTier, isDowngra
       radius="md"
       withBorder
       style={getBaseCardStyle(isCurrentTier)}
+      className="plan-card"
     >
       {isCurrentTier ? (
         <PricingBadge
@@ -176,6 +178,7 @@ const PlanCard: React.FC<PlanCardProps> = ({ planGroup, isCurrentTier, isDowngra
             fullWidth
             onClick={() => isCurrentTier && onManageClick ? onManageClick() : onUpgradeClick(planGroup)}
             disabled={!loginEnabled || isDowngrade || isEnterpriseBlockedForFree}
+            className="plan-button"
           >
             {isCurrentTier
               ? t('plan.manage', 'Manage')

frontend/src/proprietary/components/shared/stripeCheckout/components/PricingBadge.tsx

@@ -17,6 +17,7 @@ export const PricingBadge: React.FC<PricingBadgeProps> = ({ type, label }) => {
       variant="filled"
       size={size}
       style={{ position: 'absolute', top: '0.5rem', right: '0.5rem' }}
+      className={type === 'current' ? 'current-plan-badge' : undefined}
     >
       {label}
     </Badge>