Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/neocities-dev/llms.txt

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

The Y2K color palette is built as a set of custom Tailwind token extensions defined in tailwind.config.js under the colors.y2k namespace. Every token is available as a bg-*, text-*, border-*, and fill-* utility with the full Tailwind modifier system — hover states, opacity suffixes, and responsive variants all work out of the box.

​
Color Token Reference

TokenHexTailwind Class PrefixesNotes
y2k-bg#0B0B14bg-y2k-bg, text-y2k-bgDeep dark navy — the global page background
y2k-panel#1A1A2Ebg-y2k-panel, border-y2k-panelPanel and card surface color
y2k-panelDark#121220bg-y2k-panelDark, border-y2k-panelDarkBorders, dividers, scrollbar track
y2k-cyan#00E5FFbg-y2k-cyan, text-y2k-cyan, border-y2k-cyan, fill-y2k-cyanPrimary neon accent
y2k-magenta#FF00E5bg-y2k-magenta, text-y2k-magenta, border-y2k-magenta, fill-y2k-magentaSecondary neon accent
y2k-lime#C6FF00bg-y2k-lime, text-y2k-lime, border-y2k-lime, fill-y2k-limeTertiary neon accent
y2k-orange#FF6B1Abg-y2k-orange, text-y2k-orange, border-y2k-orange, fill-y2k-orangeWarning / energy accent
y2k-purple#9D00FFbg-y2k-purple, text-y2k-purpleSpecial badge / hover fill
y2k-text#FFFFFFtext-y2k-textPrimary body text (pure white)
y2k-textMuted#B8B8D1text-y2k-textMutedSecondary / supporting text

​
Using Color Tokens

All three standard Tailwind prefix groups work identically with y2k-* tokens: 
<!-- Background -->
<div class="bg-y2k-panel">...</div>

<!-- Text -->
<span class="text-y2k-cyan">STATUS: ONLINE</span>

<!-- Border -->
<div class="border-2 border-y2k-magenta">...</div>

<!-- Fill (SVG) -->
<svg class="fill-y2k-lime">...</svg>
Hover and focus variants work the same way: 
<!-- Hover border color change -->
<button class="border-2 border-y2k-panelDark hover:border-y2k-cyan">
  EXECUTE
</button>

<!-- Hover background fill -->
<div class="bg-y2k-panel hover:bg-y2k-purple transition-colors">
  ...
</div>

​
Semantic Roles

Each token has a designated semantic role in the UI hierarchy:
RoleTokenHex
Page backgroundy2k-bg#0B0B14
Surface / cardy2k-panel#1A1A2E
Border / dividery2k-panelDark#121220
Primary action / linky2k-cyan#00E5FF
Alert / highlighty2k-magenta#FF00E5
Success / progress bary2k-lime#C6FF00
Warning / energyy2k-orange#FF6B1A
Special badge / hover filly2k-purple#9D00FF
Body texty2k-text#FFFFFF
Muted / secondary texty2k-textMuted#B8B8D1
y2k-cyan is the primary interactive color — it is used for focused input borders (focus:border-y2k-cyan), active button borders, hovered nav labels, and the active bevel-button border state.

​
Opacity Variants

Tailwind’s slash opacity modifier syntax works with every y2k-* token. The compiled stylesheet already includes several commonly used opacity values: 
<!-- 50% opacity panel — semi-transparent overlay card -->
<div class="bg-y2k-panel/50">...</div>

<!-- 10% opacity lime — subtle tinted background behind a progress element -->
<div class="bg-y2k-lime/10">...</div>

<!-- 10% opacity magenta — gentle highlight band -->
<div class="bg-y2k-magenta/10">...</div>

<!-- 30% opacity lime border — de-emphasized divider line -->
<div class="border border-y2k-lime/30">...</div>
You can use any arbitrary opacity value via the slash syntax — Tailwind generates the correct rgba output at build time: 
<!-- 20% opacity cyan — faint glow band -->
<div class="bg-y2k-cyan/20">...</div>
Opacity variants are JIT-generated at build time. If you add a new opacity value (e.g. bg-y2k-purple/25) make sure your Tailwind config content glob covers the file where the class is used, so the class is included in the compiled output.

Build docs developers (and LLMs) love

Get started for freeTalk to us