Notifications

3 new

Marcus Silva assigned you to Q3 Revenue Report

10 minutes ago

Emma Wilson commented on Homepage Redesign

45 minutes ago

James Miller mentioned you in Sprint Planning

2 hours ago

Sarah Chen uploaded Q2 Analytics Deck

3 hours ago

David Kim requested review on API Integration PR

5 hours ago

View all notifications

Typography

Typography and text styling examples.

Headings

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

<h1 class="text-4xl font-bold text-alpine-900">Heading 1</h1>
<h2 class="text-3xl font-bold text-alpine-900">Heading 2</h2>
<h3 class="text-2xl font-bold text-alpine-900">Heading 3</h3>

Body Text

Lead Text

This is a lead paragraph that stands out from regular body text. It's slightly larger and uses a lighter weight for emphasis.

Paragraph

The quick brown fox jumps over the lazy dog. This is standard body text used throughout the interface. It maintains a comfortable reading size and color for optimal readability in admin dashboards and content areas.

Small Text

This is small, muted text used for captions, timestamps, and secondary information. It provides context without distracting from the primary content.

Muted Text

This is muted text that can be used for less important information that should still be readable but visually de-emphasized.

<p class="text-lg text-gray-600">Lead paragraph text</p>
<p class="text-sm text-gray-700">Standard body text</p>
<p class="text-xs text-gray-400">Small muted text</p>

Text Colors

Default - text-alpine-900

Muted - text-gray-500

Primary - text-alpine-500

Success - text-green-600

Danger - text-red-500

Warning - text-sunset

<p class="text-alpine-900 text-sm font-medium">Default - text-alpine-900</p>
<p class="text-gray-500 text-sm font-medium">Muted - text-gray-500</p>
<p class="text-green-600 text-sm font-medium">Success - text-green-600</p>

Font Weights & Styles

font-light - The quick brown fox jumps over the lazy dog.

font-normal - The quick brown fox jumps over the lazy dog.

font-medium - The quick brown fox jumps over the lazy dog.

font-semibold - The quick brown fox jumps over the lazy dog.

font-bold - The quick brown fox jumps over the lazy dog.

italic - The quick brown fox jumps over the lazy dog.

underline - The quick brown fox jumps over the lazy dog.

line-through - The quick brown fox jumps over the lazy dog.

<p class="text-sm text-alpine-900 font-light">font-light</p>
<p class="text-sm text-alpine-900 font-normal">font-normal</p>
<p class="text-sm text-alpine-900 font-semibold">font-semibold</p>
<p class="text-sm text-alpine-900 italic">italic</p>

Text Alignment & Truncation

Left Aligned

This text is left-aligned. It is the default alignment for most languages.

Center Aligned

This text is center-aligned.

Right Aligned

This text is right-aligned.

Truncated Text

This is a very long piece of text that will be truncated with an ellipsis when it overflows its container. The quick brown fox jumps over the lazy dog. Additional text to demonstrate truncation behavior in a fixed-width environment.

<p class="text-sm text-gray-700 text-left bg-gray-50 p-3 rounded-lg">Left aligned</p>
<p class="text-sm text-gray-700 text-center bg-gray-50 p-3 rounded-lg">Center aligned</p>
<p class="text-sm text-gray-700 text-right bg-gray-50 p-3 rounded-lg">Right aligned</p>
<p class="text-sm text-gray-700 truncate bg-gray-50 p-3 rounded-lg">Truncated text...</p>