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

#000000

#FFFFFF

Brand Accents

#00D678

text-[#00D678]

#00D1FF

text-[#00D1FF]

#FF7733

text-[#FF7733]

Opacity Scale (NO gray-* classes)

bg-gray-50

bg-black/5

bg-gray-100

bg-black/5

bg-black/10

bg-gray-200

bg-black/10

text-gray-400

text-black/40

text-gray-500

text-black/50

text-black/60

text-gray-600

text-black/60

text-black/70

text-gray-700

text-black/70

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

text-2xl font-bold text-black

text-sm font-medium text-black/70 uppercase tracking-wide

text-base font-medium text-black

text-sm text-black

text-sm text-black/60

text-xs text-black/50

Icons

Use Lucide React icons. Size conventions:

h-3.5 w-3.5

h-4 w-4

h-5 w-5

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