Please remove anything that is blue and use these colours for the UI

--cream-100: #fffdf9; /* almost white */
--cream-200: #fdf6e9; /* vanilla icing */
--cream-300: #faedd2; /* rich custard */
--cream-400: #f6e3bb; /* crème brûlée */
--brown-600: #7c5836; /* caramel text / accents */
--brown-700: #5e4229; /* hover */
#c7a24d /* buttons */

components/doc-uploader.js

@@ -13,10 +13,9 @@ class DocUploader extends HTMLElement {
                 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
                 
                 * { box-sizing: border-box; font-family: 'Inter', sans-serif; }
-
                 .card {
-                    background: white;
-                    border: 1px solid #e2e8f0;
+                    background: #fffdf9;
+                    border: 1px solid #f6e3bb;
                     border-radius: 0.75rem;
                     box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
                     padding: 1.5rem;
@@ -32,22 +31,21 @@ class DocUploader extends HTMLElement {
                 .header h3 {
                     font-size: 1.125rem;
                     font-weight: 600;
-                    color: #1e293b;
+                    color: #7c5836;
                 }
-
                 .drop-zone {
-                    border: 2px dashed #cbd5e1;
+                    border: 2px dashed #f6e3bb;
                     border-radius: 0.5rem;
                     padding: 2rem;
                     text-align: center;
                     cursor: pointer;
                     transition: all 0.2s ease;
-                    background: #f8fafc;
+                    background: #fdf6e9;
                 }
 
                 .drop-zone:hover, .drop-zone.drag-active {
-                    border-color: #3b82f6;
-                    background: #eff6ff;
+                    border-color: #c7a24d;
+                    background: #faedd2;
                 }
 
                 .drop-zone-content {
@@ -55,22 +53,20 @@ class DocUploader extends HTMLElement {
                     flex-direction: column;
                     align-items: center;
                     gap: 0.5rem;
-                    color: #64748b;
+                    color: #7c5836;
                 }
 
                 .drop-zone-content svg {
-                    color: #94a3b8;
+                    color: #7c5836;
                 }
-
                 .file-info {
                     display: none; /* Hidden by default */
                     margin-top: 1rem;
                     padding: 1rem;
-                    background: #f1f5f9;
+                    background: #fdf6e9;
                     border-radius: 0.5rem;
                 }
-
-                .file-info.active {
+.file-info.active {
                     display: flex;
                     align-items: center;
                     justify-content: space-between;
@@ -81,23 +77,21 @@ class DocUploader extends HTMLElement {
                     align-items: center;
                     gap: 0.75rem;
                 }
-
                 .file-icon {
-                    color: #3b82f6;
+                    color: #c7a24d;
                 }
 
                 .file-text h4 {
                     font-size: 0.875rem;
                     font-weight: 600;
-                    color: #0f172a;
+                    color: #5e4229;
                 }
 
                 .file-text p {
                     font-size: 0.75rem;
-                    color: #64748b;
+                    color: #7c5836;
                 }
-
-                .btn-remove {
+.btn-remove {
                     color: #ef4444;
                     background: white;
                     border: 1px solid #fee2e2;
@@ -110,11 +104,10 @@ class DocUploader extends HTMLElement {
                 .btn-remove:hover {
                     background: #fef2f2;
                 }
-
                 .progress-container {
                     margin-top: 0.75rem;
                     height: 0.5rem;
-                    background: #e2e8f0;
+                    background: #f6e3bb;
                     border-radius: 9999px;
                     overflow: hidden;
                     display: none;
@@ -122,12 +115,11 @@ class DocUploader extends HTMLElement {
 
                 .progress-bar {
                     height: 100%;
-                    background: #3b82f6;
+                    background: #c7a24d;
                     width: 0%;
                     transition: width 0.3s ease;
                 }
-
-                .download-area {
+.download-area {
                     margin-top: 1rem;
                     display: none;
                     text-align: right;
@@ -136,12 +128,11 @@ class DocUploader extends HTMLElement {
                 .download-area.active {
                     display: block;
                 }
-
                 .btn-download {
                     display: inline-flex;
                     align-items: center;
                     gap: 0.5rem;
-                    background: #10b981;
+                    background: #c7a24d;
                     color: white;
                     padding: 0.5rem 1rem;
                     border-radius: 0.375rem;
@@ -153,10 +144,9 @@ class DocUploader extends HTMLElement {
                 }
 
                 .btn-download:hover {
-                    background: #059669;
+                    background: #b89144;
                 }
-
-            </style>
+</style>
             <div class="card">
                 <div class="header">
                     <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>

components/top-bar.js

@@ -33,29 +33,26 @@ class TopBar extends HTMLElement {
                 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
                 
                 * { box-sizing: border-box; font-family: 'Inter', sans-serif; }
-                
                 .container {
                     display: flex;
                     flex-direction: column;
                     gap: 1rem;
-                    background: white;
+                    background: #fffdf9;
                     padding: 1rem;
                     border-radius: 0.75rem;
                     box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
                 }
-
-                .header-top {
+.header-top {
                     display: flex;
                     align-items: center;
                     justify-content: space-between;
                     flex-wrap: wrap;
                     gap: 1rem;
                 }
-
                 .app-name {
                     font-size: 1.25rem;
                     font-weight: 700;
-                    color: #0f172a;
+                    color: #7c5836;
                     display: flex;
                     align-items: center;
                     gap: 0.5rem;
@@ -63,13 +60,12 @@ class TopBar extends HTMLElement {
 
                 .model-selector {
                     display: inline-flex;
-                    background: #f1f5f9;
+                    background: #faedd2;
                     padding: 0.25rem;
                     border-radius: 0.5rem;
                     position: relative;
                 }
-
-                .radio-input {
+.radio-input {
                     position: absolute;
                     opacity: 0;
                     cursor: pointer;
@@ -77,7 +73,6 @@ class TopBar extends HTMLElement {
                     width: 100%;
                     z-index: 10;
                 }
-
                 .radio-label {
                     display: inline-flex;
                     align-items: center;
@@ -85,50 +80,46 @@ class TopBar extends HTMLElement {
                     border-radius: 0.375rem;
                     font-size: 0.875rem;
                     font-weight: 500;
-                    color: #64748b;
+                    color: #7c5836;
                     cursor: pointer;
                     transition: all 0.2s ease;
                 }
 
                 .radio-input:checked + .radio-label {
-                    background: white;
-                    color: #0f172a;
+                    background: #fffdf9;
+                    color: #5e4229;
                     box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
                 }
-
                 .lang-controls {
                     display: flex;
                     align-items: center;
                     gap: 1rem;
                     flex-wrap: wrap;
                     padding-top: 0.5rem;
-                    border-top: 1px solid #e2e8f0;
+                    border-top: 1px solid #f6e3bb;
                 }
-
-                .control-group {
+.control-group {
                     display: flex;
                     flex-direction: column;
                     gap: 0.25rem;
                 }
-
                 label {
                     font-size: 0.75rem;
                     font-weight: 600;
                     text-transform: uppercase;
                     letter-spacing: 0.05em;
-                    color: #64748b;
+                    color: #7c5836;
                 }
-
                 select {
                     appearance: none;
                     background-color: white;
-                    border: 1px solid #cbd5e1;
+                    border: 1px solid #f6e3bb;
                     border-radius: 0.375rem;
                     padding: 0.5rem 2rem 0.5rem 0.75rem;
                     font-size: 0.875rem;
-                    color: #0f172a;
+                    color: #5e4229;
                     cursor: pointer;
-                    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+                    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%237c5836' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
                     background-position: right 0.5rem center;
                     background-repeat: no-repeat;
                     background-size: 1.5em 1.5em;
@@ -136,11 +127,10 @@ class TopBar extends HTMLElement {
                 }
 
                 select:focus {
-                    outline: 2px solid #3b82f6;
+                    outline: 2px solid #c7a24d;
                     outline-offset: 1px;
                 }
-
-                .hidden { display: none !important; }
+.hidden { display: none !important; }
 
                 @media (min-width: 768px) {
                     .container { flex-direction: row; align-items: center; justify-content: space-between; }
@@ -171,17 +161,16 @@ class TopBar extends HTMLElement {
                     <!-- Source Language -->
                     <div class="control-group" id="source-group">
                         <label for="source-lang">Source</label>
-                        <div id="source-indic" class="${!isIndic ? 'hidden' : ''} bg-gray-100 border border-gray-200 rounded px-3 py-2 text-sm text-gray-600 flex items-center h-[38px]">
+                        <div id="source-indic" class="${!isIndic ? 'hidden' : ''} bg-[#fdf6e9] border border-[#f6e3bb] rounded px-3 py-2 text-sm text-[#7c5836] flex items-center h-[38px]">
                             English (Hardcoded)
                         </div>
-                        <select id="source-m2m" class="${!isM2M ? 'hidden' : ''}">
+<select id="source-m2m" class="${!isM2M ? 'hidden' : ''}">
                             ${m2mOptions}
                         </select>
                     </div>
-
                     <!-- Swap Button (Only visible for M2M) -->
-                    <button id="swap-btn" class="${!isM2M ? 'hidden' : ''} mt-4 p-2 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-full transition-colors" aria-label="Swap Languages">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 3 21 3 21 8"></polyline><line x1="4" y1="20" x2="21" y2="3"></line><polyline points="21 16 21 21 16 21"></polyline><line x1="15" y1="15" x2="21" y2="21"></line><line x1="4" y1="4" x2="9" y2="9"></line></svg>
+                    <button id="swap-btn" class="${!isM2M ? 'hidden' : ''} mt-4 p-2 text-[#7c5836] hover:text-[#5e4229] hover:bg-[#faedd2] rounded-full transition-colors" aria-label="Swap Languages">
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 3 21 3 21 8"></polyline><line x1="4" y1="20" x2="21" y2="3"></line><polyline points="21 16 21 21 16 21"></polyline><line x1="15" y1="15" x2="21" y2="21"></line><line x1="4" y1="4" x2="9" y2="9"></line></svg>
                     </button>
 
                     <!-- Target Language -->

components/translator-workspace.js

@@ -25,13 +25,12 @@ class TranslatorWorkspace extends HTMLElement {
                 @media (min-width: 1024px) {
                     .workspace { flex-direction: row; }
                 }
-
                 .pane {
                     flex: 1;
-                    background: white;
+                    background: #fffdf9;
                     border-radius: 0.75rem;
                     box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
-                    border: 1px solid #e2e8f0;
+                    border: 1px solid #f6e3bb;
                     display: flex;
                     flex-direction: column;
                     overflow: hidden;
@@ -39,35 +38,33 @@ class TranslatorWorkspace extends HTMLElement {
                 }
 
                 .pane:focus-within {
-                    border-color: #3b82f6;
-                    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+                    border-color: #c7a24d;
+                    box-shadow: 0 0 0 2px rgba(199, 162, 77, 0.2);
                 }
 
                 .pane-header {
                     padding: 0.75rem 1rem;
-                    border-bottom: 1px solid #f1f5f9;
+                    border-bottom: 1px solid #f6e3bb;
                     display: flex;
                     justify-content: space-between;
                     align-items: center;
-                    background: #f8fafc;
+                    background: #fdf6e9;
                 }
 
                 .pane-title {
                     font-weight: 600;
-                    color: #475569;
+                    color: #7c5836;
                     font-size: 0.875rem;
                     text-transform: uppercase;
                 }
-
-                .actions {
+.actions {
                     display: flex;
                     gap: 0.5rem;
                 }
-
                 .icon-btn {
                     background: none;
                     border: none;
-                    color: #64748b;
+                    color: #7c5836;
                     cursor: pointer;
                     padding: 0.25rem;
                     border-radius: 0.25rem;
@@ -78,15 +75,13 @@ class TranslatorWorkspace extends HTMLElement {
                 }
 
                 .icon-btn:hover {
-                    color: #0f172a;
-                    background: #e2e8f0;
+                    color: #5e4229;
+                    background: #f6e3bb;
                 }
-
-                .textarea-wrapper {
+.textarea-wrapper {
                     flex-grow: 1;
                     position: relative;
                 }
-
                 textarea {
                     width: 100%;
                     height: 100%;
@@ -95,7 +90,7 @@ class TranslatorWorkspace extends HTMLElement {
                     padding: 1rem;
                     font-size: 1rem;
                     line-height: 1.6;
-                    color: #334155;
+                    color: #5e4229;
                     background: transparent;
                     outline: none;
                     min-height: 250px;
@@ -106,36 +101,34 @@ class TranslatorWorkspace extends HTMLElement {
                     bottom: 0.75rem;
                     right: 0.75rem;
                     font-size: 0.75rem;
-                    color: #94a3b8;
+                    color: #7c5836;
                     pointer-events: none;
-                    background: rgba(255,255,255,0.8);
+                    background: rgba(255,253,249,0.8);
                     padding: 0.125rem 0.25rem;
                     border-radius: 0.25rem;
                 }
-
                 .empty-state {
                     display: flex;
                     flex-direction: column;
                     align-items: center;
                     justify-content: center;
                     height: 100%;
-                    color: #94a3b8;
+                    color: #7c5836;
                     text-align: center;
                     padding: 2rem;
                 }
 
                 .output-area {
-                    background-color: #f8fafc;
-                    color: #475569;
+                    background-color: #fdf6e9;
+                    color: #5e4229;
                 }
-
-                /* Action Bar */
+/* Action Bar */
                 .action-bar {
                     position: sticky;
                     bottom: 0;
-                    background: white;
+                    background: #fffdf9;
                     padding: 1rem;
-                    border-top: 1px solid #e2e8f0;
+                    border-top: 1px solid #f6e3bb;
                     display: flex;
                     justify-content: flex-end;
                     align-items: center;
@@ -143,8 +136,7 @@ class TranslatorWorkspace extends HTMLElement {
                     border-radius: 0 0 0.75rem 0.75rem;
                     z-index: 10;
                 }
-
-                .btn {
+.btn {
                     display: inline-flex;
                     align-items: center;
                     justify-content: center;
@@ -156,14 +148,13 @@ class TranslatorWorkspace extends HTMLElement {
                     cursor: pointer;
                     border: 1px solid transparent;
                 }
-
                 .btn-secondary {
                     background: white;
-                    border-color: #cbd5e1;
-                    color: #475569;
+                    border-color: #f6e3bb;
+                    color: #7c5836;
                 }
                 .btn-secondary:hover {
-                    background: #f1f5f9;
+                    background: #fdf6e9;
                 }
                 .btn-secondary:disabled {
                     opacity: 0.5;
@@ -171,34 +162,33 @@ class TranslatorWorkspace extends HTMLElement {
                 }
 
                 .btn-primary {
-                    background: #2563eb;
+                    background: #c7a24d;
                     color: white;
                     box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
                 }
                 .btn-primary:hover:not(:disabled) {
-                    background: #1d4ed8;
+                    background: #b89144;
                 }
                 .btn-primary:disabled {
-                    background: #93c5fd;
+                    background: #f6e3bb;
+                    color: #7c5836;
                     cursor: not-allowed;
                 }
-
-                .loading-spinner {
+.loading-spinner {
                     animation: spin 1s linear infinite;
                 }
                 
                 @keyframes spin {
                     100% { transform: rotate(360deg); }
                 }
-
                 .skeleton {
                     height: 1rem;
-                    background: #e2e8f0;
+                    background: #f6e3bb;
                     border-radius: 0.25rem;
                     margin-bottom: 0.5rem;
                     width: 100%;
                 }
-                .skeleton.short { width: 60%; }
+.skeleton.short { width: 60%; }
                 .skeleton.long { width: 90%; }
 
             </style>
@@ -386,23 +376,23 @@ class TranslatorWorkspace extends HTMLElement {
 
     renderOutputLoading() {
         const wrapper = this.shadowRoot.getElementById('output-wrapper');
-        wrapper.innerHTML = `
+            wrapper.innerHTML = `
             <div style="padding: 1.5rem; display:flex; flex-direction:column; gap:0.5rem; height:100%; justify-content:center;">
-                <div class="skeleton long"></div>
-                <div class="skeleton short"></div>
-                <div class="skeleton long"></div>
-                <div class="skeleton short"></div>
-                <div class="skeleton medium"></div>
+                <div class="skeleton long" style="background: #f6e3bb;"></div>
+                <div class="skeleton short" style="background: #f6e3bb;"></div>
+                <div class="skeleton long" style="background: #f6e3bb;"></div>
+                <div class="skeleton short" style="background: #f6e3bb;"></div>
+                <div class="skeleton medium" style="background: #f6e3bb;"></div>
             </div>
-        `;
-    }
+            `;
+}
 
     renderOutputText(text) {
         const wrapper = this.shadowRoot.getElementById('output-wrapper');
         wrapper.innerHTML = `
-            <textarea readonly style="cursor:text; background:transparent; color:#334155;">${text}</textarea>
+            <textarea readonly style="cursor:text; background:transparent; color:#5e4229;">${text}</textarea>
         `;
-    }
+}
 }
 
 customElements.define('translator-workspace', TranslatorWorkspace);

index.html

@@ -10,9 +10,8 @@
     <script src="https://unpkg.com/feather-icons"></script>
     <link rel="stylesheet" href="style.css">
 </head>
-<body class="bg-slate-50 text-slate-800 font-sans antialiased min-h-screen flex flex-col">
-
-    <!-- Main Container -->
+<body class="bg-[#fffdf9] text-[#7c5836] font-sans antialiased min-h-screen flex flex-col">
+<!-- Main Container -->
     <main class="flex-grow w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 space-y-6">
         
         <!-- App Header / Top Bar -->

style.css

@@ -1,3 +1,4 @@
+
 /* Custom Styles & Tailwind Overrides */
 
 /* Smooth scrolling */
@@ -11,16 +12,15 @@ html {
     height: 8px;
 }
 ::-webkit-scrollbar-track {
-    background: #f1f5f9; 
+    background: #fdf6e9; 
 }
 ::-webkit-scrollbar-thumb {
-    background: #cbd5e1; 
+    background: #f6e3bb; 
     border-radius: 4px;
 }
 ::-webkit-scrollbar-thumb:hover {
-    background: #94a3b8; 
+    background: #c7a24d; 
 }
-
 /* Loading Spinner Animation */
 @keyframes spin {
     to { transform: rotate(360deg); }
@@ -28,18 +28,16 @@ html {
 .spinner {
     animation: spin 1s linear infinite;
 }
-
 /* Skeleton Loading Animation */
 @keyframes shimmer {
     0% { background-position: -200% 0; }
     100% { background-position: 200% 0; }
 }
 .skeleton {
-    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
+    background: linear-gradient(90deg, #fdf6e9 25%, #f6e3bb 50%, #fdf6e9 75%);
     background-size: 200% 100%;
     animation: shimmer 1.5s infinite;
 }
-
 /* Toast Notifications */
 .toast-enter {
     transform: translateY(100%);
@@ -59,15 +57,14 @@ html {
     opacity: 0;
     transition: all 0.3s ease-in;
 }
-
 /* Focus Ring Overrides for Accessibility */
 *:focus-visible {
-    outline: 2px solid #3b82f6;
+    outline: 2px solid #c7a24d;
     outline-offset: 2px;
 }
 
 /* File Drop Zone Active State */
 .drag-active {
-    border-color: #3b82f6 !important;
-    background-color: #eff6ff !important;
-}
+    border-color: #c7a24d !important;
+    background-color: #faedd2 !important;
+}