Brand

Product mark, gradient title, and optional section eyebrow — host supplies the name, SVG asset, and any mark animation. The kit has no default brand motion.

Preview

Live

Design system

Product name

<p class="ca-section-eyebrow">
  <span class="ca-section-eyebrow-line" aria-hidden="true"></span>
  Design system
</p>
<div class="brand-title-row" aria-label="Your product">
  <span class="brand-mark" aria-hidden="true">
    <img class="brand-mark__icon" src="/brand.svg" alt="" width="36" height="36" decoding="async" />
  </span>
  <span class="text-gradient-hero" aria-label="Your product">
    <span class="text-gradient-hero__glow brand-title" aria-hidden="true">
      <span class="text-gradient-hero__text brand-title__text">
        <span class="brand-title__word brand-title__word--a">Your</span>
        <span class="brand-title__word brand-title__word--b">product</span>
      </span>
    </span>
  </span>
</div>

Variants

Host mark animation

No pulse or bloom ships in Caustica Design. Pass a host class on BrandMark (or wrap the shell) and animate in your app CSS — respect prefers-reduced-motion. 

<BrandMark src="/brand.svg" className="my-brand-mark" />

/* host CSS */
.my-brand-mark .brand-mark__icon {
  animation: my-mark-in 0.6s ease both;
}
@media (prefers-reduced-motion: reduce) {
  .my-brand-mark .brand-mark__icon { animation: none; }
}

Intro row

.brand-title-row--intro for larger hero spacing.

Product name

Accessibility

  • Mark is decorative (aria-hidden); put the product name on the row or title.
  • BrandTitle requires string children or an explicit label for the accessible name.
  • Mark img uses empty alt — do not duplicate the brand name in alt text.
  • Eyebrow line is decorative (aria-hidden); keep the label text for sighted and AT readers.

API

HTML classes

Class Description
.ca-section-eyebrow / -line Uppercase label + optional accent rule above the title row.
.brand-mark / .brand-mark__icon Decorative mark shell + host image. Host may animate via own CSS / className.
.brand-title-row / --intro Horizontal mark + title layout.
.text-gradient-hero / __glow / __text Title stack (glow + text). Fill is solid per word, not a continuous gradient.
.brand-title / .brand-title__text Title text hooks.
.brand-title__word--a / --b First word color / remaining word color.

React props

From src/core/Brand.tsx — SectionEyebrow, BrandMark, BrandTitle, BrandTitleRow.

Prop Type Default Description
line boolean true SectionEyebrow — accent rule before the label.
src string — BrandMark — host-owned asset URL (required).
size number 40 BrandMark image width/height.
className string — BrandMark — host class for product-specific mark animation / layout.
as 'span' | 'h1' | 'p' 'span' BrandTitle element.
label string — BrandTitle accessible name when children are not a string.
intro boolean false BrandTitleRow — applies --intro.