> ## Documentation Index
> Fetch the complete documentation index at: https://mds.stepanu.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Typography

> Typography scales, font families, and text styling guidelines for Mavka.

# Typography

For long-form content like articles or documentation, use our typography styles to ensure consistent formatting. These styles extend the default `@tailwindcss/typography` plugin.

## Installation

In order to use the typography styles, you need to install the official Tailwind CSS Typography plugin and create a custom typography styles file as shows below:

### 1. Install the typography plugin

Simply install the official Tailwind CSS Typography plugin with your favorite package manager:

<CodeGroup>
  ```bash npm theme={null}
  npm install @tailwindcss/typography
  ```

  ```bash yarn theme={null}
  yarn add @tailwindcss/typography
  ```

  ```bash bun theme={null}
  bun add @tailwindcss/typography
  ```
</CodeGroup>

### 2. Create custom typography styles

Now, create a `typography.css` file and add the following code:

```css typography.css theme={null}
.prose:not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    --tw-prose-body: var(--color-text-tertiary);
    --tw-prose-headings: var(--color-text-primary);
    --tw-prose-lead: var(--color-text-tertiary);
    --tw-prose-links: var(--color-text-tertiary);
    --tw-prose-bold: var(--color-text-primary);
    --tw-prose-counters: var(--color-text-tertiary);
    --tw-prose-bullets: var(--color-text-tertiary);
    --tw-prose-hr: var(--color-border-secondary);
    --tw-prose-quotes: var(--color-text-primary);
    --tw-prose-quote-borders: var(--color-fg-brand-primary_alt);
    --tw-prose-captions: var(--color-text-tertiary);
    --tw-prose-code: var(--color-text-tertiary);
    --tw-prose-pre-code: var(--color-text-tertiary);
    --tw-prose-pre-bg: var(--color-bg-primary);
    --tw-prose-th-borders: var(--color-border-primary);
    --tw-prose-td-borders: var(--color-border-secondary);
 
    /* Base */
    color: var(--tw-prose-body);
    font-size: var(--text-md);
    line-height: var(--text-md--line-height);
}
 
.prose :not(:where([class~="not-prose"], [class~="not-prose"] *)) {
    /* Text */
    &:where(p) {
        margin-top: calc(var(--spacing) * 4);
        margin-bottom: calc(var(--spacing) * 4);
    }
 
    &:where([class~="lead"]) {
        font-size: var(--text-md);
        line-height: var(--text-md--line-height);
        margin-top: 1.2em;
        margin-bottom: 1.2em;
    }
 
    /* Lists */
    &:where(ol) {
        list-style-type: decimal;
 
        margin-top: calc(var(--spacing) * 4);
        margin-bottom: calc(var(--spacing) * 4);
        padding-inline-start: calc(var(--spacing) * 5.75);
    }
    &:where(ul) {
        list-style-type: disc;
 
        margin-top: calc(var(--spacing) * 4);
        margin-bottom: calc(var(--spacing) * 4);
        padding-inline-start: calc(var(--spacing) * 5.75);
    }
    &:where(li) {
        margin-top: calc(var(--spacing) * 2);
        margin-bottom: calc(var(--spacing) * 2);
    }
    &:where(ol > li) {
        padding-inline-start: 1px;
        margin-top: 0;
        margin-bottom: 0;
    }
    &:where(ul > li) {
        padding-inline-start: 1px;
        margin-top: 0;
        margin-bottom: 0;
    }
 
    /* Horizontal rules */
    &:where(hr) {
        margin-top: calc(var(--spacing) * 8);
        margin-bottom: calc(var(--spacing) * 8);
    }
 
    /* Quotes */
    &:where(blockquote) {
        color: var(--tw-prose-quotes);
 
        border-left-width: 2px;
        border-left-color: var(--tw-prose-quote-borders);
 
        padding-inline-start: 0;
        margin-top: calc(var(--spacing) * 10);
        margin-bottom: calc(var(--spacing) * 10);
    }
    &:where(blockquote p) {
        margin: 0;
        font-weight: 500;
        font-style: italic;
 
        font-size: var(--text-xl);
        line-height: var(--text-xl--line-height);
    }
    &:where(blockquote p:first-of-type::before) {
        content: open-quote;
    }
    &:where(blockquote p:last-of-type::after) {
        content: close-quote;
    }
 
    /* Headings */
    &:where(h1) {
        color: var(--tw-prose-headings);
        font-weight: 600;
 
        font-size: var(--text-display-sm);
        line-height: var(--text-display-sm--line-height);
        margin-bottom: calc(var(--spacing) * 5);
        margin-top: calc(var(--spacing) * 10);
    }
    &:where(h2) {
        color: var(--tw-prose-headings);
        font-weight: 600;
 
        font-size: var(--text-display-xs);
        line-height: var(--text-display-xs--line-height);
        margin-bottom: calc(var(--spacing) * 4);
        margin-top: calc(var(--spacing) * 8);
    }
    &:where(h3) {
        color: var(--tw-prose-headings);
        font-weight: 600;
 
        font-size: var(--text-xl);
        line-height: var(--text-xl--line-height);
        margin-bottom: calc(var(--spacing) * 3);
        margin-top: calc(var(--spacing) * 8);
    }
    &:where(h4) {
        color: var(--tw-prose-headings);
        font-weight: 600;
 
        font-size: var(--text-lg);
        line-height: var(--text-lg--line-height);
        margin-bottom: calc(var(--spacing) * 2);
        margin-top: calc(var(--spacing) * 5);
    }
 
    &:where(h2 + *) {
        margin-top: 0;
    }
    &:where(h3 + *) {
        margin-top: 0;
    }
    &:where(h4 + *) {
        margin-top: 0;
    }
 
    &:where(h1 strong) {
        font-weight: 900;
        color: inherit;
    }
    &:where(h2 strong) {
        font-weight: 800;
        color: inherit;
    }
    &:where(h3 strong) {
        font-weight: 700;
        color: inherit;
    }
    &:where(h4 strong) {
        font-weight: 700;
        color: inherit;
    }
 
    /* Media */
 
    &:where(img) {
        border-radius: var(--radius-xl);
        width: 100%;
        object-fit: cover;
 
        margin-top: calc(var(--spacing) * 8);
        margin-bottom: calc(var(--spacing) * 8);
    }
    &:where(video) {
        margin-top: calc(var(--spacing) * 8);
        margin-bottom: calc(var(--spacing) * 8);
    }
    &:where(figure) {
        margin-top: calc(var(--spacing) * 10);
        margin-bottom: calc(var(--spacing) * 10);
    }
    &:where(figure > *) {
        margin-top: 0;
        margin-bottom: 0;
    }
    &:where(figure:has(> blockquote)) {
        border-left-width: 2px;
        border-left-color: var(--tw-prose-quote-borders);
        padding-top: calc(var(--spacing) * 2);
        padding-bottom: calc(var(--spacing) * 2);
 
        padding-inline-start: calc(var(--spacing) * 4);
    }
    &:where(figure:has(> blockquote) blockquote) {
        padding-inline-start: 0;
        border: none;
    }
    &:where(img + figcaption) {
        display: flex;
        align-items: center;
        gap: calc(var(--spacing) * 1.5);
    }
    &:where(figcaption) {
        color: var(--tw-prose-captions);
 
        font-size: var(--text-sm);
        line-height: var(--text-sm--line-height);
        margin-top: calc(var(--spacing) * 3);
    }
    &:where(cite) {
        font-style: normal;
    }
 
    /* Inline elements */
    &:where(a:not(h1 a, h2 a, h3 a, h4 a, h5 a, h6 a)) {
        font-weight: 400;
        text-decoration: underline;
        text-underline-offset: 3px;
    }
 
    &:where(a:focus-visible) {
        border-radius: var(--radius-sm);
        outline: 2px solid var(--color-focus-ring);
        outline-offset: 2px;
    }
    &:where(:is(h1, h2, h3) a) {
        color: var(--tw-prose-headings);
        font-weight: inherit;
        text-decoration: none;
    }
 
    /* Inline code element */
    &:where(code:not(pre code)) {
        font-size: 0.875rem;
        line-height: 1.25rem;
        font-weight: 700;
        border-radius: 6px;
        padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 1.5);
        margin: calc(var(--spacing) * -0.5) 0px;
        background: var(--color-bg-secondary);
        box-shadow: 0 0 0 1px var(--color-border-secondary);
 
        &::before,
        &::after {
            content: "";
        }
    }
}
```

### 3. Import the typography styles

Now, in your `globals.css` file, import the `typography.css` file:

```css globals.css theme={null}
@import "tailwindcss";
 
@import "@tailwindcss/typography";
@import "./typography.css";
```

### 4. Use the typography styles

And finally, add the `prose` class to your content:

```tsx theme={null}
<div className="prose">
    <h1>Heading level 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa.</p>
    <blockquote>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper mattis lorem non. Ultrices praesent amet ipsum justo massa.</p>
    </blockquote>
</div>
```