ed63ef8f1c
Applied official BlackRoad Brand Design System: - Hot Pink (#FF1D6C) as primary color - Golden Ratio spacing system (φ = 1.618): 8px → 144px - SF Pro Display typography - Line height: 1.618 (Golden Ratio) - Official gradient: 135deg @ 38.2% & 61.8% - Animation easing curves (ease, ease-out, ease-spring) - Black (#000000) background, White (#FFFFFF) text - Full color palette: Amber, Orange, Magenta, Electric Blue, Violet Enhanced README.md: - 5 quantum domains documented (blackroad.io, blackroadai.com, blackroadquantum.com, lucidia.earth, earth.blackroad.io) - Comprehensive features, tech stack, deployment guide - Brand compliance section with verification - Performance targets and security details - Contributing guidelines for production repo ✅ Brand compliance verified - NO forbidden old colors ✅ Production-ready for 5 live domains 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
75 lines
2.6 KiB
CSS
75 lines
2.6 KiB
CSS
@import "tailwindcss";
|
||
|
||
/* ═══════════════════════════════════════════════════════════
|
||
🌌 BLACKROAD OS OFFICIAL BRAND DESIGN SYSTEM
|
||
═══════════════════════════════════════════════════════════
|
||
CRITICAL: This is the OFFICIAL BlackRoad brand system.
|
||
All projects MUST use these exact colors and values.
|
||
═══════════════════════════════════════════════════════════ */
|
||
|
||
:root {
|
||
/* Official Brand Colors */
|
||
--black: #000000;
|
||
--white: #FFFFFF;
|
||
--amber: #F5A623;
|
||
--orange: #F26522;
|
||
--hot-pink: #FF1D6C; /* Primary Brand Color */
|
||
--magenta: #E91E63;
|
||
--electric-blue: #2979FF;
|
||
--sky-blue: #448AFF;
|
||
--violet: #9C27B0;
|
||
--deep-purple: #5E35B1;
|
||
|
||
/* Brand Gradient (Golden Ratio positions 38.2% & 61.8%) */
|
||
--gradient-brand: linear-gradient(135deg,
|
||
var(--amber) 0%,
|
||
var(--hot-pink) 38.2%,
|
||
var(--violet) 61.8%,
|
||
var(--electric-blue) 100%);
|
||
|
||
/* Golden Ratio Spacing (φ = 1.618) */
|
||
--phi: 1.618;
|
||
--space-xs: 8px; /* Base */
|
||
--space-sm: 13px; /* 8 × φ */
|
||
--space-md: 21px; /* 13 × φ */
|
||
--space-lg: 34px; /* 21 × φ */
|
||
--space-xl: 55px; /* 34 × φ */
|
||
--space-2xl: 89px; /* 55 × φ */
|
||
--space-3xl: 144px; /* 89 × φ */
|
||
|
||
/* Animation Easing */
|
||
--ease: cubic-bezier(0.25, 0.1, 0.25, 1);
|
||
--ease-out: cubic-bezier(0, 0, 0.2, 1);
|
||
--ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||
|
||
/* Legacy support for existing code */
|
||
--background: var(--black);
|
||
--foreground: var(--white);
|
||
}
|
||
|
||
@theme inline {
|
||
--color-background: var(--black);
|
||
--color-foreground: var(--white);
|
||
--color-primary: var(--hot-pink);
|
||
--color-secondary: var(--electric-blue);
|
||
--color-accent: var(--amber);
|
||
--font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', var(--font-geist-sans);
|
||
--font-mono: 'SF Mono', Monaco, 'Cascadia Code', var(--font-geist-mono);
|
||
}
|
||
|
||
@media (prefers-color-scheme: dark) {
|
||
:root {
|
||
--background: var(--black);
|
||
--foreground: var(--white);
|
||
}
|
||
}
|
||
|
||
body {
|
||
background: var(--black);
|
||
color: var(--white);
|
||
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
|
||
line-height: 1.618; /* Golden Ratio */
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
}
|