feat(ui): redesign interface with knolling pastel flat lay theme and larger card radius

frontend/src/usage-chart.tsx

@@ -48,14 +48,21 @@ export default function UsageChart({
         >
           <defs>
             <linearGradient id={gradientId} x1="0" y1="0" x2="0" y2="1">
-              <stop offset="0" stopColor="#5ee7f7" stopOpacity={0.35} />
+              <stop offset="0%" stopColor="#3b82a6" stopOpacity={0.35} />
-              <stop offset="1" stopColor="#5ee7f7" stopOpacity={0} />
+              <stop offset="70%" stopColor="#6b61a6" stopOpacity={0.08} />
+              <stop offset="100%" stopColor="#6b61a6" stopOpacity={0} />
             </linearGradient>
           </defs>
-          <CartesianGrid stroke="var(--grid)" vertical={false} />
+          <CartesianGrid
+            stroke="var(--grid)"
+            strokeDasharray="3 3"
+            vertical={false}
+          />
           <XAxis
             dataKey="date"
             stroke="var(--muted)"
+            tickLine={false}
+            axisLine={{ stroke: "var(--border)" }}
             tickFormatter={
               compact ? (date: string) => date.slice(5) : undefined
             }
@@ -66,6 +73,8 @@ export default function UsageChart({
             tickCount={compact ? 4 : 5}
             tickFormatter={compactAxis}
             stroke="var(--muted)"
+            tickLine={false}
+            axisLine={false}
           />
           <Tooltip
             formatter={(value) => [
@@ -75,15 +84,33 @@ export default function UsageChart({
             contentStyle={{
               background: "var(--panel)",
               border: "1px solid var(--border)",
-              borderRadius: 12,
+              borderRadius: 8,
+              boxShadow: "var(--shadow-md)",
+              padding: "8px 12px",
+              color: "var(--text)",
+            }}
+            labelStyle={{
+              fontWeight: 600,
+              color: "var(--muted)",
+              marginBottom: 4,
+            }}
+            itemStyle={{
+              color: "var(--accent)",
+              fontWeight: 650,
             }}
           />
           <Area
             type="monotone"
             dataKey="totalTokens"
-            stroke="#4dd8ed"
+            stroke="#3b82a6"
             fill={`url(#${gradientId})`}
             strokeWidth={2}
+            activeDot={{
+              r: 5,
+              fill: "#3b82a6",
+              stroke: "var(--panel)",
+              strokeWidth: 2,
+            }}
           />
         </AreaChart>
       </ResponsiveContainer>