Logos, names, and taglines scattered across headers, sidebars, and modal titles mean re-assembling the same layout, spacing, responsive sizing, and dark-mode colors every time. Without a consistent primitive, team members invent different flexbox arrangements, text truncation strategies drift, and a rebrand requires hunting across a dozen half-baked compositions.

Brand is a presentational flexbox container that lays out a logo, name, and tagline in a horizontal stack with unified spacing and typography. It takes optional logo (any React element), name and tagline strings, and a size prop ("sm", "md", or "lg") that scales gap, name text size, and tagline text size as a unit. The root DOM node carries the data-react-fancy-brand attribute for stable selection.

Import Brand from @particle-academy/react-fancy, then render <Brand logo={<img src="..." alt="" />} name="Acme Inc." tagline="Build amazing things" />. Pass size to adjust all spacing and type together, and className to layer on additional styles.