- -

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.

- -

- 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 - -

- -