Design System

Logo & mark

The Halwel logo is a lockup: the mark (a filled sage dot, --brand-sky) followed by the wordmark. An optional suffix names the surface (hq, design). One primitive — ShellBrand — renders it across every shell and login.

The mark may stand alone (favicon, avatar, tight chrome); the wordmark should not appear without the mark in a brand corner. Keep clear space around the lockup of at least the mark's diameter.

import from @halwel/ui/components/dashboard (ShellBrand)

Variants

The mark

The sage dot (--brand-sky). Sizes shown: 34 / 28 / 20px — the shell, topnav, and compact sizes.

Lockup
halwel

Mark + wordmark. The canonical brand corner.

Lockup with surface suffix
halwelhqhalweldesign

The suffix names the surface in a lighter body weight beside the wordmark.