diff --git a/src/pages/mediakit/MediaColors.tsx b/src/pages/mediakit/MediaColors.tsx
index 7ba478c..49d55f4 100644
--- a/src/pages/mediakit/MediaColors.tsx
+++ b/src/pages/mediakit/MediaColors.tsx
@@ -102,7 +102,7 @@ export function MediaColors() {
             <div className="border border-gray-800 bg-[#121212] p-5 flex flex-col justify-between">
               <div>
                 <CT className="text-sm font-medium text-gray-200">Deep Gray</CT>
-                <CP className="text-xs text-gray-500 mt-1">Supporting background for overlays and dark UI elements.</CP>
+                <CP className="text-xs text-gray-200 mt-1">Supporting background for overlays and dark UI elements.</CP>
               </div>
               <div className="mt-4 h-16 w-full border border-gray-700 bg-[#121212]" />
               <p className="mt-3 text-xs text-gray-500">Hex: #121212</p>
diff --git a/src/pages/mediakit/MediaType.tsx b/src/pages/mediakit/MediaType.tsx
index 9549f62..15a6c48 100644
--- a/src/pages/mediakit/MediaType.tsx
+++ b/src/pages/mediakit/MediaType.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import {  H3, P, H4 } from '@/components/Texts'
+import { Eyebrow, H3, P, H4, CT, CP } from '@/components/Texts'
 
 export function MediaType() {
   return (
@@ -12,15 +12,108 @@ export function MediaType() {
         {/* Inner padding */}
         <div className="px-6 lg:py-12">
           <div className="max-w-7xl lg:pl-6">
-            <H3 as="h1" className="mt-4">
-              Typography
-            </H3>
+            <div className="flex items-center justify-between gap-4">
+              <H3 as="h1" className="mt-0 text-gray-900">
+                Typography
+              </H3>
+              <a
+                href="/src/assets/fonts/Mulish.zip"
+                download
+                className="inline-flex items-center gap-2 rounded-full border border-gray-200 px-3 py-1.5 text-xs font-medium text-gray-700 hover:text-cyan-600 hover:border-cyan-500 hover:bg-cyan-50 transition-colors"
+                aria-label="Download Mulish font family"
+              >
+                <span>Download Mulish</span>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                  className="h-4 w-4"
+                >
+                  <path d="M10 2a.75.75 0 0 1 .75.75v8.19l2.22-2.22a.75.75 0 1 1 1.06 1.06l-3.5 3.5a.75.75 0 0 1-1.06 0l-3.5-3.5a.75.75 0 0 1 1.06-1.06l2.22 2.22V2.75A.75.75 0 0 1 10 2Z" />
+                  <path d="M3.5 12.75a.75.75 0 0 1 .75.75v1.5h11.5v-1.5a.75.75 0 0 1 1.5 0v2.25a.75.75 0 0 1-.75.75H4.25A.75.75 0 0 1 3.5 15v-1.5a.75.75 0 0 1 .75-.75Z" />
+                </svg>
+              </a>
+            </div>
+
+            <P className="mt-4 text-gray-600 max-w-2xl">
+              Mycelium uses a consistent type scale built on Mulish and Inter. Below are the primary text
+              primitives you can reuse in design and implementation.
+            </P>
+
+            <div className="mt-8  bg-white px-6 py-8 text-black border border-gray-100">
+              {/* Eyebrow */}
+              <div className="space-y-1 border-b border-gray-100 pb-6 mb-6">
+                <div className="flex items-center justify-between gap-4">
+                  <P className="text-xs font-medium  text-black">Eyebrow</P>
+                  <P className="text-xs text-gray-400">
+                    H2 · text-base/7 · font-semibold · uppercase · tracking-[0.16em] · color: Vivid Azure
+                  </P>
+                </div>
+                <Eyebrow className="mt-2">
+                  THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG
+                </Eyebrow>
+              </div>
+
+              {/* Header (H3) */}
+              <div className="space-y-1 border-b border-gray-100 pb-6 mb-6">
+                <div className="flex items-center justify-between gap-4">
+                  <P className="text-xs font-medium  text-black">Header (H3)</P>
+                  <P className="  text-xs text-gray-400">
+                    h3 · text-3xl lg:text-5xl · font-medium · leading-tight · tracking-tight
+                  </P>
+                </div>
+                <H3 className="mt-2 text-gray-900">
+                  The quick brown fox jumps over the lazy dog
+                </H3>
+              </div>
+
+              {/* Paragraphs (P) */}
+              <div className="space-y-1 border-b border-gray-100 pb-6 mb-6">
+                <div className="flex items-center justify-between gap-4">
+                  <P className="text-xs font-medium  text-black">Paragraphs (P)</P>
+                  <P className="  text-xs text-gray-400">
+                    p · text-base lg:text-xl · leading-relaxed · regular weight
+                  </P>
+                </div>
+                <P className="mt-2 text-gray-700 max-w-3xl">
+                  The quick brown fox jumps over the lazy dog. Use this for body copy, descriptions, and
+                  longer explanatory text.
+                </P>
+              </div>
+
+              {/* Card Title (CT) */}
+              <div className="space-y-1 border-b border-gray-100 pb-6 mb-6">
+                <div className="flex items-center justify-between gap-4">
+                  <P className="text-xs font-medium  text-black">Card Title (CT)</P>
+                  <P className="  text-xs text-gray-400">
+                    span · text-base lg:text-lg · leading-normal · font-medium
+                  </P>
+                </div>
+                <CT className="mt-2 text-gray-900">
+                  The quick brown fox jumps over the lazy dog
+                </CT>
+              </div>
+
+              {/* Card Texts (CP) */}
+              <div className="space-y-1">
+                <div className="flex items-center justify-between gap-4">
+                  <P className="text-xs font-medium  text-black">Card Texts (CP)</P>
+                  <P className="  text-xs text-gray-400">
+                    p ·  text-xs lg:text-base · tracking-wide · leading-normal · font-light
+                  </P>
+                </div>
+                <CP className="mt-2 text-gray-700 max-w-3xl">
+                  The quick brown fox jumps over the lazy dog. Use CP for supporting copy inside cards,
+                  metrics, and short descriptions.
+                </CP>
+              </div>
+            </div>
           </div>
         </div>
       </div>
-      {/* ✅ Bottom horizontal line with spacing */}
-      <div className="w-full border-b  border-gray-100" />
-      <div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
+      {/* ✅ Bottom horizontal line with spacing above footer */}
+      <div className="w-full border-b border-gray-100" />
+      
     </div>
   )
 }