1. Colors

Primary (Blue)

var(--primary)

Secondary (Pink)

var(--secondary)

Accent (Yellow)

var(--accent)

Destructive (Red)

var(--destructive)

Background

var(--background)

Foreground

var(--foreground)

2. Typography

Heading 1

text-6xl font-bold uppercase

Heading 2

text-5xl font-bold uppercase

Heading 3

text-4xl font-bold uppercase

Heading 4

text-3xl font-bold

Large Paragraph: Your dedicated team for custom business automation powered by Artificial Intelligence.

text-xl

Base Paragraph: Every automation initiative is tailored to your business needs. Streamline operations, connect data sources, and scale efficiently.

text-base

3. Buttons

Variants

Sizes

Rotations

4. Layout Boxes

.primary-box

Blue background, slightly rotated left (-1deg) with monster-border.

.secondary-box

Pink background, slightly rotated right (1deg) with monster-border.

.accent-box

Yellow background, rotated right (2deg) with monster-border.

5. Cards

Standard Card

Now inherits Neo-Brutalism by default

The base Card component was updated. It automatically gets the thick borders, hard shadow, and uppercase titles without needing extra classes.

.monster-card class

This uses the custom .monster-card utility from index.css. It has hover effects baked in (translates up and left).

6. Form Elements

Email Address

Note: Custom neo-brutalism styling applied by default.

Password

Message

Role

Accept terms and conditions

Enable Notifications

Radio Group

Option One

Option Two

6.1. Interactive Inputs

Slider

Use for range selection.

Toggle

7. Data Display

Badges

Default

Secondary

Accent

Destructive

Outline

Accordion

8. Overlays

Dialog (Modal)

Hard shadows, thick borders, and no rounded corners.

Sheet (Sidebar)

Slides in with a hard drop shadow on the opposite side.

9. Tables

A list of your recent invoices.
Invoice	Status	Method	Amount
INV001	Paid	Credit Card	$250.00
INV002	Pending	PayPal	$150.00
INV003	Unpaid	Bank Transfer	$350.00
INV004	Paid	Credit Card	$450.00

10. Navigation & Misc

Tabs

Make changes to your account here.

Progress

Uploading...60%

Tooltip

Hover over me

11. Banners & Sections

Начать бесплатно

Присоединяйтесь к сотням бизнесов, экономящих время и деньги с Monster Automation.