karloscodes/fusionaly-design

Fusionaly Design System

Philosophy

Clean, minimal, professional. Black and white foundation with purposeful color accents. No gray noise - use black with opacity for subtlety.

Color Palette

Primary

| Name | Value | Usage | |------|-------|-------| | Black | #000000 | Text, borders, buttons, backgrounds | | White | #FFFFFF | Backgrounds, text on dark |

Brand Accents

| Name | Value | Tailwind | Usage | |------|-------|----------|-------| | Green | #00D678 | text-[#00D678] | Success, growth, positive metrics, SQL syntax | | Cyan | #00D1FF | text-[#00D1FF] | Links, charts, data visualization | | Orange | #FF7733 | text-[#FF7733] | Warnings, alerts, third chart color |

Opacity Scale (NO gray-* classes)

| Instead of | Use | |------------|-----| | bg-gray-50 | bg-black/5 | | bg-gray-100 | bg-black/5 or bg-black/10 | | bg-gray-200 | bg-black/10 | | text-gray-400 | text-black/40 | | text-gray-500 | text-black/50 or text-black/60 | | text-gray-600 | text-black/60 or text-black/70 | | text-gray-700 | text-black/70 or text-black/80 | | border-gray-200 | border-black/10 | | border-gray-300 | border-black/20 | | hover:bg-gray-50 | hover:bg-black/5 |

Components

Buttons

// Primary (solid black)
<Button className="bg-black text-white hover:bg-black/80">
  Action
</Button>

// Secondary (outline)
<Button variant="outline" className="border-black text-black hover:bg-black hover:text-white">
  Secondary
</Button>

// Ghost
<Button variant="ghost" className="text-black/60 hover:text-black hover:bg-black/5">
  Ghost
</Button>

// Disabled
<Button disabled className="bg-black/20 text-black/40 cursor-not-allowed">
  Disabled
</Button>

Cards

// Standard card
<div className="bg-white border border-black rounded-lg overflow-hidden">
  <div className="px-6 py-4 border-b border-black/10">
    <h3 className="text-base font-medium text-black">Title</h3>
  </div>
  <div className="p-4">
    Content
  </div>
</div>

Form Inputs

<input
  className="w-full border border-black/20 rounded-lg px-3 py-2 text-sm
             focus:outline-none focus:border-black focus:ring-1 focus:ring-black
             disabled:bg-black/5 disabled:cursor-not-allowed"
/>

Code Blocks (SQL)

// SQL display - green on black
<pre className="bg-black rounded p-3 overflow-x-auto font-mono text-xs leading-relaxed text-[#00D678] whitespace-pre-wrap">
  {sql}
</pre>

Tables

<table className="w-full border-collapse">
  <thead>
    <tr className="border-b border-black/10 bg-black/5">
      <th className="py-2 px-3 text-left text-xs font-medium text-black/60 uppercase tracking-wider">
        Header
      </th>
    </tr>
  </thead>
  <tbody className="bg-white divide-y divide-black/10">
    <tr className="hover:bg-black/5">
      <td className="py-2 px-3 text-sm">Cell</td>
    </tr>
  </tbody>
</table>

Collapsible Details

<details className="group">
  <summary className="cursor-pointer text-xs text-black/50 hover:text-black flex items-center font-medium outline-none">
    <svg className="w-3 h-3 mr-1.5 group-open:rotate-90 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
    </svg>
    View Details
  </summary>
  <div className="mt-3 p-3 bg-black/5 rounded-lg">
    Content
  </div>
</details>

Charts

Color Sequence

const CHART_COLORS = ["#00D1FF", "#00D678", "#FF7733"];

const getDynamicColor = (index: number): string => {
  return CHART_COLORS[index % CHART_COLORS.length];
};

Recharts Styling

<BarChart data={data}>
  <CartesianGrid strokeDasharray="3 3" opacity={0.4} />
  <XAxis
    tick={{ fill: "#374151", fontSize: 10 }}
  />
  <YAxis
    tick={{ fill: "#374151", fontSize: 10 }}
    allowDecimals={false}
  />
  <Tooltip
    contentStyle={{
      backgroundColor: "#FFFFFF",
      border: "1px solid #E5E7EB",
      borderRadius: "6px",
      boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1)",
    }}
  />
  <Bar dataKey="value" fill="#00D678" />
</BarChart>

Vega-Lite Defaults

{
  "config": {
    "axis": {
      "labelColor": "#374151",
      "titleColor": "#111827"
    },
    "legend": {
      "labelColor": "#374151"
    }
  }
}

Model Selector Pattern

// Three-option toggle for AI models
const AI_MODELS = [
  { id: "gpt-4.1", label: "Fast", icon: Zap },
  { id: "gpt-5.2", label: "Smart", icon: Sparkles },
  { id: "gpt-5.2-thinking", label: "Deep", icon: Brain },
];

<div className="flex items-center gap-1 p-0.5 bg-black/5 rounded-lg w-fit">
  {AI_MODELS.map((m) => (
    <button
      key={m.id}
      className={cn(
        "flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-md transition-all",
        isSelected
          ? "bg-white text-black shadow-sm"
          : "text-black/60 hover:text-black",
        disabled && "opacity-50 cursor-not-allowed"
      )}
    >
      <Icon className="h-3 w-3" />
      <span>{label}</span>
    </button>
  ))}
</div>

Chip/Tag Buttons

// Example question chips
<button className="text-xs px-3 py-1.5 bg-black text-white hover:bg-black/80 rounded transition-colors">
  Example
</button>

// Follow-up suggestion chips
<button className="text-xs px-3 py-1.5 border border-black/20 text-black hover:border-black hover:bg-black/5 rounded transition-colors">
  Suggestion
</button>

Typography

| Element | Classes | |---------|---------| | Page title | text-2xl font-bold text-black | | Section header | text-sm font-medium text-black/70 uppercase tracking-wide | | Card title | text-base font-medium text-black | | Body text | text-sm text-black | | Muted text | text-sm text-black/60 | | Small muted | text-xs text-black/50 |

Icons

Use Lucide React icons. Size conventions:

| Context | Size | |---------|------| | Button inline | h-3.5 w-3.5 | | Action button | h-4 w-4 | | Section header | h-5 w-5 or h-6 w-6 |

Spacing

• Card padding: px-6 py-4 (header), p-4 or p-6 (content)
• Section gaps: gap-4 or gap-6
• Inline element gaps: gap-1, gap-1.5, gap-2

Don'ts

• No gray-* classes - use black/* opacity
• No colored backgrounds for cards - use white with black border
• No gradients
• No shadows except subtle on selected states (shadow-sm)
• No decorative colors - accents are functional