Skip to content
Site volume
Colourway

Components

Logo

The lockups (horizontal, stacked, mark) drawn from `logoGeometry`, with the home link.

  • Beta
  • Reading layer
  • Server component
  • Since 0.1.0
  • Press check
Import from@maxgrits/overprint-react/brand
On this page

Example#

Look of this example
Live render of examples/logo/basic.tsx

Usage#

Use a logo lockup where MAKR Labs is named: the navbar, the footer, documents, a sign-in page. horizontal (default) sets the wordmark beside the mark, stacked under it, mark drops the words for square slots.

  • Choosing. Horizontal for spaces two and a half times as wide as tall or more, stacked for squarer spaces, the mark alone for avatars and icons.
  • Home link. With href, the lockup is the home link, named "MAKR Labs, home".
  • Phones. collapse="phone" shows only the mark below 22.5rem.
  • Size is the mark's height in px; the wordmark follows the lockup's proportions from logoGeometry, the same numbers the logo pack uses. Clear space and minimum sizes are on the mark page.

Anatomy#

The parts of examples/logo/anatomy.tsx, numbered:
  1. MarkThe 2 × 2, its height set by size..mk-mark
  2. WordmarkCaps one module tall, centred on the mark..mk-wordmark

Volume#

The lockup never changes with the volume.

  • Quiet

    Docs, forms, legal and long reads. Flat inks, no art in motion.

  • Studio

    The site default. Art on its own plates, one display moment per view.

  • Press

    Hero moments, covers and campaigns. Halftone fields and the second ink.

  • Rave

    Launches, posters and the 404. Every ink, and the words still win.

Content#

  • The name is spelled MAKR Labs: never "Makr Labs", "MAKR LABS" or "MakrLabs".

Do and don't#

Do

The drawn lockup.

Don't

Makr labs

A retyped name beside the mark.

The wordmark is drawn to fit the mark: two weights, one width, fixed spacing. A retyped name looks almost right, which is worse than wrong.

Accessibility#

  • With href it is the home link named "MAKR Labs, home"; the mark and wordmark inside are hidden.
  • collapse="phone" shows the mark alone below 22.5rem.

Props#

PropTypeDefaultDescription
hrefstringnoneA home link (named "MAKR Labs, home" unless `aria-label` says otherwise).
litreadonly ("custom-apps" | "growth" | "maxos" | "software" | "websites")[]none
collapse"phone"none`phone`: the mark only below 22.5rem.
option"a" | "b" | "c"none
sizenumber32The mark's height in px (default 32).
labelstring"MAKR Labs"; with href, "MAKR Labs, home"The accessible name (default "MAKR Labs"; with `href`, "MAKR Labs, home").
renderRenderPropnone
layout"auto" | "horizontal" | "mark" | "stacked"noneChoose the lockup by the box ratio table (70 BB-2, `MARK_SPECS.choose`).
boxLogoSlotnone

Plus 286 React and DOM attributes passed through to the root element (className, ref, aria-*, event handlers and the rest). Generated from LogoProps in packages/overprint-react/src/brand/logo.tsx.

Tokens#

System tokens (4)

Scanned from its CSS at build and checked against its registry entry.

Changelog#

Arrived in 0.1.0.

Next releaseNot released yet

  • Minorreactbrand: the mark in use is option c, Key block (D-P20), so Mark, Logo, the favicon and the press run print it; the brand data BRAND, BRAND_NAMES, MARK_SPECS (clear space, minimum sizes, the lockup choice) and CHANNEL_VOLUMES (70 BK-1); Logo layout="auto" picks the lockup for its box; "Paid" joins STAMP_WORDS.

0.1.024 October 2026

  • MinorreactSection with its plate and Art slot, Plate, VolumeScope, PageHero, SectionHead, Eyebrow, Card, LineCard, InfoPanel, Stack, Cluster, Grid, Container, Main, Rule and the FittedLine client fitter; Navbar with the NavDisclosure mega panels, Footer, FooterMap, BuildStamp, SkipLink, ActionDock and VisitorControls; the Table parts, ComparisonTable with the one-tier switcher, SpecStrip, Numeral, Stat, StatGroup, StatusChip, Badge and ScoreDial; Prose with mdxComponents, Quote, CodeBlock with CopyButton, Figure, ScreenshotFrame and PhoneFrame; and the brand: the three evolved 2 × 2 options in markGeometry (a Overprint by default, b Paper seam, c Key block) with the pixel-snapped px mode and the one-ink seam variant, logoGeometry with the 1x clear-space frame, Mark, Wordmark, Logo, MaxosMark and LineBadge. Read the whole entry