Jhatpatly Design System

Components, tokens, and patterns

Color Palette

Core

Background

--background

Foreground

--foreground

Primary

--primary

Primary FG

--primary-foreground

Surface

Card

--card

Muted

--muted

Accent

--accent

Secondary

--secondary

Semantic

Destructive

--destructive

Success

--success

Warning

--warning

Ring

--ring

Border & Input

Border

--border

Input

--input

Popover

--popover

Muted FG

--muted-foreground

Typography

Heading 1 — The quick brown fox

Heading 2 — The quick brown fox

Heading 3 — The quick brown fox

Heading 4 — The quick brown fox

Heading 5 — The quick brown fox
Heading 6 — The quick brown fox

Body — Schedule and manage all your social media from one place. Post fast, stay consistent, grow everywhere.

Small / Muted — Secondary text uses muted-foreground color at text-sm for less emphasis.

Extra Small — Used for captions, labels, and metadata.

Font Weights

Light (300)

Regular (400)

Medium (500)

Semibold (600)

Bold (700)

Extrabold (800)

Black (900)

Buttons

Variants

Sizes

States

Inputs

Cards

Default Card
This is a standard card with header, content, and footer.

Card body content goes here. Cards are used throughout the app for grouping related information.

Small Card
Compact variant with reduced padding.

Good for dashboard widgets and sidebar items.

Badges

Variants

DefaultSecondaryOutlineDestructiveGhost

Avatars

Sizes

SMMDLG

With Image

JPAKZZ

Toasts