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

tsx

// 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

tsx

// 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

tsx

<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)

tsx

// 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

tsx

<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

tsx

<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

tsx

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

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

Recharts Styling

tsx

<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

json

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

Model Selector Pattern

tsx

// 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

tsx

// 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