Homa
ProfileHelpSettings

Typography & Badge System

A comprehensive guide to typography classes and badge components with copy-paste ready code.

Headings
Semantic heading styles with consistent spacing and typography
heading-1
Heading 1 - Main Page Title
heading-2
Heading 2 - Section Title
heading-3
Heading 3 - Subsection Title
heading-4
Heading 4 - Card Title
heading-5
Heading 5 - Small Title
heading-6
Heading 6 - Smallest Title
Display Text
Large display text for hero sections and emphasis
display-large
Display Large
display-medium
Display Medium
display-small
Display Small
Body Text
Standard text for content and descriptions
body-large
Body Large - Used for important content and lead paragraphs that need more visual weight.
body-medium
Body Medium - The standard body text for most content throughout the application.
body-small
Body Small - Used for secondary content, descriptions, and supplementary information.
Labels
Label text for form fields, buttons, and navigation
label-large
Label Large
label-medium
Label Medium
label-small
Label Small
Captions
Small text for metadata, timestamps, and helper text
caption-large
Caption Large - For metadata
caption-medium
Caption Medium - For timestamps
caption-small
Caption Small - For helper text
Code Text
Monospace text for code snippets and technical content
code-large
const example = 'code large';
code-medium
const example = 'code medium';
code-small
const example = 'code small';
Custom Badge Component
React component with variant props and dot support
variant="green"
Open
variant="red"
High Priority
variant="red-dot"
High Priority
variant="yellow"
Medium Priority
variant="yellow-dot"
Medium Priority
variant="blue"
New
variant="gray"
Sales Department
variant="purple"
Support Team
variant="pink"
Marketing
CSS Badge Classes (No Border)
Direct CSS classes that can be applied to any element - no border by default
badge-green
Open
Open
badge-red badge-dot
High Priority
High Priority
badge-yellow badge-dot
Medium Priority
Medium Priority
badge-blue
New
New
badge-gray
Sales Department
Sales Department
badge-purple
Support Team
Support Team
badge-pink
Marketing
Marketing
CSS Badge Classes (Bordered)
Badge classes with borders for when you need more definition
badge-green-bordered
Open
Open
badge-red-bordered badge-dot
High Priority
High Priority
badge-yellow-bordered badge-dot
Medium Priority
Medium Priority
badge-blue-bordered
New
New
badge-gray-bordered
Sales Department
Sales Department
badge-purple-bordered
Support Team
Support Team
badge-pink-bordered
Marketing
Marketing
Usage Examples
How to use these classes in your components

Component Usage

import { CustomBadge } from "@/components/ui/custom-badge"

<CustomBadge variant="red-dot">High Priority</CustomBadge>
<CustomBadge variant="green">Open</CustomBadge>

CSS Class Usage

<div className="heading-2">Page Title</div>
<p className="body-medium">Content goes here</p>
<span className="badge-red badge-dot">High Priority</span>