From 080dd4297bd014776d1dff4c03ce496048ecbdf2 Mon Sep 17 00:00:00 2001
From: NikitaZavartsev <nikoss9644@gmail.com>
Date: Thu, 19 Feb 2026 11:46:21 +0100
Subject: [PATCH 1/2] feat: redesign

---
 package-lock.json                             |  12 +-
 package.json                                  |   2 +-
 src/App.tsx                                   |  28 +-
 src/components/CameraScreen.tsx               | 216 +++++++++++---
 src/components/GalleryScreen.tsx              | 125 ++++++--
 src/components/ItemCard.tsx                   | 112 ++++++-
 src/components/MainScreen.tsx                 |  82 +++++-
 src/components/common/ApertureSelector.tsx    |  35 ++-
 src/components/common/DialogHeader.tsx        |  46 ++-
 src/components/common/EmptyStateDisplay.tsx   |  58 +++-
 src/components/common/LensSelector.tsx        |  33 ++-
 .../common/ShutterSpeedSelector.tsx           |  35 ++-
 src/theme/index.ts                            | 277 ++++++++++++++++++
 13 files changed, 936 insertions(+), 125 deletions(-)
 create mode 100644 src/theme/index.ts

diff --git a/package-lock.json b/package-lock.json
index 0f8ad5a..19050d2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,16 +1,16 @@
 {
   "name": "vibe_app_2",
-  "version": "2.0.2",
+  "version": "3.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "vibe_app_2",
-      "version": "2.0.2",
+      "version": "3.0.0",
       "dependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",
-        "@fontsource/roboto": "^5.2.8",
+        "@fontsource/inter": "^5.2.8",
         "@mui/icons-material": "^7.3.4",
         "@mui/material": "^7.3.4",
         "playwright": "^1.56.1",
@@ -2226,10 +2226,10 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
-    "node_modules/@fontsource/roboto": {
+    "node_modules/@fontsource/inter": {
       "version": "5.2.8",
-      "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.2.8.tgz",
-      "integrity": "sha512-oh9g4Cg3loVMz9MWeKWfDI+ooxxG1aRVetkiKIb2ESS2rrryGecQ/y4pAj4z5A5ebyw450dYRi/c4k/I3UBhHA==",
+      "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.2.8.tgz",
+      "integrity": "sha512-P6r5WnJoKiNVV+zvW2xM13gNdFhAEpQ9dQJHt3naLvfg+LkF2ldgSLiF4T41lf1SQCM9QmkqPTn4TH568IRagg==",
       "license": "OFL-1.1",
       "funding": {
         "url": "https://github.com/sponsors/ayuhito"
diff --git a/package.json b/package.json
index c8d15e9..54d5ea5 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@fontsource/roboto": "^5.2.8",
+    "@fontsource/inter": "^5.2.8",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "playwright": "^1.56.1",
diff --git a/src/App.tsx b/src/App.tsx
index 50182f7..97973a9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,11 +1,12 @@
 import { useState, useEffect } from 'react';
-import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { ThemeProvider } from '@mui/material/styles';
 import CssBaseline from '@mui/material/CssBaseline';
 import { Snackbar, Alert, Button } from '@mui/material';
-import '@fontsource/roboto/300.css';
-import '@fontsource/roboto/400.css';
-import '@fontsource/roboto/500.css';
-import '@fontsource/roboto/700.css';
+import '@fontsource/inter/300.css';
+import '@fontsource/inter/400.css';
+import '@fontsource/inter/500.css';
+import '@fontsource/inter/600.css';
+import '@fontsource/inter/700.css';
 
 import { MainScreen } from './components/MainScreen';
 import { SetupScreen } from './components/SetupScreen';
@@ -17,20 +18,7 @@ import { storage } from './utils/storage';
 // import { SyncManager } from './utils/syncManager'; // Temporarily disabled
 import type { FilmRoll, Exposure, AppState, Camera, Lens, AppSettings, ExposureSettings } from './types';
 import { SHUTTER_SPEED, APERTURE } from './types';
-
-const theme = createTheme({
-  palette: {
-    primary: {
-      main: '#1976d2',
-    },
-    secondary: {
-      main: '#dc004e',
-    },
-  },
-  typography: {
-    fontFamily: 'Roboto, Arial, sans-serif',
-  },
-});
+import { filmTheme } from './theme';
 
 function App() {
   const [exposureSettings, setExposureSettings] = useState<ExposureSettings>({
@@ -508,7 +496,7 @@ function App() {
   };
 
   return (
-    <ThemeProvider theme={theme}>
+    <ThemeProvider theme={filmTheme}>
       <CssBaseline />
       {renderCurrentScreen()}
 
diff --git a/src/components/CameraScreen.tsx b/src/components/CameraScreen.tsx
index 2a4a4fa..cd23881 100644
--- a/src/components/CameraScreen.tsx
+++ b/src/components/CameraScreen.tsx
@@ -30,14 +30,15 @@ import { camera, geolocation, fileUtils } from '../utils/camera';
 import type { FilmRoll, Exposure, ExposureSettings, Lens } from '../types';
 import { APERTURE, APERTURE_VALUES, SHUTTER_SPEED, SHUTTER_SPEED_VALUES, EI_VALUES } from '../types';
 import { FocalLengthSlider } from './FocalLengthSlider';
+import { colors } from '../theme';
 
-// Add CSS for shutter effect animation
+// Add CSS for enhanced shutter effect animation
 const shutterEffectStyles = `
 @keyframes shutterEffect {
-    0% { opacity: 0; }
-    10% { opacity: 1; }
-    90% { opacity: 1; }
-    100% { opacity: 0; }
+    0% { opacity: 0; transform: scaleY(0); }
+    5% { opacity: 1; transform: scaleY(1); }
+    95% { opacity: 1; transform: scaleY(1); }
+    100% { opacity: 0; transform: scaleY(0); }
 }
 `;
 
@@ -347,11 +348,32 @@ export const CameraScreen: React.FC<CameraScreenProps> = ({
                         </IconButton>
                     )}
                     <Box>
-                        <Typography variant="h6" fontWeight="bold">
+                        <Typography
+                            variant="h6"
+                            sx={{
+                                fontWeight: 600,
+                                color: colors.charcoal,
+                                mb: 0.5,
+                            }}
+                        >
                             {filmRoll.name}
                         </Typography>
-                        <Typography variant="body2" color="text.secondary">
-                            {currentExposureNumber}/{filmRoll.totalExposures} - {exposuresLeft} left
+                        <Typography
+                            variant="body2"
+                            sx={{
+                                color: colors.silverGray,
+                                fontVariantNumeric: 'tabular-nums',
+                                letterSpacing: '0.02em',
+                            }}
+                        >
+                            <Box component="span" sx={{ fontWeight: 600, color: colors.deepAmber }}>
+                                {currentExposureNumber}
+                            </Box>
+                            /{filmRoll.totalExposures}
+                            <Box component="span" sx={{ mx: 1, color: colors.coolGray }}>•</Box>
+                            <Box component="span" sx={{ fontWeight: 500 }}>
+                                {exposuresLeft} remaining
+                            </Box>
                         </Typography>
                     </Box>
                 </Box>
@@ -360,8 +382,23 @@ export const CameraScreen: React.FC<CameraScreenProps> = ({
                 </IconButton>
             </Box>
 
-            {/* Camera View */}
-            <Paper elevation={3} sx={{ flex: 1, position: 'relative', overflow: 'hidden', mb: 2 }}>
+            {/* Camera View - Viewfinder Frame */}
+            <Paper
+                elevation={0}
+                sx={{
+                    flex: 1,
+                    position: 'relative',
+                    overflow: 'hidden',
+                    mb: 2,
+                    border: `3px solid ${colors.charcoal}`,
+                    borderRadius: 2,
+                    boxShadow: `
+                        inset 0 0 0 1px rgba(255, 255, 255, 0.3),
+                        0 4px 12px rgba(0, 0, 0, 0.2)
+                    `,
+                    background: colors.charcoal,
+                }}
+            >
                 {isCameraActive ? (
                     <>
                         <video
@@ -375,7 +412,7 @@ export const CameraScreen: React.FC<CameraScreenProps> = ({
                                 objectFit: 'cover'
                             }}
                         />
-                        {/* Shutter Effect Overlay */}
+                        {/* Enhanced Shutter Effect Overlay */}
                         {showShutterEffect && (
                             <Box
                                 sx={{
@@ -384,9 +421,10 @@ export const CameraScreen: React.FC<CameraScreenProps> = ({
                                     left: 0,
                                     width: '100%',
                                     height: '100%',
-                                    backgroundColor: 'black',
+                                    backgroundColor: colors.charcoal,
                                     zIndex: 10,
-                                    animation: 'shutterEffect 500ms ease-in-out'
+                                    animation: 'shutterEffect 400ms cubic-bezier(0.4, 0, 0.2, 1)',
+                                    transformOrigin: 'center',
                                 }}
                             />
                         )}
@@ -448,61 +486,147 @@ getUserMedia: ${!!navigator.mediaDevices?.getUserMedia}
                             variant="filled"
                             color="primary"
                             size="medium"
-                            sx={{ fontWeight: 'bold' }}
+                            sx={{
+                                fontWeight: 600,
+                                fontSize: '0.9375rem',
+                                py: 2.5,
+                                px: 2,
+                                bgcolor: colors.deepAmber,
+                                color: 'white',
+                                '&:hover': {
+                                    bgcolor: '#b45309',
+                                    boxShadow: '0 0 0 3px rgba(217, 119, 6, 0.2)',
+                                },
+                            }}
                         />
-                        <Typography variant="caption" color="text.secondary" sx={{ ml: 1 }}>
+                        <Typography
+                            variant="caption"
+                            sx={{
+                                ml: 1.5,
+                                color: colors.silverGray,
+                                fontSize: '0.75rem',
+                                letterSpacing: '0.03em',
+                            }}
+                        >
                             Click to change lens
                         </Typography>
                     </Box>
                 ) : null;
             })()}
 
-            {/* Settings Chips */}
+            {/* Settings Chips - Technical Display */}
             <Stack direction="row" spacing={1} mb={2} flexWrap="wrap" gap={1}>
                 {!filmRoll.currentLensId && (
                     <Chip
                         label="+ Select Lens"
                         onClick={() => setShowLensChangeDialog(true)}
                         variant="outlined"
-                        size="small"
-                        color="default"
+                        size="medium"
+                        sx={{
+                            borderColor: colors.deepAmber,
+                            color: colors.deepAmber,
+                            fontWeight: 600,
+                            '&:hover': {
+                                bgcolor: 'rgba(217, 119, 6, 0.08)',
+                                borderColor: colors.deepAmber,
+                            },
+                        }}
                     />
                 )}
                 <Chip
-                    label={`${currentSettings.aperture}`}
+                    label={currentSettings.aperture}
                     onClick={openSettingsDialog}
-                    variant="outlined"
-                    size="small"
+                    variant="filled"
+                    size="medium"
+                    sx={{
+                        bgcolor: colors.coolGray,
+                        color: colors.charcoal,
+                        fontVariantNumeric: 'tabular-nums',
+                        fontWeight: 600,
+                        fontSize: '0.875rem',
+                        '&:hover': {
+                            bgcolor: '#e5e7eb',
+                            boxShadow: `0 0 0 2px ${colors.deepAmber}`,
+                        },
+                    }}
                 />
                 <Chip
-                    label={`${currentSettings.shutterSpeed}`}
+                    label={currentSettings.shutterSpeed}
                     onClick={openSettingsDialog}
-                    variant="outlined"
-                    size="small"
+                    variant="filled"
+                    size="medium"
+                    sx={{
+                        bgcolor: colors.coolGray,
+                        color: colors.charcoal,
+                        fontVariantNumeric: 'tabular-nums',
+                        fontWeight: 600,
+                        fontSize: '0.875rem',
+                        '&:hover': {
+                            bgcolor: '#e5e7eb',
+                            boxShadow: `0 0 0 2px ${colors.deepAmber}`,
+                        },
+                    }}
                 />
                 {currentSettings.ei && (
                     <Chip
                         label={`EI ${currentSettings.ei}`}
                         onClick={openSettingsDialog}
-                        variant="outlined"
-                        size="small"
-                        color="secondary"
+                        variant="filled"
+                        size="medium"
+                        sx={{
+                            bgcolor: colors.seleniumGray,
+                            color: 'white',
+                            fontVariantNumeric: 'tabular-nums',
+                            fontWeight: 600,
+                            fontSize: '0.875rem',
+                            '&:hover': {
+                                bgcolor: '#1f2937',
+                                boxShadow: `0 0 0 2px ${colors.deepAmber}`,
+                            },
+                        }}
                     />
                 )}
                 {currentSettings.focalLength && (
                     <Chip
                         label={`${currentSettings.focalLength}mm`}
                         onClick={openSettingsDialog}
-                        variant="outlined"
-                        size="small"
+                        variant="filled"
+                        size="medium"
+                        sx={{
+                            bgcolor: colors.coolGray,
+                            color: colors.charcoal,
+                            fontVariantNumeric: 'tabular-nums',
+                            fontWeight: 600,
+                            fontSize: '0.875rem',
+                            '&:hover': {
+                                bgcolor: '#e5e7eb',
+                                boxShadow: `0 0 0 2px ${colors.deepAmber}`,
+                            },
+                        }}
                     />
                 )}
                 <Chip
                     label="Info"
                     onClick={openSettingsDialog}
-                    variant="outlined"
-                    size="small"
-                    color={currentSettings.additionalInfo ? "primary" : "default"}
+                    variant={currentSettings.additionalInfo ? "filled" : "outlined"}
+                    size="medium"
+                    sx={{
+                        ...(currentSettings.additionalInfo ? {
+                            bgcolor: colors.deepAmber,
+                            color: 'white',
+                            fontWeight: 600,
+                            '&:hover': {
+                                bgcolor: '#b45309',
+                            },
+                        } : {
+                            borderColor: colors.silverGray,
+                            color: colors.silverGray,
+                            '&:hover': {
+                                borderColor: colors.charcoal,
+                                bgcolor: 'rgba(0, 0, 0, 0.04)',
+                            },
+                        }),
+                    }}
                 />
             </Stack>
 
@@ -522,10 +646,32 @@ getUserMedia: ${!!navigator.mediaDevices?.getUserMedia}
                     onClick={isCameraActive ? capturePhoto : () => setIsCameraActive(true)}
                     disabled={exposuresLeft <= 0}
                     sx={{
-                        fontSize: '1.5rem',
+                        width: 72,
+                        height: 72,
+                        bgcolor: colors.deepAmber,
+                        boxShadow: `
+                            0 4px 14px rgba(217, 119, 6, 0.4),
+                            0 0 0 3px white,
+                            0 0 0 5px ${colors.deepAmber}
+                        `,
+                        '&:hover': {
+                            bgcolor: '#b45309',
+                            boxShadow: `
+                                0 6px 20px rgba(217, 119, 6, 0.5),
+                                0 0 0 3px white,
+                                0 0 0 5px ${colors.deepAmber}
+                            `,
+                        },
+                        '&:active': {
+                            transform: 'scale(0.95)',
+                        },
                         '&:disabled': {
-                            backgroundColor: 'grey.300'
-                        }
+                            bgcolor: colors.coolGray,
+                            boxShadow: 'none',
+                        },
+                        '& .MuiSvgIcon-root': {
+                            fontSize: '2rem',
+                        },
                     }}
                 >
                     <PhotoCamera />
diff --git a/src/components/GalleryScreen.tsx b/src/components/GalleryScreen.tsx
index e11f5cd..78b002b 100644
--- a/src/components/GalleryScreen.tsx
+++ b/src/components/GalleryScreen.tsx
@@ -39,6 +39,7 @@ import {
 import type { Exposure, FilmRoll, Lens } from '../types';
 import { exportUtils, googleDriveUtils } from '../utils/exportImport';
 import { storage } from '../utils/storage';
+import { colors } from '../theme';
 
 interface GalleryScreenProps {
     filmRoll: FilmRoll;
@@ -254,18 +255,43 @@ export const GalleryScreen: React.FC<GalleryScreenProps> = ({
     }
 
     return (
-        <Container maxWidth="sm" sx={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
-            {/* Header */}
-            <Box display="flex" alignItems="center" py={2}>
-                <IconButton onClick={onBack} sx={{ mr: 1 }}>
+        <Container maxWidth="sm" sx={{ height: '100vh', display: 'flex', flexDirection: 'column', bgcolor: colors.warmWhite }}>
+            {/* Header - Film Contact Sheet Style */}
+            <Box display="flex" alignItems="center" py={2} borderBottom={`2px solid ${colors.coolGray}`}>
+                <IconButton
+                    onClick={onBack}
+                    sx={{
+                        mr: 1,
+                        '&:hover': { bgcolor: 'rgba(217, 119, 6, 0.08)' },
+                    }}
+                >
                     <ArrowBack />
                 </IconButton>
                 <Box>
-                    <Typography variant="h6" fontWeight="bold">
+                    <Typography
+                        variant="h6"
+                        sx={{
+                            fontWeight: 600,
+                            color: colors.charcoal,
+                            mb: 0.25,
+                        }}
+                    >
                         {filmRoll.name}
                     </Typography>
-                    <Typography variant="body2" color="text.secondary">
-                        ISO {filmRoll.iso} • {filmExposures.length}/{filmRoll.totalExposures} exposures
+                    <Typography
+                        variant="body2"
+                        sx={{
+                            color: colors.silverGray,
+                            fontVariantNumeric: 'tabular-nums',
+                            fontSize: '0.8125rem',
+                        }}
+                    >
+                        ISO {filmRoll.iso}
+                        <Box component="span" sx={{ mx: 1, color: colors.coolGray }}>•</Box>
+                        <Box component="span" sx={{ fontWeight: 500 }}>
+                            {filmExposures.length}/{filmRoll.totalExposures}
+                        </Box>
+                        {' '}exposures
                     </Typography>
                 </Box>
             </Box>
@@ -318,11 +344,34 @@ export const GalleryScreen: React.FC<GalleryScreenProps> = ({
                                 onClick={() => onExposureSelect(exposure)}
                                 sx={{
                                     cursor: 'pointer',
+                                    position: 'relative',
+                                    border: `2px solid ${colors.seleniumGray}`,
+                                    borderRadius: 1,
+                                    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.12)',
+                                    transition: 'all 0.2s ease-out',
+                                    // Film strip perforations on left edge
+                                    '&::before': {
+                                        content: '""',
+                                        position: 'absolute',
+                                        left: 0,
+                                        top: 0,
+                                        bottom: 0,
+                                        width: '6px',
+                                        background: `repeating-linear-gradient(
+                                            to bottom,
+                                            transparent 0px,
+                                            transparent 6px,
+                                            ${colors.coolGray} 6px,
+                                            ${colors.coolGray} 10px
+                                        )`,
+                                        zIndex: 1,
+                                    },
+                                    paddingLeft: '8px',
                                     '&:hover': {
-                                        transform: 'translateY(-2px)',
-                                        boxShadow: 3
+                                        transform: 'translateY(-4px)',
+                                        boxShadow: `0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 2px ${colors.deepAmber}`,
+                                        borderColor: colors.deepAmber,
                                     },
-                                    transition: 'all 0.2s ease-in-out'
                                 }}
                             >
                                 <Box display="flex">
@@ -336,7 +385,15 @@ export const GalleryScreen: React.FC<GalleryScreenProps> = ({
                                     )}
                                     <CardContent sx={{ flex: 1, p: 2 }}>
                                         <Box display="flex" justifyContent="space-between" alignItems="flex-start" mb={1}>
-                                            <Typography variant="h6" fontWeight="bold">
+                                            <Typography
+                                                variant="h6"
+                                                sx={{
+                                                    fontWeight: 700,
+                                                    color: colors.charcoal,
+                                                    fontVariantNumeric: 'tabular-nums',
+                                                    fontSize: '1.125rem',
+                                                }}
+                                            >
                                                 #{exposure.exposureNumber}
                                             </Typography>
                                             <Box display="flex" alignItems="center" gap={1}>
@@ -367,33 +424,65 @@ export const GalleryScreen: React.FC<GalleryScreenProps> = ({
                                                 <Chip
                                                     label={lens.name}
                                                     size="small"
-                                                    variant="outlined"
-                                                    color="primary"
+                                                    variant="filled"
+                                                    sx={{
+                                                        bgcolor: colors.deepAmber,
+                                                        color: 'white',
+                                                        fontWeight: 600,
+                                                        fontSize: '0.75rem',
+                                                    }}
                                                 />
                                             )}
                                             <Chip
                                                 label={exposure.aperture}
                                                 size="small"
-                                                variant="outlined"
+                                                variant="filled"
+                                                sx={{
+                                                    bgcolor: colors.coolGray,
+                                                    color: colors.charcoal,
+                                                    fontVariantNumeric: 'tabular-nums',
+                                                    fontWeight: 600,
+                                                    fontSize: '0.75rem',
+                                                }}
                                             />
                                             <Chip
                                                 label={exposure.shutterSpeed}
                                                 size="small"
-                                                variant="outlined"
+                                                variant="filled"
+                                                sx={{
+                                                    bgcolor: colors.coolGray,
+                                                    color: colors.charcoal,
+                                                    fontVariantNumeric: 'tabular-nums',
+                                                    fontWeight: 600,
+                                                    fontSize: '0.75rem',
+                                                }}
                                             />
                                             {exposure.ei && (
                                                 <Chip
                                                     label={`EI ${exposure.ei}`}
                                                     size="small"
-                                                    variant="outlined"
-                                                    color="secondary"
+                                                    variant="filled"
+                                                    sx={{
+                                                        bgcolor: colors.seleniumGray,
+                                                        color: 'white',
+                                                        fontVariantNumeric: 'tabular-nums',
+                                                        fontWeight: 600,
+                                                        fontSize: '0.75rem',
+                                                    }}
                                                 />
                                             )}
                                             {exposure.focalLength && (
                                                 <Chip
                                                     label={`${exposure.focalLength}mm`}
                                                     size="small"
-                                                    variant="outlined"
+                                                    variant="filled"
+                                                    sx={{
+                                                        bgcolor: colors.coolGray,
+                                                        color: colors.charcoal,
+                                                        fontVariantNumeric: 'tabular-nums',
+                                                        fontWeight: 600,
+                                                        fontSize: '0.75rem',
+                                                    }}
                                                 />
                                             )}
                                         </Stack>
diff --git a/src/components/ItemCard.tsx b/src/components/ItemCard.tsx
index 37f5d58..75b3f9b 100644
--- a/src/components/ItemCard.tsx
+++ b/src/components/ItemCard.tsx
@@ -8,6 +8,7 @@ import {
     Chip,
     Stack
 } from '@mui/material';
+import { colors, customShadows } from '../theme';
 
 interface ItemCardProps {
     id: string;
@@ -26,6 +27,8 @@ interface ItemCardProps {
     onClick?: (id: string) => void;
     height?: string | number;
     imageHeight?: string | number;
+    variant?: 'default' | 'filmstrip';
+    textureBackground?: boolean;
 }
 
 export const ItemCard: React.FC<ItemCardProps> = ({
@@ -37,7 +40,9 @@ export const ItemCard: React.FC<ItemCardProps> = ({
     tags = [],
     onClick,
     height = 'auto',
-    imageHeight = 140
+    imageHeight = 140,
+    variant = 'default',
+    textureBackground = false
 }) => {
     const handleClick = () => {
         if (onClick) {
@@ -45,6 +50,8 @@ export const ItemCard: React.FC<ItemCardProps> = ({
         }
     };
 
+    const isFilmstrip = variant === 'filmstrip';
+
     return (
         <Card
             sx={{
@@ -52,10 +59,56 @@ export const ItemCard: React.FC<ItemCardProps> = ({
                 display: 'flex',
                 flexDirection: 'column',
                 cursor: onClick ? 'pointer' : 'default',
-                transition: 'all 0.2s ease-in-out',
+                position: 'relative',
+                overflow: 'visible',
+                boxShadow: customShadows.card,
+                transition: 'all 0.2s ease-out',
+                background: textureBackground
+                    ? `linear-gradient(135deg, ${colors.paper} 0%, #fefefe 100%)`
+                    : colors.paper,
+                ...(isFilmstrip && {
+                    '&::before': {
+                        content: '""',
+                        position: 'absolute',
+                        left: 0,
+                        top: 0,
+                        bottom: 0,
+                        width: '8px',
+                        background: `repeating-linear-gradient(
+                            to bottom,
+                            transparent 0px,
+                            transparent 8px,
+                            ${colors.coolGray} 8px,
+                            ${colors.coolGray} 12px
+                        )`,
+                        borderTopLeftRadius: 8,
+                        borderBottomLeftRadius: 8,
+                        zIndex: 1,
+                    },
+                    '&::after': {
+                        content: '""',
+                        position: 'absolute',
+                        right: 0,
+                        top: 0,
+                        bottom: 0,
+                        width: '8px',
+                        background: `repeating-linear-gradient(
+                            to bottom,
+                            transparent 0px,
+                            transparent 8px,
+                            ${colors.coolGray} 8px,
+                            ${colors.coolGray} 12px
+                        )`,
+                        borderTopRightRadius: 8,
+                        borderBottomRightRadius: 8,
+                        zIndex: 1,
+                    },
+                    paddingLeft: '12px',
+                    paddingRight: '12px',
+                }),
                 '&:hover': onClick ? {
-                    transform: 'translateY(-2px)',
-                    boxShadow: 4,
+                    transform: 'translateY(-4px)',
+                    boxShadow: customShadows.cardHover,
                 } : {},
             }}
             onClick={handleClick}
@@ -68,7 +121,8 @@ export const ItemCard: React.FC<ItemCardProps> = ({
                     alt={title}
                     sx={{
                         objectFit: 'cover',
-                        backgroundColor: '#f5f5f5'
+                        backgroundColor: colors.coolGray,
+                        borderBottom: isFilmstrip ? `2px solid ${colors.seleniumGray}` : 'none',
                     }}
                 />
             )}
@@ -80,8 +134,9 @@ export const ItemCard: React.FC<ItemCardProps> = ({
                     sx={{
                         mb: 1,
                         fontSize: '1rem',
-                        fontWeight: 500,
-                        lineHeight: 1.2
+                        fontWeight: 600,
+                        lineHeight: 1.3,
+                        color: colors.charcoal,
                     }}
                 >
                     {title}
@@ -90,15 +145,18 @@ export const ItemCard: React.FC<ItemCardProps> = ({
                 {subtitle && (
                     <Typography
                         variant="body2"
-                        color="text.secondary"
-                        sx={{ mb: 1.5 }}
+                        sx={{
+                            mb: 1.5,
+                            color: colors.silverGray,
+                            fontSize: '0.875rem',
+                        }}
                     >
                         {subtitle}
                     </Typography>
                 )}
 
                 {metadata.length > 0 && (
-                    <Stack spacing={1} sx={{ mb: 1.5 }}>
+                    <Stack spacing={0.75} sx={{ mb: 1.5 }}>
                         {metadata.map((item, index) => (
                             <Box
                                 key={index}
@@ -106,11 +164,31 @@ export const ItemCard: React.FC<ItemCardProps> = ({
                                 alignItems="center"
                                 gap={1}
                             >
-                                {item.icon}
-                                <Typography variant="caption" color="text.secondary">
+                                {item.icon && (
+                                    <Box sx={{ color: colors.silverGray, fontSize: '1rem' }}>
+                                        {item.icon}
+                                    </Box>
+                                )}
+                                <Typography
+                                    variant="caption"
+                                    sx={{
+                                        color: colors.silverGray,
+                                        letterSpacing: '0.05em',
+                                        textTransform: 'uppercase',
+                                        fontSize: '0.7rem',
+                                    }}
+                                >
                                     {item.label}:
                                 </Typography>
-                                <Typography variant="caption">
+                                <Typography
+                                    variant="caption"
+                                    sx={{
+                                        color: colors.charcoal,
+                                        fontVariantNumeric: 'tabular-nums',
+                                        fontWeight: 500,
+                                        fontSize: '0.75rem',
+                                    }}
+                                >
                                     {item.value}
                                 </Typography>
                             </Box>
@@ -127,6 +205,12 @@ export const ItemCard: React.FC<ItemCardProps> = ({
                                 size="small"
                                 color={tag.color || 'default'}
                                 variant="outlined"
+                                sx={{
+                                    borderColor: tag.color === 'primary'
+                                        ? colors.deepAmber
+                                        : undefined,
+                                    fontWeight: 500,
+                                }}
                             />
                         ))}
                     </Box>
@@ -134,4 +218,4 @@ export const ItemCard: React.FC<ItemCardProps> = ({
             </CardContent>
         </Card>
     );
-};
\ No newline at end of file
+};
diff --git a/src/components/MainScreen.tsx b/src/components/MainScreen.tsx
index 5d923b2..6027d8e 100644
--- a/src/components/MainScreen.tsx
+++ b/src/components/MainScreen.tsx
@@ -18,6 +18,7 @@ import type { FilmRoll, Exposure, Camera, Lens } from '../types';
 import { FilmRollListScreen } from './FilmRollListScreen';
 import { CameraManagementScreen } from './CameraManagementScreen';
 import { LensManagementScreen } from './LensManagementScreen';
+import { colors } from '../theme';
 
 interface TabPanelProps {
     children?: React.ReactNode;
@@ -80,17 +81,55 @@ export const MainScreen: React.FC<MainScreenProps> = ({
     };
 
     return (
-        <Box sx={{ flexGrow: 1, bgcolor: 'background.default', minHeight: '100vh' }}>
-            <AppBar position="static" elevation={1}>
-                <Toolbar>
-                    <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
-                        Film Photography Tracker
-                    </Typography>
+        <Box
+            sx={{
+                flexGrow: 1,
+                bgcolor: colors.warmWhite,
+                minHeight: '100vh',
+                backgroundImage: `
+                    radial-gradient(circle at 20% 50%, rgba(217, 119, 6, 0.02) 0%, transparent 50%),
+                    radial-gradient(circle at 80% 80%, rgba(217, 119, 6, 0.02) 0%, transparent 50%)
+                `,
+            }}
+        >
+            <AppBar
+                position="static"
+                sx={{
+                    bgcolor: colors.charcoal,
+                    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
+                }}
+            >
+                <Toolbar sx={{ py: 1 }}>
+                    <Box sx={{ display: 'flex', alignItems: 'center', flexGrow: 1 }}>
+                        <PhotoLibrary
+                            sx={{
+                                mr: 1.5,
+                                fontSize: 28,
+                                color: colors.deepAmber,
+                            }}
+                        />
+                        <Typography
+                            variant="h5"
+                            component="div"
+                            sx={{
+                                fontWeight: 600,
+                                letterSpacing: '-0.01em',
+                                color: 'white',
+                            }}
+                        >
+                            Film Photography Tracker
+                        </Typography>
+                    </Box>
                     {onSettingsClick && (
                         <IconButton
                             color="inherit"
                             onClick={onSettingsClick}
                             aria-label="settings"
+                            sx={{
+                                '&:hover': {
+                                    bgcolor: 'rgba(255, 255, 255, 0.1)',
+                                }
+                            }}
                         >
                             <Settings />
                         </IconButton>
@@ -100,13 +139,31 @@ export const MainScreen: React.FC<MainScreenProps> = ({
                     value={currentTab}
                     onChange={handleTabChange}
                     sx={{
-                        bgcolor: 'primary.dark',
+                        bgcolor: colors.seleniumGray,
+                        borderTop: `1px solid rgba(255, 255, 255, 0.1)`,
                         '& .MuiTab-root': {
-                            color: 'rgba(255, 255, 255, 0.7)',
-                            '&.Mui-selected': { color: 'white' }
+                            color: 'rgba(255, 255, 255, 0.6)',
+                            fontSize: '0.9375rem',
+                            fontWeight: 600,
+                            minHeight: 56,
+                            textTransform: 'none',
+                            transition: 'all 200ms ease-out',
+                            '&:hover': {
+                                color: 'rgba(255, 255, 255, 0.9)',
+                                bgcolor: 'rgba(255, 255, 255, 0.05)',
+                            },
+                            '&.Mui-selected': {
+                                color: colors.deepAmber,
+                            },
+                            '& .MuiSvgIcon-root': {
+                                fontSize: '1.3rem',
+                            }
                         },
                         '& .MuiTabs-indicator': {
-                            backgroundColor: 'white'
+                            height: 3,
+                            borderRadius: '3px 3px 0 0',
+                            backgroundColor: colors.deepAmber,
+                            boxShadow: `0 -2px 8px rgba(217, 119, 6, 0.4)`,
                         }
                     }}
                 >
@@ -114,19 +171,16 @@ export const MainScreen: React.FC<MainScreenProps> = ({
                         icon={<PhotoLibrary />}
                         label="Film Rolls"
                         iconPosition="start"
-                        sx={{ minHeight: 48 }}
                     />
                     <Tab
                         icon={<CameraAlt />}
                         label="Cameras"
                         iconPosition="start"
-                        sx={{ minHeight: 48 }}
                     />
                     <Tab
                         icon={<CameraEnhance />}
                         label="Lenses"
                         iconPosition="start"
-                        sx={{ minHeight: 48 }}
                     />
                 </Tabs>
             </AppBar>
@@ -162,4 +216,4 @@ export const MainScreen: React.FC<MainScreenProps> = ({
             </TabPanel>
         </Box>
     );
-};
\ No newline at end of file
+};
diff --git a/src/components/common/ApertureSelector.tsx b/src/components/common/ApertureSelector.tsx
index 340d33b..f868e05 100644
--- a/src/components/common/ApertureSelector.tsx
+++ b/src/components/common/ApertureSelector.tsx
@@ -1,6 +1,7 @@
 import React, { useMemo, useId } from 'react';
 import { FormControl, InputLabel, Select, MenuItem } from '@mui/material';
 import { APERTURE_VALUES, type ApertureEnum } from '../../types';
+import { colors } from '../../theme';
 
 interface ApertureSelectorProps {
   value: string;
@@ -26,16 +27,46 @@ export const ApertureSelector: React.FC<ApertureSelectorProps> = ({
 
   return (
     <FormControl fullWidth={fullWidth}>
-      <InputLabel id={`${id}-label`}>{label}</InputLabel>
+      <InputLabel
+        id={`${id}-label`}
+        sx={{
+          color: colors.silverGray,
+          '&.Mui-focused': {
+            color: colors.deepAmber,
+          },
+        }}
+      >
+        {label}
+      </InputLabel>
       <Select
         labelId={`${id}-label`}
         id={id}
         value={value}
         label={label}
         onChange={(e) => onChange(e.target.value as string)}
+        sx={{
+          fontVariantNumeric: 'tabular-nums',
+          fontWeight: 500,
+          '& .MuiSelect-select': {
+            color: colors.charcoal,
+          },
+        }}
       >
         {availableApertures.map((aperture) => (
-          <MenuItem key={aperture} value={aperture}>
+          <MenuItem
+            key={aperture}
+            value={aperture}
+            sx={{
+              fontVariantNumeric: 'tabular-nums',
+              fontWeight: 500,
+              '&.Mui-selected': {
+                bgcolor: 'rgba(217, 119, 6, 0.08)',
+                '&:hover': {
+                  bgcolor: 'rgba(217, 119, 6, 0.12)',
+                },
+              },
+            }}
+          >
             {aperture}
           </MenuItem>
         ))}
diff --git a/src/components/common/DialogHeader.tsx b/src/components/common/DialogHeader.tsx
index 5cd126c..24f65b2 100644
--- a/src/components/common/DialogHeader.tsx
+++ b/src/components/common/DialogHeader.tsx
@@ -1,6 +1,7 @@
 import React, { type ReactNode } from 'react';
-import { DialogTitle, IconButton } from '@mui/material';
+import { DialogTitle, IconButton, Box } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
+import { colors } from '../../theme';
 
 interface DialogHeaderProps {
   title: string;
@@ -10,12 +11,45 @@ interface DialogHeaderProps {
 
 export const DialogHeader: React.FC<DialogHeaderProps> = ({ title, icon, onClose }) => {
   return (
-    <DialogTitle sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-      <span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-        {icon}
+    <DialogTitle
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        py: 2.5,
+        px: 3,
+        borderBottom: `1px solid ${colors.coolGray}`,
+      }}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1.5,
+          color: colors.charcoal,
+          fontWeight: 600,
+          fontSize: '1.125rem',
+        }}
+      >
+        {icon && (
+          <Box sx={{ color: colors.deepAmber, display: 'flex' }}>
+            {icon}
+          </Box>
+        )}
         {title}
-      </span>
-      <IconButton edge="end" onClick={onClose} aria-label="close">
+      </Box>
+      <IconButton
+        edge="end"
+        onClick={onClose}
+        aria-label="close"
+        sx={{
+          color: colors.silverGray,
+          '&:hover': {
+            bgcolor: 'rgba(217, 119, 6, 0.08)',
+            color: colors.deepAmber,
+          },
+        }}
+      >
         <CloseIcon />
       </IconButton>
     </DialogTitle>
diff --git a/src/components/common/EmptyStateDisplay.tsx b/src/components/common/EmptyStateDisplay.tsx
index 25f0865..838c365 100644
--- a/src/components/common/EmptyStateDisplay.tsx
+++ b/src/components/common/EmptyStateDisplay.tsx
@@ -1,5 +1,6 @@
 import React, { type ReactNode } from 'react';
 import { Box, Typography, Button } from '@mui/material';
+import { colors } from '../../theme';
 
 interface EmptyStateDisplayProps {
   icon: ReactNode;
@@ -17,17 +18,64 @@ export const EmptyStateDisplay: React.FC<EmptyStateDisplayProps> = ({
   onAction,
 }) => {
   return (
-    <Box sx={{ textAlign: 'center', py: 8 }}>
-      <Box sx={{ mb: 2, color: 'text.secondary' }}>
+    <Box
+      sx={{
+        textAlign: 'center',
+        py: 8,
+        px: 3,
+      }}
+    >
+      <Box
+        sx={{
+          mb: 3,
+          color: colors.silverGray,
+          opacity: 0.6,
+          '& .MuiSvgIcon-root': {
+            fontSize: '5rem',
+          },
+        }}
+      >
         {icon}
       </Box>
-      <Typography variant="h6" gutterBottom>
+      <Typography
+        variant="h6"
+        sx={{
+          fontWeight: 600,
+          color: colors.charcoal,
+          mb: 1.5,
+          fontSize: '1.25rem',
+        }}
+      >
         {title}
       </Typography>
-      <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
+      <Typography
+        variant="body2"
+        sx={{
+          color: colors.silverGray,
+          mb: 4,
+          maxWidth: 400,
+          mx: 'auto',
+          lineHeight: 1.6,
+        }}
+      >
         {description}
       </Typography>
-      <Button variant="contained" onClick={onAction}>
+      <Button
+        variant="contained"
+        onClick={onAction}
+        sx={{
+          bgcolor: colors.deepAmber,
+          color: 'white',
+          fontWeight: 600,
+          px: 4,
+          py: 1.25,
+          fontSize: '0.9375rem',
+          '&:hover': {
+            bgcolor: '#b45309',
+            boxShadow: '0 4px 12px rgba(217, 119, 6, 0.3)',
+          },
+        }}
+      >
         {actionLabel}
       </Button>
     </Box>
diff --git a/src/components/common/LensSelector.tsx b/src/components/common/LensSelector.tsx
index ce266a8..68e6a34 100644
--- a/src/components/common/LensSelector.tsx
+++ b/src/components/common/LensSelector.tsx
@@ -1,6 +1,7 @@
 import React, { useId } from 'react';
 import { FormControl, InputLabel, Select, MenuItem } from '@mui/material';
 import type { Lens } from '../../types';
+import { colors } from '../../theme';
 
 interface LensSelectorProps {
   value: string;
@@ -23,16 +24,44 @@ export const LensSelector: React.FC<LensSelectorProps> = ({
 
   return (
     <FormControl fullWidth={fullWidth} required={required}>
-      <InputLabel id={`${id}-label`}>{label}</InputLabel>
+      <InputLabel
+        id={`${id}-label`}
+        sx={{
+          color: colors.silverGray,
+          '&.Mui-focused': {
+            color: colors.deepAmber,
+          },
+        }}
+      >
+        {label}
+      </InputLabel>
       <Select
         labelId={`${id}-label`}
         id={id}
         value={value}
         label={label}
         onChange={(e) => onChange(e.target.value)}
+        sx={{
+          fontWeight: 500,
+          '& .MuiSelect-select': {
+            color: colors.charcoal,
+          },
+        }}
       >
         {lenses.map((lens) => (
-          <MenuItem key={lens.id} value={lens.id}>
+          <MenuItem
+            key={lens.id}
+            value={lens.id}
+            sx={{
+              fontWeight: 500,
+              '&.Mui-selected': {
+                bgcolor: 'rgba(217, 119, 6, 0.08)',
+                '&:hover': {
+                  bgcolor: 'rgba(217, 119, 6, 0.12)',
+                },
+              },
+            }}
+          >
             {lens.name}
           </MenuItem>
         ))}
diff --git a/src/components/common/ShutterSpeedSelector.tsx b/src/components/common/ShutterSpeedSelector.tsx
index ea3a0a5..2b8ff33 100644
--- a/src/components/common/ShutterSpeedSelector.tsx
+++ b/src/components/common/ShutterSpeedSelector.tsx
@@ -1,6 +1,7 @@
 import React, { useId } from 'react';
 import { FormControl, InputLabel, Select, MenuItem } from '@mui/material';
 import { SHUTTER_SPEED_VALUES } from '../../types';
+import { colors } from '../../theme';
 
 interface ShutterSpeedSelectorProps {
   value: string;
@@ -19,16 +20,46 @@ export const ShutterSpeedSelector: React.FC<ShutterSpeedSelectorProps> = ({
 
   return (
     <FormControl fullWidth={fullWidth}>
-      <InputLabel id={`${id}-label`}>{label}</InputLabel>
+      <InputLabel
+        id={`${id}-label`}
+        sx={{
+          color: colors.silverGray,
+          '&.Mui-focused': {
+            color: colors.deepAmber,
+          },
+        }}
+      >
+        {label}
+      </InputLabel>
       <Select
         labelId={`${id}-label`}
         id={id}
         value={value}
         label={label}
         onChange={(e) => onChange(e.target.value)}
+        sx={{
+          fontVariantNumeric: 'tabular-nums',
+          fontWeight: 500,
+          '& .MuiSelect-select': {
+            color: colors.charcoal,
+          },
+        }}
       >
         {SHUTTER_SPEED_VALUES.map((speed) => (
-          <MenuItem key={speed} value={speed}>
+          <MenuItem
+            key={speed}
+            value={speed}
+            sx={{
+              fontVariantNumeric: 'tabular-nums',
+              fontWeight: 500,
+              '&.Mui-selected': {
+                bgcolor: 'rgba(217, 119, 6, 0.08)',
+                '&:hover': {
+                  bgcolor: 'rgba(217, 119, 6, 0.12)',
+                },
+              },
+            }}
+          >
             {speed}
           </MenuItem>
         ))}
diff --git a/src/theme/index.ts b/src/theme/index.ts
new file mode 100644
index 0000000..7a21d75
--- /dev/null
+++ b/src/theme/index.ts
@@ -0,0 +1,277 @@
+import { createTheme } from '@mui/material/styles';
+
+// Film-inspired color palette
+const colors = {
+  charcoal: '#1a1a1a',      // Primary text, headers
+  deepAmber: '#d97706',     // Primary accent (darkroom safelight)
+  warmWhite: '#fafaf9',     // Background (photo paper)
+  silverGray: '#8c9499',    // Secondary text, metadata
+  seleniumGray: '#374151',  // Secondary UI elements
+  coolGray: '#f3f4f6',      // Subtle backgrounds, cards
+  successGreen: '#22c55e',  // Completed states
+  errorRed: '#ef4444',      // Warnings, delete actions
+  paper: '#ffffff',         // Pure white for cards
+};
+
+// Animation tokens
+export const animations = {
+  cardHover: 'transform 200ms ease-out, box-shadow 200ms ease-out',
+  buttonPress: 'transform 150ms ease-out',
+  screenTransition: '300ms ease-out',
+  modalAppear: '250ms ease-out',
+  chipGlow: 'box-shadow 200ms ease-out',
+};
+
+// Custom shadows for depth
+const customShadows = {
+  card: '0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24)',
+  cardHover: '0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12)',
+  dialog: '0 10px 25px rgba(0, 0, 0, 0.3)',
+};
+
+export const filmTheme = createTheme({
+  palette: {
+    mode: 'light',
+    primary: {
+      main: colors.deepAmber,
+      dark: '#b45309',
+      light: '#f59e0b',
+      contrastText: '#ffffff',
+    },
+    secondary: {
+      main: colors.seleniumGray,
+      dark: '#1f2937',
+      light: '#6b7280',
+      contrastText: '#ffffff',
+    },
+    background: {
+      default: colors.warmWhite,
+      paper: colors.paper,
+    },
+    text: {
+      primary: colors.charcoal,
+      secondary: colors.silverGray,
+    },
+    success: {
+      main: colors.successGreen,
+      dark: '#16a34a',
+      light: '#4ade80',
+    },
+    error: {
+      main: colors.errorRed,
+      dark: '#dc2626',
+      light: '#f87171',
+    },
+    divider: '#e5e7eb',
+  },
+  typography: {
+    fontFamily: "'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif",
+    h4: {
+      fontSize: 32,
+      fontWeight: 600,
+      letterSpacing: '-0.02em',
+      color: colors.charcoal,
+    },
+    h5: {
+      fontSize: 24,
+      fontWeight: 600,
+      letterSpacing: '-0.01em',
+      color: colors.charcoal,
+    },
+    h6: {
+      fontSize: 20,
+      fontWeight: 600,
+      letterSpacing: '-0.01em',
+      color: colors.charcoal,
+    },
+    body1: {
+      fontSize: 16,
+      lineHeight: 1.6,
+    },
+    body2: {
+      fontSize: 14,
+      lineHeight: 1.5,
+    },
+    caption: {
+      fontSize: 12,
+      letterSpacing: '0.05em',
+      textTransform: 'uppercase',
+      color: colors.silverGray,
+    },
+    button: {
+      fontWeight: 600,
+      letterSpacing: '0.02em',
+    },
+  },
+  shape: {
+    borderRadius: 8,
+  },
+  components: {
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          borderRadius: 8,
+          boxShadow: customShadows.card,
+          transition: animations.cardHover,
+          '&:hover': {
+            transform: 'translateY(-2px)',
+            boxShadow: customShadows.cardHover,
+          },
+        },
+      },
+    },
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: 8,
+          textTransform: 'none',
+          fontWeight: 600,
+          transition: animations.buttonPress,
+          '&:active': {
+            transform: 'scale(0.98)',
+          },
+        },
+        contained: {
+          boxShadow: 'none',
+          '&:hover': {
+            boxShadow: '0 2px 8px rgba(217, 119, 6, 0.3)',
+          },
+        },
+        sizeLarge: {
+          fontSize: 16,
+          padding: '12px 24px',
+        },
+      },
+    },
+    MuiChip: {
+      styleOverrides: {
+        root: {
+          borderRadius: 6,
+          fontVariantNumeric: 'tabular-nums',
+          fontWeight: 500,
+          transition: animations.chipGlow,
+        },
+        filled: {
+          backgroundColor: colors.coolGray,
+          color: colors.charcoal,
+          '&:hover': {
+            backgroundColor: '#e5e7eb',
+            boxShadow: '0 0 0 2px rgba(217, 119, 6, 0.2)',
+          },
+        },
+        clickable: {
+          '&:hover': {
+            backgroundColor: '#e5e7eb',
+          },
+        },
+      },
+    },
+    MuiIconButton: {
+      styleOverrides: {
+        root: {
+          transition: animations.buttonPress,
+          '&:active': {
+            transform: 'scale(0.95)',
+          },
+        },
+      },
+    },
+    MuiDialog: {
+      styleOverrides: {
+        paper: {
+          borderRadius: 12,
+          boxShadow: customShadows.dialog,
+        },
+      },
+    },
+    MuiDialogTitle: {
+      styleOverrides: {
+        root: {
+          fontSize: 20,
+          fontWeight: 600,
+          color: colors.charcoal,
+        },
+      },
+    },
+    MuiTab: {
+      styleOverrides: {
+        root: {
+          textTransform: 'none',
+          fontWeight: 600,
+          fontSize: 15,
+          minHeight: 56,
+          color: colors.silverGray,
+          transition: 'color 200ms ease-out',
+          '&.Mui-selected': {
+            color: colors.deepAmber,
+          },
+        },
+      },
+    },
+    MuiTabs: {
+      styleOverrides: {
+        indicator: {
+          height: 3,
+          borderRadius: '3px 3px 0 0',
+          backgroundColor: colors.deepAmber,
+        },
+      },
+    },
+    MuiTextField: {
+      styleOverrides: {
+        root: {
+          '& .MuiOutlinedInput-root': {
+            borderRadius: 8,
+            '&:hover .MuiOutlinedInput-notchedOutline': {
+              borderColor: colors.deepAmber,
+            },
+            '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+              borderColor: colors.deepAmber,
+              borderWidth: 2,
+            },
+          },
+        },
+      },
+    },
+    MuiSelect: {
+      styleOverrides: {
+        root: {
+          borderRadius: 8,
+        },
+      },
+    },
+    MuiAppBar: {
+      styleOverrides: {
+        root: {
+          boxShadow: '0 1px 3px rgba(0, 0, 0, 0.12)',
+        },
+      },
+    },
+    MuiFab: {
+      styleOverrides: {
+        root: {
+          boxShadow: '0 4px 12px rgba(217, 119, 6, 0.3)',
+          transition: `${animations.buttonPress}, ${animations.chipGlow}`,
+          '&:hover': {
+            boxShadow: '0 6px 16px rgba(217, 119, 6, 0.4)',
+          },
+          '&:active': {
+            transform: 'scale(0.95)',
+          },
+        },
+      },
+    },
+    MuiSnackbar: {
+      styleOverrides: {
+        root: {
+          '& .MuiAlert-root': {
+            borderRadius: 8,
+          },
+        },
+      },
+    },
+  },
+});
+
+// Export colors for use in styled components
+export { colors, customShadows };

From cce0ab00e23d951551aeafd2ad97f9dfd8e2f5c5 Mon Sep 17 00:00:00 2001
From: NikitaZavartsev <nikoss9644@gmail.com>
Date: Thu, 19 Feb 2026 11:52:58 +0100
Subject: [PATCH 2/2] test: fix a word in tests

---
 e2e/photography-workflow.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/e2e/photography-workflow.spec.ts b/e2e/photography-workflow.spec.ts
index df36a31..9ae9a36 100644
--- a/e2e/photography-workflow.spec.ts
+++ b/e2e/photography-workflow.spec.ts
@@ -16,7 +16,7 @@ test.describe('Photography Workflow', () => {
         await expect(filmTrackerPage.galleryButton).toBeVisible();
 
         // Check initial state
-        await expect(filmTrackerPage.page.getByText(/1\/36.*left/)).toBeVisible();
+        await expect(filmTrackerPage.page.getByText(/1\/36.*remaining/)).toBeVisible();
 
         // Access camera settings
         await filmTrackerPage.apertureChip.click();