RP Theme UI Showcase

🎨 Active Design System

Current Preset: GitHub Primer [Legacy] - AA Compliant
Coloring: Warm [Legacy] - Fails AA
Feeling: Default
Shape: Default
Density: Default
Typography: Default
Surface: Glass [Legacy] - Fails AA
Inputs: Default
Base Unit: 4px
Border Radius: 6px
Shadow Level: sm
Button Scale: 1

🎨 Color Palette

Primary #f97316
Secondary #ef4444
Accent #eab308
Danger #d1242f
Background #fff7ed
Surface #ffffff
Text #1f2328
Muted #656d76
Border #fed7aa

📝 Typography

Heading 1 - The quick brown fox

Heading 2 - jumps over the lazy dog

Heading 3 - Pack my box with

Heading 4 - five dozen liquor jugs

Heading 5 - How vexingly quick
Heading 6 - daft zebras jump

Paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Italic text and bold text.

Muted text: Secondary information that's less prominent.

Blockquote: "Design is not just what it looks like and feels like. Design is how it works." — Steve Jobs

Inline code: const hello = 'world';

// Code block
function greet(name) {
    return `Hello, ${name}!`;
}

🧭 Navigation Menu

🗂️ Tabs

Overview tab content in the design system showcase.

Settings tab content in the design system showcase.

Billing tab content in the design system showcase.

🔘 Buttons

Link Button

🪟 Actions: Modal, Drawer, Toast, Dropdown, Popover

🏷️ Badges & Alerts

Primary Secondary Success Warning Danger
Information alert using current info tokens.
Success alert using current success tokens.
Warning alert using current warning tokens.
Danger alert using current danger tokens.

🃏 Cards & Widgets

Card Title

This is a card component with the current border radius and shadow settings.

Widget Title

This is a widget component. Notice how the border radius adapts to the active preset.

📊 Table

Name Role Status Plan
Jane Doe Administrator Active Pro
John Smith Editor Pending Starter
Alex Brown Viewer Suspended Free

📋 Form Elements

📰 Post Cards (Grid)