File size: 4,102 Bytes
2a0fbe0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 | /**
* Fused Design System: TigerGraph Γ Claude (Anthropic)
* ====================================================
* TigerGraph: Orange #FF6B00, Navy #002B49, Electric Blue #0072CE
* Claude: Cream #faf9f5, Coral #cc785c, Dark #181715
*
* The fusion: TigerGraph's authority + Claude's warmth
* - Canvas: Claude's warm cream (not cold white)
* - Primary CTA: TigerGraph orange (energy, action)
* - Secondary accent: Claude coral (warmth, intelligence)
* - Text/structure: TigerGraph navy (depth, authority)
* - Dark surfaces: Claude dark (product chrome, code)
*/
export const colors = {
// ββ Brand Primary βββββββββββββββββββββββββββββββββ
tigerOrange: "#FF6B00",
tigerOrangeHover: "#E55F00",
tigerOrangeLight: "#FFF4EB",
tigerOrangeMuted: "#FF8C35",
// ββ Brand Secondary βββββββββββββββββββββββββββββββ
tigerNavy: "#002B49",
tigerNavyLight: "#003D6B",
electricBlue: "#0072CE",
electricBlueLight: "#E6F4FF",
// ββ Claude Surfaces βββββββββββββββββββββββββββββββ
canvas: "#faf9f5",
surfaceSoft: "#f5f0e8",
surfaceCard: "#efe9de",
surfaceCreamStrong:"#e8e0d2",
surfaceDark: "#181715",
surfaceDarkElev: "#252320",
surfaceDarkSoft: "#1f1e1b",
// ββ Claude Accents ββββββββββββββββββββββββββββββββ
coral: "#cc785c",
coralActive: "#a9583e",
coralDisabled: "#e6dfd8",
accentTeal: "#5db8a6",
accentAmber: "#e8a55a",
// ββ Text ββββββββββββββββββββββββββββββββββββββββββ
ink: "#141413",
bodyStrong: "#252523",
body: "#3d3d3a",
muted: "#6c6a64",
mutedSoft: "#8e8b82",
onPrimary: "#ffffff",
onDark: "#faf9f5",
onDarkSoft: "#a09d96",
// ββ Borders βββββββββββββββββββββββββββββββββββββββ
hairline: "#e6dfd8",
hairlineSoft: "#ebe6df",
// ββ Semantic ββββββββββββββββββββββββββββββββββββββ
success: "#5db872",
successLight: "#ecf7ef",
warning: "#d4a017",
warningLight: "#fdf6e3",
error: "#c64545",
errorLight: "#fdf0f0",
// ββ Chart Colors (Pipeline comparison) ββββββββββββ
baseline: "#0072CE", // Electric blue for baseline
graphrag: "#FF6B00", // Tiger orange for GraphRAG
baselineLight: "#E6F4FF",
graphragLight: "#FFF4EB",
} as const;
export const typography = {
fontSerif: "'Cormorant Garamond', 'EB Garamond', 'Times New Roman', serif",
fontSans: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
fontMono: "'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace",
} as const;
export const spacing = {
xxs: "4px",
xs: "8px",
sm: "12px",
md: "16px",
lg: "24px",
xl: "32px",
xxl: "48px",
section: "96px",
} as const;
export const rounded = {
xs: "4px",
sm: "6px",
md: "8px",
lg: "12px",
xl: "16px",
pill: "9999px",
full: "50%",
} as const;
// Chart-specific tokens for Recharts
export const chartTokens = {
baseline: {
stroke: colors.baseline,
fill: colors.baseline,
fillOpacity: 0.15,
name: "Baseline RAG",
},
graphrag: {
stroke: colors.graphrag,
fill: colors.graphrag,
fillOpacity: 0.15,
name: "GraphRAG",
},
grid: {
stroke: colors.tigerNavy,
strokeOpacity: 0.1,
},
tooltip: {
background: colors.canvas,
border: colors.hairline,
text: colors.ink,
},
} as const;
export type ColorKey = keyof typeof colors;
|