🎨 Design System
ログイン 新規登録

結果

フルシェルを開く
プレビューモード

タイポグラフィ

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

カラーパレット

Retro Colors

Gray
Dark Gray
Light Gray
Blue
White
Black

ボタン

Bootstrap Buttons

Outline Buttons

Disabled State

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

フォーム

Bootstrap Forms

Help text for this field.

テーブル

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

カード

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

Primary Secondary Success Danger Warning Info Light Dark

Pills

Primary Secondary Success Danger

イベントコンポーネント

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 Topic
Topic Title Here

This is the topic content with some discussion text.

Posted by username • 2 hours ago
General

ナビゲーション

Breadcrumb

Pagination

Retro Tabs

Tab 1
Tab 2
Tab 3

アラートとメッセージ

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

プログレスバー

25%
50%
75%
100%

ナビゲーションコンポーネント

Breadcrumbs

Retro Breadcrumbs (Component)

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

Pagination

Retro Pagination

← Previous 1 2 3 Next →

モーダルとダイアログ

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+

アイコンと絵文字

Common Emoji Icons

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

Status Indicators

✓ Success ✗ Error ⚠ Warning ℹ Info ● Neutral

スペースとレイアウト

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