Layout Utilities: CSS Custom Properties and Bevel Classes

The Dark Retro Webpage’s visual language is defined almost entirely in assets/main.css — a single stylesheet that extends Tailwind with custom utility classes and :root design tokens. Rather than scattering magic hex values across components, every colour, every bevel border, and every special effect references one of these shared definitions. This page documents the full set of utilities and tokens so you can build new sections that feel native to the site’s aesthetic.

CSS Custom Properties

All colour tokens are declared on :root and are available anywhere in the stylesheet. Tailwind’s arbitrary-value syntax (e.g. bg-[#a855f7]) can reference these colours directly, or you can use var(--purple) in custom CSS.

:root {
  --bg-dark:    #0c0814;  /* Page background — deep space purple-black */
  --bg-panel:   #1a0f24;  /* Panel / window body background — aubergine */
  --purple:     #a855f7;  /* Primary accent — vibrant violet */
  --magenta:    #ff2bd6;  /* Secondary accent — hot pink / neon magenta */
  --cyan:       #22d3ee;  /* Tertiary accent — electric cyan */
  --mint:       #5eead4;  /* Soft teal — used for borders and highlights */
  --turquoise:  #14b8a6;  /* Deeper teal — used for subtle dividers */
  --silver:     #c0c8d8;  /* Default body text — cool silver */
  --lime:       #a3ff12;  /* Terminal green — code, CLI output */
}

Token	Value	Primary Use
`--bg-dark`	`#0c0814`	`<body>` background, dark overlays
`--bg-panel`	`#1a0f24`	Win98Window body, card interiors
`--purple`	`#a855f7`	Headings, active borders, focus rings
`--magenta`	`#ff2bd6`	Hover states, link accents, drop-shadows
`--cyan`	`#22d3ee`	Tag pills, skill badges, icon highlights
`--mint`	`#5eead4`	Soft borders, secondary highlights
`--turquoise`	`#14b8a6`	Dividers, subtle borders
`--silver`	`#c0c8d8`	Body text, labels, muted UI copy
`--lime`	`#a3ff12`	Terminal / code output text

The body background uses --bg-dark (#0c0814) via a Tailwind arbitrary value, not the custom property directly. If you change the body colour, update --bg-dark and the bg-[#0c0814] class in body { ... } together to keep them in sync.

Bevel Classes

Three bevel variants are available. They all use the same 2 px solid-border technique but invert the light/dark edge colours to create raised or sunken effects — an authentic Windows 98 UI pattern.

.bevel-window
.bevel-button
.bevel-inset

Raised bevel for window containers. Light (near-white #e2e8f0) edges on top and left simulate a light source from the upper-left corner; dark (#475569) edges on bottom and right cast a shadow. Background is var(--bg-panel).

.bevel-window {
  border-top:    2px solid #e2e8f0;
  border-left:   2px solid #e2e8f0;
  border-bottom: 2px solid #475569;
  border-right:  2px solid #475569;
  background: var(--bg-panel);
}

Usage: Applied automatically by the Win98Window component. Use directly on any div that should look like a floating panel.

<div className="bevel-window p-4">
  Panel content
</div>

Raised bevel for interactive buttons. Same light/dark border pattern as .bevel-window but with a grey (#94a3b8) background and dark text (#0f172a) suited for controls. Includes a 100 ms transition and an :active state that flips the borders to simulate a physical press.

.bevel-button {
  border-top:    2px solid #e2e8f0;
  border-left:   2px solid #e2e8f0;
  border-bottom: 2px solid #475569;
  border-right:  2px solid #475569;
  background: #94a3b8;
  color: #0f172a;
  transition: all 0.1s;
}

.bevel-button:active {
  border-top:    2px solid #475569;
  border-left:   2px solid #475569;
  border-bottom: 2px solid #e2e8f0;
  border-right:  2px solid #e2e8f0;
  background: #cbd5e1;
}

Usage: Applied to the minimize, maximize, and close buttons inside Win98Window. Use it on any <button> element.

<button className="bevel-button px-3 py-1 font-mono text-xs">
  OK
</button>

Sunken (inset) bevel for form inputs and read-only display fields. The border colours are the inverse of .bevel-window — dark edges on top and left, light on bottom and right — making the element appear recessed into the surface. Background is a near-black #0f172a.

.bevel-inset {
  border-top:    2px solid #475569;
  border-left:   2px solid #475569;
  border-bottom: 2px solid #e2e8f0;
  border-right:  2px solid #e2e8f0;
  background: #0f172a;
}

Usage: Apply to <input>, <textarea>, or any element that should look like a data entry field pressed into the UI surface.

<input
  className="bevel-inset w-full px-2 py-1 font-mono text-sm text-[#c0c8d8]"
  placeholder="type here..."
/>

All three bevel variants share the same two border colours: #e2e8f0 (light) and #475569 (dark). The visual difference — raised vs. sunken — is entirely determined by which edges receive which colour. This is the same technique Windows 98 used in every version of its UI.

CRT Overlay

The .crt-overlay class applies a full-viewport scanline effect that layers over the entire page, recreating the horizontal line pattern of a cathode-ray tube monitor.

.crt-overlay {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%,
    rgba(0, 0, 0, 0.251) 50%
  );
  background-size: 100% 4px;
}

Key attributes:

pointer-events: none — The overlay sits above all content visually but never intercepts clicks, taps, or hovers.
position: fixed at z-index: 9999 — It covers the full viewport at all scroll positions and stacks above every other element except browser UI.
background-size: 100% 4px — The 4 px repeating gradient creates scanlines at a density that reads naturally on HiDPI (Retina) screens.

Usage: Apply .crt-overlay to a single empty div placed at the end of <body>. Only one instance is needed for the entire page.

{/* In your root layout component */}
<div className="crt-overlay" aria-hidden="true" />

The CRT overlay is a purely cosmetic effect. If you are building an accessible variation of the site or targeting users who prefer reduced motion / reduced transparency, wrap the overlay div in a check against prefers-reduced-transparency or provide a toggle in user settings.

Animations

.blink

The .blink class applies an infinite CSS blink animation. It cycles opacity from 1 to 0 and back every second using a stepped 50% keyframe — identical to the classic HTML <blink> tag behaviour.

.blink {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

Usage: Apply to any element that should pulse for attention — cursor carets, status indicators, alert icons, or decorative text.

<span className="blink text-[#ff2bd6] font-display text-xs">
  ▮
</span>

Typography Classes

Three custom font classes override Tailwind’s defaults with the project’s chosen typefaces. All three fonts are loaded from Google Fonts at the top of main.css.

.font-display
.font-mono
.font-sans

Press Start 2P — the pixel/bitmap font used for headings, section labels, and any copy that should scream “retro game UI”. Each character is rendered on an 8×8 grid, so this font works best at small sizes (text-xs, text-sm) where the pixel grid is most visible.

.font-display {
  font-family: 'Press Start 2P', cursive;
}

<h1 className="font-display text-sm text-[#a855f7]">
  PORTFOLIO.EXE
</h1>

DM Mono — a clean, geometric monospace font used for UI copy inside windows, code snippets, filenames, and any text that benefits from fixed-width alignment. Loaded in weights 300, 400, and 500 with italic variants.

.font-mono {
  font-family: 'DM Mono', monospace;
}

<span className="font-mono text-[#c0c8d8] text-sm">
  last_modified: 2024-01-15
</span>

Space Grotesk — the primary body font. A variable-width grotesque sans-serif with slightly techy character. Used for body paragraphs, descriptions, and any prose that needs to be readable at normal body sizes. Available in weights 300–700.

.font-sans {
  font-family: 'Space Grotesk', sans-serif;
}

<p className="font-sans text-[#c0c8d8] leading-relaxed">
  I build interfaces that live between nostalgia and the future.
</p>

Tailwind’s built-in .font-mono and .font-sans utilities are overridden by these custom definitions in main.css. The Tailwind defaults (ui-monospace, system-ui) are replaced with DM Mono and Space Grotesk respectively. If you add a third-party component that relies on Tailwind’s default font stacks, wrap it in an explicit inline style or a scoped class to restore the expected font.

Win98Window

The primary container component — uses .bevel-window, --bg-panel, and .font-mono together.

Marquee

The scrolling ticker — pair it with .font-display and a --lime or --magenta colour for a retro feel.

Theming

How to remap :root tokens and create custom colour palettes while keeping the bevel system intact.

Overview

Pages & Features

Components

Customization

Layout Utilities: CSS Custom Properties and Bevel Classes

CSS Custom Properties

Bevel Classes

CRT Overlay

Animations

.blink

Typography Classes

Win98Window

Marquee

Theming

Build docs developers (and LLMs) love

Overview

Pages & Features

Components

Customization

Documentation Index

​CSS Custom Properties

​Bevel Classes

​CRT Overlay

​Animations

​.blink

​Typography Classes

​Related

Win98Window

Marquee

Theming

Build docs developers (and LLMs) love

CSS Custom Properties

Bevel Classes

CRT Overlay

Animations

.blink

Typography Classes

Related