Display Text


Display 1 - Extra Large Hero Text
Display 2 - Large Hero Text
Display 3 - Medium Hero Text
Display 4 - Small Hero Text
Display 5 - Extra Small Hero Text
Display 6 - Micro Hero Text

Typography Hierarchy


Heading 1 - Main Page Title

Heading 2 - Section Title

Heading 3 - Subsection Title

Heading 4 - Card Title

Heading 5 - Small Title
Heading 6 - Micro Title

Body major - Use for larger content sections, like articles or long-form text.

Body text (minor) - This is the standard paragraph text used throughout the application for general content and descriptions.

Inline augmented link

Inline major link

Body diminished - Smaller body text for secondary information and captions.

Frames


Augmented

Frame Augmented

An augmented rule above and major rule below.

A major rule above and minor rule below.

A minor rule above and diminished rule below.

A diminished rule above.
Augmented surface depth.

Major surface depth.

Baseline surface depth.

Minor surface depth.

Diminished surface depth.
Major

Frame Major

A major rule above and minor rule below.

A minor rule above and diminished rule below.

A diminished rule above.
Augmented surface depth.

Major surface depth.

Baseline surface depth.

Minor surface depth.

Diminished surface depth.
Minor

Frame Minor

A minor rule above and diminished rule below.

A diminished rule above.
Augmented surface depth.

Major surface depth.

Baseline surface depth.

Minor surface depth.

Diminished surface depth.
Diminished

Frame Diminished

A diminished rule above.

And another for good measure.
Augmented surface depth.

Major surface depth.

Baseline surface depth.

Minor surface depth.

Diminished surface depth.

Buttons


UI Controls

Settings



Modes




Actions


Shoji Ushiyama / Kavaeric












Move current indev stuff above this cut

Breadcrumbs


Form Elements

Cards


Card Title

This is a basic card component with title and content. Cards are used to group related information.

Interactive Card

This card demonstrates hover effects and interactive states for better user experience.

Feature Card

Cards can be used to showcase features, products, or any grouped content with consistent styling.

Tables

Name Email Role Status
John Doe john@example.com Admin Active
Jane Smith jane@example.com User Pending
Bob Johnson bob@example.com Editor Inactive

Alerts & Notifications

Success! Your changes have been saved successfully.
Warning! Please review your input before proceeding.
Error! Something went wrong. Please try again.
Info: This is an informational message for the user.

Tabs

This is the content for the Overview tab. Tabs help organize content into logical sections.

Accordion

This is the content for section 1. Accordions help organize content vertically while saving space.

This is the content for section 2. Users can expand and collapse sections as needed.

This is the content for section 3. Accordions are great for FAQs and complex forms.

Pagination

Loading States

Spinner

Skeleton Loading

Button Loading

Empty States

📭

No Messages

You don't have any messages yet. Start a conversation to see messages here.

Charts & Data Visualization

Bar Chart Placeholder

Bar Chart Component

Line Chart Placeholder

Line Chart Component

Pie Chart Placeholder

Pie Chart Component

Modal/Overlay