UI Kit & Design System

A sandbox for testing and developing the application's visual components.

Typography

Headline Font (Playfair Display)

Headline 1: The Quick Brown Fox

Headline 2: Jumps Over The Lazy Dog

Headline 3: And Feels Victorious

Headline 4: A True Champion

Body Font (PT Sans)

This is a leading paragraph. It's slightly larger and perfect for introductions. The quick brown fox jumps over the lazy dog.

This is a standard body paragraph. It provides the main content for the application. The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

This is a muted, smaller paragraph, ideal for descriptions, captions, or helper text. The quick brown fox jumps over the lazy dog.

This is a link. It should be clearly identifiable.

LaTeX Formula Rendering

This is a standard paragraph that contains an inline formula, such as E=mc2E=mc^2.

Below is a block-level formula:

∂u∂t=α∇2u\frac{\partial u}{\partial t} = \alpha \nabla^2 u

This is another paragraph following the block formula.

Color Palette

Background

--background

Foreground

--foreground

Card

--card

Card Foreground

--card-foreground

Popover

--popover

Popover Foreground

--popover-foreground

Primary

--primary

Primary Foreground

--primary-foreground

Secondary

--secondary

Secondary Foreground

--secondary-foreground

Muted

--muted

Muted Foreground

--muted-foreground

Accent

--accent

Accent Foreground

--accent-foreground

Destructive

--destructive

Destructive Foreground

--destructive-foreground

Border

--border

Input

--input

Ring

--ring

Component Library

Buttons

Card

Card Title

A short description for the card.

This is the main content area of the card where information is displayed.

Form Elements

Account tab content.

Alerts & Badges

Primary Badge
Secondary Badge
Destructive
Outline