Digital Domain’s visual identity is built around a carefully chosen palette that blends Windows 98 system colors with late-90s web aesthetic staples — deep purples, hot pinks, electric yellows, and teal everywhere. Every color in the design system is registered as a named Tailwind token so you can reference it consistently throughout the codebase. This page is the single source of truth for those tokens: what they’re called, what hex values they map to, which Tailwind classes expose them, and where you’ll encounter each one in the UI.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/digital-domain/llms.txt
Use this file to discover all available pages before exploring further.
Color Token Reference
| Token | Hex | Tailwind Classes | Used For |
|---|---|---|---|
retro-purple | #4B0082 | text-retro-purple, bg-retro-purple | Page headings styled with font-vt323 (h1, h2) |
retro-pink | #FF1493 | text-retro-pink, bg-retro-pink, hover:bg-pink-600 | Decorations, CTA buttons, link hover states, retro-hr stroke color |
retro-teal | #008B8B | text-retro-teal, bg-retro-teal/20 | Sub-headings, checkerboard background fill (at 20% opacity) |
retro-turquoise | #00CED1 | text-retro-turquoise | Winamp player text, the body background fill color |
retro-yellow | #FFFF00 | text-retro-yellow, bg-retro-yellow, border-retro-yellow | Marquee text, tech stack badges, guestbook section header |
win-gray | #C0C0C0 | bg-win-gray, border-win-gray | All Win98-style UI panels, button faces, title bar backgrounds, scrollbar track |
titlebar | linear-gradient(90deg, navy, #1084d0) | bg-titlebar | Every window title bar — a CSS backgroundImage gradient token, not a flat color |
Skills Page Desktop Background
The Skills page usesbg-[#008080] as an inline arbitrary Tailwind value for its desktop background — a pure teal (#008080) that is distinct from the retro-teal token (#008B8B). The two values are close but not interchangeable: #008080 is the classic Windows 98 desktop color, while #008B8B (CSS darkcyan) is the named token used for text, borders, and the SVG checkerboard pattern. Only the Skills desktop uses the inline arbitrary value.
Drop Shadow Color Utilities
In addition to the named color tokens, Digital Domain uses Tailwind’s arbitrary value syntax fordrop-shadow filters on key heading elements. These are CSS filter properties (not box-shadow) and apply an offset solid shadow in a contrasting color, reinforcing the flat pixel-art aesthetic.
| Class | Effect | Used On |
|---|---|---|
drop-shadow-[2px_2px_0px_#00CED1] | Turquoise hard offset shadow | Home page h1 heading |
drop-shadow-[2px_2px_0px_#FF1493] | Hot pink hard offset shadow | Blog page h1 heading |
tailwind.config.js under theme.extend.dropShadow.
Background and Decoration Colors
The page body uses#00CED1 (retro-turquoise) as its base background-color, with a semi-transparent SVG checkerboard tile overlaid via background-image. The checkerboard squares are #008B8B (retro-teal) at 20% opacity. This means the turquoise bleeds through the checker pattern, creating a depth effect without a separate overlay element.
The retro-hr divider class uses a repeating SVG star pattern with stroke="%23FF1493" — retro-pink encoded as a URL-safe hex. The result is a horizontal rule made of repeating pink stars rather than a plain line.
Changing the Accent Color
The primary accent color throughout Digital Domain is retro-pink (#FF1493). It appears on buttons, hover states, the retro-hr divider, and the blog heading drop shadow. To shift the accent to a different color:
- Update the Tailwind token — change
'retro-pink': '#FF1493'to your new hex value in yourtailwind.config.js(see the Tailwind Config page for the full example config). - Update the
retro-hrSVG — in your source CSS, findstroke="%23FF1493"inside the.retro-hrbackground-image data URI and replace the encoded hex (%23is#). - Update the blog drop shadow — replace
drop-shadow-[2px_2px_0px_#FF1493]with your new color in the blog page component. - Rebuild — run
npm run buildto recompileassets/main.csswith the updated token values.
Because the repo ships pre-built output with no
tailwind.config.js or package.json committed, steps 1 and 4 require you to first set up a local Vite + Tailwind development environment. See the Tailwind Config page for the example config needed to scaffold that environment.