style: align site colors with design system (#197)

* style: align site colors with design system

Replace emerald accent colors with violet/neutral across the site.
Nav hover states, interactive elements, spinners, and link styles
all updated. Typography unchanged from main.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: use neutral border hover on secondary pricing buttons

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: align pricing page title typography with rest of site

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: marioDamnj

src/components/BlogCard.tsx

@@ -24,13 +24,13 @@ export function BlogCard({ post, featured = false }: BlogCardProps) {
         <div className="p-6">
           <div className="flex flex-wrap gap-2 mb-3">
             {post.tags?.map((tag) => (
-              <span key={tag} className="text-xs px-2 py-1 rounded-full bg-emerald-900/30 text-emerald-400">
+              <span key={tag} className="text-xs px-2 py-1 rounded-full bg-violet-900/30 text-violet-400">
                 {tagLabels[tag] || tag}
               </span>
             ))}
           </div>
           <h3
-            className={`font-semibold mb-2 transition-colors group-hover:text-emerald-400 text-balance ${
+            className={`font-semibold mb-2 transition-colors group-hover:text-violet-400 text-balance ${
               featured ? 'text-2xl' : 'text-xl'
             }`}
           >
@@ -61,7 +61,7 @@ export function BlogCard({ post, featured = false }: BlogCardProps) {
                 />
               ))}
             </div>
-            <span className="text-emerald-400 text-sm font-medium group-hover:translate-x-1 transition-transform">
+            <span className="text-muted-foreground text-sm font-medium group-hover:translate-x-1 transition-transform">
               Read more →
             </span>
           </div>

src/components/FeatureListItem.tsx

@@ -17,9 +17,9 @@ export const FeatureListItem: React.FC<FeatureListItemProps> = ({
 }) => (
   <div className="border-t border-neutral-700 py-6">
     <div className="flex items-start gap-4">
-      <Icon className="w-5 h-5 mt-1 text-emerald-700 shrink-0" />
+      <Icon className="w-5 h-5 mt-1 text-violet-500 shrink-0" />
       <div>
-        <h4 className="font-semibold text-white">{title}</h4>
+        <h4 className="font-semibold text-neutral-100">{title}</h4>
         <p className="text-neutral-400 text-sm mt-1">{description}</p>
       </div>
       {diagramQuery && (

src/components/IntercomButton.tsx

@@ -10,7 +10,7 @@ export const IntercomButton: React.FC = () => {
     <button
       id="intercom-launcher"
       onClick={() => boot(INTERCOM_BOOT_PROPS)}
-      className="fixed bottom-6 right-6 z-50 bg-emerald-600 hover:bg-emerald-700 text-white rounded-full p-4 shadow-lg transition-colors duration-200 flex items-center justify-center group"
+      className="fixed bottom-6 right-6 z-50 bg-violet-600 hover:bg-violet-500 text-white rounded-full p-4 shadow-lg transition-colors duration-200 flex items-center justify-center group"
       aria-label="Open chat support"
     >
       <MessageCircle size={24} className="group-hover:scale-110 transition-transform duration-200" />

src/components/SignupForm.tsx

@@ -77,10 +77,10 @@ export function SignupForm() {
             : isError
               ? 'border-red-400/60 bg-red-950/20'
               : focused
-                ? 'border-[#008CFF] bg-black/50'
+                ? 'border-violet-500 bg-black/50'
                 : 'border-white/20 bg-black/50'
         } ${shaking ? 'animate-shake' : ''}`}
-        style={focused && !isError && !isSuccess ? { boxShadow: '0px 0px 4px rgba(0, 166, 255, 0.45)' } : undefined}
+        style={focused && !isError && !isSuccess ? { boxShadow: '0px 0px 4px rgba(124, 58, 237, 0.45)' } : undefined}
       >
         <div className="relative h-4 w-4 shrink-0">
           <svg
@@ -118,11 +118,11 @@ export function SignupForm() {
           disabled={state === 'submitting'}
           className={`h-9 shrink-0 whitespace-nowrap rounded-full px-3.5 py-2 text-xs font-semibold text-white transition-all duration-500 sm:px-4 sm:text-[13px] ${isSuccess ? 'pointer-events-none opacity-0' : 'opacity-100'} ${state === 'submitting' ? 'opacity-70' : ''}`}
           style={{
-            background: `linear-gradient(177.57deg, rgba(255,255,255,0.48) 2.04%, rgba(255,255,255,0) 68.68%), ${hovered ? '#0084FF' : '#006AFF'}`,
+            background: `linear-gradient(177.57deg, rgba(255,255,255,0.48) 2.04%, rgba(255,255,255,0) 68.68%), ${hovered ? '#8b5cf6' : '#7c3aed'}`,
             backgroundBlendMode: 'overlay, normal',
             boxShadow: isSuccess
               ? 'none'
-              : '0px 2px 4px -1.5px rgba(9,9,11,0.16), 0px 0px 0px 1px rgba(32,0,60,0.6), inset 0px -2px 3px rgba(46,220,255,0.35), inset 0px 1px 0px rgba(255,255,255,0.2)',
+              : '0px 2px 4px -1.5px rgba(9,9,11,0.16), 0px 0px 0px 1px rgba(32,0,60,0.6), inset 0px -2px 3px rgba(124,58,237,0.35), inset 0px 1px 0px rgba(255,255,255,0.2)',
           }}
         >
           {state === 'submitting' ? 'Signing up...' : 'Sign up'}

src/components/sections/BlogSection.tsx

@@ -27,22 +27,22 @@ export const BlogSection: React.FC = () => {
             href="https://x.com/ZephyrCloudIO"
             target="_blank"
             rel="noopener"
-            className="text-emerald-700 hover:underline"
+            className="text-neutral-400 underline underline-offset-2 decoration-neutral-600 hover:text-neutral-200 transition-colors"
           >
             X
           </a>
           .
         </p>
         {loading ? (
           <div className="flex justify-center py-12">
-            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-emerald-400"></div>
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-violet-400"></div>
           </div>
         ) : posts.length > 0 ? (
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
             {posts.map((post) => (
               <Card key={post.slug} className="bg-neutral-900 border-neutral-400 text-neutral-300 flex flex-col">
                 <CardHeader>
-                  <CardTitle className="text-lg text-white hover:text-emerald-700 transition-colors">
+                  <CardTitle className="text-lg text-neutral-100 hover:text-violet-400 transition-colors">
                     <Link to={`/blog/${post.slug}`}>{post.title}</Link>
                   </CardTitle>
                   <CardDescription className="text-neutral-400 text-sm line-clamp-2">
@@ -58,7 +58,7 @@ export const BlogSection: React.FC = () => {
                           <AvatarFallback>{post.authors[0].displayName.substring(0, 1)}</AvatarFallback>
                         </Avatar>
                         <div>
-                          <span className="text-white block">{post.authors[0].displayName}</span>
+                          <span className="text-neutral-200 block">{post.authors[0].displayName}</span>
                           <span className="text-neutral-500">
                             {post.date.toLocaleDateString('en-US', {
                               month: 'short',

src/components/sections/CloudProvidersSection.tsx

@@ -56,9 +56,9 @@ const statusConfig = {
   available: {
     label: 'Available',
     icon: CheckCircle2,
-    className: 'text-emerald-500',
-    bgClassName: 'bg-emerald-500/10',
-    borderClassName: 'border-emerald-500/20',
+    className: 'text-violet-500',
+    bgClassName: 'bg-violet-500/10',
+    borderClassName: 'border-violet-500/20',
   },
   eap: {
     label: 'Early Access',
@@ -82,7 +82,7 @@ export const CloudProvidersSection: React.FC = () => {
       <div className="container mx-auto px-4 sm:px-6 lg:px-8">
         <div className="text-center mb-12">
           <h2 className="text-3xl font-medium leading-tighter text-white mb-4">Deploy Anywhere</h2>
-          <p className="text-neutral-400 max-w-2xl mx-auto">
+          <p className="text-muted-foreground max-w-2xl mx-auto">
             Zephyr Cloud integrates seamlessly with leading cloud providers, enabling instant deployments and runtime
             updates across your preferred infrastructure.
           </p>
@@ -128,7 +128,7 @@ export const CloudProvidersSection: React.FC = () => {
                 </div>
 
                 {/* Hover Effect Gradient */}
-                <div className="absolute inset-0 rounded-lg bg-gradient-to-t from-emerald-500/5 to-transparent opacity-0 transition-opacity group-hover:opacity-100 pointer-events-none" />
+                <div className="absolute inset-0 rounded-lg bg-gradient-to-t from-violet-500/5 to-transparent opacity-0 transition-opacity group-hover:opacity-100 pointer-events-none" />
 
                 {/* Docs Link Indicator */}
                 {provider.docsLink && (
@@ -141,7 +141,7 @@ export const CloudProvidersSection: React.FC = () => {
 
             const cardClasses = cn(
               'relative group rounded-lg p-6 border transition-all duration-300',
-              'hover:border-neutral-700 hover:shadow-lg hover:shadow-emerald-500/5',
+              'hover:border-neutral-700 hover:shadow-lg hover:shadow-violet-500/5',
               provider.status === 'coming-soon' ? 'border-neutral-800/50' : 'border-neutral-800',
               provider.docsLink && 'cursor-pointer',
             );
@@ -167,7 +167,7 @@ export const CloudProvidersSection: React.FC = () => {
             Need support for a different cloud provider?{' '}
             <a
               href="mailto:inbound@zephyr-cloud.io"
-              className="text-emerald-400 hover:text-emerald-300 transition-colors"
+              className="text-neutral-400 underline underline-offset-2 decoration-neutral-600 hover:text-neutral-200 transition-colors"
             >
               Let us know
             </a>

src/components/sections/DeploymentSection.tsx

@@ -68,7 +68,7 @@ export const DeploymentSection: React.FC = () => {
               href="https://docs.zephyr-cloud.io/recipes"
               target="_blank"
               rel="noopener noreferrer"
-              className="text-neutral-400 hover:text-emerald-700 transition-colors text-sm font-semibold"
+              className="text-neutral-400 hover:text-violet-500 transition-colors text-sm font-semibold"
             >
               See all examples
             </a>

src/components/sections/FeatureSection.tsx

@@ -46,7 +46,7 @@ interface FeatureDescriptionProps {
 }
 
 export const FeatureDescription: React.FC<FeatureDescriptionProps> = ({ children, className }) => {
-  return <p className={cn('mt-4 text-lg text-neutral-400 max-w-2xl mx-auto', className)}>{children}</p>;
+  return <p className={cn('mt-4 text-lg text-muted-foreground max-w-2xl mx-auto', className)}>{children}</p>;
 };
 
 interface FeatureContentProps {

src/components/sections/HeroSection.tsx

@@ -64,17 +64,17 @@ export const HeroSection: React.FC = () => {
               href={featuredEvent.link}
               target="_blank"
               rel="noopener"
-              className="group inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r from-emerald-900/20 to-emerald-800/20 border border-emerald-700/30 hover:border-emerald-600/50 transition-all duration-300 hover:shadow-lg hover:shadow-emerald-500/10"
+              className="group inline-flex items-center gap-2 px-4 py-2 rounded-full bg-gradient-to-r from-violet-900/20 to-violet-800/20 border border-violet-700/30 hover:border-violet-600/50 transition-all duration-300 hover:shadow-lg hover:shadow-violet-500/10"
             >
-              <CalendarDays size={16} className="text-emerald-400" />
+              <CalendarDays size={16} className="text-violet-400" />
               <span className="text-sm text-neutral-300">
-                <span className="font-medium text-emerald-400">{featuredEvent.title}</span>
+                <span className="font-medium text-violet-400">{featuredEvent.title}</span>
                 <span className="mx-2 text-neutral-500">•</span>
                 <span>{featuredEvent.date}</span>
                 <span className="mx-2 text-neutral-500">•</span>
                 <span>{featuredEvent.location}</span>
               </span>
-              <ArrowRight size={14} className="text-emerald-400 transition-transform group-hover:translate-x-0.5" />
+              <ArrowRight size={14} className="text-violet-400 transition-transform group-hover:translate-x-0.5" />
             </a>
           </div>
         )}
@@ -84,9 +84,13 @@ export const HeroSection: React.FC = () => {
           <br />
           <span>Idea to Production</span>
         </h1>
-        <p className="mt-6 text-lg md:text-xl max-w-2xl mx-auto">
+        <p className="mt-6 text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto">
           From the team that brought you{' '}
-          <a href="https://module-federation.io/" target="_blank" className="text-emerald-700 hover:underline">
+          <a
+            href="https://module-federation.io/"
+            target="_blank"
+            className="text-neutral-400 underline underline-offset-2 decoration-neutral-600 hover:text-neutral-200 transition-colors"
+          >
             Module Federation
           </a>
           ;
@@ -95,11 +99,14 @@ export const HeroSection: React.FC = () => {
         </p>
 
         <div className="mt-10 relative max-w-xl mx-auto">
-          <div className="relative group cursor-pointer" onClick={handleCopy}>
-            <CodeBlock className="text-left !bg-neutral-900/70 !border-neutral-700/70 backdrop-blur-sm transition-all group-hover:!bg-neutral-900/80">
-              <span className="text-emerald-700">$</span> npx create-zephyr-apps@latest
+          <div
+            className="relative group cursor-pointer transition-all duration-300 hover:shadow-lg hover:shadow-violet-500/15 rounded-md"
+            onClick={handleCopy}
+          >
+            <CodeBlock className="text-left !bg-neutral-900/70 !border-neutral-700/70 backdrop-blur-sm transition-all group-hover:!bg-neutral-900/80 group-hover:!border-violet-600">
+              <span className="text-violet-500">$</span> npx create-zephyr-apps@latest
               <br />
-              <span className="text-neutral-500 text-xs flex items-center gap-1 mt-1">
+              <span className="text-neutral-500 group-hover:text-white text-xs font-mono uppercase tracking-wider flex items-center gap-1 mt-1 transition-colors duration-200">
                 {copied ? (
                   <>
                     <Check className="w-3 h-3" />

src/components/sections/TestimonialsSection.tsx

@@ -38,7 +38,7 @@ export const TestimonialsSection: React.FC = () => {
               <AvatarFallback>{testimonial.name.substring(0, 2).toUpperCase()}</AvatarFallback>
             </Avatar>
             <div>
-              <div className="font-semibold text-white text-sm">{testimonial.name}</div>
+              <div className="font-semibold text-foreground text-sm">{testimonial.name}</div>
               <div className="text-xs text-neutral-400">
                 {testimonial.role}, {testimonial.company}
               </div>
@@ -67,12 +67,9 @@ export const TestimonialsSection: React.FC = () => {
 
   return (
     <>
-      <section
-        className="justShip relative py-16 overflow-hidden"
-        style={{ background: 'radial-gradient(ellipse 80% 60% at 50% 50%, #0d2d1f 0%, #0a0a0a 70%)' }}
-      >
+      <section className="justShip relative py-16 overflow-hidden bg-neutral-950/50">
         <div className="container mx-auto px-4 sm:px-6 lg:px-8 mb-12">
-          <h2 className="text-center text-2xl font-medium leading-tighter text-white">You can just ship</h2>
+          <p className="text-center text-xs font-mono text-neutral-500 tracking-widest uppercase">You can just ship</p>
         </div>
 
         {/* Scrolling testimonials container */}
@@ -108,7 +105,7 @@ export const TestimonialsSection: React.FC = () => {
                               <AvatarFallback>{testimonial.name.substring(0, 2).toUpperCase()}</AvatarFallback>
                             </Avatar>
                             <div>
-                              <div className="font-semibold text-white text-sm">{testimonial.name}</div>
+                              <div className="font-semibold text-foreground text-sm">{testimonial.name}</div>
                               <div className="text-xs text-neutral-400">
                                 {testimonial.role}, {testimonial.company}
                               </div>
@@ -150,7 +147,7 @@ export const TestimonialsSection: React.FC = () => {
                               <AvatarFallback>{testimonial.name.substring(0, 2).toUpperCase()}</AvatarFallback>
                             </Avatar>
                             <div>
-                              <div className="font-semibold text-white text-sm">{testimonial.name}</div>
+                              <div className="font-semibold text-foreground text-sm">{testimonial.name}</div>
                               <div className="text-xs text-neutral-400">
                                 {testimonial.role}, {testimonial.company}
                               </div>