Brand

Identity Mark - Amber Brackets, Paper Letters, Tracked Wordmark

01 Preview

02 Usage

The kit identity mark - amber [ ] brackets around paper da, paired with the tracked uppercase mono wordmark.

<Brand />
<Brand variant="mark" />
<Brand variant="wordmark" wordmark="DARSAN.DEV" />
<Brand size="sm" />

Variants: mark | wordmark | lockup. Sizes: sm | md. The brackets stay amber and the letters stay paper; do not recolor them. The whole element reads as one brand name to assistive tech, so keep the wordmark meaningful even when only the mark shows.

03 Props

Prop	Type	Default	Notes
variant	`'mark' \| 'wordmark' \| 'lockup'`	`lockup`	Which parts of the identity to render. `mark` is the `[da]` bracket mark alone, `wordmark` the type-set wordmark alone, `lockup` the two side by side.
wordmark	`string`	`DARSAN.DEV`	The wordmark text, also the accessible name when the mark shows alone.
size	`'sm' \| 'md'`	`md`	—

Also accepts every attribute of React.HTMLAttributes<HTMLSpanElement> — they are spread onto the root element. className is merged, not replaced, and ref is forwarded.

04 Import

import { Brand } from '@denizarsan/darsan.design';
import '@denizarsan/darsan.design/styles.css';