🎨 Design System
Se connecter S'inscrire

Résultats

Ouvrir le terminal complet
Mode aperçu

Typographie

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

Palette de couleurs

Retro Colors

Gray
Dark Gray
Light Gray
Blue
White
Black

Boutons

Bootstrap Buttons

Outline Buttons

Disabled State

Composants rétro Windows 95

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="➕" %}

Formulaires

Bootstrap Forms

Help text for this field.

Tableaux

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

Cartes

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 et étiquettes

Badges

Primary Secondary Success Danger Warning Info Light Dark

Pills

Primary Secondary Success Danger

Composants d'événement

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

Composants de forum

💬 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

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

Barres de progression

25%
50%
75%
100%

Composants de navigation

Breadcrumbs

Retro Breadcrumbs (Component)

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

Pagination

Retro Pagination

← Previous 1 2 3 Next →

Fenêtres modales et dialogues

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+

Icônes et emojis

Common Emoji Icons

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

Status Indicators

✓ Success ✗ Error ⚠ Warning ℹ Info ● Neutral

Espacement et mise en page

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