Skip to content
Site volume
Colourway

Components

MaxosMark

The MAX//OS wood block in 2D: a wood square with two heavy slashes.

  • 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/maxos-mark/basic.tsx

Usage#

Use the MAX//OS mark for Max's personal operating system wherever it is named: its own app, the footer of a MAKR Labs page that mentions it, a product card. It is the wood block with two slashes, in 2D; its 3D twin is the 3D kit's wood block.

  • Wood is MAX//OS's ink. No other product prints on the wood.
  • With MAKR Labs it uses the endorsement lockup: the MAX//OS mark and name, then "a MAKR Labs product" in the label role.

Anatomy#

The parts of examples/maxos-mark/basic.tsx, numbered:
  1. BlockThe wood square..mk-maxos-mark-block
  2. SlashesTwo slashes in Anybody, ink on wood..mk-maxos-mark-slashes

Volume#

The mark 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 written MAX//OS: capitals, two slashes, no spaces.

Do and don't#

Do

MAX//OS

The name as written.

Don't

MaxOS

A respelled name.

The two slashes are the product's name and its mark. Spelled any other way, it is a different product.

Accessibility#

  • A named image ("MAX//OS"); pass label=`` beside a visible name.

Props#

PropTypeDefaultDescription
sizenumber32Rendered size in px (default 32).
labelstring | false"MAX//OS"Accessible name (default "MAX//OS"); `false` hides it beside a visible name.

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

Tokens#

System tokens (2)

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