fix(ui): make Justine palette visible on marketing + trim rainbow chrome

- Replace blue/purple gradients with ink gradient text and cream/parch CTA surface
- Step badges and transformation icons use primary (ink) fills
- /features page icons unified to text-primary; Lora section titles
- Tree view status colors use semantic tokens instead of blue/green

Made-with: Cursor

app/(marketing)/features/page.tsx

@@ -18,7 +18,7 @@ export default function FeaturesPage() {
   return (
     <div className="container py-8 md:py-12 lg:py-24">
       <div className="mx-auto flex max-w-[980px] flex-col items-center gap-4">
-        <h1 className="text-4xl font-extrabold leading-tight tracking-tighter md:text-6xl lg:leading-[1.1]">
+        <h1 className="font-serif text-4xl font-bold leading-tight tracking-tight md:text-6xl lg:leading-[1.1]">
           Powerful Features for AI Developers
         </h1>
         <p className="max-w-[750px] text-center text-lg text-muted-foreground">
@@ -30,7 +30,7 @@ export default function FeaturesPage() {
       <div className="mx-auto grid max-w-6xl grid-cols-1 gap-6 pt-12 md:grid-cols-2 lg:grid-cols-3">
         <Card>
           <CardHeader>
-            <Code2 className="h-12 w-12 text-blue-600" />
+            <Code2 className="h-12 w-12 text-primary" />
             <CardTitle>Automatic Session Tracking</CardTitle>
             <CardDescription>
               Every coding session is automatically captured with zero configuration.
@@ -48,7 +48,7 @@ export default function FeaturesPage() {
 
         <Card>
           <CardHeader>
-            <Brain className="h-12 w-12 text-purple-600" />
+            <Brain className="h-12 w-12 text-primary" />
             <CardTitle>AI Usage Analytics</CardTitle>
             <CardDescription>
               Deep insights into how you and your team use AI tools.
@@ -66,7 +66,7 @@ export default function FeaturesPage() {
 
         <Card>
           <CardHeader>
-            <DollarSign className="h-12 w-12 text-green-600" />
+            <DollarSign className="h-12 w-12 text-primary" />
             <CardTitle>Cost Tracking</CardTitle>
             <CardDescription>
               Real-time cost monitoring for all your AI services.
@@ -84,7 +84,7 @@ export default function FeaturesPage() {
 
         <Card>
           <CardHeader>
-            <Clock className="h-12 w-12 text-orange-600" />
+            <Clock className="h-12 w-12 text-primary" />
             <CardTitle>Productivity Metrics</CardTitle>
             <CardDescription>
               Track your velocity and identify productivity patterns.
@@ -102,7 +102,7 @@ export default function FeaturesPage() {
 
         <Card>
           <CardHeader>
-            <Github className="h-12 w-12 text-gray-600" />
+            <Github className="h-12 w-12 text-primary" />
             <CardTitle>GitHub Integration</CardTitle>
             <CardDescription>
               Connect your repositories for comprehensive code analysis.
@@ -120,7 +120,7 @@ export default function FeaturesPage() {
 
         <Card>
           <CardHeader>
-            <Sparkles className="h-12 w-12 text-pink-600" />
+            <Sparkles className="h-12 w-12 text-primary" />
             <CardTitle>Smart Summaries</CardTitle>
             <CardDescription>
               AI-powered summaries of your work and progress.
@@ -138,7 +138,7 @@ export default function FeaturesPage() {
 
         <Card>
           <CardHeader>
-            <Users className="h-12 w-12 text-cyan-600" />
+            <Users className="h-12 w-12 text-primary" />
             <CardTitle>Team Collaboration</CardTitle>
             <CardDescription>
               Built for teams working with AI tools together.
@@ -156,7 +156,7 @@ export default function FeaturesPage() {
 
         <Card>
           <CardHeader>
-            <FileCode className="h-12 w-12 text-indigo-600" />
+            <FileCode className="h-12 w-12 text-primary" />
             <CardTitle>Code Quality Tracking</CardTitle>
             <CardDescription>
               Monitor code quality and AI-generated code effectiveness.
@@ -174,7 +174,7 @@ export default function FeaturesPage() {
 
         <Card>
           <CardHeader>
-            <TrendingUp className="h-12 w-12 text-emerald-600" />
+            <TrendingUp className="h-12 w-12 text-primary" />
             <CardTitle>Trend Analysis</CardTitle>
             <CardDescription>
               Understand long-term patterns in your development process.
@@ -192,7 +192,7 @@ export default function FeaturesPage() {
 
         <Card>
           <CardHeader>
-            <Shield className="h-12 w-12 text-red-600" />
+            <Shield className="h-12 w-12 text-primary" />
             <CardTitle>Privacy & Security</CardTitle>
             <CardDescription>
               Your code and data stay private and secure.
@@ -210,7 +210,7 @@ export default function FeaturesPage() {
 
         <Card>
           <CardHeader>
-            <Zap className="h-12 w-12 text-yellow-600" />
+            <Zap className="h-12 w-12 text-primary" />
             <CardTitle>Real-Time Insights</CardTitle>
             <CardDescription>
               Get instant feedback as you code.
@@ -228,7 +228,7 @@ export default function FeaturesPage() {
 
         <Card>
           <CardHeader>
-            <BarChart3 className="h-12 w-12 text-violet-600" />
+            <BarChart3 className="h-12 w-12 text-primary" />
             <CardTitle>Custom Reports</CardTitle>
             <CardDescription>
               Create custom reports tailored to your needs.

app/globals.css

@@ -8,6 +8,17 @@
 @keyframes vibn-breathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
 .vibn-enter { animation: vibn-enter 0.35s ease both; }
 
+/* Marketing — Justine ink & parchment (no blue/purple chrome) */
+.vibn-gradient-text {
+  background-image: linear-gradient(90deg, var(--vibn-mid) 0%, var(--vibn-ink) 100%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+.vibn-cta-surface {
+  background-image: linear-gradient(to bottom right, var(--vibn-cream), var(--vibn-parch));
+}
+
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);

components/ui/tree-view.tsx

@@ -40,11 +40,11 @@ function TreeNodeItem({ node, level, selectedId, onSelect }: TreeNodeItemProps)
     
     switch (node.status) {
       case "built":
-        return <CheckCircle2 className="h-3 w-3 text-green-600" />;
+        return <CheckCircle2 className="h-3 w-3 text-primary" />;
       case "in_progress":
-        return <Clock className="h-3 w-3 text-blue-600" />;
+        return <Clock className="h-3 w-3 text-muted-foreground" />;
       case "missing":
-        return <Circle className="h-3 w-3 text-gray-400" />;
+        return <Circle className="h-3 w-3 text-muted-foreground/50" />;
     }
   };
 
@@ -53,11 +53,11 @@ function TreeNodeItem({ node, level, selectedId, onSelect }: TreeNodeItemProps)
     
     switch (node.status) {
       case "built":
-        return "bg-green-50 hover:bg-green-100 border-l-2 border-l-green-500";
+        return "bg-secondary hover:bg-muted border-l-2 border-l-primary";
       case "in_progress":
-        return "bg-blue-50 hover:bg-blue-100 border-l-2 border-l-blue-500";
+        return "bg-muted/40 hover:bg-muted border-l-2 border-l-border";
       case "missing":
-        return "hover:bg-gray-100 border-l-2 border-l-transparent";
+        return "hover:bg-muted/30 border-l-2 border-l-transparent";
     }
   };
 
@@ -113,12 +113,12 @@ function TreeNodeItem({ node, level, selectedId, onSelect }: TreeNodeItemProps)
         {node.metadata && (
           <div className="flex items-center gap-1.5 opacity-0 group-hover:opacity-100 transition-opacity">
             {node.metadata.sessionsCount && node.metadata.sessionsCount > 0 && (
-              <span className="text-[10px] text-blue-600 font-medium bg-blue-100 px-1.5 py-0.5 rounded">
+              <span className="text-[10px] font-medium text-primary bg-primary/10 px-1.5 py-0.5 rounded">
                 {node.metadata.sessionsCount}s
               </span>
             )}
             {node.metadata.commitsCount && node.metadata.commitsCount > 0 && (
-              <span className="text-[10px] text-green-600 font-medium bg-green-100 px-1.5 py-0.5 rounded">
+              <span className="text-[10px] font-medium text-muted-foreground bg-muted px-1.5 py-0.5 rounded">
                 {node.metadata.commitsCount}c
               </span>
             )}

marketing/components/cta.tsx

@@ -7,8 +7,8 @@ export function CTA() {
   return (
     <section className="w-full py-16 md:py-24">
       <div className="container mx-auto px-6">
-        <div className="mx-auto flex max-w-[980px] flex-col items-center gap-6 rounded-2xl border bg-gradient-to-br from-blue-50 to-purple-50 dark:from-blue-950/20 dark:to-purple-950/20 p-12 md:p-16">
+        <div className="vibn-cta-surface mx-auto flex max-w-[980px] flex-col items-center gap-6 rounded-2xl border border-border p-12 md:p-16">
-        <h2 className="text-2xl font-bold leading-tight tracking-tight md:text-4xl lg:text-5xl text-center max-w-[800px]">
+        <h2 className="font-serif text-2xl font-semibold leading-tight tracking-tight md:text-4xl lg:text-5xl text-center max-w-[800px]">
           {homepage.finalCTA.title}
         </h2>
         <div className="flex flex-col sm:flex-row gap-4 pt-4">

marketing/components/emotional-hook.tsx

@@ -5,10 +5,10 @@ export function EmotionalHook() {
     <section className="w-full py-16 md:py-24">
       <div className="container mx-auto px-6">
         <div className="mx-auto max-w-[800px] text-center space-y-4">
-        <h2 className="text-3xl font-bold tracking-tight md:text-5xl">
+        <h2 className="font-serif text-3xl font-semibold tracking-tight md:text-5xl">
           {homepage.emotionalHook.title}
         </h2>
-        <p className="text-4xl font-bold tracking-tight md:text-6xl bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+        <p className="vibn-gradient-text font-serif text-4xl font-semibold tracking-tight md:text-6xl">
           {homepage.emotionalHook.subtitle}
         </p>
         <p className="text-lg text-muted-foreground md:text-xl pt-4 leading-relaxed">

marketing/components/features.tsx

@@ -6,7 +6,7 @@ export function Features() {
     <section id="features" className="w-full py-16 md:py-24">
       <div className="container mx-auto px-6">
         <div className="mx-auto flex max-w-[980px] flex-col items-center gap-4 mb-12">
-        <h2 className="text-3xl font-bold leading-tight tracking-tighter md:text-5xl text-center">
+        <h2 className="font-serif text-3xl font-semibold leading-tight tracking-tight md:text-5xl text-center">
           {homepage.features.title}
         </h2>
         <p className="max-w-[750px] text-center text-lg text-muted-foreground md:text-xl">

marketing/components/footer.tsx

@@ -35,7 +35,7 @@ export function Footer() {
           <div className="col-span-2 md:col-span-1">
             <Link href="/" className="flex items-center gap-2 mb-4">
               <img src="/vibn-black-circle-logo.png" alt="Vib'n" className="h-8 w-8" />
-              <span className="text-lg font-bold">Vib&apos;n</span>
+              <span className="font-serif text-lg font-bold tracking-tight">Vib&apos;n</span>
             </Link>
             <p className="text-sm text-muted-foreground leading-relaxed max-w-[220px]">
               AI-powered development platform for vibe coders. From idea to market.

marketing/components/how-it-works.tsx

@@ -6,7 +6,7 @@ export function HowItWorks() {
       <div className="container mx-auto px-6">
         <div className="mx-auto max-w-[900px] space-y-12">
         <div className="text-center space-y-4">
-          <h2 className="text-3xl font-bold tracking-tight md:text-5xl">
+          <h2 className="font-serif text-3xl font-semibold tracking-tight md:text-5xl">
             {homepage.howItWorks.title}
           </h2>
           <p className="text-lg text-muted-foreground md:text-xl">
@@ -18,7 +18,7 @@ export function HowItWorks() {
           {homepage.howItWorks.steps.map((step) => (
             <div key={step.number} className="flex gap-6">
               <div className="flex-shrink-0">
-                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br from-blue-600 to-purple-600 text-white font-bold text-xl">
+                <div className="flex h-12 w-12 items-center justify-center rounded-full bg-primary text-primary-foreground font-bold text-xl">
                   {step.number}
                 </div>
               </div>

marketing/components/pricing.tsx

@@ -10,7 +10,7 @@ export function Pricing() {
       <div className="container mx-auto px-6">
         <div className="mx-auto max-w-[980px] space-y-12">
         <div className="text-center space-y-4">
-          <h2 className="text-3xl font-bold tracking-tight md:text-5xl">
+          <h2 className="font-serif text-3xl font-semibold tracking-tight md:text-5xl">
             {homepage.pricing.title}
           </h2>
           <p className="text-lg text-muted-foreground md:text-xl">

marketing/components/transformation.tsx

@@ -7,7 +7,7 @@ export function Transformation() {
       <div className="container mx-auto px-6">
         <div className="mx-auto max-w-[900px] space-y-12">
         <div className="text-center space-y-4">
-          <h2 className="text-3xl font-bold tracking-tight md:text-5xl">
+          <h2 className="font-serif text-3xl font-semibold tracking-tight md:text-5xl">
             {homepage.transformation.title}
           </h2>
           <p className="text-lg text-muted-foreground md:text-xl pt-4 leading-relaxed">
@@ -21,8 +21,8 @@ export function Transformation() {
               key={index}
               className="flex items-start gap-4 rounded-lg border bg-background p-6 shadow-sm"
             >
-              <div className="rounded-full bg-gradient-to-br from-blue-500 to-purple-600 p-2 mt-1">
+              <div className="mt-1 rounded-full bg-primary p-2 text-primary-foreground">
-                <Sparkles className="h-5 w-5 text-white" />
+                <Sparkles className="h-5 w-5" />
               </div>
               <p className="text-lg leading-relaxed font-medium">{outcome}</p>
             </div>

marketing/components/who-its-for.tsx

@@ -7,7 +7,7 @@ export function WhoItsFor() {
       <div className="container mx-auto px-6">
         <div className="mx-auto max-w-[900px] space-y-12">
         <div className="text-center space-y-4">
-          <h2 className="text-3xl font-bold tracking-tight md:text-5xl">
+          <h2 className="font-serif text-3xl font-semibold tracking-tight md:text-5xl">
             {homepage.whoItsFor.title}
           </h2>
           <p className="text-2xl font-semibold text-muted-foreground md:text-3xl">