Skip to main content

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.

Tailwind CSS is the styling backbone of Digital Domain. Rather than hand-authoring CSS, every layout decision, color, spacing value, and shadow effect is expressed through Tailwind utility classes — compiled into the single assets/main.css bundle that ships with the repo. The project extends Tailwind’s default theme with a set of retro-specific design tokens: custom color names, Win98-accurate bevel shadows, and an SVG checkerboard background. This page documents every custom token and shows you how to modify them.
The committed repository is a pre-built static site. There is no tailwind.config.js, package.json, vite.config.js, or src/ directory in the repo — these files were used during the original build but were not committed. All code blocks on this page are example configurations for users who want to fork the project and rebuild it from scratch with their own Vite + Tailwind setup.

​
Custom Color Tokens

The following colors are registered as Tailwind theme extensions and are available as text-*, bg-*, and border-* utility classes throughout the codebase.
TokenHex ValueAvailable ClassesNotes
retro-purple#4B0082text-retro-purple, bg-retro-purpleDeep indigo used for page headings
retro-pink#FF1493text-retro-pink, bg-retro-pinkHot pink for CTAs, decorations, hover states
retro-teal#008B8Btext-retro-teal, bg-retro-tealSub-headings and teal accents
retro-turquoise#00CED1text-retro-turquoiseWinamp text, body background fill color
retro-yellow#FFFF00text-retro-yellow, bg-retro-yellow, border-retro-yellowMarquee text, tech badges, guestbook header
win-gray#C0C0C0text-win-gray, bg-win-gray, border-win-grayFoundational Win98 panel and button gray
titlebarlinear-gradient(90deg, navy, #1084d0)bg-titlebarAll window title bars — a CSS gradient, not a flat color
Note that bg-[#008080] (a pure teal, slightly darker than retro-teal) is used as an inline arbitrary value for the Skills page desktop background — it is not a named token.

​
Custom Shadow Utilities

The Win98 aesthetic depends entirely on multi-layer inset box shadows that simulate the classic beveled border look. Digital Domain defines four shadow utilities for this purpose.

​
shadow-win-out — Raised Panel

Used on window frames, panels, and any element that should appear to protrude from the surface. 
box-shadow:
  inset -2px -2px #000,
  inset  2px  2px #fff,
  inset -4px -4px #808080,
  inset  4px  4px #dfdfdf;

​
shadow-win-in — Sunken / Inset Panel

Used on text inputs, content wells, and areas that should appear pressed into the surface. 
box-shadow:
  inset -2px -2px #fff,
  inset  2px  2px #000,
  inset -4px -4px #dfdfdf,
  inset  4px  4px #808080;

​
shadow-win-btn — Standard Button (Unpressed)

Applied to BeveledButton and any interactive control in its default resting state. 
box-shadow:
  inset -1px -1px #000,
  inset  1px  1px #fff,
  inset -2px -2px #808080,
  inset  2px  2px #dfdfdf;

​
shadow-win-btn-active — Active Button (Pressed)

Applied via active:shadow-win-btn-active to reverse the bevel on click, giving the physical “pushed in” illusion. 
box-shadow:
  inset -1px -1px #fff,
  inset  1px  1px #000,
  inset -2px -2px #dfdfdf,
  inset  2px  2px #808080;

​
Background Pattern

The page background is defined in main.css at the :root level and applied to body: 
:root {
  --retro-bg: url('data:image/svg+xml;utf8,<svg width="32" height="32" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h16v16H0zM16 16h16v16H16z" fill="%23008B8B" fill-opacity="0.2"/></svg>');
}

body {
  background-color: #00ced1;
  background-image: var(--retro-bg);
}
The --retro-bg variable is an inline SVG data URI that creates a 32×32 checkerboard tile. Each checker square is #008B8B (retro-teal) at 20% opacity, layered over the solid #00CED1 (retro-turquoise) base. To change the pattern color, update the fill hex value in the SVG (encoded as %23RRGGBB). To remove the pattern entirely, delete background-image: var(--retro-bg) from the body rule.

​
Example Tailwind Config

If you fork this project and set up your own Vite + Tailwind build environment, the following tailwind.config.js recreates all the custom tokens used in the original build. This file does not exist in the committed repo. 
// tailwind.config.js (example — not present in the repo)
module.exports = {
  theme: {
    extend: {
      colors: {
        'retro-purple':    '#4B0082',
        'retro-pink':      '#FF1493',
        'retro-teal':      '#008B8B',
        'retro-turquoise': '#00CED1',
        'retro-yellow':    '#FFFF00',
        'win-gray':        '#C0C0C0',
      },
      boxShadow: {
        'win-out':        'inset -2px -2px #000, inset 2px 2px #fff, inset -4px -4px #808080, inset 4px 4px #dfdfdf',
        'win-in':         'inset -2px -2px #fff, inset 2px 2px #000, inset -4px -4px #dfdfdf, inset 4px 4px #808080',
        'win-btn':        'inset -1px -1px #000, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf',
        'win-btn-active': 'inset -1px -1px #fff, inset 1px 1px #000, inset -2px -2px #dfdfdf, inset 2px 2px #808080',
      },
    },
  },
};
The titlebar gradient is not a standard Tailwind color token — it uses Tailwind’s backgroundImage extension instead: 
// tailwind.config.js — backgroundImage addition (example only)
backgroundImage: {
  'titlebar': 'linear-gradient(90deg, navy, #1084d0)',
},
The committed repo ships a pre-compiled assets/main.css and has no package.json, tailwind.config.js, or src/ directory. To rebuild with modified tokens you must first scaffold a new Vite + Tailwind project, copy the source components into it, add a tailwind.config.js like the example above, then run npm run build. The compiled output can then be committed to replace the existing assets/main.css.

Build docs developers (and LLMs) love

Get started for freeTalk to us