Converts the AsianCompute website (Next.js 14 + Tailwind CSS + Framer Motion) from dark mode to a professional light mode while keeping the brand's green/teal/blue logo palette. Use this skill for any light mode conversion, background color changes, card surface updates, text contrast fixes, or any work that involves making the AsianCompute site feel bright, clean, and modern instead of dark. Also triggers for theme switching, readability improvements, or making the site match a white/light aesthetic while preserving brand identity.
The brand colors (green/teal/blue) stay exactly as they are. What changes is the entire surface system: backgrounds go from near-black to clean white/light-gray, text inverts from light-on-dark to dark-on-light, glassmorphism shifts from dark-glass to frosted-white-glass, and all glow/tint effects are recalibrated for a light environment.
Background: Pure white #FFFFFF base with #F0FAF1 (very faint green-white) for section alternation — this subtly ties the background to the brand without looking colored.
Cards: #FFFFFF with a soft rgba(0,0,0,0.06) shadow instead of glass blur on dark. Glassmorphism becomes frosted white: bg-white/70 backdrop-blur-xl border border-black/8.
Text: #0F1A0F (near-black with a green undertone) for headings, #374151 for body, #6B7280 for muted. This keeps readability sharp while the green undertone in headings subliminally ties to brand.
Brand colors on light: Green #3DB54A, Blue #1A5BB6, Teal #00A99D all have sufficient contrast on white (WCAG AA compliant for large text, AA+ for interactive elements).
Glow effects: Recalibrated to 60% lower opacity — glows that look subtle on dark look harsh on light. A box-shadow of rgba(61,181,74,0.25) reads perfectly on white.
Grid lines: Switch from faint green lines to faint green dots — a dot grid on white looks editorial and premium, fitting for a B2B AI agency.
tailwind.config.ts — Light Mode Token RegistryReplace the entire colors block: