Logo

A wordmark: the name set in the brand face with a trailing dot in the primary colour. Defaults to Firmly's own. Used inside Brand and standalone wherever the plain logo is needed (e.g. auth pages). A product with a symbol of its own can put it in the dot's place through dot, which is the only part of the treatment that gives.

Sizes

The wordmark, set in the brand face. Size is a named step rather than a class, so every app's header lands on the same one. 2xl and 3xl are logotype sizes — a landing page where the name is the headline, not a header.

firmly. firmly. firmly. firmly. firmly.

A mark for the dot

The dot is the only part of the treatment that gives: a product with a symbol of its own puts it where the period was, through dot. This site does it — the crescent below is ground's. Size it in em and sit it on the baseline, or it stops tracking the size step — and keep it to roughly twice a period: a round mark anywhere near the brand face's x-height reads as a letter, so ground starts looking like graundo. It only works big, which is why this site's own header carries the mark alone instead. firmly. has no symbol and never sets this.

ground

Compact

compact renders just “f.” for somewhere the full wordmark won't fit — a collapsed rail, a favicon-sized slot, a mobile header beside a page title.

f.

API

Prop Type Default Description
size 'sm'|'md'|'lg'|'xl'|'2xl'|'3xl' 'sm'

Text size of the wordmark. The two largest are logotype sizes, for a landing page where the name is the headline.

wordmark string 'firmly'

The name to set. Override it for a product with a wordmark of its own — the dot and the brand face are the treatment, not the word.

compact boolean false

Renders just the first letter and the dot, for tight spaces.

dot import('svelte').Snippet

Replaces the trailing dot, for a product whose own mark can stand in for it. Whatever goes here has to sit on the baseline the way a period does and be sized in em, or it stops tracking the size step. Firmly's own wordmark has no mark and never sets this.

class string ''

Additional Tailwind classes merged onto the root <span>.