/** * BOND OS Unified Design System - Design Tokens * Centralized CSS Custom Properties (variables) * * Shared across all BOND OS properties: * - docs.bond-os.ai (documentation portal) * - bond-general.web.app/join-os/ (lead gen site) * * Last Updated: 2025-11-12 * * Usage: * - Import this file in your HTML * - Reference variables using var(--token-name) * - Example: color: var(--color-bond-red); * * Updating the design system: * - Change values in this file only * - All properties using these tokens will update automatically */ :root { /* ===== COLOR PALETTE ===== */ /* Backgrounds */ --color-deep-dark: #2F2E2E; --color-darker-surface: #3a3939; --color-darkest-depth: #1a1a1a; --color-pure-black: #000000; /* Special: for video backgrounds only */ /* Text */ --color-text-primary: #EAEDEE; --color-text-secondary: #999999; --color-text-tertiary: #666666; /* Accents */ --color-bond-red: #FF4B4F; --color-bond-red-dark: #e63e42; /* UI States */ --color-success: #4a9e7c; --color-success-dark: #3a8e6c; --color-warning: #ff9800; --color-error: #ff6b6f; --color-info: #3b82f6; --color-info-dark: #2563eb; /* Borders */ --color-border: #4a4949; /* Semantic Colors (for clarity) */ --color-background-primary: var(--color-deep-dark); --color-background-secondary: var(--color-darker-surface); --color-background-tertiary: var(--color-darkest-depth); --color-accent-primary: var(--color-bond-red); --color-accent-hover: var(--color-bond-red-dark); /* ===== TYPOGRAPHY ===== */ /* Font Families */ --font-headline: 'Scto Grotesk A Bond', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: 'Monaco', 'Courier New', monospace; /* Font Sizes */ --font-size-xs: 0.75rem; /* 12px */ --font-size-sm: 0.875rem; /* 14px */ --font-size-base: 1rem; /* 16px */ --font-size-lg: 1.125rem; /* 18px */ --font-size-xl: 1.25rem; /* 20px */ --font-size-2xl: 1.5rem; /* 24px */ --font-size-3xl: 1.875rem; /* 30px */ --font-size-4xl: 2.25rem; /* 36px */ --font-size-5xl: 3rem; /* 48px */ --font-size-6xl: 3.75rem; /* 60px */ /* Font Weights */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Line Heights */ --line-height-tight: 1.25; --line-height-normal: 1.5; --line-height-relaxed: 1.625; --line-height-loose: 2; /* ===== SPACING ===== */ --spacing-1: 0.25rem; /* 4px */ --spacing-2: 0.5rem; /* 8px */ --spacing-3: 0.75rem; /* 12px */ --spacing-4: 1rem; /* 16px */ --spacing-5: 1.25rem; /* 20px */ --spacing-6: 1.5rem; /* 24px */ --spacing-8: 2rem; /* 32px */ --spacing-10: 2.5rem; /* 40px */ --spacing-12: 3rem; /* 48px */ --spacing-16: 4rem; /* 64px */ --spacing-20: 5rem; /* 80px */ /* ===== BORDER RADIUS ===== */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* ===== SHADOWS ===== */ --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.2); --shadow-standard: 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-elevated: 0 8px 16px rgba(0, 0, 0, 0.4); --shadow-deep: 0 12px 24px rgba(0, 0, 0, 0.5); --shadow-floating: 0 20px 40px rgba(0, 0, 0, 0.6); /* ===== GRADIENTS ===== */ --gradient-bond-red: linear-gradient(135deg, #FF4B4F 0%, #e63e42 100%); --gradient-background: linear-gradient(135deg, #2F2E2E 0%, #1a1919 100%); --gradient-card: linear-gradient(135deg, #3a3939 0%, #2F2E2E 100%); /* ===== TRANSITIONS ===== */ --transition-fast: 150ms; --transition-normal: 300ms; --transition-slow: 500ms; --transition-ease: cubic-bezier(0.4, 0, 0.2, 1); --transition-ease-in: cubic-bezier(0.4, 0, 1, 1); --transition-ease-out: cubic-bezier(0, 0, 0.2, 1); --transition-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* ===== Z-INDEX LAYERS ===== */ --z-base: 0; --z-dropdown: 10; --z-sticky: 20; --z-fixed: 30; --z-modal-backdrop: 40; --z-modal: 50; --z-popover: 60; --z-tooltip: 70; /* ===== OPACITY VALUES ===== */ --opacity-disabled: 0.5; --opacity-hover: 0.8; --opacity-muted: 0.6; /* ===== COMMON PATTERNS ===== */ /* Card Styles */ --card-bg: var(--color-darker-surface); --card-border: 1px solid var(--color-border); --card-border-accent: 4px solid var(--color-bond-red); --card-padding: var(--spacing-6); --card-radius: var(--radius-md); --card-shadow: var(--shadow-standard); /* Button Styles */ --button-padding-y: var(--spacing-3); --button-padding-x: var(--spacing-4); --button-radius: var(--radius-md); --button-transition: all var(--transition-normal) var(--transition-ease); /* Input Styles */ --input-bg: var(--color-darker-surface); --input-border: 2px solid var(--color-border); --input-border-focus: 2px solid var(--color-bond-red); --input-padding: var(--spacing-3); --input-radius: var(--radius-md); /* Header Styles */ --header-bg: var(--color-darker-surface); --header-border: 1px solid var(--color-border); --header-height: 4rem; } /* ===== UTILITY CLASSES ===== */ /* These classes use the tokens above for common patterns */ .bond-card { background-color: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); padding: var(--card-padding); box-shadow: var(--card-shadow); } .bond-card-accent { border-left: var(--card-border-accent); } .bond-button-primary { background: var(--gradient-bond-red); color: var(--color-text-primary); padding: var(--button-padding-y) var(--button-padding-x); border-radius: var(--button-radius); border: none; font-weight: var(--font-weight-semibold); transition: var(--button-transition); cursor: pointer; } .bond-button-primary:hover { opacity: var(--opacity-hover); transform: translateY(-2px); } .bond-button-secondary { background-color: var(--color-background-secondary); color: var(--color-text-primary); border: 1px solid var(--color-border); padding: var(--button-padding-y) var(--button-padding-x); border-radius: var(--button-radius); font-weight: var(--font-weight-medium); transition: var(--button-transition); cursor: pointer; } .bond-button-secondary:hover { background-color: var(--color-background-primary); } .bond-input { background-color: var(--input-bg); border: var(--input-border); padding: var(--input-padding); border-radius: var(--input-radius); color: var(--color-text-primary); font-family: var(--font-body); transition: border-color var(--transition-normal); } .bond-input:focus { border: var(--input-border-focus); outline: none; } .bond-headline { font-family: var(--font-headline); color: var(--color-text-primary); font-weight: var(--font-weight-bold); } .bond-text-body { font-family: var(--font-body); color: var(--color-text-primary); line-height: var(--line-height-normal); } .bond-text-muted { color: var(--color-text-secondary); } .bond-gradient-bg { background: var(--gradient-background); } .bond-gradient-red { background: var(--gradient-bond-red); }