Back to Index

Typography

EN DE TR

Headings

Heading 1

.ak-text-4xl .ak-font-bold

Heading 2

.ak-text-3xl .ak-font-bold

Heading 3

.ak-text-2xl .ak-font-bold

Heading 4

.ak-text-xl .ak-font-semibold

Heading 5

.ak-text-lg .ak-font-semibold

Heading 6

.ak-text-base .ak-font-semibold

Body Text

Paragraph Sizes

Large paragraph text. Used for introductory text or lead paragraphs to grab attention.

.ak-text-lg

Base paragraph text. The default font size for the majority of the content on the page.

.ak-text-base

Small paragraph text. Often used for secondary information, captions, or helper text.

.ak-text-sm

Extra small text. Used for very fine print or copyright notices.

.ak-text-xs

Inline Elements

You can use bold text, italic text, or underlined text.

Links can be styled with .ak-link class.

Inline code snippets like const x = 1; are styled with .ak-code.

Mark text for highlighting important parts.

Blockquote

"Design is not just what it looks like and feels like. Design is how it works."

— Steve Jobs

Lists

Unordered List

  • First item
  • Second item
  • Third item with sub-items
    • Sub-item one
    • Sub-item two

Ordered List

  1. First step
  2. Second step
  3. Third step
    1. Sub-step A
    2. Sub-step B

Text Utilities

Alignment

Left aligned

Center aligned

Right aligned

Justified text spans the full width of the container.

Transform

Uppercase text

LOWERCASE TEXT

capitalize text

Weight

Light weight

Normal weight

Medium weight

Semibold weight

Bold weight

Text Colors

Primary Text

Secondary Text

Accent Text

Muted Text

Success Text

Warning Text

Destructive Text

Info Text