Skip to content
Site volume
Colourway

Components

Wordmark

"MAKR Labs" in Anybody: MAKR at 820, Labs at 600 in the second text ink.

  • 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
MAKR Labs
Live render of examples/wordmark/basic.tsx

Usage#

Use the wordmark on its own where the mark would be too small or is already nearby: a legal line, a document footer, the press kit. "MAKR" prints in Anybody at weight 820 and "Labs" at 600 in the second ink.

  • Size sets the font size from 16 to 48 px; past that, use the logo pack's outlines.
  • Live text on the web, so it scales with the reader's settings; files carry outlines.

Anatomy#

MAKR Labs
The parts of examples/wordmark/basic.tsx, numbered:
  1. MAKRAnybody, width 108, weight 820..mk-wordmark-makr
  2. LabsWeight 600 in the second ink..mk-wordmark-labs

Volume#

The wordmark never changes with the volume.

  • Quiet

    MAKR Labs

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

  • Studio

    MAKR Labs

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

  • Press

    MAKR Labs

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

  • Rave

    MAKR Labs

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

Content#

  • Always both words, always this case.

Do and don't#

Do

MAKR Labs

Two weights, as drawn.

Don't

MAKR LABS

One weight, all caps.

The weight change between MAKR and Labs is part of the name's shape. Typed in one weight, it is just two words.

Accessibility#

  • Live text: it reads as "MAKR Labs".

Props#

PropTypeDefaultDescription
sizenumbernoneFont size in px (16 to 48; default the `wordmark` role, 21 px).
renderRenderPropnone

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

Tokens#

System tokens (7)

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

Changelog#

Arrived in 0.1.0.

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