Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/dark-retro-webpage/llms.txt

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

Dark Retro Webpage’s visual identity is driven by a set of CSS custom properties defined in :root inside assets/main.css. These tokens feed directly into Tailwind’s arbitrary-value utilities throughout the component tree, so a single change to a variable cascades across the entire site. There is no separate design-token file — the stylesheet is the single source of truth.

​
Color Tokens

All palette values live in the :root block near the top of assets/main.css. Each variable has a specific semantic role: 
:root {
  --bg-dark:    #0c0814;  /* Primary page background */
  --bg-panel:   #1a0f24;  /* Panel, card, and window backgrounds */
  --purple:     #a855f7;  /* Primary accent — borders, glows, active states */
  --magenta:    #ff2bd6;  /* Hover states, highlights, selection background */
  --cyan:       #22d3ee;  /* Secondary accent — links, icon fills */
  --mint:       #5eead4;  /* Tertiary accent — subtle borders and tints */
  --turquoise:  #14b8a6;  /* Supporting accent — progress bars, charts */
  --silver:     #c0c8d8;  /* Default body text color */
  --lime:       #a3ff12;  /* Success states and highlighted labels */
}
TokenHexRole
--bg-dark#0c0814Page background; also the background-color of body
--bg-panel#1a0f24.bevel-window background, cards, dialog panels
--purple#a855f7Primary accent — borders, glows, dot-grid color
--magenta#ff2bd6Hover highlights, text selection background
--cyan#22d3eeLinks, icon strokes, secondary highlight
--mint#5eead4Subtle dividers and tinted borders
--turquoise#14b8a6Supporting accent in charts and progress indicators
--silver#c0c8d8Body copy, default color on body
--lime#a3ff12Success labels, highlighted status text

​
Changing the Color Palette

Override any token by editing its value in the :root block. Because the tokens are plain CSS custom properties, the change takes effect everywhere they are referenced — including any Tailwind arbitrary-value classes that embed the hex literal directly. For example, to shift the primary accent from purple to electric blue: 
/* assets/main.css — :root block */
:root {
  --purple: #3b82f6; /* changed from #a855f7 */
}
The dot-grid pattern on body, all .bevel-window glow shadows, and any component that uses var(--purple) will update automatically. Components that hard-code the hex using Tailwind arbitrary values (e.g. text-[#a855f7]) will not update — see the tip below.
Tailwind arbitrary-value classes like text-[#a855f7] and bg-[#1a0f24] embed the raw hex at build time. They do not reference the CSS variable at runtime. When you change a --variable value, search the source for the old hex string and update those Tailwind classes too. A global find-and-replace in your editor is the fastest approach.

​
Background Pattern

The full-page dot-grid is applied directly on body: 
body {
  background-color: #0c0814;                          /* --bg-dark */
  color: #c0c8d8;                                     /* --silver */
  font-family: Space Grotesk, sans-serif;
  background-image: radial-gradient(
    rgba(168, 85, 247, 0.15) 1px,                     /* dot color + opacity */
    transparent 1px
  );
  background-size: 24px 24px;                         /* dot spacing */
}
Three values control the appearance of the grid:
  • Dot color — the first argument to radial-gradient. Currently rgba(168,85,247,.15) (purple at 15% opacity). Change the RGB values or the alpha channel to shift hue or intensity.
  • Dot size — the 1px after the color. Increase to 2px for a chunkier grid or decrease to 0.5px for a subtler effect.
  • Dot spacing — background-size: 24px 24px. Larger values space dots further apart; smaller values create a denser grid.
To remove the pattern entirely, delete the background-image and background-size declarations: 
body {
  background-color: #0c0814;
  color: #c0c8d8;
  font-family: Space Grotesk, sans-serif;
  /* dot-grid removed */
}

​
Bevel Classes

The retro Windows 98 raised/sunken border effect is handled by three utility classes defined at the bottom of assets/main.css. These classes are covered in detail in the Components: Layout reference. Here is a quick reference:
ClassAppearanceTypical use
.bevel-windowRaised panel (light top/left, dark bottom/right)Win98-style window chrome, cards
.bevel-buttonRaised button that depresses on :activeToolbar buttons, clickable chips
.bevel-insetSunken inset (dark top/left, light bottom/right)Text inputs, recessed displays
All three classes use hard-coded slate-scale hex values (#e2e8f0 for highlights, #475569 for shadows) to replicate the Win98 3D border look. To retint the bevel, replace those values in assets/main.css.

​
CRT Overlay

The scanline effect is a full-viewport fixed element rendered above all page content via .crt-overlay: 
.crt-overlay {
  pointer-events: none;     /* never captures clicks */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;            /* always on top */
  background: linear-gradient(
    #12101000 50%,          /* transparent rows */
    #00000040 50%           /* dark rows at 25% opacity */
  );
  background-size: 100% 4px; /* 4px stripe height = 2px dark + 2px clear */
}
To disable the CRT overlay entirely, find the element in your React tree (typically in App.tsx or a root layout component) and remove the <div className="crt-overlay" /> element, or add display: none to the class: 
.crt-overlay {
  display: none;
}
To intensify the scanlines, increase the alpha of the dark row: 
/* heavier scanline — 50% black instead of 25% */
background: linear-gradient(#12101000 50%, #00000080 50%);
To widen the scanlines, increase background-size: 
/* 6px stripes instead of 4px */
background-size: 100% 6px;
All changes to assets/main.css are compiled by Tailwind’s CLI during the build step. In development (npm run dev), Vite’s hot-module replacement will pick up CSS changes instantly in the browser without a full page reload. For a production build, run npm run build to regenerate assets/main.css in the dist/ folder.

Build docs developers (and LLMs) love

Get started for freeTalk to us