Skip to content
Site volume
Colourway

Components

Mark

The evolved 2 × 2: M A over K R in the Process inks, overprinting where they meet.

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

Three options were designed in Phase 2 (D-A3): a, Overprint (the default), b, Paper seam, and c, Key block. Swapping is one line, MARK_DEFAULT_OPTION in brand/mark-option.ts. markGeometry(option, { px }) and logoGeometry({ option, layout }) are the pure data the favicon, the 3D tidy pose and the logo pack read.

Example#

Look of this example
MAKR KR
Live render of examples/mark/basic.tsx

Usage#

Use the mark wherever MAKR Labs signs something and space is square or tight: the favicon, an avatar, the footer map, a loader. Where there is room for the name, use a Logo lockup. The full rules, every size and every option are on the mark page.

  • Sizes. 16, 24, 32, 48, 64 and 128 px are the drawn sizes. Up to 32 px every edge lands on a whole pixel; from 48 px the letters print on the squares.
  • Lit lines. lit inks only the lines a page is about; the others print as 2 px outlines, so the meaning never rests on colour alone. The footer map uses it per column.
  • One ink. mono prints every square in the plate's text ink, parted by paper seams, for single-colour work.
  • Name. It is a named image ("MAKR Labs"); inside a Logo it is hidden and the lockup carries the name.

Anatomy#

MAKR
The parts of examples/mark/anatomy.tsx, numbered:
  1. Squaresdata-mk-part="squares"
  2. Lettersdata-mk-part="letters"

Volume#

The mark never changes with the volume. Its inks are Process in every colourway too (D-N73): a recoloured mark is a misuse.

  • Quiet

    MAKR KR

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

  • Studio

    MAKR KR

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

  • Press

    MAKR KR

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

  • Rave

    MAKR KR

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

Content#

  • The name is "MAKR Labs". The mark never stands in for a letter in a word.

Do and don't#

Do

MAKR

Square, as drawn.

Don't

MAKR

Stretched to fit a slot.

The squares are the brand. Scale the whole mark to fit, or pick the lockup that fits the space.

Accessibility#

  • A named image ("MAKR Labs"); inside Logo it is hidden and the link carries the name.
  • Unlit lines print as 2 px outlines, so lit lines never rest on colour alone.
  • The inks stay Process whatever the page's colourway (a recoloured mark is a misuse); K takes the plate's text ink.

Props#

PropTypeDefaultDescription
option"a" | "b" | "c"MARK_DEFAULT_OPTIONDefault `MARK_DEFAULT_OPTION` (D-A3).
sizenumbernoneRendered size in px (16, 24, 32, 48, 64, 128 recommended).
litreadonly ("custom-apps" | "growth" | "maxos" | "software" | "websites")[]noneLines printed in their ink; the rest are outlines (default: all four).
labelstring | false"MAKR Labs"Accessible name (default "MAKR Labs"); `false` hides the mark (inside `Logo`).
lettersbooleannoneLetters on the squares (default: from 48 px).
monobooleannoneThe one-ink variant: every square in the plate's text ink, parted by paper seams (70 BB-2).

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

Tokens#

System tokens (9)

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