Logo

The Logo component, source files, colour usage, minimum sizes and clear space.

Logo React component

The Clinia UI library has defined a Logo component. It renders the wordmark or the mark inline, takes the surrounding text colour, and is announced as "Clinia" to screen readers.

bash

pnpm dlx shadcn@latest add @clinia/logo

tsx

import { Logo, Logomark } from "@/components/ui/logo";
 
<Logo className="h-7 text-foreground" />
<Logomark className="size-8 text-foreground" />

Pass decorative when visible text beside the logo already says Clinia, so it isn't announced twice.

Source files

For everything else (email signatures, slides, a CMS, an <img> tag), use the SVG files. Both are available below and leverage currentColor, so they inherit the surrounding text colour.

Asset	File	Native size	Use
Mark (logomark)	`public/logomark.svg`	339 × 350	The "C" alone. Square/tight contexts, avatars, favicon.
Wordmark (logotype)	`public/logotype.svg`	748 × 228	Full "Clinia" wordmark. The primary logo, the default for most uses.

To copy both into your app's public/ folder, run:

bash

pnpm dlx shadcn@latest add @clinia/brand-logo

Where SVG doesn't work (most email clients, and some slide tools and upload forms), use the transparent PNGs. They're cropped tight to the logo, in Infinite for light backgrounds and Serene for dark ones.

Asset	On light backgrounds	On dark backgrounds	Size
Mark	`logomark-light.png`	`logomark-dark.png`	992 × 1024
Wordmark	`logotype-light.png`	`logotype-dark.png`	2048 × 624

Colour usage

The mark and the wordmark follow the same rule: Infinite on light backgrounds, Serene on dark ones, one colour at a time.

Do

Use the dark logo (Infinite ) on light backgrounds: Serene and Remedy .
Use the light logo (Serene ) on dark backgrounds: Infinite .
Render the logo inline, with the Logo component or the SVG, and set its colour with a text-* utility. text-foreground switches with the theme on its own.
An <img> can't inherit colour. Use the inline Logo component when the logo must switch with the theme.

Infinite on Serene

Infinite on Remedy

Serene on Infinite

Don't

Recolour to anything outside the single-colour Infinite/Serene rule: no multi-colour, no gradient, no brand-family tints.
Place it on Vital, on busy imagery, or on a low-contrast background.

Gradient / multi-colour

On Vital

Low-contrast background

Minimum sizes and conventions

Mark · 16px

Wordmark · 80px

Do

Keep the mark at 16px minimum width.
Keep the wordmark at 80px minimum width.
Keep clear space on every side at least the height of the "C" opening. Never crowd the logo with other elements.

Don't

Stretch, skew or rotate the logo.
Add shadows, outlines or other effects.
Redraw or reconstruct the mark.
Scale it below the minimum sizes above.

Product lockup

A Clinia site or product that names itself beside the logo, such as the developer documentation, sets the name in the eyebrow style: mono, uppercase, tracked and muted, to the right of the wordmark.

A named Clinia product's own site, such as a product marketing site, uses the same lockup: the Clinia wordmark, then the product name. It carries no "powered by Clinia" line, since the wordmark already says so.

Developers

Wordmark and product name

Do

Keep the wordmark at its 80px minimum or larger, and the name smaller than the wordmark.
Leave at least the clear space between the wordmark and the name.
Use the name the site is known by, in one or two words.

Don't

Set the name in the wordmark's weight or size, so it reads as part of the logo.
Shrink the wordmark to make room for the name.
Add a divider: that's the lockup for a partner brand, on Co-branding.
Replace the wordmark with a "powered by Clinia" line in text, or add one beside the lockup.