Skip to main content

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 centralizes every brand color in a single :root block of CSS custom properties inside assets/main.css. The hand-crafted gradient and glass utility classes read these variables at runtime, so updating a token propagates to those effects across the entire theme — no component hunting required.

​
Color tokens

The full :root declaration that ships with the theme: 
:root {
  --color-bg-light:      #fafaf9;
  --color-bg-dark:       #0f172a;
  --color-teal-main:     #14b8a6;
  --color-teal-light:    #2dd4bf;
  --color-teal-dark:     #06b6d4;
  --color-rainbow-pink:  #ec4899;
  --color-rainbow-amber: #f59e0b;
  --color-rainbow-lime:  #84cc16;
  --color-rainbow-indigo:#6366f1;
  --color-rainbow-purple:#a855f7;
}
TokenDefaultPrimary use
--color-bg-light#fafaf9Page background (warm off-white)
--color-bg-dark#0f172aBody text, nav toggle button
--color-teal-main#14b8a6Primary accent, scrollbar thumb, focus rings
--color-teal-light#2dd4bfGradient end stop, nav link highlight
--color-teal-dark#06b6d4Hover state on teal elements, scrollbar thumb hover
--color-rainbow-pink#ec4899Accent gradient stop, glass-bubble tint, nav color
--color-rainbow-amber#f59e0bAccent gradient stop, nav color
--color-rainbow-lime#84cc16Navigation link color
--color-rainbow-indigo#6366f1Accent gradient stop, navigation link color
--color-rainbow-purple#a855f7Navigation link color

​
Changing the palette

Open assets/main.css and edit the hex values inside :root. For example, to shift the primary accent from teal to coral: 
:root {
  --color-teal-main:  #f97316; /* orange-500 */
  --color-teal-light: #fb923c; /* orange-400 */
  --color-teal-dark:  #ea580c; /* orange-600 */
}
The hand-crafted utility classes, gradients, and scrollbar styles that reference those variables will update automatically on the next page load. CSS custom properties are resolved at runtime by the browser, so no rebuild step is required to apply token changes.
Changing a CSS custom property token propagates to every place it is directly referenced. Swapping --color-teal-main updates the scrollbar thumb, focus rings, and the hand-crafted utility classes (.text-fluid-clip, .bg-fluid-gradient, .glass-bubble) because those classes read the variable at runtime. Note that compiled Tailwind utilities such as bg-teal-main and text-teal-main embed the color as a static RGB value and will not reflect the token change.

​
Typography

All three typefaces are loaded from Google Fonts in a single @import at the top of assets/main.css: 
@import "https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Caveat:wght@400..700&family=Inter:wght@300..700&display=swap";

​
font-display — Bricolage Grotesque

Bricolage Grotesque is loaded with a variable optical size axis (opsz 12..96) and a weight range of 200–800. It is registered as font-display in the Tailwind config and set as the default font for all heading elements (h1–h6) via a global CSS rule: 
h1, h2, h3, h4, h5, h6 {
  font-family: Bricolage Grotesque, sans-serif;
  letter-spacing: -0.025em;
}
Use the .font-display utility class anywhere you want a heading-style treatment on non-heading elements, such as a large pull-quote or section label.

​
font-handwriting — Caveat

Caveat is a casual handwriting face loaded at weights 400–700. It is registered as font-handwriting and is used for decorative accent text — short fragments, annotations, or stylistic flourishes that need a personal, hand-drawn feel. Apply it with the .font-handwriting utility.

​
font-sans — Inter

Inter is loaded at weights 300–700 and serves as the body and UI typeface (font-sans). It is set as the default font-family on html and body, so all running text, labels, form elements, and navigation links inherit it automatically without an explicit utility class.

​
Decorative utilities

assets/main.css defines four hand-crafted utility classes that power the theme’s most distinctive visual effects.

​
.text-fluid-clip

Renders text with an animated flowing gradient clipped to the letterforms. The gradient cycles through --color-teal-main → --color-rainbow-indigo → --color-rainbow-pink → --color-rainbow-amber → --color-teal-light over a 15-second ease loop with background-size: 400% 400%. 
.text-fluid-clip {
  background: linear-gradient(
    45deg,
    var(--color-teal-main),
    var(--color-rainbow-indigo),
    var(--color-rainbow-pink),
    var(--color-rainbow-amber),
    var(--color-teal-light)
  );
  background-size: 400% 400%;
  animation: fluid-gradient 15s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
Use case: Large display headings, hero names, and section titles where you want the rainbow-gradient treatment on the text itself.

​
.bg-fluid-gradient

The same animated gradient applied as a solid block background instead of a text clip. Uses a -45deg angle to contrast with .text-fluid-clip. 
.bg-fluid-gradient {
  background: linear-gradient(
    -45deg,
    var(--color-teal-main),
    var(--color-rainbow-indigo),
    var(--color-rainbow-pink),
    var(--color-rainbow-amber),
    var(--color-teal-light)
  );
  background-size: 400% 400%;
  animation: fluid-gradient 15s ease infinite;
}
Use case: Pill badges, button hover overlays, decorative banners, or any block element that should carry the animated gradient fill.

​
.glass-bubble

A frosted-glass card effect built from a radial gradient with pink and teal inset tints, combined with backdrop-filter: blur(5px). The layered box-shadow creates the illusion of light refracting through a soap bubble. 
.glass-bubble {
  background: radial-gradient(
    circle at 30% 30%,
    #fffc, #fff3 20%, #ffffff0d, #fff6
  );
  box-shadow:
    inset 0 0 20px #ffffff80,
    inset 10px 0 40px #ec489933,
    inset -10px 0 40px #14b8a633,
    0 10px 20px #0000001a;
  backdrop-filter: blur(5px);
}
Use case: Project cards, skill badges, testimonial blocks, or any surface that should appear to float above the fluid background.

​
.sticker-shadow

A two-layer drop-shadow filter that gives cutout sticker-like elements a natural depth without a hard box shadow. 
.sticker-shadow {
  filter:
    drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1))
    drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
}
Use case: PNG illustrations, SVG icons, or any irregularly-shaped element where box-shadow would not follow the shape contour.

​
Selection and scrollbar

​
Text selection

Selected text throughout the page is highlighted in teal-300 (#5eead4) with slate-900 (#0f172a) lettering, keeping the selection readable against both light and dark content: 
body *::selection {
  background-color: rgb(94 234 212); /* teal-300 */
  color: rgb(15 23 42);              /* slate-900 */
}

​
Custom scrollbar

The vertical scrollbar is styled in WebKit browsers to match the teal palette: 
::-webkit-scrollbar       { width: 10px; }
::-webkit-scrollbar-track { background: #fafaf9; }
::-webkit-scrollbar-thumb { background: #14b8a6; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #06b6d4; }
The track uses the light background color, the thumb uses --color-teal-main, and hovering shifts it to --color-teal-dark. Non-WebKit browsers fall back to their default scrollbar styling.
All three typefaces — Bricolage Grotesque, Caveat, and Inter — are loaded from Google Fonts via the @import at the top of assets/main.css. The fonts require an active internet connection during the first page load. Visitors with no network access or strict content security policies may see system font fallbacks.

Build docs developers (and LLMs) love

Get started for freeTalk to us