Logo

Logo inlines the SVG files from @monk-business/brand, so a site needs no copy of them in its public folder. The default tone, auto, follows the surrounding theme: its inks are the fg, symbol and accent tokens, which equal the logo-on-dark inks on dark and the logo-on-light inks on light. See the brand logo guidelines for clear space, minimum sizes and misuse.

Horizontal, stacked, symbol, app icon and favicon (tone auto)Dark · Grafite

Horizontal, stacked, symbol, app icon and favicon (tone auto)Light · Gelo

Variants

Variant	File	Use
horizontal	logo-on-*.svg	The main lockup. At least 120px wide.
horizontal-alt	logo-alt-on-*.svg	The alternative with BUSINESS in light weight.
stacked	logo-stacked-on-*.svg	Square spaces only.
symbol	symbol-on-*.svg	Where the name is already visible, or under 120px wide. At least 24px.
app-icon	app-icon.svg	The symbol on a Grafite disc, 64px and up.
favicon	favicon.svg	The simplified symbol on a Grafite disc, 16–48px.

Astro

---
import Logo from '@monk-business/astro/Logo.astro';
---

<a href="/" aria-label="Monk Business, página inicial"><Logo decorative /></a>
<Logo variant="stacked" tone="on-light" height={56} />
<Logo variant="symbol" tone="mono" class="text-muted" />

In plain HTML, use the files with <img> (pick on-dark or on-light for the surface) or inline logo-mono.svg / symbol-mono.svg, which use currentColor.

Props

Logo props

Prop	Type	Default	Description
variant	LogoVariant	'horizontal'	horizontal: the main lockup. horizontal-alt: BUSINESS in light weight. stacked: square spaces. symbol: where the name is already visible or space is under 120px. app-icon: the symbol on a Grafite disc, 64px and up. favicon: the simplified symbol on a Grafite disc, for 16–48px.
tone	LogoTone	'auto'	auto follows the surrounding theme (fg letters, symbol-colored orbit, accent K piece), which equals the on-dark file on dark and the on-light file on light. on-dark and on-light use the fixed files; mono uses currentColor. Ignored by app-icon and favicon.
height	number	26 for horizontal lockups, 56 for stacked, 32 for the symbol variants	Height in px. Minimums: horizontal logo 120px wide (about 12px tall), symbol 24px.
title	string	'Monk Business'	Accessible name.
decorative	boolean	false	Hide the logo from assistive technology, when the name is given elsewhere (a link's aria-label).
class	string	—	Extra classes for the wrapper <span class="mb-logo">.

* required.