Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/color-melt/llms.txt

Use this file to discover all available pages before exploring further.

Color Melt treats typography as a structural decision, not just a stylistic one. The pairing of a bold display typeface with a clean, legible body font gives every page two distinct visual registers: one for personality and first impressions, one for reading and understanding. Decorative elements — cursor drops, lava blobs, animated gradients — are layered on top of this typographic foundation rather than competing with it. The result is a portfolio that can afford to be vivid and unusual without ever making a visitor work to find the actual content.

​
Font Families

Color Melt uses two font families, both loaded from Google Fonts and declared at the top of assets/main.css: 
@import "https://fonts.googleapis.com/css2?family=Caprasimo&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap";
RoleFamilyClassUsage
Display / HeadingCaprasimo.font-displayPage titles, hero text, large decorative headings
Body / UIPlus Jakarta Sans.font-sansBody copy, navigation labels, form fields, labels
Caprasimo is a rounded, expressive display typeface that reinforces the liquid, handcrafted personality of the theme. It is applied via .font-display and is best suited to short, high-impact text at large sizes. Plus Jakarta Sans is a geometric sans-serif with excellent readability at small and medium sizes. It is the default font-family on html and body, meaning all text inherits it unless .font-display overrides it. To swap either family, update the @import URL and the corresponding font-family declarations in assets/main.css.

​
Visual Hierarchy

Color Melt pages follow a consistent heading structure that guides the reader’s eye from the most important information down to supporting detail:
  • <h1> — Page name or hero headline. Use .font-display and a large text scale (text-5xl to text-8xl) to make the page identity unmistakable.
  • <h2> — Section headings. These divide the page into scannable regions. Typically rendered in Ink with a medium-to-large text size.
  • <h3> and below — Sub-section labels, card titles, and grouped content headers.
  • Supporting text — Metadata, dates, tags, and labels use .text-sm or .text-xs with reduced opacity (text-ink/60) to recede visually without disappearing entirely.
Maintaining this order across every page means a visitor can skim any Color Melt page and immediately understand what it contains, regardless of how vivid the decorative layer is.

​
Spacing System

Color Melt uses a consistent Tailwind-based spacing scale throughout the stylesheet. Pages do not feel cramped because spacing decisions are intentional and repeated, not arbitrary. Key layout patterns from assets/main.css:
PatternClass(es)Effect
Maximum content widthmax-w-7xlCaps content at 80rem (1280px) on wide screens
Horizontal centeringmx-autoCenters the constrained container in the viewport
Section paddingpy-12, py-20Breathing room above and below major page sections
Horizontal gutterspx-4, px-6, px-8Side padding on containers; increases at breakpoints
Section gapsgap-8, gap-16Consistent spacing in flex/grid layouts
Vertical stacksspace-y-6Even spacing between stacked card or text elements
All page sections should sit inside a max-w-7xl mx-auto container so the layout stays consistent with the rest of the theme, even after content customization.

​
Navigation Layout

The navigation bar is a fixed strip that stays pinned to the top of every page (fixed top-0 left-0 right-0 z-40). It holds nine color-coded pill tabs — one for each page in the portfolio — and scrolls horizontally on narrow screens using overflow-x-auto with the .no-scrollbar helper to hide the scrollbar track. Each tab is assigned a background color from the dye palette, creating an instant visual map of the site: 
const navRoutes = [
  { path: "/",            label: "The Studio",       color: "bg-dye-red"    },
  { path: "/about",       label: "Who Dyed This?",   color: "bg-dye-orange" },
  { path: "/projects",    label: "Far-Out Work",      color: "bg-dye-yellow" },
  { path: "/skills",      label: "Bag of Tricks",    color: "bg-dye-green"  },
  { path: "/work",        label: "The Journey",      color: "bg-dye-blue"   },
  { path: "/case-studies",label: "Behind The Swirl", color: "bg-dye-purple" },
  { path: "/articles",    label: "Long Reads",       color: "bg-dye-pink"   },
  { path: "/testimonials",label: "Good Vibes",       color: "bg-turquoise"  },
  { path: "/contact",     label: "Holler At Me",     color: "bg-teal"       },
];
The active tab highlights in its assigned dye color to give the visitor a clear sense of location. On hover, each tab lifts slightly (hover:-translate-y-1) and gains a deeper Ink shadow, reinforcing the sticker-like, tactile quality of the navigation pills. Tab changes animate with a spring (stiffness 300, damping 30) via the Navigation component.

​
Page Transitions

The PageTransition component wraps each page’s content in an animated entry and exit sequence. When a visitor navigates between pages, the outgoing content fades or slides out while the incoming content eases in — keeping the “melting” visual language consistent between route changes rather than cutting abruptly from one page to another. Because PageTransition wraps the content layer rather than the navigation bar, the fixed nav stays visible and stable throughout every transition, so visitors never lose their sense of where they are in the site.
Edit assets/main.css for typography changes. Avoid overriding the .font-display class unless you also update any animation that depends on letter spacing.

Build docs developers (and LLMs) love

Get started for freeTalk to us