Marketing getting started

Installation lists what a web project needs before it starts. This page covers how marketing sites differ in configuration once the project base has been configured.

For a product app, see App getting started.

Sera, for marketing

All marketing sites run shadcn's Sera style. A marketing page earns a visitor's attention once, then has to convert it: landing pages, product stories and campaign pages read in one visit.

This selected style is optimized for this use with:

• Typography carries the page: NaN Serf B for display, CircularXX for body and mono for eyebrows, instead of chrome.
• Hairline borders, no shadows: flat surfaces keep focus on the words and the story, not on depth cues.
• Tracked uppercase controls, generous rhythm: a print-inspired hierarchy.

Uppercase widens text. Sera sets controls in tracked capitals, so a label takes about a third more room than in sentence case, and anything a user typed shows in capitals too. Size chips and labels on the uppercase text, and never pass user input, such as a name or a search term, through an uppercase control.

1. Initialize with the marketing base

pnpm dlx shadcn@latest init https://ui.clinia.dev/r/marketing.json

This writes a components.json with "style": "base-sera" and the @clinia registry, and installs Clinia's icons: the Material Symbols utility set and the marketing icons. From here, every shadcn add generates the Sera version of a component.

See Iconography and Icons for the conventions.

2. Install the marketing theme

pnpm dlx shadcn@latest add @clinia/theme-marketing

It writes the imports into your app/globals.css: the brand fonts, the design tokens (colours, typography, spacing, ...), the animations the components use, and the marketing illustration roles. It also sets one override: --radius, back to the brand's value. Shadcn's Sera ships square corners, and Clinia's brand is rounded.

@import "@clinia/tailwindcss/fonts";
@import "@clinia/tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
@import "@clinia/tailwindcss/marketing";
 
:root {
  --radius: 0.5rem;
}

This is the only sanctioned local override. Hairline borders, no shadows and tracked uppercase controls stay exactly as Sera ships them; changing more than radius makes a different style, not an override. The override rounds the @clinia Sera components, which use radius tokens. An upstream Sera component hard-codes square corners, so the override can't reach it.

3. Host the brand fonts

@clinia/tailwindcss declares the fonts but ships no font files: the CircularXX and NaN Serf B licenses don't allow redistribution. The theme already imports the declarations. Get the seven licensed .woff2 files from the brand drive and put them in public/fonts/. Until they're there, text falls back to the system fonts.

The theme turns off faked bold and italic (font-synthesis: none), so a missing file falls back cleanly instead of being imitated.

4. Add the brand assets

Run the following command to import the required logos, band and favicon:

pnpm dlx shadcn@latest add @clinia/brand-logo @clinia/infinity-band
curl -LO https://ui.clinia.dev/favicon/favicon.zip
unzip favicon.zip -d public/favicon
cp public/favicon/light/favicon.ico public/favicon.ico

• brand-logo: the logomark and logotype, as SVGs in public/. See Logo.
• infinity-band: the line language and the twist and ring bands, as SVGs in public/. See Line & shape.
• favicon.zip: the light and dark tab icons, plus the app and manifest icons. See Favicon for the <link> tags.

5. Add components

Add shadcn components, based on what your site needs. They will inherit Clinia tokens automatically from the configuration run above:

pnpm dlx shadcn@latest add @clinia/button @clinia/card

This lands the component source code in components/ui/. To prevent style drift, keep Clinia's colour and accessibility branding choices in these files as shipped when adding. If a component needs to change, request it.

Every component in Components ships from @clinia in two versions, Luma and Sera. Your components.json says base-sera, so you get the Sera one: wired to the icon modules, with Clinia's colour fixes, and rounded by the --radius override.

A component Clinia doesn't list isn't installed from shadcn: request it.

A hero, or any section with its own background, runs edge to edge while its content stays in a capped width: see Full-width sections in Containers.

The header follows Site header: transparent over the home page's hero with a panel that slides in on scroll, and a solid panel on inner pages.