Color Palette

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

Primary Colors

Primary

#e56aa6

Primary Light

#f08dbe

Primary Dark

#c84d86

Secondary Colors

Secondary

#b69cff

Secondary Light

#d7c8ff

Secondary Dark

#8f78d6

Status Colors

Success

#2e8b57

Error

#b3261e

Warning

#b7791f

Info

#2b6cb0

Buttons

Retro-styled buttons with multiple variants and states.

Basic Buttons

Status Buttons

Button States

Forms

Complete form styling with retro aesthetics.

Text Input

Email Input

Number Input

Textarea

Select Dropdown

Checkboxes

Checkbox 1

Checkbox 2

Radio Buttons

Option A

Option B

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

Item one with some text
Item two with more text
Item three with even more text
Nested lists:
- Sub-item one
- Sub-item two

Ordered List

First step in the process
Second step follows naturally
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:

Dark mode

Notifications enabled

Auto-save

Range Sliders

Native range inputs styled with retro beveled appearance:

Volume

Brightness

Saturation