From 43a1ca1844a713981d0bcaf187ab129bee060f0a Mon Sep 17 00:00:00 2001 From: Aaron Powell Date: Thu, 29 Jan 2026 10:45:39 +1100 Subject: [PATCH] style: update colors to GitHub Copilot brand palette Use official Copilot colors from brand.github.com: - Primary purple: #8534F3 - Purple variants: #C898FD, #B870FF, #43179E, #26115F - Orange accents: #FE4C25, #F08A3A, #C53211 - Updated gradients to use purple-to-orange blend --- website/public/styles/global.css | 77 +++++++++++++++++--------------- 1 file changed, 42 insertions(+), 35 deletions(-) diff --git a/website/public/styles/global.css b/website/public/styles/global.css index c8f809ab..c8ce484f 100644 --- a/website/public/styles/global.css +++ b/website/public/styles/global.css @@ -1,36 +1,43 @@ /* CSS Variables and Base Styles */ +/* GitHub Copilot Brand Colors: + Purple 1: #C898FD Purple 2: #B870FF Purple 3: #8534F3 (Primary) + Purple 4: #43179E Purple 5: #26115F Purple 6: #160048 + Orange 1: #F4A876 Orange 2: #F08A3A Orange 3: #FE4C25 + Orange 4: #C53211 Orange 5: #801E0F Orange 6: #500A00 +*/ :root { /* Dark theme (default) */ - --color-bg: #0a0a0f; - --color-bg-secondary: #12121a; - --color-bg-tertiary: #1a1a24; - --color-border: #2a2a3a; - --color-text: #e0e0e8; - --color-text-muted: #8888a0; + --color-bg: #0d0d12; + --color-bg-secondary: #14141c; + --color-bg-tertiary: #1c1c28; + --color-border: #2d2d3d; + --color-text: #e4e4ec; + --color-text-muted: #9090a8; --color-text-emphasis: #ffffff; - --color-link: #6c9fff; - --color-link-hover: #9cc0ff; - --color-accent: #6366f1; - --color-accent-hover: #818cf8; - --color-accent-secondary: #ec4899; - --color-danger: #f43f5e; - --color-warning: #f59e0b; + --color-link: #B870FF; + --color-link-hover: #C898FD; + --color-accent: #8534F3; + --color-accent-hover: #B870FF; + --color-accent-secondary: #FE4C25; + --color-danger: #C53211; + --color-warning: #F08A3A; --color-success: #10b981; - --color-card-bg: rgba(18, 18, 26, 0.8); - --color-card-hover: rgba(26, 26, 36, 0.9); + --color-error: #C53211; + --color-card-bg: rgba(20, 20, 28, 0.8); + --color-card-hover: rgba(28, 28, 40, 0.9); --color-glass: rgba(255, 255, 255, 0.05); --color-glass-border: rgba(255, 255, 255, 0.1); - --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%); - --gradient-accent: linear-gradient(135deg, #06b6d4 0%, #6366f1 100%); - --gradient-hero: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99, 102, 241, 0.3), transparent), - radial-gradient(ellipse 60% 40% at 80% 50%, rgba(236, 72, 153, 0.15), transparent), - radial-gradient(ellipse 60% 40% at 20% 50%, rgba(6, 182, 212, 0.15), transparent); + --gradient-primary: linear-gradient(135deg, #8534F3 0%, #B870FF 50%, #FE4C25 100%); + --gradient-accent: linear-gradient(135deg, #43179E 0%, #8534F3 100%); + --gradient-hero: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(133, 52, 243, 0.25), transparent), + radial-gradient(ellipse 60% 40% at 80% 50%, rgba(254, 76, 37, 0.12), transparent), + radial-gradient(ellipse 60% 40% at 20% 50%, rgba(184, 112, 255, 0.12), transparent); --border-radius: 8px; --border-radius-lg: 16px; --border-radius-xl: 24px; --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.2); --shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, 0.5); - --shadow-glow: 0 0 40px -10px rgba(99, 102, 241, 0.5); + --shadow-glow: 0 0 40px -10px rgba(133, 52, 243, 0.5); --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1); --container-width: 1200px; @@ -41,23 +48,23 @@ [data-theme="light"] { --color-bg: #fafafa; --color-bg-secondary: #ffffff; - --color-bg-tertiary: #f4f4f5; + --color-bg-tertiary: #f5f5f7; --color-border: #e4e4e7; --color-text: #3f3f46; --color-text-muted: #71717a; --color-text-emphasis: #18181b; - --color-link: #6366f1; - --color-link-hover: #4f46e5; + --color-link: #8534F3; + --color-link-hover: #43179E; --color-card-bg: rgba(255, 255, 255, 0.9); --color-card-hover: rgba(255, 255, 255, 1); --color-glass: rgba(255, 255, 255, 0.7); --color-glass-border: rgba(0, 0, 0, 0.08); - --gradient-hero: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99, 102, 241, 0.15), transparent), - radial-gradient(ellipse 60% 40% at 80% 50%, rgba(236, 72, 153, 0.08), transparent), - radial-gradient(ellipse 60% 40% at 20% 50%, rgba(6, 182, 212, 0.08), transparent); + --gradient-hero: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(133, 52, 243, 0.12), transparent), + radial-gradient(ellipse 60% 40% at 80% 50%, rgba(254, 76, 37, 0.06), transparent), + radial-gradient(ellipse 60% 40% at 20% 50%, rgba(184, 112, 255, 0.06), transparent); --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06); --shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, 0.15); - --shadow-glow: 0 0 40px -10px rgba(99, 102, 241, 0.3); + --shadow-glow: 0 0 40px -10px rgba(133, 52, 243, 0.3); } /* Auto theme based on system preference */ @@ -65,23 +72,23 @@ :root:not([data-theme="dark"]) { --color-bg: #fafafa; --color-bg-secondary: #ffffff; - --color-bg-tertiary: #f4f4f5; + --color-bg-tertiary: #f5f5f7; --color-border: #e4e4e7; --color-text: #3f3f46; --color-text-muted: #71717a; --color-text-emphasis: #18181b; - --color-link: #6366f1; - --color-link-hover: #4f46e5; + --color-link: #8534F3; + --color-link-hover: #43179E; --color-card-bg: rgba(255, 255, 255, 0.9); --color-card-hover: rgba(255, 255, 255, 1); --color-glass: rgba(255, 255, 255, 0.7); --color-glass-border: rgba(0, 0, 0, 0.08); - --gradient-hero: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99, 102, 241, 0.15), transparent), - radial-gradient(ellipse 60% 40% at 80% 50%, rgba(236, 72, 153, 0.08), transparent), - radial-gradient(ellipse 60% 40% at 20% 50%, rgba(6, 182, 212, 0.08), transparent); + --gradient-hero: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(133, 52, 243, 0.12), transparent), + radial-gradient(ellipse 60% 40% at 80% 50%, rgba(254, 76, 37, 0.06), transparent), + radial-gradient(ellipse 60% 40% at 20% 50%, rgba(184, 112, 255, 0.06), transparent); --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.06); --shadow-lg: 0 20px 40px -12px rgba(0, 0, 0, 0.15); - --shadow-glow: 0 0 40px -10px rgba(99, 102, 241, 0.3); + --shadow-glow: 0 0 40px -10px rgba(133, 52, 243, 0.3); } }