frontend/src/components/Box.tsx

@@ -1,4 +1,5 @@
 import clsx from "clsx";
+import React from "react";
 
 type Props = {
     children: React.ReactNode;
@@ -6,7 +7,7 @@ type Props = {
 };
 
 const Box = ({ children, className }: Props) => (
-    <div className={clsx("bg-white border border-gray-200 shadow-sm rounded-lg", className)}>
+    <div className={clsx("bg-card border-hairline shadow-sm rounded-lg", className)}>
         {children}
     </div>
 );

frontend/src/index.css

@@ -10,6 +10,7 @@
     --color-sidebar: #F2EEE6;
     --color-card: #FDFBF7;
     --color-fields: #F4F0E8;
+    --color-dropzone: #F9F6EF;
 
     /* ── Ink ─────────────────────────────────────────────────────────────── */
     --color-text-primary: #2B2620;

frontend/src/pages/ClipUpload.tsx

@@ -1,12 +1,11 @@
 import {useState} from "react";
 import {useNavigate} from "react-router-dom";
-import BlueButton from "../components/buttons/BlueButton.tsx";
 import Box from "../components/Box.tsx";
 
 const ClipUpload = () => {
     const [file, setFile] = useState<File | null>(null);
-    const navigate = useNavigate();
     const [error, setError] = useState<null | string>(null);
+    const navigate = useNavigate();
 
     const press = () => {
         if (!file) {
@@ -17,23 +16,40 @@ const ClipUpload = () => {
     };
 
     return (
-        <div className="flex items-start justify-center p-8 min-h-full">
+        <div className="flex justify-center p-8">
             <Box className="flex flex-col gap-4 p-6 w-full max-w-md">
-                <h1 className="text-lg font-semibold text-gray-900">Upload Clip</h1>
+                <div
+                    className="cursor-pointer rounded-lg border-2
+                                border-dashed border-hairline bg-dropzone
+                                p-4 text-center text-sm text-text-secondary
+                                hover:bg-hover transition-colors duration-150
+                                min-h-50 flex flex-col items-center justify-center gap-2"
+                    >
+                    <label className="cursor-pointer block">
+                        Choose file
+                        <input
+                            type="file"
+                            onChange={(e) => {
+                                const selected = e.target.files?.[0] ?? null;
+                                setFile(selected);
+                                setError(null);
+                            }}
+                            className="hidden"
+                        />
+                    </label>
+                    {file && (
+                        <p className="mt-2 text-xs text-text-secondary">{file.name}</p>
+                    )}
+                </div>
 
-                <input
+                <button
-                    type="file"
+                    onClick={press}
-                    onChange={(e) => {
+                    className={"hover:bg-hover p-1 rounded-md"}
-                        const selected = e.target.files?.[0] ?? null;
+                >
-                        setFile(selected);
+                    Upload
-                        setError(null);
+                </button>
-                    }}
-                    className="h-36 cursor-pointer rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-4 text-center text-sm text-gray-500 hover:bg-gray-100 hover:border-primary transition-colors duration-150"
-                />
 
-                <BlueButton onClick={press}>Upload</BlueButton>
+                {error && <p className="text-sm font-body text-center">{error}</p>}
-
-                {error && <p className="text-sm text-red-500 text-center">{error}</p>}
             </Box>
         </div>
     )