🎨 Design System
Login Sign Up

Results

Open Full Shell
Preview Mode

Typography

Heading 1 - Main Page Title

Heading 2 - Section Title

Heading 3 - Subsection

Heading 4 - Card Title

Heading 5 - Small Title
Heading 6 - Smallest Title

Regular paragraph text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Muted text for secondary information

Small text for captions and metadata

This is a link within a paragraph.

Bold text and italic text examples.

This is a blockquote example.

Someone famous

Color Palette

Retro Colors

Gray
Dark Gray
Light Gray
Blue
White
Black

Buttons

Bootstrap Buttons

Outline Buttons

Disabled State

Retro Windows 95 Components

Retro Buttons

📁 Sample Window

This is a retro window component with title bar and content area.

It mimics the Windows 95 aesthetic.

Retro Alerts

🔵 This is an info alert message
✅ This is a success alert message
⚠️ This is a warning alert message
❌ This is a danger alert message

Retro Form Fields

Retro Tab Navigation

General settings content goes here.

Empty States

Simple Empty State
📭

No items found

Empty State with Message
📝

No notes yet

Create your first note to get started!

Empty State with Action
📁

No files found

Upload your first file to get started

📤 Upload File
Code Example:
{% retro_empty_state "📭" "No items found" 
    message="Get started by creating your first item" 
    action_url="{% url 'create' %}" 
    action_text="Create Item" 
    action_icon="➕" %}

Forms

Bootstrap Forms

Help text for this field.

Tables

Bootstrap Table

ID Name Status Created Actions
1 Sample Item 1 Active 2024-01-15 Edit Delete
2 Sample Item 2 Pending 2024-01-14 Edit Delete
3 Sample Item 3 Inactive 2024-01-13 Edit Delete

Retro Table

Column 1 Column 2 Column 3
Data 1 Data 2 Data 3
Data 4 Data 5 Data 6

Cards

Card Header
Card Title

Some quick example text to build on the card.

Go somewhere
2 days ago
Public
Template Card

Template description here

username

Category AI Assisted
📋 Retro Card
This is a retro-styled card component.

Badges and Pills

Badges

Primary Secondary Success Danger Warning Info Light Dark

Pills

Primary Secondary Success Danger

Event Components

Upcoming Event
This is an upcoming event description
Location: Conference Room A
Today's Event
This event is happening today
Time: 2:00 PM
Past Event
This event already happened
Date: January 1, 2024

Forum Components

💬 Forum Topic
Topic Title Here

This is the topic content with some discussion text.

Posted by username • 2 hours ago
General

Navigation

Breadcrumb

Pagination

Retro Tabs

Tab 1
Tab 2
Tab 3

Alerts and Messages

Bootstrap Alerts

List Groups

Basic List Group

  • First item
  • Active item
  • Third item
  • Disabled item

List Group with Badges

  • Inbox 14
  • Sent 2
  • Drafts 1

Progress Bars

25%
50%
75%
100%

Navigation Components

Breadcrumbs

Retro Breadcrumbs (Component)

Code:
{% load breadcrumb_tags %}
{% breadcrumb "🏠 Home" "/" "📂 Projects" "/projects/" "Current Page" %}

Pagination

Retro Pagination

← Previous 1 2 3 Next →

Modals & Dialogs

Trigger Modal Examples

List Groups

Basic List Group

Active item Second item Third item Disabled item

List Group with Badges

  • Inbox 14
  • Drafts 2
  • Sent 99+

Icons & Emojis

Common Emoji Icons

🏠 Home 📁 Folder 📝 Note 📅 Calendar ✅ Task 👤 User ⚙️ Settings 💬 Message

Status Indicators

✓ Success ✗ Error ⚠ Warning ℹ Info ● Neutral

Spacing & Layout

Margin Classes

mb-1 (margin-bottom: 0.25rem)
mb-2 (margin-bottom: 0.5rem)
mb-3 (margin-bottom: 1rem)
mb-4 (margin-bottom: 1.5rem)

Padding Classes

p-1 (padding: 0.25rem)
p-2 (padding: 0.5rem)
p-3 (padding: 1rem)
p-4 (padding: 1.5rem)

Grid System

Responsive Column
Responsive Column
Responsive Column
Responsive Column