---
title: Styles
description: Export a custom Initium style preset or install the base style pack in a shadcn project.
slug: styles
order: 3
---

# Styles

Initium styles define the visual system your project and AI tools should follow: colors, fonts, type scale, radius scale, buttons, forms, and layout utilities.

Install styles before installing blocks. Blocks can depend on shared Initium utilities such as `wrapper`, `tagline`, `paragraph`, `heading-xl`, and `heading-lg`.

## Recommended: Export A Custom Style

Use the Style Builder when you want a style preset that matches your selected visual direction.

1. Open the Style Builder.
2. Choose your colors, fonts, type scale, radius scale, button style, form style, body style, and tagline style.
3. Preview the style.
4. Copy the generated shadcn command.

The generated command installs from a preset URL:

```bash
npx shadcn@latest add "https://app.initium.sh/r/preset?code=..."
```

The exact URL is generated by the Style Builder. Do not type or edit the `code` value by hand.

## Export DESIGN.md

After choosing a style, export `DESIGN.md` from the Style Builder.

Place it in your project root while you work:

```txt
DESIGN.md
```

Use `DESIGN.md` as visual source material for AI tools. It tells the tool which style decisions are intentional, including colors, typography, radius, button treatment, form treatment, spacing, and overall feel.

You do not have to commit `DESIGN.md`. Treat it as a working file unless your team wants to version design direction in the repository.

## Base Style Pack

You can also install the base Initium style utilities:

```bash
npx shadcn@latest add @initium/initium-styles
```

Use this when you want the shared utilities without relying on a custom Style Builder export.

## Typeset For Rich Text

Rich text article blocks style their body content with the [shadcn typeset](https://ui.shadcn.com/docs/typeset) stylesheet. It installs automatically as a dependency of any `rich-text-section-*` block, or on its own:

```bash
npx shadcn@latest add @initium/typeset
```

This adds `app/typeset.css` to your project. Import it after Tailwind in your global CSS file:

```css
@import "tailwindcss";
@import "./typeset.css";
```

Then wrap rendered HTML or markdown in the `typeset` class. The stylesheet derives from your theme tokens, so it follows your fonts and dark mode automatically, and the file is yours to edit.

## Styles Include Scales

In Initium docs, "Styles" is the umbrella term. Type scale and radius scale are parts of the style system:

- Type scale controls the relationship between headings, paragraphs, and supporting text.
- Radius scale controls the shape language used by cards, buttons, forms, and containers.
- Button and form styles control the default interactive feel of the UI.
- Body and tagline styles control the texture of marketing sections.

You do not install scales as separate products. They are included in the style preset you export or install.

## Before Installing Blocks

Before installing a block, confirm that your style setup is in place:

```bash
npx shadcn@latest add @initium/initium-styles
```

Or install your generated Style Builder preset:

```bash
npx shadcn@latest add "https://app.initium.sh/r/preset?code=..."
```

Then install the block you want from the Blocks browser.