Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/colorful/llms.txt
Use this file to discover all available pages before exploring further.
Colorful is built on Tailwind CSS’s utility-first approach: every spacing decision, grid configuration, and breakpoint transition is expressed directly in class names on the component elements rather than in separate layout stylesheets. This makes the layout explicit and easy to trace — open any page’s source, read the Tailwind classes, and the full sizing model is visible at a glance. The theme follows a mobile-first philosophy, starting from a single-column stack and adding columns and larger spacing at wider breakpoints.
Layout changes that restructure sections — adding new grid columns, reordering content blocks, or inserting new page regions — require editing the compiled component files in components/. The Tailwind utility classes and inline styles are embedded directly in those files. Changes to CSS spacing and colors can also be made in assets/main.css without any build step.
Container widths
Page content is constrained by Tailwind’s max-w-* utilities. The theme uses four container widths depending on the density and purpose of the content:
| Utility class | Max width | Typical use |
|---|
max-w-7xl | 80rem (1280px) | Full-width section wrappers, hero areas |
max-w-5xl | 64rem (1024px) | Primary content columns, project grids |
max-w-4xl | 56rem (896px) | Case study body text, blog post containers |
max-w-3xl | 48rem (768px) | Narrow prose sections, testimonials, contact forms |
mx-auto to center them horizontally within the viewport. Horizontal padding (px-4, px-6, px-8) adds breathing room on small screens where the container fills the full width.
Responsive breakpoints
Tailwind’s default breakpoints are used throughout the theme:
| Breakpoint prefix | Minimum width | Behavior |
|---|
| (none — mobile first) | 0px | Single-column stacks, compact spacing |
md: | 768px | Two-column grids, larger type sizes, adjusted padding |
lg: | 1024px | Three-column grids, widest spacing |
<!-- Single column on mobile, 2 on tablet, 3 on desktop -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
text-4xl md:text-6xl md:text-[8vw] to grow fluidly from mobile to widescreen. Some elements use viewport-relative units (text-[12vw], w-[4vw]) for fluid scaling that is independent of fixed breakpoints.
Z-index layering
The theme uses a deliberate stacking model to layer decorative, content, and interactive elements without conflicts:
| Z-index | Element | Description |
|---|
z-[-1] | FluidBackground | Decorative animated background rendered behind all page content |
z-10 to z-20 | Page content | Section cards, grids, hero text, and other content blocks |
z-30 | CursorTrail | The animated cursor trail effect, rendered above content but below overlays |
z-40 | Navigation backdrop overlay | The semi-transparent backdrop-blur-sm overlay that appears behind the open nav menu |
z-50 | Navigation toggle button | The floating circular button that opens and closes the navigation menu, always on top |
Navigation placement
The navigation is position: fixed at bottom-8 right-8 — 2rem from the bottom and right edges of the viewport. Because it is fixed-position, it does not occupy space in the document flow and cannot push page content up or create scrollable overflow.
<div class="fixed bottom-8 right-8 z-50 flex flex-col items-end gap-3">
flex-col items-end gap-2), staying within the right side of the viewport at all screen widths. See Navigation for full customization details including changing route labels and per-link accent colors.
Page spacing
Vertical rhythm is handled with consistent padding utilities:
| Class | Value | Used for |
|---|
py-20 | 5rem top + bottom | Standard section padding |
pt-32 | 8rem top | Hero sections — creates clearance above the first heading |
md:pt-32 | 8rem top (≥768px) | Responsive hero top padding at tablet widths |
pb-40 | 10rem bottom | Final sections on a page — extra space before the fixed nav |
pb-40) prevents the fixed navigation button from overlapping the closing content on short screens or when the user has scrolled to the bottom.