← back to Watches
src/design-system/tokens.js
342 lines
/**
* OMEGA WATCH PRICE HISTORY - DESIGN SYSTEM
* Comprehensive design tokens for luxury brand experience
*
* Design Philosophy:
* - Luxury: Premium materials, refined aesthetics
* - Precision: Swiss watchmaking attention to detail
* - Heritage: Timeless design with modern touches
* - Excellence: World-class user experience
*/
export const designTokens = {
// COLORS - Omega Brand Palette + Luxury Extensions
colors: {
// Primary Brand Colors
primary: {
red: '#C8102E', // Omega Signature Red
redDark: '#A00D24', // Hover/Active state
redLight: '#E31837', // Accent
redGlow: 'rgba(200, 16, 46, 0.2)', // For shadows/glows
},
// Luxury Metallics
metallic: {
gold: '#FFD700', // 18K Gold
goldRose: '#B76E79', // Rose Gold
goldChampagne: '#F7E7CE', // Champagne Gold
silver: '#C0C0C0', // Stainless Steel
platinum: '#E5E4E2', // Platinum
titanium: '#878681', // Titanium
},
// Navy/Dark Tones
navy: {
deepest: '#0A0A14', // Midnight
deep: '#1A1A2E', // Omega Navy
medium: '#2D2D44', // Lighter navy
light: '#3D3D5C', // Accent navy
},
// Neutral Palette
neutral: {
white: '#FFFFFF',
gray50: '#F9FAFB',
gray100: '#F3F4F6',
gray200: '#E5E7EB',
gray300: '#D1D5DB',
gray400: '#9CA3AF',
gray500: '#6B7280',
gray600: '#4B5563',
gray700: '#374151',
gray800: '#1F2937',
gray900: '#111827',
black: '#000000',
},
// Semantic Colors
semantic: {
success: '#10B981', // Green for positive appreciation
warning: '#F59E0B', // Amber for caution
error: '#EF4444', // Red for errors
info: '#3B82F6', // Blue for information
},
// Gradient Definitions
gradients: {
omegaPrimary: 'linear-gradient(135deg, #1A1A2E 0%, #C8102E 100%)',
goldShimmer: 'linear-gradient(135deg, #FFD700 0%, #FFA500 100%)',
silverShine: 'linear-gradient(135deg, #E5E4E2 0%, #C0C0C0 100%)',
deepSpace: 'linear-gradient(180deg, #0A0A14 0%, #1A1A2E 100%)',
redGlow: 'radial-gradient(circle, rgba(200, 16, 46, 0.2) 0%, transparent 70%)',
luxury: 'linear-gradient(135deg, #1A1A2E 0%, #2D2D44 50%, #C8102E 100%)',
},
},
// TYPOGRAPHY - Premium type scale
typography: {
// Font Families
fonts: {
primary: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
display: '"Playfair Display", Georgia, serif', // For luxury headings
mono: '"SF Mono", "Monaco", "Inconsolata", "Courier New", monospace',
},
// Font Sizes (rem-based for accessibility)
fontSize: {
xs: '0.75rem', // 12px
sm: '0.875rem', // 14px
base: '1rem', // 16px
lg: '1.125rem', // 18px
xl: '1.25rem', // 20px
'2xl': '1.5rem', // 24px
'3xl': '1.875rem', // 30px
'4xl': '2.25rem', // 36px
'5xl': '3rem', // 48px
'6xl': '3.75rem', // 60px
'7xl': '4.5rem', // 72px
},
// Font Weights
fontWeight: {
light: 300,
normal: 400,
medium: 500,
semibold: 600,
bold: 700,
extrabold: 800,
},
// Line Heights
lineHeight: {
tight: 1.25,
normal: 1.5,
relaxed: 1.75,
loose: 2,
},
// Letter Spacing
letterSpacing: {
tight: '-0.025em',
normal: '0',
wide: '0.025em',
wider: '0.05em',
widest: '0.1em',
},
},
// SPACING - Consistent rhythm (8px base grid)
spacing: {
px: '1px',
0: '0',
0.5: '0.125rem', // 2px
1: '0.25rem', // 4px
1.5: '0.375rem', // 6px
2: '0.5rem', // 8px
2.5: '0.625rem', // 10px
3: '0.75rem', // 12px
3.5: '0.875rem', // 14px
4: '1rem', // 16px
5: '1.25rem', // 20px
6: '1.5rem', // 24px
7: '1.75rem', // 28px
8: '2rem', // 32px
9: '2.25rem', // 36px
10: '2.5rem', // 40px
11: '2.75rem', // 44px
12: '3rem', // 48px
14: '3.5rem', // 56px
16: '4rem', // 64px
20: '5rem', // 80px
24: '6rem', // 96px
32: '8rem', // 128px
},
// SHADOWS - Depth and elevation
shadows: {
sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
base: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
// Luxury shadows with color
redGlow: '0 0 20px rgba(200, 16, 46, 0.3), 0 0 40px rgba(200, 16, 46, 0.1)',
goldGlow: '0 0 20px rgba(255, 215, 0, 0.3), 0 0 40px rgba(255, 215, 0, 0.1)',
premium: '0 30px 60px -15px rgba(0, 0, 0, 0.3), 0 0 40px rgba(200, 16, 46, 0.05)',
},
// BORDERS & RADIUS
borders: {
width: {
0: '0',
1: '1px',
2: '2px',
4: '4px',
8: '8px',
},
radius: {
none: '0',
sm: '0.125rem', // 2px
base: '0.25rem', // 4px
md: '0.375rem', // 6px
lg: '0.5rem', // 8px
xl: '0.75rem', // 12px
'2xl': '1rem', // 16px
'3xl': '1.5rem', // 24px
full: '9999px',
},
},
// ANIMATION & TRANSITIONS
animation: {
// Duration
duration: {
instant: '0ms',
fast: '150ms',
normal: '300ms',
slow: '500ms',
slower: '700ms',
slowest: '1000ms',
},
// Easing functions
easing: {
linear: 'linear',
easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
easeOut: 'cubic-bezier(0, 0, 0.2, 1)',
easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
// Custom luxury easings
luxuryEase: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)', // Smooth, elegant
premiumBounce: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)', // Subtle bounce
watchMechanism: 'cubic-bezier(0.87, 0, 0.13, 1)', // Precision movement
},
// Keyframe definitions
keyframes: {
fadeIn: {
'0%': { opacity: 0 },
'100%': { opacity: 1 },
},
slideUp: {
'0%': { transform: 'translateY(20px)', opacity: 0 },
'100%': { transform: 'translateY(0)', opacity: 1 },
},
slideDown: {
'0%': { transform: 'translateY(-20px)', opacity: 0 },
'100%': { transform: 'translateY(0)', opacity: 1 },
},
scaleIn: {
'0%': { transform: 'scale(0.9)', opacity: 0 },
'100%': { transform: 'scale(1)', opacity: 1 },
},
shimmer: {
'0%': { backgroundPosition: '-1000px 0' },
'100%': { backgroundPosition: '1000px 0' },
},
rotate: {
'0%': { transform: 'rotate(0deg)' },
'100%': { transform: 'rotate(360deg)' },
},
pulse: {
'0%, 100%': { opacity: 1 },
'50%': { opacity: 0.5 },
},
heartbeat: {
'0%, 100%': { transform: 'scale(1)' },
'14%': { transform: 'scale(1.1)' },
'28%': { transform: 'scale(1)' },
'42%': { transform: 'scale(1.1)' },
'70%': { transform: 'scale(1)' },
},
},
},
// BREAKPOINTS - Mobile-first responsive design
breakpoints: {
xs: '375px', // Small phones
sm: '640px', // Phones
md: '768px', // Tablets
lg: '1024px', // Laptops
xl: '1280px', // Desktops
'2xl': '1536px', // Large desktops
},
// Z-INDEX - Layering system
zIndex: {
hide: -1,
base: 0,
dropdown: 1000,
sticky: 1020,
overlay: 1030,
modal: 1040,
popover: 1050,
tooltip: 1060,
notification: 1070,
max: 9999,
},
// ACCESSIBILITY
accessibility: {
// Minimum touch target size (WCAG AAA)
minTouchTarget: '44px',
// Focus ring
focusRing: {
width: '2px',
color: '#C8102E',
offset: '2px',
style: 'solid',
},
// Contrast ratios (WCAG AAA)
contrastRatio: {
normalText: '7:1', // AAA
largeText: '4.5:1', // AAA
uiComponents: '3:1', // AA
},
},
// MICRO-INTERACTIONS
microInteractions: {
// Hover effects
hover: {
lift: 'translateY(-4px)',
scale: 'scale(1.02)',
glow: '0 0 20px rgba(200, 16, 46, 0.3)',
},
// Active/Press effects
active: {
press: 'scale(0.98)',
sink: 'translateY(1px)',
},
// Loading states
loading: {
spinner: 'rotate 1s linear infinite',
pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
},
},
};
// HELPER FUNCTIONS
export const getColor = (path) => {
const keys = path.split('.');
let value = designTokens.colors;
for (const key of keys) {
value = value[key];
}
return value;
};
export const getShadow = (name) => designTokens.shadows[name];
export const getSpacing = (value) => designTokens.spacing[value];
export const getDuration = (speed) => designTokens.animation.duration[speed];
export const getEasing = (name) => designTokens.animation.easing[name];
export default designTokens;