CodeKabir UI

Typography

A consistent typography system that provides various styles for headings, labels, paragraphs, and subheadings. Our typography system maintains consistent design language across the interface while providing flexibility for different contexts.

Titles

Display headers from h1 to h6 with the Inter Display font family.

Title / h1CK-UI Design System
Weight: Medium / 500
Font Size: 56px
Line Height: 64px
Letter Spacing: -0.01em
className="size-h1"
Title / h2CK-UI Design System
Weight: Medium / 500
Font Size: 48px
Line Height: 56px
Letter Spacing: -0.01em
className="size-h2"
Title / h3CK-UI Design System
Weight: Medium / 500
Font Size: 40px
Line Height: 48px
Letter Spacing: -0.01em
className="size-h3"
Title / h4CK-UI Design System
Weight: Medium / 500
Font Size: 32px
Line Height: 40px
Letter Spacing: -0.005em
className="size-h4"
Title / h5CK-UI Design System
Weight: Medium / 500
Font Size: 24px
Line Height: 32px
Letter Spacing: 0
className="size-h5"
Title / h6CK-UI Design System
Weight: Medium / 500
Font Size: 20px
Line Height: 28px
Letter Spacing: -0.005em
className="size-h6"

Labels

Label styles for form elements and other UI components using the Inter font family.

Label / xlComponent Theme
Weight: Medium / 500
Font Size: 24px
Line Height: 32px
Letter Spacing: -0.015em
className="size-label-xl"
Label / lgComponent Theme
Weight: Medium / 500
Font Size: 18px
Line Height: 24px
Letter Spacing: -0.015em
className="size-label-lg"
Label / mdComponent Theme
Weight: Medium / 500
Font Size: 16px
Line Height: 24px
Letter Spacing: -0.011em
className="size-label-md"
Label / smComponent Theme
Weight: Medium / 500
Font Size: 14px
Line Height: 20px
Letter Spacing: -0.006em
className="size-label-sm"
Label / xsComponent Theme
Weight: Medium / 500
Font Size: 12px
Line Height: 16px
Letter Spacing: 0
className="size-label-xs"

Paragraphs

Paragraph styles for body text and content using the Inter font family.

Paragraph / xlAccessible UI components.
Weight: Regular / 400
Font Size: 24px
Line Height: 32px
Letter Spacing: -0.015em
className="size-p-xl"
Paragraph / lgAccessible UI components.
Weight: Regular / 400
Font Size: 18px
Line Height: 24px
Letter Spacing: -0.015em
className="size-p-lg"
Paragraph / mdAccessible UI components.
Weight: Regular / 400
Font Size: 16px
Line Height: 24px
Letter Spacing: -0.011em
className="size-p-md"
Paragraph / smAccessible UI components.
Weight: Regular / 400
Font Size: 14px
Line Height: 20px
Letter Spacing: -0.006em
className="size-p-sm"
Paragraph / xsAccessible UI components.
Weight: Regular / 400
Font Size: 12px
Line Height: 16px
Letter Spacing: 0
className="size-p-xs"

Subheadings

Uppercase subheading styles for section titles and categorization.

Subheading / xlComponents
Weight: Medium / 500
Font Size: 14px
Line Height: 24px
Letter Spacing: 0.06em
Text Transform: Uppercase
className="size-subheading-xl uppercase"
Subheading / lgComponents
Weight: Medium / 500
Font Size: 16px
Line Height: 24px
Letter Spacing: 0.06em
Text Transform: Uppercase
className="size-subheading-lg uppercase"
Subheading / mdComponents
Weight: Medium / 500
Font Size: 12px
Line Height: 20px
Letter Spacing: 0.04em
Text Transform: Uppercase
className="size-subheading-md uppercase"
Subheading / smComponents
Weight: Medium / 500
Font Size: 14px
Line Height: 20px
Letter Spacing: 0.06em
Text Transform: Uppercase
className="size-subheading-sm uppercase"