Wordmark

The written name with its first letter in the amber tile, for the front of a site or a splash screen. Use AppLockup in app chrome.

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

tsx

import { Wordmark } from '@skribly/ui/brand'

tsx

<Wordmark as="h1" size="xl" />
<Wordmark size="sm" tone="nav" />

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

The name is read once from a hidden copy and the drawn letters are hidden, so a screen reader never spells it in two parts.
The xl size scales with the viewport and stops growing at 9rem.
The tile gets a border in Windows high contrast.

This demo runs through axe in all three themes on every test run. See what the tests check.