Typography

Heading 1 (text-4xl)

Used for landing page titles.

Heading 2 (text-3xl)

Used for page titles.

Heading 3 (text-2xl)

Used for section headers.

Heading 4 (text-xl)

Used for card titles.

Body Text (text-base)

The quick brown fox jumps over the lazy dog. Used for specific content.

Small Text (text-sm)

The quick brown fox jumps over the lazy dog. Used for descriptions.

Colors (Theming)

Background

bg-background

Foreground

bg-foreground

Accents-1

bg-accents-1

Accents-2

bg-accents-2

Blue (Info)

Green (Success)

Yellow (Warning)

Red (Danger)

Buttons

Forms

Inputs

Username

Password

Role

Description

States & Toggles

Error Input

This field is required.

Disabled Input

Enable Features

Cards

Simple Card

Just a div with `card` class.

Hoverable Card

Add `hover:border-foreground` for interactive feel.

Icon Card

Layout with flexbox.

Nested Cards

Parent Glass Card

This is the main container card.

Nested Card 1

Standard content inside a generic sub-card container.

Nested with Icon

Additional context here.

Full Width Sub-Card

This sub-card has a header and content area, simulating a mini-panel.

Data Table

Detailed List

Using .table-glass class for a premium look.

Name	Status	Role
JD Jane Cooper jane.cooper@example.com	Active	Admin
CW Cody Fisher cody.fisher@example.com	Offline	User
EW Esther Howard esther.howard@example.com	On Leave	Editor

Showing 1 to 3 of 12 results

Alerts & Confirmations (JS Helper)

You can trigger standardized premium alerts using the global Mivo helper.

Confirmation Example

Stacking Toasts (Custom Helper)

Premium non-disruptive notifications that stack from the bottom-right.

Design System