@toolr/ui-design 0.1.4 → 0.1.6

package/components/sections/report-bug/report-bug-form.tsx

@@ -124,13 +124,13 @@ export function ReportBugForm({
   return (
     <div className={cn('rounded-lg border border-neutral-700 bg-neutral-800', className)}>
       <div className="border-b border-neutral-700 px-4 py-3">
-        <h3 className="text-sm font-medium text-neutral-200">Report a Bug</h3>
+        <h3 className="text-md font-medium text-neutral-200">Report a Bug</h3>
       </div>
 
       <div className="space-y-4 p-4">
         {/* Issue type pills */}
         <div>
-          <label className="mb-2 block text-xs text-neutral-400">Issue Type</label>
+          <label className="mb-2 block text-sm text-neutral-400">Issue Type</label>
           <div className="flex flex-wrap gap-2">
             {ISSUE_TYPES.map((type) => (
               <button
@@ -138,7 +138,7 @@ export function ReportBugForm({
                 type="button"
                 onClick={() => setIssueType(type.value as IssueType)}
                 className={cn(
-                  'px-3 py-1.5 text-xs font-medium rounded-md transition-all',
+                  'px-3 py-1.5 text-sm font-medium rounded-md transition-all',
                   issueType === type.value
                     ? 'bg-blue-600 text-white'
                     : 'bg-neutral-700 text-neutral-400 hover:bg-neutral-600 hover:text-neutral-200',
@@ -152,7 +152,7 @@ export function ReportBugForm({
 
         {/* Title */}
         <div>
-          <label className="mb-1.5 block text-xs text-neutral-400">
+          <label className="mb-1.5 block text-sm text-neutral-400">
             Title <span className="text-red-400">*</span>
           </label>
           <Input
@@ -165,7 +165,7 @@ export function ReportBugForm({
 
         {/* Description */}
         <div>
-          <label className="mb-1.5 block text-xs text-neutral-400">
+          <label className="mb-1.5 block text-sm text-neutral-400">
             Description <span className="text-red-400">*</span>
           </label>
           <ResizableTextarea
@@ -173,13 +173,13 @@ export function ReportBugForm({
             onChange={(e) => setDescription(e.target.value)}
             placeholder="Describe the issue in detail. Include steps to reproduce if applicable."
             rows={6}
-            className="w-full px-3 py-1.5 bg-neutral-800 border border-neutral-700 rounded-lg text-sm text-neutral-200 placeholder-neutral-500 focus:outline-none focus:border-blue-500 transition-colors resize-none min-h-[120px]"
+            className="w-full px-3 py-1.5 bg-neutral-800 border border-neutral-700 rounded-lg text-md text-neutral-200 placeholder-neutral-500 focus:outline-none focus:border-blue-500 transition-colors resize-none min-h-[120px]"
           />
         </div>
 
         {/* Email */}
         <div>
-          <label className="mb-1.5 block text-xs text-neutral-400">Email (optional)</label>
+          <label className="mb-1.5 block text-sm text-neutral-400">Email (optional)</label>
           <Input
             type="text"
             value={email}
@@ -192,7 +192,7 @@ export function ReportBugForm({
 
         {/* Screenshots */}
         <div>
-          <label className="mb-2 block text-xs text-neutral-400">
+          <label className="mb-2 block text-sm text-neutral-400">
             Screenshots (optional, max 20MB total)
           </label>
           <ScreenshotUploader
@@ -208,7 +208,7 @@ export function ReportBugForm({
             <div className="flex items-center gap-2.5">
               <Checkbox checked={includeLogs} onChange={setIncludeLogs} />
               <span
-                className="text-sm text-neutral-400 cursor-pointer select-none"
+                className="text-md text-neutral-400 cursor-pointer select-none"
                 onClick={() => setIncludeLogs(!includeLogs)}
               >
                 Include error logs
@@ -224,11 +224,11 @@ export function ReportBugForm({
             {includeLogs && capturedErrors && capturedErrors.length > 0 && (
               <div className="rounded-md border border-neutral-700 bg-neutral-900/50">
                 <div className="px-3 py-2 border-b border-neutral-700">
-                  <span className="text-xs font-medium text-neutral-400">Captured Errors</span>
+                  <span className="text-sm font-medium text-neutral-400">Captured Errors</span>
                 </div>
                 <div className="max-h-[200px] overflow-y-auto divide-y divide-neutral-800">
                   {capturedErrors.map((error) => (
-                    <div key={error.fingerprint} className="px-3 py-2 text-xs">
+                    <div key={error.fingerprint} className="px-3 py-2 text-sm">
                       <div className="flex items-start gap-2">
                         {error.count > 1 && (
                           <span className="shrink-0 text-orange-400 font-mono font-medium">
@@ -251,14 +251,14 @@ export function ReportBugForm({
       {/* Footer */}
       <div className="flex items-center justify-end gap-2 border-t border-neutral-700 px-4 py-3">
         {isSubmitting && submissionStatus && (
-          <span className="text-xs text-neutral-400 mr-auto">{submissionStatus}</span>
+          <span className="text-sm text-neutral-400 mr-auto">{submissionStatus}</span>
         )}
         {onCancel && (
           <button
             type="button"
             onClick={onCancel}
             disabled={isSubmitting}
-            className="rounded-md border border-neutral-700 bg-transparent px-3 py-1.5 text-sm text-neutral-400 transition-colors hover:bg-neutral-700 hover:text-neutral-200 disabled:opacity-50"
+            className="rounded-md border border-neutral-700 bg-transparent px-3 py-1.5 text-md text-neutral-400 transition-colors hover:bg-neutral-700 hover:text-neutral-200 disabled:opacity-50"
           >
             Cancel
           </button>
@@ -267,7 +267,7 @@ export function ReportBugForm({
           type="button"
           onClick={handleSubmit}
           disabled={!canSubmit}
-          className="flex items-center gap-1.5 rounded-md bg-blue-600 px-3 py-1.5 text-sm text-white transition-colors hover:bg-blue-500 disabled:cursor-not-allowed disabled:opacity-50"
+          className="flex items-center gap-1.5 rounded-md bg-blue-600 px-3 py-1.5 text-md text-white transition-colors hover:bg-blue-500 disabled:cursor-not-allowed disabled:opacity-50"
         >
           {isSubmitting ? (
             <Loader2 className="w-3.5 h-3.5 animate-spin" />

package/components/sections/report-bug/screenshot-uploader.tsx

@@ -158,10 +158,10 @@ export function ScreenshotUploader({
       >
         <ImagePlus className={cn('w-6 h-6', isDragging ? 'text-blue-400' : 'text-neutral-500')} />
         <div className="text-center">
-          <p className="text-sm text-neutral-400">
+          <p className="text-md text-neutral-400">
             {isDragging ? 'Drop images here' : 'Click or drag images to attach'}
           </p>
-          <p className="text-xs text-neutral-500 mt-1">
+          <p className="text-sm text-neutral-500 mt-1">
             {formatFileSize(remainingSize)} remaining of {formatFileSize(maxTotalSize)}
           </p>
         </div>
@@ -177,7 +177,7 @@ export function ScreenshotUploader({
       </div>
 
       {error && (
-        <div className="flex items-center gap-2 text-sm text-red-400">
+        <div className="flex items-center gap-2 text-md text-red-400">
           <AlertCircle className="w-4 h-4 flex-shrink-0" />
           <span>{error}</span>
         </div>
@@ -207,9 +207,9 @@ export function ScreenshotUploader({
                 >
                   <X className="w-3 h-3" />
                 </button>
-                <span className="text-xs text-white truncate">{s.filename}</span>
+                <span className="text-sm text-white truncate">{s.filename}</span>
               </div>
-              <div className="absolute bottom-1 right-1 px-1.5 py-0.5 bg-[var(--background)]/70 rounded text-xs text-neutral-400">
+              <div className="absolute bottom-1 right-1 px-1.5 py-0.5 bg-[var(--background)]/70 rounded text-sm text-neutral-400">
                 {formatFileSize(s.size)}
               </div>
             </div>
@@ -218,7 +218,7 @@ export function ScreenshotUploader({
       )}
 
       {screenshots.length > 0 && (
-        <div className="flex items-center justify-between text-xs text-neutral-500">
+        <div className="flex items-center justify-between text-sm text-neutral-500">
           <span>{screenshots.length} image{screenshots.length !== 1 ? 's' : ''} attached</span>
           <span>Total: {formatFileSize(totalSize)}</span>
         </div>

package/components/sections/snapshot-browser/snapshot-browser-panel.tsx

@@ -75,7 +75,7 @@ export function SnapshotBrowserPanel({
         <div className="flex items-center justify-between">
           <div>
             <label className="text-neutral-300">Snapshot Limit</label>
-            <p className="text-sm text-neutral-500">
+            <p className="text-md text-neutral-500">
               Maximum number of snapshots to keep per item (1-50)
             </p>
           </div>
@@ -92,7 +92,7 @@ export function SnapshotBrowserPanel({
         <div className="flex items-center justify-between mb-3">
           <div>
             <label className="text-neutral-300">Browse Snapshots</label>
-            <p className="text-sm text-neutral-500">
+            <p className="text-md text-neutral-500">
               {totalSnapshotCount === 0
                 ? 'No snapshots saved yet'
                 : `${totalSnapshotCount} snapshot${totalSnapshotCount === 1 ? '' : 's'} stored`}
@@ -129,7 +129,7 @@ export function SnapshotBrowserPanel({
       <div className="bg-neutral-900/50 border border-neutral-700 rounded-lg p-4">
         <div className="flex items-start gap-3">
           <HelpCircle className="w-4 h-4 text-neutral-500 mt-0.5 shrink-0" />
-          <div className="text-sm text-neutral-500 space-y-2">
+          <div className="text-md text-neutral-500 space-y-2">
             <p>
               <strong className="text-neutral-400">How snapshots work:</strong>
             </p>

package/components/sections/snapshot-browser/snapshot-tree.tsx

@@ -194,14 +194,14 @@ function SnapshotEntryRow({
 
   return (
     <div
-      className="flex items-center gap-2 px-2 py-1.5 text-sm rounded-md group transition-colors hover:bg-neutral-700/50 text-neutral-400"
+      className="flex items-center gap-2 px-2 py-1.5 text-md rounded-md group transition-colors hover:bg-neutral-700/50 text-neutral-400"
       style={{ paddingLeft: `${depth * 16 + 8}px` }}
     >
       <Clock className="w-3 h-3 shrink-0 text-neutral-500" />
-      <span className="text-xs flex-1 truncate">
+      <span className="text-sm flex-1 truncate">
         {searchQuery ? highlightMatch(displayName, searchQuery) : displayName}
       </span>
-      <span className="text-xss text-neutral-500 shrink-0" title={formatFullDate(entry.savedAt)}>
+      <span className="text-xs text-neutral-500 shrink-0" title={formatFullDate(entry.savedAt)}>
         {formatRelativeTime(entry.savedAt)}
       </span>
       <IconButton
@@ -248,7 +248,7 @@ function ExpandableNode({
     <div>
       <button
         onClick={() => onToggle(path)}
-        className="w-full flex items-center gap-2 px-2 py-1.5 text-sm rounded-md transition-colors cursor-pointer text-neutral-400 hover:bg-neutral-700/50 hover:text-neutral-300"
+        className="w-full flex items-center gap-2 px-2 py-1.5 text-md rounded-md transition-colors cursor-pointer text-neutral-400 hover:bg-neutral-700/50 hover:text-neutral-300"
         style={{ paddingLeft: `${depth * 16 + 8}px` }}
       >
         <span className="w-4 h-4 flex items-center justify-center shrink-0">
@@ -266,7 +266,7 @@ function ExpandableNode({
         </span>
 
         {snapshotCount > 0 && (
-          <span className="text-xs text-neutral-500 bg-neutral-700 px-1.5 py-0.5 rounded shrink-0">
+          <span className="text-sm text-neutral-500 bg-neutral-700 px-1.5 py-0.5 rounded shrink-0">
             {snapshotCount}
           </span>
         )}
@@ -322,10 +322,10 @@ export function SnapshotTree({
 
   if (totalCount === 0) {
     return (
-      <div className={cn('text-sm text-neutral-500 py-8 text-center', className)}>
+      <div className={cn('text-md text-neutral-500 py-8 text-center', className)}>
         No snapshots saved yet.
         <br />
-        <span className="text-xs">Use the camera button in editors to save snapshots.</span>
+        <span className="text-sm">Use the camera button in editors to save snapshots.</span>
       </div>
     )
   }
@@ -377,7 +377,7 @@ export function SnapshotTree({
       {/* Tree */}
       <div className="bg-neutral-900 border border-neutral-700 rounded-lg p-2 min-h-[200px] max-h-[60vh] overflow-y-auto">
         {filteredScopes.length === 0 && searchQuery ? (
-          <p className="text-xs text-neutral-500 text-center py-4">
+          <p className="text-sm text-neutral-500 text-center py-4">
             No snapshots match &ldquo;{searchQuery}&rdquo;
           </p>
         ) : (

package/components/sections/snippets-editor/snippets-editor.tsx

@@ -39,6 +39,59 @@ export interface SnippetsEditorProps {
   /** Section description, e.g. "Define snippets to reuse in skills prompts..." */
   description?: string
   className?: string
+  accentColor?: string
+}
+
+const ACCENT_DIVIDER_HOVER: Record<string, string> = {
+  blue: 'hover:bg-blue-500/30',
+  purple: 'hover:bg-purple-500/30',
+  orange: 'hover:bg-orange-500/30',
+  green: 'hover:bg-green-500/30',
+  pink: 'hover:bg-pink-500/30',
+  amber: 'hover:bg-amber-500/30',
+  emerald: 'hover:bg-emerald-500/30',
+  teal: 'hover:bg-teal-500/30',
+  sky: 'hover:bg-sky-500/30',
+  violet: 'hover:bg-violet-500/30',
+}
+
+const ACCENT_TEXT: Record<string, string> = {
+  blue: 'text-blue-400',
+  purple: 'text-purple-400',
+  orange: 'text-orange-400',
+  green: 'text-green-400',
+  pink: 'text-pink-400',
+  amber: 'text-amber-400',
+  emerald: 'text-emerald-400',
+  teal: 'text-teal-400',
+  sky: 'text-sky-400',
+  violet: 'text-violet-400',
+}
+
+const ACCENT_BORDER: Record<string, string> = {
+  blue: 'border-l-blue-400',
+  purple: 'border-l-purple-400',
+  orange: 'border-l-orange-400',
+  green: 'border-l-green-400',
+  pink: 'border-l-pink-400',
+  amber: 'border-l-amber-400',
+  emerald: 'border-l-emerald-400',
+  teal: 'border-l-teal-400',
+  sky: 'border-l-sky-400',
+  violet: 'border-l-violet-400',
+}
+
+const ACCENT_BUTTON: Record<string, string> = {
+  blue: 'bg-blue-600 hover:bg-blue-500',
+  purple: 'bg-purple-600 hover:bg-purple-500',
+  orange: 'bg-orange-600 hover:bg-orange-500',
+  green: 'bg-green-600 hover:bg-green-500',
+  pink: 'bg-pink-600 hover:bg-pink-500',
+  amber: 'bg-amber-600 hover:bg-amber-500',
+  emerald: 'bg-emerald-600 hover:bg-emerald-500',
+  teal: 'bg-teal-600 hover:bg-teal-500',
+  sky: 'bg-sky-600 hover:bg-sky-500',
+  violet: 'bg-violet-600 hover:bg-violet-500',
 }
 
 const MIN_SIDEBAR = 200
@@ -51,6 +104,7 @@ export function SnippetsEditor({
   title = 'Snippets',
   description = 'Define reusable snippets for prompts using {{SNIPPET_NAME}} syntax.',
   className,
+  accentColor = 'blue',
 }: SnippetsEditorProps) {
   const {
     selectedName,
@@ -103,12 +157,12 @@ export function SnippetsEditor({
       <div className="flex items-center justify-between px-4 py-3 border-b border-neutral-700 bg-purple-500/5">
         <div className="flex items-center gap-2">
           <Braces className="w-4 h-4 text-purple-400" />
-          <h3 className="text-sm font-medium text-neutral-300">{title}</h3>
-          <span className="px-2 py-0.5 text-xs rounded-full bg-neutral-700 text-neutral-400">
+          <h3 className="text-md font-medium text-neutral-300">{title}</h3>
+          <span className="px-2 py-0.5 text-sm rounded-full bg-neutral-700 text-neutral-400">
             {snippets.length}
           </span>
         </div>
-        <p className="text-xs text-neutral-500 hidden sm:block">{description}</p>
+        <p className="text-sm text-neutral-500 hidden sm:block">{description}</p>
       </div>
 
       {/* Body: two columns */}
@@ -141,10 +195,10 @@ export function SnippetsEditor({
             {filteredSnippets.length === 0 && !isAdding && (
               <div className="text-center py-10 px-4">
                 <Braces className="w-8 h-8 mx-auto text-purple-400/40 mb-3" />
-                <p className="text-xs text-neutral-500 mb-1">
+                <p className="text-sm text-neutral-500 mb-1">
                   {searchQuery ? 'No matching snippets' : 'No snippets defined'}
                 </p>
-                <p className="text-xss text-neutral-600">
+                <p className="text-xs text-neutral-600">
                   {searchQuery ? 'Try a different search term' : 'Click + to add your first snippet'}
                 </p>
               </div>
@@ -156,6 +210,7 @@ export function SnippetsEditor({
                 selected={selectedName === snippet.name}
                 onSelect={() => selectSnippet(snippet.name)}
                 onDelete={() => remove(snippet.name)}
+                accentColor={accentColor}
               />
             ))}
           </div>
@@ -163,7 +218,7 @@ export function SnippetsEditor({
 
         {/* Resizable divider */}
         <div
-          className="w-1 cursor-col-resize bg-transparent hover:bg-blue-500/30 transition-colors flex-shrink-0"
+          className={`w-1 cursor-col-resize bg-transparent ${ACCENT_DIVIDER_HOVER[accentColor] ?? ACCENT_DIVIDER_HOVER.blue} transition-colors flex-shrink-0`}
           onMouseDown={onDividerMouseDown}
         />
 
@@ -181,15 +236,16 @@ export function SnippetsEditor({
               onReset={resetForm}
               onDelete={isEditing && selectedName ? () => remove(selectedName) : undefined}
               onCancel={isAdding ? cancelForm : undefined}
+              accentColor={accentColor}
             />
           ) : (
             <div className="flex-1 flex items-center justify-center p-6">
               <div className="text-center max-w-xs">
                 <Braces className="w-10 h-10 mx-auto text-purple-400/30 mb-4" />
-                <p className="text-sm text-neutral-500 mb-2">Select a snippet to edit</p>
-                <p className="text-xs text-neutral-600 leading-relaxed">
+                <p className="text-md text-neutral-500 mb-2">Select a snippet to edit</p>
+                <p className="text-sm text-neutral-600 leading-relaxed">
                   Choose a snippet from the list, or click{' '}
-                  <span className="text-blue-400">+</span> to create a new one.
+                  <span className={ACCENT_TEXT[accentColor] ?? ACCENT_TEXT.blue}>+</span> to create a new one.
                   Reference snippets in prompts with{' '}
                   <span className="font-mono text-purple-400">{'{{SNIPPET_NAME}}'}</span> syntax.
                 </p>
@@ -211,28 +267,29 @@ interface SnippetListItemProps {
   selected: boolean
   onSelect: () => void
   onDelete: () => void
+  accentColor: string
 }
 
-function SnippetListItem({ snippet, selected, onSelect, onDelete }: SnippetListItemProps) {
+function SnippetListItem({ snippet, selected, onSelect, onDelete, accentColor }: SnippetListItemProps) {
   return (
     <div
       className={cn(
         'group flex items-start gap-2 px-3 py-2.5 cursor-pointer transition-colors border-l-2',
         selected
-          ? 'bg-neutral-850 border-l-blue-400'
+          ? `bg-neutral-850 ${ACCENT_BORDER[accentColor] ?? ACCENT_BORDER.blue}`
           : 'border-l-transparent hover:bg-neutral-850/50',
       )}
       onClick={onSelect}
     >
       <div className="flex-1 min-w-0">
-        <p className="text-xs font-mono font-medium text-neutral-300 truncate">
+        <p className="text-sm font-mono font-medium text-neutral-300 truncate">
           {snippet.name}
         </p>
-        <p className="text-xss text-neutral-500 truncate mt-0.5">
+        <p className="text-xs text-neutral-500 truncate mt-0.5">
           {snippet.description}
         </p>
         {snippet.value && (
-          <p className="text-xss text-neutral-600 truncate mt-0.5 font-mono">
+          <p className="text-xs text-neutral-600 truncate mt-0.5 font-mono">
             {snippet.value.slice(0, 80)}{snippet.value.length > 80 ? '...' : ''}
           </p>
         )}
@@ -263,6 +320,7 @@ interface SnippetFormProps {
   onReset: () => void
   onDelete?: () => void
   onCancel?: () => void
+  accentColor: string
 }
 
 function SnippetForm({
@@ -276,13 +334,14 @@ function SnippetForm({
   onReset,
   onDelete,
   onCancel,
+  accentColor,
 }: SnippetFormProps) {
   return (
     <div className="flex-1 flex flex-col">
       <div className="flex-1 overflow-y-auto p-4 space-y-4">
         {/* Name */}
         <div>
-          <label className="block text-xs text-neutral-500 mb-1.5">
+          <label className="block text-sm text-neutral-500 mb-1.5">
             Snippet Name <span className="text-red-400">*</span>
           </label>
           <Input
@@ -292,14 +351,14 @@ function SnippetForm({
             error={nameHasError}
             autoFocus={!isEditing}
           />
-          <p className="mt-1 text-xss text-neutral-600">
+          <p className="mt-1 text-xs text-neutral-600">
             Use in prompts as <span className="font-mono text-purple-400">{'{{' + (formData.name || 'NAME') + '}}'}</span>
           </p>
         </div>
 
         {/* Description */}
         <div>
-          <label className="block text-xs text-neutral-500 mb-1.5">
+          <label className="block text-sm text-neutral-500 mb-1.5">
             Description <span className="text-red-400">*</span>
           </label>
           <Input
@@ -311,7 +370,7 @@ function SnippetForm({
 
         {/* Value */}
         <div>
-          <label className="block text-xs text-neutral-500 mb-1.5">Value</label>
+          <label className="block text-sm text-neutral-500 mb-1.5">Value</label>
           <ResizableTextarea
             mode="code"
             language="markdown"
@@ -319,7 +378,7 @@ function SnippetForm({
             onChange={(val) => setFormField('value', val)}
             minHeight={160}
           />
-          <p className="mt-1 text-xss text-neutral-600">
+          <p className="mt-1 text-xs text-neutral-600">
             Can be a single value, multi-line text, or an entire document
           </p>
         </div>
@@ -327,7 +386,7 @@ function SnippetForm({
         {/* Error */}
         {formError && (
           <div className="px-3 py-2 bg-red-500/10 border border-red-500/30 rounded-lg">
-            <p className="text-xs text-red-400">{formError}</p>
+            <p className="text-sm text-red-400">{formError}</p>
           </div>
         )}
       </div>
@@ -352,7 +411,7 @@ function SnippetForm({
               type="button"
               onClick={onCancel}
               disabled={isSaving}
-              className="rounded-md border border-neutral-700 bg-transparent px-3 py-1.5 text-xs text-neutral-400 transition-colors hover:bg-neutral-700 hover:text-neutral-300 disabled:opacity-50"
+              className="rounded-md border border-neutral-700 bg-transparent px-3 py-1.5 text-sm text-neutral-400 transition-colors hover:bg-neutral-700 hover:text-neutral-300 disabled:opacity-50"
             >
               Cancel
             </button>
@@ -369,7 +428,7 @@ function SnippetForm({
             type="button"
             onClick={onSave}
             disabled={isSaving}
-            className="flex items-center gap-1.5 rounded-md bg-blue-600 px-3 py-1.5 text-xs text-white transition-colors hover:bg-blue-500 disabled:cursor-not-allowed disabled:opacity-50"
+            className={`flex items-center gap-1.5 rounded-md ${ACCENT_BUTTON[accentColor] ?? ACCENT_BUTTON.blue} px-3 py-1.5 text-sm text-white transition-colors disabled:cursor-not-allowed disabled:opacity-50`}
           >
             <Save className="w-3 h-3" />
             {isEditing ? 'Save' : 'Add'}

package/components/settings/SettingsHeader.tsx

@@ -55,7 +55,7 @@ export function SettingsHeader({
       <div className={`flex-shrink-0 w-8 h-8 rounded-lg ${styles.iconBg} flex items-center justify-center`}>
         {icon ?? <Info className={`w-4 h-4 ${styles.iconColor}`} />}
       </div>
-      <p className="flex-1 text-sm text-neutral-400 leading-relaxed">{description}</p>
+      <p className="flex-1 text-md text-neutral-400 leading-relaxed">{description}</p>
       <div className="flex-shrink-0 flex items-center gap-2">
         {action}
         {onReset && (

package/components/settings/SettingsTreeNav.tsx

@@ -14,6 +14,20 @@ export interface SettingsTreeNavProps {
   tree: SettingsTreeNode[]
   selectedPath: string
   onSelectPath: (path: string) => void
+  accentColor?: string
+}
+
+const ACCENT_SELECTED: Record<string, string> = {
+  blue: 'bg-blue-500/20 text-blue-400',
+  purple: 'bg-purple-500/20 text-purple-400',
+  orange: 'bg-orange-500/20 text-orange-400',
+  green: 'bg-green-500/20 text-green-400',
+  pink: 'bg-pink-500/20 text-pink-400',
+  amber: 'bg-amber-500/20 text-amber-400',
+  emerald: 'bg-emerald-500/20 text-emerald-400',
+  teal: 'bg-teal-500/20 text-teal-400',
+  sky: 'bg-sky-500/20 text-sky-400',
+  violet: 'bg-violet-500/20 text-violet-400',
 }
 
 interface TreeNodeProps {
@@ -25,6 +39,7 @@ interface TreeNodeProps {
   onToggleExpand: (path: string) => void
   depth: number
   searchQuery?: string
+  accentColor: string
 }
 
 function highlightMatch(text: string, query: string | undefined) {
@@ -53,6 +68,7 @@ function TreeNode({
   onToggleExpand,
   depth,
   searchQuery,
+  accentColor,
 }: TreeNodeProps) {
   const isLeaf = isLeafNode(node)
   const isExpanded = expandedPaths.has(path)
@@ -72,8 +88,8 @@ function TreeNode({
       <button
         onClick={handleClick}
         className={`
-          w-full flex items-center gap-2 px-2 py-1.5 text-sm rounded-md transition-colors cursor-pointer
-          ${isSelected ? 'bg-blue-500/20 text-blue-400' : isInSelectedPath ? 'text-neutral-300' : 'text-neutral-400'}
+          w-full flex items-center gap-2 px-2 py-1.5 text-md rounded-md transition-colors cursor-pointer
+          ${isSelected ? ACCENT_SELECTED[accentColor] ?? ACCENT_SELECTED.blue : isInSelectedPath ? 'text-neutral-300' : 'text-neutral-400'}
           ${!isSelected && 'hover:bg-neutral-800 hover:text-neutral-200'}
         `}
         style={{ paddingLeft: `${depth * 12 + 8}px` }}
@@ -110,6 +126,7 @@ function TreeNode({
               onToggleExpand={onToggleExpand}
               depth={depth + 1}
               searchQuery={searchQuery}
+              accentColor={accentColor}
             />
           ))}
         </div>
@@ -118,7 +135,7 @@ function TreeNode({
   )
 }
 
-export function SettingsTreeNav({ tree, selectedPath, onSelectPath }: SettingsTreeNavProps) {
+export function SettingsTreeNav({ tree, selectedPath, onSelectPath, accentColor = 'blue' }: SettingsTreeNavProps) {
   const [expandedPaths, setExpandedPaths] = useState<Set<string>>(() => {
     const expanded = new Set<string>()
     if (selectedPath) {
@@ -232,7 +249,7 @@ export function SettingsTreeNav({ tree, selectedPath, onSelectPath }: SettingsTr
 
       <div className="flex-1 overflow-y-auto py-2">
         {filteredTree.length === 0 && searchQuery ? (
-          <p className="text-xs text-neutral-500 text-center py-4 px-2">
+          <p className="text-sm text-neutral-500 text-center py-4 px-2">
             No settings match &quot;{searchQuery}&quot;
           </p>
         ) : (
@@ -247,6 +264,7 @@ export function SettingsTreeNav({ tree, selectedPath, onSelectPath }: SettingsTr
               onToggleExpand={handleToggleExpand}
               depth={0}
               searchQuery={searchQuery}
+              accentColor={accentColor}
             />
           ))
         )}

package/components/ui/action-dialog.tsx

@@ -211,11 +211,11 @@ export function ActionDialog({
             />
           )}
           <div className="flex flex-col">
-            <span className="text-sm font-semibold text-neutral-200">
+            <span className="text-md font-semibold text-neutral-200">
               {title}
             </span>
             {subtitle && (
-              <span className="text-xs text-neutral-500">{subtitle}</span>
+              <span className="text-sm text-neutral-500">{subtitle}</span>
             )}
           </div>
           <div className="flex-1" />
@@ -236,7 +236,7 @@ export function ActionDialog({
           {hasSelection && (
             <div>
               {selectionLabel && (
-                <div className="text-xs text-neutral-500 mb-2">{selectionLabel}</div>
+                <div className="text-sm text-neutral-500 mb-2">{selectionLabel}</div>
               )}
               <SelectionGrid
                 items={items}
@@ -254,11 +254,11 @@ export function ActionDialog({
           {hasScenarios && (
             <div>
               <div className="flex items-center justify-between mb-2">
-                <span className="text-xs text-neutral-500">{scenarioLabel}</span>
+                <span className="text-sm text-neutral-500">{scenarioLabel}</span>
                 <button
                   type="button"
                   onClick={handleSelectAllScenarios}
-                  className="text-xs text-blue-400 hover:text-blue-300 transition-colors cursor-pointer"
+                  className="text-sm text-blue-400 hover:text-blue-300 transition-colors cursor-pointer"
                 >
                   {allScenariosSelected ? 'Deselect All' : 'Select All'}
                 </button>

package/components/ui/badge.tsx

@@ -43,10 +43,10 @@ const colorClasses: Record<BadgeColor, string> = {
 
 const sizeClasses = {
   xss: 'min-w-[14px] h-[14px] px-0.5 text-xss',
-  xs: 'min-w-[16px] h-[16px] px-1 text-xss',
-  sm: 'min-w-[18px] h-[18px] px-1 text-xss',
-  md: 'min-w-[20px] h-[20px] px-1.5 text-xss',
-  lg: 'min-w-[22px] h-[22px] px-1.5 text-xs',
+  xs: 'min-w-[16px] h-[16px] px-1 text-xs',
+  sm: 'min-w-[18px] h-[18px] px-1 text-xs',
+  md: 'min-w-[20px] h-[20px] px-1.5 text-xs',
+  lg: 'min-w-[22px] h-[22px] px-1.5 text-sm',
 }
 
 export function Badge({