refactor: replace hardcoded text styles with reusable Text components

src/app/not-found.tsx

@@ -1,4 +1,5 @@
 import { Button } from '@/components/Button'
+import { P, SectionHeader, Small } from '@/components/Texts'
 import { CirclesBackground } from '@/components/CirclesBackground'
 import { Container } from '@/components/Container'
 import { Layout } from '@/components/Layout'
@@ -8,13 +9,13 @@ export default function NotFound() {
     <Layout>
       <Container className="relative isolate flex h-full flex-col items-center justify-center py-20 text-center sm:py-32">
         <CirclesBackground className="absolute top-1/2 left-1/2 -z-10 mt-44 w-272.5 -translate-x-1/2 -translate-y-1/2 mask-[linear-gradient(to_bottom,white_20%,transparent_75%)] stroke-gray-300/30" />
-        <p className="text-sm font-semibold text-gray-900">404</p>
+        <Small as="p" color="primary">404</Small>
-        <h1 className="mt-2 text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
+        <SectionHeader as="h1" className="mt-2">
           Page not found
-        </h1>
+        </SectionHeader>
-        <p className="mt-2 text-lg text-gray-600">
+        <P color="secondary" className="mt-2">
           Sorry, we couldn’t find the page you’re looking for.
-        </p>
+        </P>
         <Button href="/" variant="outline" className="mt-8">
           Go back home
         </Button>

src/components/About.tsx

@@ -1,4 +1,5 @@
 import { AppStoreLink } from '@/components/AppStoreLink'
+import { Eyebrow, P, SectionHeader } from '@/components/Texts'
 import { Button } from '@/components/Button'
 import { CircleBackground } from '@/components/CircleBackground'
 import { Container } from '@/components/Container'
@@ -14,16 +15,20 @@ export function About() {
       </div>
       <Container className="relative">
         <div className="mx-auto max-w-3xl text-center">
-          <h2 className="text-base/7 font-semibold text-cyan-500">Our Mission</h2>
+          <Eyebrow color="accent">Our Mission</Eyebrow>
-          <p className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
+          <SectionHeader color="white" className="mt-2">
             Discover Mycelium
-          </p>
+          </SectionHeader>
-          <p className="mt-6 text-lg text-gray-300">
+          <P color="light" className="mt-6">
-            Mycelium is an unbreakable network, always finding the shortest path and providing 100% secure, peer-to-peer communication. But this is just the beginning.
+            Mycelium is an unbreakable network, always finding the shortest path and
-          </p>
+            providing 100% secure, peer-to-peer communication. But this is just
-          <p className="mt-6 text-lg text-gray-300">
+            the beginning.
-            Our mission is to create a sustainable digital ecosystem where communication is seamless, data is secure, and scalability knows no bounds.
+          </P>
-          </p>
+          <P color="light" className="mt-6">
+            Our mission is to create a sustainable digital ecosystem where
+            communication is seamless, data is secure, and scalability knows no
+            bounds.
+          </P>
           <div className="mt-8 flex justify-center">
             <Button
               href="https://threefold.info/mycelium_network/docs/"

src/components/CallToAction.tsx

@@ -1,4 +1,5 @@
 import { AppStoreLink } from '@/components/AppStoreLink'
+import { P, SectionHeader } from '@/components/Texts'
 import { WindowsLink } from '@/components/WindowsLink'
 import { AndroidLink } from './AndroidLink'
 import { LinuxLink } from '@/components/LinuxLink'
@@ -16,12 +17,13 @@ export function CallToAction() {
       </div>
       <Container className="relative">
         <div className="mx-auto max-w-2xl text-center">
-          <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
+          <SectionHeader as="h2" color="white">
             Get Started Today
-          </h2>
+          </SectionHeader>
-          <p className="mt-6 text-lg text-gray-300">
+          <P color="lightSecondary" className="mt-6">
-            Download the Mycelium app and step into the future of secure, peer-to-peer networking; fast, private, and decentralized.
+            Download the Mycelium app and step into the future of secure,
-          </p>
+            peer-to-peer networking; fast, private, and decentralized.
+          </P>
           <div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
             <AppStoreLink color="white" />
             <WindowsLink color="white" />

src/components/DevHub.tsx

@@ -1,3 +1,10 @@
+import {
+  Eyebrow,
+  FeatureDescription,
+  P,
+  SectionHeader,
+  SecondaryFeatureTitle,
+} from './Texts'
 import {
   BookOpenIcon,
   LifebuoyIcon,
@@ -38,13 +45,15 @@ export function DevHub() {
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 sm:gap-y-20 lg:mx-0 lg:max-w-none lg:grid-cols-5">
           <div className="col-span-2">
-            <h2 className="text-base/7 font-semibold text-cyan-500 mb-2">Get Started</h2>
+            <Eyebrow color="accent" className="mb-2">Get Started</Eyebrow>
-            <p className="text-3xl lg:text-4xl font-medium tracking-tight text-white">
+            <SectionHeader as="h2" color="white">
               Developer Hub
-            </p>
+            </SectionHeader>
-            <p className="mt-6 text-lg text-gray-300">
+            <P color="lightSecondary" className="mt-6">
-              Our Developer Hub is a resource center for developers looking to build on top of Mycelium. Join our Developers community on telegram to get started.
+              Our Developer Hub is a resource center for developers looking to build
-            </p>
+              on top of Mycelium. Join our Developers community on telegram to get
+              started.
+            </P>
           </div>
           <dl className="col-span-3 grid grid-cols-1 gap-8 sm:grid-cols-2">
             {features.map((feature) => (
@@ -59,10 +68,12 @@ export function DevHub() {
                   aria-hidden="true"
                   className="h-6 w-6 flex-none text-cyan-500 mb-4"
                 />
-                <dt className="font-semibold text-white">
+                <SecondaryFeatureTitle as="dt" color="white">
                   {feature.name}
-                </dt>
+                </SecondaryFeatureTitle>
-                <dd className="mt-2 text-gray-400">{feature.description}</dd>
+                <FeatureDescription as="dd" color="secondary" className="mt-2">
+                  {feature.description}
+                </FeatureDescription>
               </a>
             ))}
           </dl>

src/components/DownloadHero.tsx

@@ -1,6 +1,12 @@
 'use client'
 
 import Image from 'next/image';
+import {
+  DownloadCardDescription,
+  DownloadCardTitle,
+  P,
+  PageHeader,
+} from './Texts'
 import { motion } from 'framer-motion';
 import appleIcon from '@/images/apple.svg';
 import windowsIcon from '@/images/windows.svg';
@@ -39,25 +45,30 @@ export default function DownloadHero() {
     <div className=" py-16 sm:py-32">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto max-w-2xl lg:mx-0">
-          <motion.h2
+          <motion.div
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.5 }}
-            className="text-5xl lg:text-6xl font-medium tracking-tight text-gray-900"
           >
-            Download Mycelium
+            <PageHeader>Download Mycelium</PageHeader>
-          </motion.h2>
+          </motion.div>
-          <motion.p
+          <motion.div
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.5, delay: 0.2 }}
-            className="mt-6 text-lg/8 text-gray-600"
           >
-            Get Mycelium for Android, Windows, macOS, and iOS to securely connect, store, and interact with the decentralized network—seamlessly and efficiently. Not sure how it works?{' '}
+            <P color="secondary" className="mt-6 text-lg/8">
-            <a href="https://threefold.info/mycelium_network/docs/" className="text-gray-900 hover:text-cyan-500 transition-colors font-semibold underline">
+              Get Mycelium for Android, Windows, macOS, and iOS to securely
+              connect, store, and interact with the decentralized
+              network—seamlessly and efficiently. Not sure how it works?{' '}
+              <a
+                href="https://threefold.info/mycelium_network/docs/"
+                className="text-gray-900 hover:text-cyan-500 transition-colors font-semibold underline"
+              >
                 Read the manual.
               </a>
-          </motion.p>
+            </P>
+          </motion.div>
         </div>
         <div className="mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none">
           <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none md:grid-cols-2 lg:grid-cols-4">
@@ -66,20 +77,27 @@ export default function DownloadHero() {
                 key={feature.name}
                 className="flex flex-col rounded-lg border border-gray-200 p-8 shadow-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20"
               >
-                <dt className="text-base/7 font-semibold text-gray-900">
+                <DownloadCardTitle color="primary">
                   <div className="mb-6 flex h-10 w-10 items-center justify-center">
                     <Image src={feature.icon} alt="" className="h-10 w-10" />
                   </div>
                   {feature.name}
-                </dt>
+                </DownloadCardTitle>
-                <dd className="mt-1 flex flex-auto flex-col text-base/7 text-gray-600">
+                <DownloadCardDescription
+                  as="dd"
+                  color="secondary"
+                  className="mt-1 flex flex-auto flex-col"
+                >
                   <p className="flex-auto">{feature.description}</p>
                   <p className="mt-6">
-                    <a href={feature.href} className="text-sm/6 font-semibold text-cyan-500 hover:text-cyan-500">
+                    <a
+                      href={feature.href}
+                      className="text-sm/6 font-semibold text-cyan-500 hover:text-cyan-500"
+                    >
                       Download Now <span aria-hidden="true">→</span>
                     </a>
                   </p>
-                </dd>
+                </DownloadCardDescription>
               </div>
             ))}
           </dl>

src/components/Faqs.tsx

@@ -1,4 +1,5 @@
 import { Container } from '@/components/Container'
+import { Answer, P, Question, SectionHeader } from './Texts'
 
 const faqs = [
   [
@@ -58,13 +59,10 @@ export function Faqs() {
     >
       <Container>
         <div className="mx-auto max-w-2xl lg:mx-0">
-          <h2
+          <SectionHeader id="faqs-title" as="h2">
-            id="faqs-title"
-            className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900"
-          >
             Frequently asked questions
-          </h2>
+          </SectionHeader>
-          <p className="mt-2 text-lg text-gray-600">
+          <P color="secondary" className="mt-2">
             If you have anything else you want to ask,{' '}
             <a
               href="https://threefoldfaq.crisp.help/en/"
@@ -73,7 +71,7 @@ export function Faqs() {
               reach out to us
             </a>
             .
-          </p>
+          </P>
         </div>
         <ul
           role="list"
@@ -84,10 +82,8 @@ export function Faqs() {
               <ul role="list" className="space-y-10">
                 {column.map((faq, faqIndex) => (
                   <li key={faqIndex}>
-                    <h3 className="text-lg/6 font-semibold text-gray-900">
+                    <Question color="primary">{faq.question}</Question>
-                      {faq.question}
+                    <Answer color="tertiary">{faq.answer}</Answer>
-                    </h3>
-                    <p className="mt-4 text-sm text-gray-700">{faq.answer}</p>
                   </li>
                 ))}
               </ul>

src/components/Features.tsx

@@ -1,3 +1,4 @@
+import { CardDescription, CardEyebrow, CardTitle, Eyebrow, P, SectionHeader } from '@/components/Texts'
 import Pathfinding from '@/components/Pathfinding'
 import MessageBus from '@/components/MessageBus'
 import ProxyDetection from '@/components/ProxyDetection'
@@ -8,30 +9,34 @@ export function Features() {
   return (
     <section id="features" className=" py-24">
       <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
-        <h2 className="text-base/7 font-semibold text-cyan-500">Core Components</h2>
+        <Eyebrow color="accent">Core Components</Eyebrow>
-        <p className="mt-2 max-w-2xl text-3xl lg:text-4xl font-medium tracking-tight  text-pretty text-gray-950">
+        <SectionHeader color="dark" className="mt-2 max-w-2xl text-pretty">
           Network Capabilities
-        </p>
+        </SectionHeader>
-        <p className="mt-4 max-w-4xl text-lg text-gray-600">
+        <P color="secondary" className="mt-4 max-w-4xl">
-            Built for resilience and autonomy, the Mycelium Network dynamically connects nodes through intelligent routing, proxy discovery, and decentralized delivery.
+          Built for resilience and autonomy, the Mycelium Network dynamically
-        </p>
+          connects nodes through intelligent routing, proxy discovery, and
-        <p className="mt-2 max-w-4xl text-lg text-gray-600">
+          decentralized delivery.
-Each component — from message passing to content distribution — works in harmony to create a fully self-healing, self-optimizing data mesh.
+        </P>
-        </p>  
+        <P color="secondary" className="mt-2 max-w-4xl">
+          Each component — from message passing to content distribution — works in
+          harmony to create a fully self-healing, self-optimizing data mesh.
+        </P>  
         <div className="mt-10 grid grid-cols-1 gap-x-4 gap-y-8 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
           <div className="group relative lg:col-span-3 transition-all duration-300 ease-in-out hover:scale-105">
             <div className="absolute inset-0 rounded-lg bg-white max-lg:rounded-t-4xl lg:rounded-tl-4xl" />
             <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)] lg:rounded-tl-[calc(2rem+1px)]">
               <Pathfinding />
               <div className="p-10 pt-4">
-                <h3 className="text-sm/4 font-semibold text-cyan-500">Routing</h3>
+                <CardEyebrow color="accent">Routing</CardEyebrow>
-                <p className="mt-2 text-lg font-medium tracking-tight text-gray-950">
+                <CardTitle color="dark" className="mt-2">
                   Automatic pathfinding
-                </p>
+                </CardTitle>
-                <p className="mt-2 max-w-lg text-sm/6 text-gray-600">
+                <CardDescription color="secondary" className="mt-2 max-w-lg">
-                  The Mycelium Network automatically discovers the shortest and fastest routes between nodes, 
+                  The Mycelium Network automatically discovers the shortest and
-                  ensuring optimal data flow and network efficiency without manual configuration.
+                  fastest routes between nodes, ensuring optimal data flow and
-                </p>
+                  network efficiency without manual configuration.
+                </CardDescription>
               </div>
             </div>
             <div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-t-4xl lg:rounded-tl-4xl group-hover:outline-cyan-500 group-hover:shadow-lg group-hover:shadow-cyan-500/20" />
@@ -41,14 +46,15 @@ Each component — from message passing to content distribution — works in har
             <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-tr-[calc(2rem+1px)]">
               <MessageBus />
               <div className="p-10 pt-4">
-                <h3 className="text-sm/4 font-semibold text-cyan-500">Communication</h3>
+                <CardEyebrow color="accent">Communication</CardEyebrow>
-                <p className="mt-2 text-lg font-medium tracking-tight text-gray-950">
+                <CardTitle color="dark" className="mt-2">
                   Distributed message bus
-                </p>
+                </CardTitle>
-                <p className="mt-2 max-w-lg text-sm/6 text-gray-600">
+                <CardDescription color="secondary" className="mt-2 max-w-lg">
-                  Acts as a global message layer that lets nodes exchange information seamlessly. 
+                  Acts as a global message layer that lets nodes exchange
-                  Enables resilient, asynchronous communication across the entire decentralized mesh.
+                  information seamlessly. Enables resilient, asynchronous
-                </p>
+                  communication across the entire decentralized mesh.
+                </CardDescription>
               </div>
             </div>
             <div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 lg:rounded-tr-4xl group-hover:outline-cyan-500 group-hover:shadow-lg group-hover:shadow-cyan-500/20" />
@@ -58,14 +64,15 @@ Each component — from message passing to content distribution — works in har
             <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-bl-[calc(2rem+1px)]">
               <ProxyDetection className="h-80" />
               <div className="p-10 pt-4">
-                <h3 className="text-sm/4 font-semibold text-cyan-500">Discovery</h3>
+                <CardEyebrow color="accent">Discovery</CardEyebrow>
-                <p className="mt-2 text-lg font-medium tracking-tight text-gray-950">
+                <CardTitle color="dark" className="mt-2">
                   Automatic proxy detection
-                </p>
+                </CardTitle>
-                <p className="mt-2 max-w-lg text-sm/6 text-gray-600">
+                <CardDescription color="secondary" className="mt-2 max-w-lg">
-                  The system continuously scans for open SOCKS5 proxies within the network, 
+                  The system continuously scans for open SOCKS5 proxies within the
-                  making it effortless to find available connection points without manual setup.
+                  network, making it effortless to find available connection points
-                </p>
+                  without manual setup.
+                </CardDescription>
               </div>
             </div>
             <div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 lg:rounded-bl-4xl group-hover:outline-cyan-500 group-hover:shadow-lg group-hover:shadow-cyan-500/20" />
@@ -75,14 +82,15 @@ Each component — from message passing to content distribution — works in har
             <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
               <ProxyForwarding className="h-80" />
               <div className="p-10 pt-4">
-                <h3 className="text-sm/4 font-semibold text-cyan-500">Connectivity</h3>
+                <CardEyebrow color="accent">Connectivity</CardEyebrow>
-                <p className="mt-2 text-lg font-medium tracking-tight text-gray-950">
+                <CardTitle color="dark" className="mt-2">
                   Seamless proxy forwarding
-                </p>
+                </CardTitle>
-                <p className="mt-2 max-w-lg text-sm/6 text-gray-600">
+                <CardDescription color="secondary" className="mt-2 max-w-lg">
-                  Local SOCKS5 connections can be forwarded through nearby nodes or remote proxies. 
+                  Local SOCKS5 connections can be forwarded through nearby nodes or
-                  When browsers use the local proxy, traffic moves securely through the mesh—like a built-in VPN.
+                  remote proxies. When browsers use the local proxy, traffic moves
-                </p>
+                  securely through the mesh—like a built-in VPN.
+                </CardDescription>
               </div>
             </div>
             <div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 group-hover:outline-cyan-500 group-hover:shadow-lg group-hover:shadow-cyan-500/20" />
@@ -92,14 +100,15 @@ Each component — from message passing to content distribution — works in har
             <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-br-[calc(2rem+1px)]">
               <ContentDistribution className="h-80" />
               <div className="p-10 pt-4">
-                <h3 className="text-sm/4 font-semibold text-cyan-500">Delivery</h3>
+                <CardEyebrow color="accent">Delivery</CardEyebrow>
-                <p className="mt-2 text-lg font-medium tracking-tight text-gray-950">
+                <CardTitle color="dark" className="mt-2">
                   Decentralized content distribution
-                </p>
+                </CardTitle>
-                <p className="mt-2 max-w-lg text-sm/6 text-gray-600">
+                <CardDescription color="secondary" className="mt-2 max-w-lg">
-                  Mycelium can serve data from distributed 0-DBs, creating a CDN-like layer that delivers 
+                  Mycelium can serve data from distributed 0-DBs, creating a
-                  content faster and more reliably—without relying on centralized servers.
+                  CDN-like layer that delivers content faster and more
-                </p>
+                  reliably—without relying on centralized servers.
+                </CardDescription>
               </div>
             </div>
             <div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-b-4xl lg:rounded-br-4xl group-hover:outline-cyan-500 group-hover:shadow-lg group-hover:shadow-cyan-500/20" />

src/components/Hero.tsx

@@ -3,6 +3,7 @@ import Image from 'next/image'
 import clsx from 'clsx'
 
 import { DownloadLink } from '@/components/DownloadLink'
+import { H1, H2, H3, H4, H5, P } from '@/components/Texts'
 import { Button } from '@/components/Button'
 import phoneFrame from '@/images/phoneframe.png'
 import { Container } from '@/components/Container'
@@ -103,18 +104,17 @@ export function Hero() {
       <Container>
         <div className="flex flex-col-reverse gap-y-16 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
           <div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
-            <h1 className="text-4xl lg:text-6xl font-medium tracking-tight text-gray-900">
+            <H1>Mycelium</H1>
-              Mycelium
+            <H5 color="secondary" className="mt-6">
-            </h1>
-              <h2 className="mt-6 lg:text-2xl text-xl tracking-tight leading-normal text-gray-600">
               Unleashing the Power of Decentralized Networks
-            </h2>
+            </H5>
-            <p className="mt-6 lg:text-xl text-lg text-gray-600 lg:leading-normal leading-tight">
+            <P color="secondary" className="mt-6">
-              Discover Mycelium, an end-to-end encrypted IPv6 overlay network. The future of secure, efficient, and scalable networking.
+              Discover Mycelium, an end-to-end encrypted IPv6 overlay network. The
-            </p>
+              future of secure, efficient, and scalable networking.
-            <p className="mt-6 text-lg text-gray-600 ">
+            </P>
+            <P color="secondary" className="mt-6">
               Coming Soon: New Decentralized Features
-            </p>
+            </P>
             <div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
               <DownloadLink />
               {/* <Button

src/components/PrimaryFeatures.tsx

@@ -13,6 +13,14 @@ import {
 import { useDebouncedCallback } from 'use-debounce'
 
 import { AppScreen } from '@/components/AppScreen'
+import {
+  Eyebrow,
+  FeatureDescription,
+  FeatureTitle,
+  MobileFeatureTitle,
+  P,
+  SectionHeader,
+} from '@/components/Texts'
 import { CircleBackground } from '@/components/CircleBackground'
 import { Container } from '@/components/Container'
 import Image from 'next/image'
@@ -271,15 +279,15 @@ function FeaturesDesktop() {
             )}
             <div className="relative z-10 p-8">
               <feature.icon className="h-8 w-8" />
-              <h3 className="mt-6 text-lg font-semibold text-white">
+              <FeatureTitle as="h3" color="white" className="mt-6">
                 <Tab className="text-left data-selected:not-data-focus:outline-hidden">
                   <span className="absolute inset-0 rounded-2xl" />
                   {feature.name}
                 </Tab>
-              </h3>
+              </FeatureTitle>
-              <p className="mt-2 text-sm text-gray-400">
+              <FeatureDescription color="secondary" className="mt-2">
                 {feature.description}
-              </p>
+              </FeatureDescription>
             </div>
           </div>
         ))}
@@ -379,12 +387,12 @@ function FeaturesMobile() {
               </PhoneFrame>
               <div className="absolute inset-x-0 bottom-0 bg-gray-800/95 p-6 backdrop-blur-sm sm:p-10">
                 <feature.icon className="h-8 w-8" />
-                <h3 className="mt-6 text-sm font-semibold text-white sm:text-lg">
+                <MobileFeatureTitle color="white" className="mt-6">
                   {feature.name}
-                </h3>
+                </MobileFeatureTitle>
-                <p className="mt-2 text-sm text-gray-400">
+                <FeatureDescription color="secondary" className="mt-2">
                   {feature.description}
-                </p>
+                </FeatureDescription>
               </div>
             </div>
           </div>
@@ -424,13 +432,15 @@ export function PrimaryFeatures() {
     >
       <Container>
         <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-3xl">
-          <h2 className="text-base/7 font-semibold text-cyan-500">How It Works</h2>
+          <Eyebrow color="accent">How It Works</Eyebrow>
-          <p className="text-3xl lg:text-4xl font-medium tracking-tight text-white">
+          <SectionHeader color="white" className="mt-2">
             How Mycelium Operates
-          </p>
+          </SectionHeader>
-          <p className="mt-6 text-lg text-gray-300">
+          <P color="light" className="mt-6">
-            Mycelium, like its natural namesake, thrives on decentralization, efficiency, and security, making it a truly powerful force in the world of decentralized networks.
+            Mycelium, like its natural namesake, thrives on decentralization,
-          </p>
+            efficiency, and security, making it a truly powerful force in the world
+            of decentralized networks.
+          </P>
         </div>
       </Container>
       <div className="mt-16 md:hidden">

src/components/SecondaryFeatures.tsx

@@ -1,4 +1,11 @@
 import { useId } from 'react'
+import {
+  Eyebrow,
+  FeatureDescription,
+  P,
+  SectionHeader,
+  SecondaryFeatureTitle,
+} from './Texts'
 
 import { Container } from '@/components/Container'
 
@@ -195,13 +202,16 @@ export function SecondaryFeatures() {
     >
       <Container>
         <div className="mx-auto max-w-4xl sm:text-center">
-          <h2 className="text-base/7 font-semibold text-cyan-500">Roadmap</h2>
+          <Eyebrow color="accent">Roadmap</Eyebrow>
-          <p className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
+          <SectionHeader as="h2" className="mt-2">
             Coming Soon: The Future of Mycelium
-          </p>
+          </SectionHeader>
-          <p className="mt-6 text-lg text-gray-600">
+          <P color="secondary" className="mt-6">
-            Mycelium is evolving to bring even more powerful decentralized features, designed to enhance your experience and expand possibilities. Be the first to explore what's coming next by staying connected with our latest updates.
+            Mycelium is evolving to bring even more powerful decentralized
-          </p>
+            features, designed to enhance your experience and expand possibilities.
+            Be the first to explore what's coming next by staying connected with
+            our latest updates.
+          </P>
         </div>
         <ul
           role="list"
@@ -213,10 +223,12 @@ export function SecondaryFeatures() {
               className="rounded-2xl border border-gray-200 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20"
             >
               <feature.icon className="h-8 w-8" />
-              <h3 className="mt-6 font-semibold text-gray-900">
+              <SecondaryFeatureTitle color="primary" className="mt-6">
                 {feature.name}
-              </h3>
+              </SecondaryFeatureTitle>
-              <p className="mt-2 text-gray-700">{feature.description}</p>
+              <FeatureDescription color="tertiary" className="mt-2">
+                {feature.description}
+              </FeatureDescription>
             </li>
           ))}
         </ul>

src/components/Texts.tsx

@@ -7,6 +7,11 @@ const colorVariants = {
   primary: 'text-gray-900',
   secondary: 'text-gray-600',
   light: 'text-gray-50',
+  accent: 'text-cyan-500',
+  white: 'text-white',
+  dark: 'text-gray-950',
+  tertiary: 'text-gray-700',
+  lightSecondary: 'text-gray-300',
 } as const
 
 type TextOwnProps = {
@@ -59,10 +64,43 @@ export const H1 = createTextComponent(
 )
 export const H2 = createTextComponent('h2', 'text-4xl lg:text-6xl font-medium')
 export const H3 = createTextComponent('h3', 'text-3xl lg:text-5xl font-medium')
-export const H4 = createTextComponent('h4', 'text-2xl lg:text-4xl font-semibold')
+export const H4 = createTextComponent('h4', 'text-2xl lg:text-4xl font-medium')
 export const P = createTextComponent(
   'p',
   'text-base lg:text-lg leading-relaxed'
 )
 export const Small = createTextComponent('small', 'text-sm font-medium')
 export const Subtle = createTextComponent('p', 'text-sm text-gray-500')
+export const H5 = createTextComponent('h5', 'text-xl lg:text-2xl font-semibold')
+export const Eyebrow = createTextComponent('h2', 'text-base/7 font-semibold')
+export const SectionHeader = createTextComponent(
+  'p',
+  'text-3xl lg:text-4xl font-medium tracking-tight'
+)
+export const CardEyebrow = createTextComponent('h3', 'text-sm/4 font-semibold')
+export const CardTitle = createTextComponent(
+  'p',
+  'text-lg font-medium tracking-tight'
+)
+export const CardDescription = createTextComponent('p', 'text-sm/6')
+export const FeatureTitle = createTextComponent('h3', 'text-lg font-semibold')
+export const FeatureDescription = createTextComponent('p', 'text-sm')
+export const MobileFeatureTitle = createTextComponent(
+  'h3',
+  'text-sm font-semibold sm:text-lg'
+)
+export const SecondaryFeatureTitle = createTextComponent(
+  'h3',
+  'font-semibold'
+)
+export const Question = createTextComponent('h3', 'text-lg/6 font-semibold')
+export const Answer = createTextComponent('p', 'mt-4 text-sm')
+export const PageHeader = createTextComponent(
+  'h2',
+  'text-5xl lg:text-6xl font-medium tracking-tight'
+)
+export const DownloadCardTitle = createTextComponent(
+  'dt',
+  'text-base/7 font-semibold'
+)
+export const DownloadCardDescription = createTextComponent('dd', 'text-base/7')