7101350dcc
✅ Hard-edge separation - no blending ✅ Staircase surface system (void/titanium/graphite/jet) ✅ Black/Gold luxury color palette ✅ High contrast text (white/silver only) ✅ Monospace for all data (JetBrains Mono) ✅ Gold accents for value/active states ✅ Utility classes for consistent styling ✅ Theme switching infrastructure ✅ Alternative themes ready (Ocean, Forest, Crimson) Design rules: - Every container gets 1px border - No dim text allowed - Gold for data and money - OLED black for structure - Matte finishes, metallic accents
139 lines
4.8 KiB
TypeScript
139 lines
4.8 KiB
TypeScript
/**
|
|
* Spark Pro Design System
|
|
* Theme Configuration & Guidelines
|
|
*/
|
|
|
|
export const sparkTheme = {
|
|
// === THE SYSTEM ===
|
|
name: 'Titanium Pro',
|
|
description: 'Luxury Industrial - Matte Black with Gold Accents',
|
|
|
|
// === COLOR RULES ===
|
|
rules: {
|
|
surfaces: {
|
|
void: 'bg-void', // Pure black background
|
|
titanium: 'bg-titanium', // Main panels (with border)
|
|
graphite: 'bg-graphite', // Inputs/secondary cards
|
|
jet: 'bg-jet', // Popups/modals
|
|
},
|
|
|
|
borders: {
|
|
standard: 'border border-edge-normal', // All containers
|
|
subtle: 'border border-edge-subtle', // Dividers
|
|
active: 'border border-edge-bright', // Hover/focus
|
|
selected: 'border border-edge-gold', // Selected state
|
|
},
|
|
|
|
text: {
|
|
primary: 'text-white', // Headlines, important data
|
|
secondary: 'text-silver', // Body text (darkest allowed)
|
|
data: 'text-gold-300', // Numbers, metrics
|
|
dimmed: 'text-white/60', // Less important
|
|
monospace: 'font-mono text-gold-300', // All data/numbers
|
|
},
|
|
|
|
shadows: {
|
|
card: 'shadow-hard', // Block shadow for depth
|
|
glow: 'shadow-glow-gold', // Glowing accent
|
|
none: '', // Flat elements
|
|
},
|
|
},
|
|
|
|
// === COMPONENT PATTERNS ===
|
|
components: {
|
|
card: 'bg-titanium border border-edge-normal shadow-hard rounded-lg',
|
|
cardHover: 'hover:border-edge-gold transition-colors',
|
|
|
|
button: {
|
|
primary: 'bg-gold-gradient text-black font-semibold border-t border-white/40 shadow-glow-gold',
|
|
secondary: 'bg-titanium border border-edge-normal hover:border-edge-bright',
|
|
ghost: 'hover:bg-graphite',
|
|
},
|
|
|
|
input: 'bg-graphite border border-edge-subtle text-white placeholder:text-silver/50',
|
|
|
|
table: {
|
|
header: 'border-b border-edge-normal bg-titanium',
|
|
row: 'border-b border-edge-subtle hover:bg-graphite/50',
|
|
cell: 'border-r border-edge-subtle/50',
|
|
},
|
|
|
|
status: {
|
|
active: 'bg-void border border-edge-gold text-gold-300',
|
|
processing: 'bg-void border border-electric-400 text-electric-400 animate-pulse',
|
|
complete: 'bg-void border border-green-500 text-green-400',
|
|
error: 'bg-void border border-red-500 text-red-400',
|
|
},
|
|
},
|
|
|
|
// === TYPOGRAPHY SYSTEM ===
|
|
typography: {
|
|
heading: 'font-sans tracking-tight text-white',
|
|
body: 'font-sans text-silver',
|
|
data: 'font-mono tracking-wider text-gold-300',
|
|
label: 'text-silver uppercase text-[10px] tracking-[0.2em]',
|
|
},
|
|
|
|
// === THE "NO-BLEND" CHECKLIST ===
|
|
checklist: [
|
|
'✅ Every container has a 1px border',
|
|
'✅ Never put dark on dark without border',
|
|
'✅ Use staircase: void → titanium → graphite → jet',
|
|
'✅ All data is monospace gold',
|
|
'✅ Text minimum is silver (#D1D5DB)',
|
|
'✅ Active states use gold borders',
|
|
'✅ Shadows are hard, not fuzzy',
|
|
],
|
|
};
|
|
|
|
// === ALTERNATIVE THEMES (Future) ===
|
|
export const alternativeThemes = {
|
|
'deep-ocean': {
|
|
name: 'Deep Ocean',
|
|
void: '#001219',
|
|
titanium: '#0A1929',
|
|
gold: '#00B4D8',
|
|
description: 'Navy blue with cyan accents',
|
|
},
|
|
|
|
'forest-command': {
|
|
name: 'Forest Command',
|
|
void: '#0D1B0C',
|
|
titanium: '#1A2E1A',
|
|
gold: '#4ADE80',
|
|
description: 'Dark green with emerald accents',
|
|
},
|
|
|
|
'crimson-steel': {
|
|
name: 'Crimson Steel',
|
|
void: '#0F0000',
|
|
titanium: '#1F0A0A',
|
|
gold: '#DC2626',
|
|
description: 'Dark red with crimson accents',
|
|
},
|
|
};
|
|
|
|
// === USAGE EXAMPLES ===
|
|
export const examples = {
|
|
dashboard: {
|
|
container: 'min-h-screen bg-void p-6',
|
|
panel: 'bg-titanium border border-edge-normal rounded-lg p-6 shadow-hard',
|
|
statCard: 'bg-titanium border border-edge-normal rounded-lg p-6 hover:border-edge-gold transition-colors',
|
|
number: 'text-4xl font-mono text-gold-300 tracking-wider',
|
|
},
|
|
|
|
factory: {
|
|
kanbanLane: 'bg-void/50 border-r border-edge-subtle',
|
|
card: 'bg-titanium border border-edge-normal rounded-lg p-4 shadow-hard hover:border-edge-gold cursor-pointer',
|
|
cardActive: 'border-edge-gold shadow-hard-gold',
|
|
},
|
|
|
|
form: {
|
|
label: 'text-silver uppercase text-[10px] tracking-[0.2em] mb-2',
|
|
input: 'bg-graphite border border-edge-subtle text-white px-4 py-2 rounded focus:border-edge-gold',
|
|
button: 'bg-gold-gradient text-black font-semibold px-6 py-3 rounded border-t border-white/40 shadow-glow-gold',
|
|
},
|
|
};
|
|
|
|
export default sparkTheme;
|