Style Guide

Typography

Heading 1

Font: Playfair Display, Size: 3rem (48px), Weight: 700 (Bold), Class: text-5xl font-bold font-playfair

Heading 2

Font: Playfair Display, Size: 2.25rem (36px), Weight: 600 (Semibold), Class: text-4xl font-semibold font-playfair

Heading 3

Font: Playfair Display, Size: 1.875rem (30px), Weight: 600 (Semibold), Class: text-3xl font-semibold font-playfair

Heading 4

Font: Playfair Display, Size: 1.5rem (24px), Weight: 600 (Semibold), Class: text-2xl font-semibold font-playfair

Heading 5

Font: Playfair Display, Size: 1.25rem (20px), Weight: 600 (Semibold), Class: text-xl font-semibold font-playfair

Heading 6

Font: Playfair Display, Size: 1.125rem (18px), Weight: 600 (Semibold), Class: text-lg font-semibold font-playfair

This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget felis eget nunc lobortis mattis aliquam faucibus purus in.

Font: Inter, Size: 1rem (16px), Weight: 400 (Regular), Class: text-base font-inter

This is small text.

Font: Inter, Size: 0.875rem (14px), Weight: 400 (Regular), Class: text-sm font-inter

This is extra small text.

Font: Inter, Size: 0.75rem (12px), Weight: 400 (Regular), Class: text-xs font-inter

This is large text.

Font: Inter, Size: 1.125rem (18px), Weight: 400 (Regular), Class: text-lg font-inter

This is extra large text.

Font: Inter, Size: 1.25rem (20px), Weight: 400 (Regular), Class: text-xl font-inter

This is bold text.

Font: Inter, Weight: 700 (Bold), Class: font-bold font-inter

This is semibold text.

Font: Inter, Weight: 600 (Semibold), Class: font-semibold font-inter

This is italic text.

Font: Inter, Style: Italic, Class: italic font-inter

This is underlined text.

Font: Inter, Decoration: Underline, Class: underline font-inter

This is colored text (indigo).

Font: Inter, Color: Indigo 600, Class: text-indigo-600 font-inter

Lists

Unordered List

First item
Second item
Third item

List Style: Disc, Class: list-disc list-inside

Ordered List

First item
Second item
Third item

List Style: Decimal, Class: list-decimal list-inside

Buttons

Size: Small, Class: size="sm"

Size: Default

Size: Large, Class: size="lg"

Variant: Outline, Class: variant="outline"

Variant: Secondary, Class: variant="secondary"

State: Disabled, Attribute: disabled

With Icon: CheckCircleIcon from lucide-react

Links

Default Link

Color: Indigo 600, Hover: Indigo 800, Class: text-indigo-600 hover:text-indigo-800

Underlined Link

Color: Indigo 600, Hover: Indigo 800, Underlined, Class: text-indigo-600 hover:text-indigo-800 underline

Blockquote

This is a blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Border: 4px solid Indigo 500 (left), Padding Left: 1rem, Font Style: Italic, Class: border-l-4 border-indigo-500 pl-4 italic

Code

function example() {
  console.log("Hello, World!");
}

Background: Gray 100, Padding: 1rem, Border Radius: Large, Class: bg-gray-100 p-4 rounded-lg

Table

Header 1	Header 2	Header 3
Row 1, Cell 1	Row 1, Cell 2	Row 1, Cell 3
Row 2, Cell 1	Row 2, Cell 2	Row 2, Cell 3

Table: Full width, Border Collapse, Border: Gray 300 Header Background: Gray 100 Cell Padding: 0.5rem Class: w-full border-collapse border border-gray-300 Header Class: bg-gray-100 Cell Class: border border-gray-300 p-2