design

name	design
description	Use when styling Fusionaly UI components, pages, or charts - applies the Fusionaly design system with black/white palette and brand accents

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