initial design fix

client/src/hooks/useSettings.ts

@@ -0,0 +1,36 @@
+import { useState, useEffect, createContext, useContext } from 'react';
+import type { Settings } from '../types';
+import { getSettings } from '../api';
+
+const DEFAULT: Settings = {
+  app_title: 'AI Tools Dashboard',
+  logo_url: null,
+  accent_color: '#6366f1',
+  company_name: 'Your Company',
+};
+
+export const SettingsContext = createContext<{
+  settings: Settings;
+  reload: () => void;
+}>({ settings: DEFAULT, reload: () => {} });
+
+export function useSettingsProvider() {
+  const [settings, setSettings] = useState<Settings>(DEFAULT);
+
+  const reload = () => {
+    getSettings().then(setSettings).catch(() => {});
+  };
+
+  useEffect(() => { reload(); }, []);
+
+  // Apply accent color as CSS variable
+  useEffect(() => {
+    document.documentElement.style.setProperty('--accent', settings.accent_color);
+    // Generate lighter/darker variants
+    document.documentElement.style.setProperty('--accent-dim', `${settings.accent_color}33`);
+  }, [settings.accent_color]);
+
+  return { settings, reload };
+}
+
+export const useSettings = () => useContext(SettingsContext);