Orbit and K mark

The orbit, the symbol’s broken circle with nodes, is the brand’s single graphic motif: large and faint (14% opacity, symbol color) and cropped by an edge, as in the Hero. The K mark is the detached teal piece of the K as a small skewed accent bar: it marks the current nav item and may precede an eyebrow.

Orbit cropped by the corner, eyebrow with the K markDark · Grafite

Portabilidade numérica

O K mark marca o item atual e pode abrir um eyebrow.

KMark sozinho, decorativo.

Orbit cropped by the corner, eyebrow with the K markLight · Gelo

Portabilidade numérica

O K mark marca o item atual e pode abrir um eyebrow.

KMark sozinho, decorativo.

Do

• Use the orbit large, faint and cropped by an edge.
• Use the K mark at most once per view region.
• Keep both decorative: they are hidden from assistive technology.

Don't

• Recolor the orbit or use it at full opacity behind text.
• Use the K mark as a bullet or a divider.
• Combine the motif with photos or gradients.

Astro

---
import Eyebrow from '@monk-business/astro/Eyebrow.astro';
import KMark from '@monk-business/astro/KMark.astro';
import Orbit from '@monk-business/astro/Orbit.astro';
---

<div class="banner">
  <Orbit class="banner__orbit" />
  <Eyebrow kmark>Portabilidade numérica</Eyebrow>
</div>

.banner { position: relative; overflow: hidden; isolation: isolate; }
.banner__orbit { position: absolute; z-index: -1; top: -60px; right: -90px; width: 300px; }

Props

Orbit props

Prop	Type	Default	Description
faint	boolean	true	Draw at 14% opacity in the symbol color, as the brand book asks for the motif.
class	string	—	Classes that position and size the drawing (e.g. mb-hero__orbit).

* required.

KMark props

Prop	Type	Default	Description
class	string	—	Extra classes.

* required.

Eyebrow props · also accepts the attributes of <p>

Prop	Type	Default	Description
as	'p'| 'span'| 'div'| 'figcaption'| 'h2'| 'h3'	'p'	Element to render.
kmark	boolean	false	Precede the label with the K mark. Use it at most once per view region.

* required.