Color Palette

A retro-themed minimal CSS framework with carefully selected colors for light and dark modes.

Primary Colors

Primary
#ff69b4
Primary Light
#ff85c0
Primary Dark
#ff4a9f

Secondary Colors

Secondary
#b19cd9
Secondary Light
#c4b5fd
Secondary Dark
#9d7eb8

Status Colors

Success
#4caf50
Error
#f44336
Warning
#ff9800
Info
#2196f3

Buttons

Retro-styled buttons with multiple variants and states.

Basic Buttons

Status Buttons

Button States

Forms

Complete form styling with retro aesthetics.

Checkboxes
Radio Buttons

Alerts

Status messages and notifications with semantic colors.

ℹ️ Info: This is an informational message.
✓ Success: Operation completed successfully!
⚠️ Warning: Please review this before proceeding.
✗ Error: Something went wrong. Please try again.

Badges & Pills

Small inline elements for labels, tags, and status indicators.

Default Badges

Default Primary Secondary Contrast

Status Badges

✓ Success ✗ Error ⚠️ Warning ℹ️ Info

Typography & Helper Classes

Text utilities and spacing helpers for quick styling.

Text Colors

Default text (muted) success text error text warning text info text contrast text

Text Alignment

Left aligned

Center aligned

Right aligned

Spacing Helpers

Use .mt-xs, .mt-sm, .mt-md, .mt-lg, .mt-xl for margin-top.

Use .mb-xs, .mb-sm, .mb-md, .mb-lg, .mb-xl for margin-bottom.

Use .mx-auto for horizontal centering and .py-md for vertical padding.

Example: Component with margin and padding utilities

Heading Styles

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lists

Unordered List

Ordered List

  1. First step in the process
  2. Second step follows naturally
  3. Third step completes the sequence

Blockquotes

"The best time to plant a tree was 20 years ago. The second best time is now."
— Chinese Proverb

Links

This is a hyperlink styled with the framework. Links have a bottom border and change color on hover. You can use them inline within text or as standalone elements.

Tables

Tables with retro styling, alternating row colors, and hover effects.

Feature Light Mode Dark Mode
Background Warm cream Warm taupe
Buttons Lavender primary Rose primary
Borders Retro 90s beveled Retro 90s beveled
Accents Pink & brown Pink & brown

Code

Inline const x = 42; looks different from block code:

function retro() {
  return "That's totally rad!";
}

retro(); // "That's totally rad!"

Dividers

Use <hr> to separate content sections:

Content after the divider looks fresh and organized.

Form Validation

Invalid inputs show a red border when they fail validation.

Button Groups

Combine buttons into a group with the .button-group class:

Toggle Switches

Use checkboxes with the .toggle class to create stylish toggle switches:

Range Sliders

Native range inputs styled with retro beveled appearance: