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:

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:

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:

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 stylesheet. It installs automatically as a dependency of any rich-text-section-* block, or on its own:

npx shadcn@latest add @initium/typeset

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

@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:

npx shadcn@latest add @initium/initium-styles

Or install your generated Style Builder preset:

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

Then install the block you want from the Blocks browser.