Foundations

Signature

One hand-set word in Kalam with a spectrum swash that draws itself in — the "Visually" moment.

• Children is a single word. Use once per screen, inside a ui headline; keep the word and any following period together (white-space: nowrap).
• animate={false} for static media (social, print). The swash respects Reduce motion.
• In Readable type mode the word falls back to the UI face.

Playground

Change the props, switch theme in the header, try Tablet and Phone widths, then copy the code.

Examples

Props

export interface SignatureProps {
  children: string;
  swash?: boolean;
  animate?: boolean
}

Use

import { Signature } from '@visualli/design-system/components';

Source: components/src/ · Guidelines: components/catalog/Signature/README.md