Add Titanium Pro Design System
✅ 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
This commit is contained in:
cawcenter
138
frontend/src/lib/theme/config.ts
Normal file
138
frontend/src/lib/theme/config.ts
Normal file
@@ -0,0 +1,138 @@
|
||||
/**
|
||||
* 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;
|
||||
Reference in New Issue
Block a user