UI Primitives

Textui

components/ui/Text

Body copy paragraph. Default element: <p>. Accepts as prop for semantic override.

The space between. Nearly two decades at the intersection of design and code have led to a single conviction: the discipline of leaving things out is the discipline that matters most.

Props (3)

Prop	Type	Default	Description
as	ElementType	"p"	Rendered element
className	string	—	Tailwind class override
children	ReactNode	—	Content

Titleui

components/ui/Title

H1 for page content (not the page hero). Boska display.

The space between

Headlineui

components/ui/Headline

H2 section heading. Switzer, text-5.

Section heading

Props (1)

Prop	Type	Default	Description
as	ElementType	"h2"	Rendered element

Subheadlineui

components/ui/Subheadline

H3 heading. Switzer, text-4.

Sub-section heading

Subsubheadlineui

components/ui/Subsubheadline

H4 heading. Switzer, text-3 bold.

Minor heading

SectionLabelui

components/ui/SectionLabel

Uppercase mono label for section titles and metadata.

Design tokens

TextLinkui

components/ui/TextLink

Inline hyperlink. Beni, underline-on-hover slide animation.

Read more about Ma design principles and how they inform every decision in the system.

MoreLinkui

components/ui/MoreLink

Navigation arrow link with animated arrow translation.

View all essays

Props (2)

Prop	Type	Default	Description
href	string	—	Link destination
text	string	—	Link label

Dividerui

components/ui/Divider

Horizontal rule. Usuzumi, 1px.

Tagui

components/ui/Tag

Filter tag / label pill. Supports active state, href for nav, or onClick for filter.

Design Typography Motion Color

Props (3)

Prop	Type	Default	Description
active	boolean	false	Active/selected state
href	string	—	Renders as <a> when provided
onClick	() => void	—	Renders as <button> when provided

UnorderedList / OrderedList / ListItemui

components/ui/UnorderedList

Styled list primitives. Always use ListItem as children.

Exclude the non-essential
Favour decisions that age well
The discipline of leaving things out

Establish the grid
Set the type
Add colour sparingly

Strong / Emui

components/ui/Strong

Inline text emphasis. Strong: Switzer Bold. Em: Switzer Italic.

The system is built on contrast as a principle, not as an accident. Display type is set in Boska Bold at extreme sizes.

Strikethrough / Inserted / Markedui

components/ui/Strikethrough

Semantic inline marks. Strikethrough: deleted text (del). Inserted: added text (ins). Marked: highlighted text (mark).

~~deleted content~~ was replaced by inserted content and some text is highlighted for emphasis.

Subscript / Superscriptui

components/ui/Subscript

Inline typographic positioning. Subscript renders sub. Superscript renders sup.

Water is H₂O. A footnote reference¹ links to the note.

Tableui

components/ui/Table

Full table family: Table, TableHead, TableBody, TableRow, TableHeaderCell, TableCell. Responsive with overflow-x-auto.

Component	Element	Purpose
Text	p	Body copy paragraph
Headline	h2	Section heading
Tag	a / button / span	Filter label pill

CodeBlockui

components/ui/CodeBlock

Styled pre element for code blocks. Fira Code, Kiri background, overflow-x-auto.

const greeting = (name: string) => `Hello, ${name}!`;
greeting('Ma Design System');

FootnoteSectionui

components/ui/FootnoteSection

Semantic container for footnotes at the end of essay content. Renders section.footnotes with muted text-2 sizing.

1. Boska Variable, Barbara Bigosińska, Fontshare/ITF, 2022.

TaskCheckboxui

components/ui/TaskCheckbox

Disabled styled checkbox for GFM task list items (- [ ] / - [x] syntax in MDX).

Unchecked task item

Checked task item

Badgeui

components/ui/Badge

Small status/label chip. Variants: default, favorite (Beni), paid, language.

Default Favorite Paid DE

Props (1)

Prop	Type	Default	Description
variant	"default" \| "favorite" \| "paid" \| "language"	"default"	Visual variant

Linkui

components/ui/Link

Base anchor element. Auto-detects external URLs — adds rel noopener and target _blank.

Internal link External link ↗

Props (1)

Prop	Type	Default	Description
href	string	"#"	Link destination

EssayLinkui

components/ui/EssayLink

Unstyled link that reveals Beni colour on hover. Used in essay list cards as a wrapper link.

The discipline of leaving things out — an essay on minimalism

Flagui

components/ui/Flag

Inline monospace label tag. Renders as Link when href provided, otherwise span.

A generic flag NEW used inline. Also linkable: tv.

Props (2)

Prop	Type	Default	Description
label	string	—	Text displayed inside the flag
href	string	—	Renders as Link when provided

HaikuItemui

components/ui/HaikuItem

Renders a single haiku with German original and English translation. Newlines become ` / ` separators.

Im Herbstwind weht / ein gelbes Blatt vom Baum — / Stille danach.
In the autumn wind / a yellow leaf falls from the tree — / silence after.

Props (2)

Prop	Type	Default	Description
de	string	—	German haiku text (newline-separated lines)
en	string	—	English translation

JapanesePoemui

components/ui/JapanesePoem

Large display Japanese text strip. Used inside Marquee for full-bleed poem (Datsuzoku). Renders default poem when no children.

無限の沈黙である私はお前に言葉を與へてやろう。

Props (1)

Prop	Type	Default	Description
as	ElementType	"span"	Rendered element

QuoteAttributionui

components/ui/QuoteAttribution

Attribution footer for Blockquote. — Author, Source (optional link). Renders null when neither author nor source provided.

Props (3)

Prop	Type	Default	Description
author	string	—	Author name
source	string	—	Work title
sourceUrl	string	—	Optional link for source

Switchui

components/ui/switch

shadcn/ui Switch toggle. Two sizes: default and sm.

Props (1)

Prop	Type	Default	Description
size	"default" \| "sm"	"default"	Toggle size

Tooltipui

components/ui/tooltip

shadcn/ui Tooltip. Wrap trigger in TooltipTrigger, content in TooltipContent. Requires TooltipProvider at root. Use client:load — TooltipContent uses a portal and requires the DOM.

Requires client:load — portal-based, SSR-safe demo not possible. Pattern: TooltipProvider > Tooltip > TooltipTrigger + TooltipContent

Content Components

Bannercontent

components/content/Banner

Aside callout. Default and accent (left Beni border) tones. Optional collapsible disclosure.

Props (3)

Prop	Type	Default	Description
tone	"default" \| "accent"	"default"	Visual emphasis
summary	string	—	Renders as <details> with this summary label
open	boolean	—	Initial open state for disclosure

Blockquotecontent

components/content/Blockquote

Styled blockquote with optional attribution.

The discipline of leaving things out is the discipline that matters most.

Pullquotecontent

components/content/Pullquote

Large display quote for editorial emphasis. Boska, full-bleed within column.

The space between is not empty — it is ma.

InlineCodecontent

components/content/InlineCode

Inline code span. Fira Code, Kiri background, radius-1.

Use var(--color-beni) for accent elements. Never use --color-sumi on near-black backgrounds.

Color Components

ColorSwatchPrimarycontent

components/content/ColorSwatchPrimary

Large color swatch card with hex, name, kanji, and usage description.

紅

Beni#900B20

Accent, links, focus ring

墨

Sumi#0E0D0C

Primary text, headings

和紙

Washi#E6E6E6

Primary background

Props (4)

Prop	Type	Default	Description
color	string	—	Hex color value
name	string	—	Color name
kanji	string	—	Japanese character
description	string	—	Usage description

ColorSwatchcontent

components/content/ColorSwatch

Standard color swatch with name, hex, optional kanji and description.

Kiri

#F2F2F0

Card backgrounds

Usuzumi

#C8C8C4

Borders, dividers

Hai

#A0A09C

Muted text, captions

Nezumi

#6B6B67

Mid-tone borders

Props (4)

Prop	Type	Default	Description
color	string	—	Hex color value
name	string	—	Color name
kanji	string	—	Japanese character (optional)
description	string	—	Usage note (optional)

ColorSwatchMinicontent

components/content/ColorSwatchMini

Inline 16×16 color chip. Used within text or dense tables.

Beni Beni Light Beni Muted Beni Pale Beni Dark

Props (1)

Prop	Type	Default	Description
color	string	—	Hex color value

ColorStackcontent

components/content/ColorStack

Grid wrapper for grouping ColorSwatch cards into a responsive strip.

Yoru

#1A1918

Dark surface, footer

Sumi

#0E0D0C

Primary text

Nezumi

#6B6B67

Mid borders

Hai

#A0A09C

Muted text

Usuzumi

#C8C8C4

Dividers

Washi

#E6E6E6

Background

Kiri

#F2F2F0

Cards

Media Cards

AudioCardcontent

components/content/AudioCard

Card for audiobooks and podcasts. Cover image with placeholder icon fallback. Badges for featured/paid/language.

Anatomy of the State

Murray N. Rothbard

Favorite

Aethervox Patreon

Christian Schneider

PaidDE

Props (9)

Prop	Type	Default	Description
title	string	—	Card title (required)
kind	"audiobook" \| "podcast"	—	Sets placeholder icon and contributor label
author	string	—	Audiobook author
moderator	string	—	Podcast host
cover	string	—	Cover image URL
featured	boolean	—	Shows Favorite badge
paid	boolean	—	Shows Paid badge
language	string	—	Shows language badge
links	MediaLink[]	—	Platform links rendered via MediaLinkRow

BookCardcontent

components/content/BookCard

Card for book entries. Optional ASIN auto-generates Amazon cover and link.

Anatomy of the State

Murray N. Rothbard

Favorite

Props (5)

Prop	Type	Default	Description
title	string	—	Book title (required)
author	string	—	Author name
asin	string	—	Auto-generates Amazon cover and link
cover	string	—	Override cover image URL
featured	boolean	—	Favorite badge

VideoCardcontent

components/content/VideoCard

Card for video entries. Auto-generates YouTube thumbnail from youtubeId. Play overlay on hover.

EVERY ANGEL IS TERRIFYING

PRAXIS

Favorite

Playlist

Out of Frame

Foundation for Economic Education

Props (6)

Prop	Type	Default	Description
title	string	—	Video title (required)
url	string	—	Link URL (required)
youtubeId	string	—	YouTube ID for thumbnail
kind	"video" \| "playlist" \| "channel"	"video"	Shows badge for non-video types
channel	string	—	Channel name
featured	boolean	—	Favorite badge

MediaLinkRowcontent

components/content/MediaLinkRow

Horizontal row of platform icon links. Renders null when all links have no url.

Props (1)

Prop	Type	Default	Description
links	MediaLink[]	—	Array of { kind, url?, label? } objects

Platform Flags

AppleTVFlag / NetflixFlag / PrimeVideoFlagcontent

components/content/AppleTVFlag

Inline branded service badges. Each links to the show on its platform via id prop.

Watch it on tv or N or P.

Props (1)

Prop	Type	Default	Description
id	string	—	Platform-specific show ID

Platformcontent

components/content/Platform

Generic platform icon badge. Renders a 16×16 device icon with accessible label.

iPhone / iPad Desktop Apple TV Web

Props (1)

Prop	Type	Default	Description
kind	"iphone" \| "desktop" \| "appletv" \| "web"	—	Platform type

Books

Bookcontent

components/content/Book

Book cover image card with border, shadow, and hover state. Max width 250px.

Props (2)

Prop	Type	Default	Description
src	string	—	Cover image URL (required)
alt	string	—	Accessible description

AmazonBookcontent

components/content/AmazonBook

Linkable Book component that auto-generates Amazon cover URL and affiliate link from ASIN.

Props (2)

Prop	Type	Default	Description
asin	string	—	Amazon Standard Identification Number
alt	string	—	Accessible book title

Bookshelfcontent

components/content/Bookshelf

Auto-fill grid for Book/AmazonBook components. Columns min 150px, auto-fill.

Embeds

YouTubecontent

components/content/YouTube

Responsive YouTube embed via lite-youtube web component. Requires client-side JS.

Props (2)

Prop	Type	Default	Description
id	string	—	YouTube video ID (required)
title	string	"YouTube video"	Accessible play label

Spotifycontent

components/content/Spotify

Spotify show/episode embed iframe. Height fixed at 352px.

Props (1)

Prop	Type	Default	Description
id	string	—	Spotify show ID (required)

Images

Figurecontent

components/content/Figure

figure/figcaption wrapper. Supports multi-image side-by-side via flex children and [&_div]:grow.

Sample figure image — The Ma kanji — gate with light passing through.

Props (2)

Prop	Type	Default	Description
caption	string	—	Figcaption text
size	"regular" \| "wide" \| "fullsize"	—	Layout hint (used by MDX grid context)

Imagecontent

components/content/Image

Rich image with optional lightbox, caption, and source attribution.

Props (6)

Prop	Type	Default	Description
src	string	—	Image URL (required)
alt	string	—	Accessible description
caption	string	—	Figcaption text
enableLightbox	boolean	true	Click to expand
source	string	—	Attribution source text
sourceUrl	string	—	Attribution URL

MarkdownImagecontent

components/content/MarkdownImage

Lightbox-enabled image auto-mapped to bare ![]() markdown syntax in MDX.

Props (3)

Prop	Type	Default	Description
src	string	—	Image URL
alt	string	—	Accessible description
noMargin	boolean	—	Suppresses bottom margin

Inline Content

DownloadLinkcontent

components/content/DownloadLink

Download link with animated download icon. Underline slides in on hover.

Download Ma Design Tokens (JSON)

Props (2)

Prop	Type	Default	Description
href	string	—	File URL (required)
text	string	—	Link label (required)

EmailLinkcontent

components/content/EmailLink

Obfuscated mailto link. Click copies assembled email to clipboard, shows tooltip confirmation.

Write an email

Props (4)

Prop	Type	Default	Description
data-name	string	—	Email username
data-domain	string	—	Domain without TLD
data-tld	string	—	Top-level domain
text	string	"Email"	Link label

ProductLinkcontent

components/content/ProductLink

Inline Amazon affiliate link via ASIN. Renders as TextLink with product tracking.

Read The Elements of Style for clear, direct prose.

Props (2)

Prop	Type	Default	Description
asin	string	—	Amazon ASIN
text	string	—	Link label

Rubycontent

components/content/Ruby

Ruby annotation for CJK and phonetic text. Renders ruby/rt with optional reading above base.

The kanji 間（ま） means the space between.

Props (2)

Prop	Type	Default	Description
base	string	—	Base text (required)
text	string	—	Annotation text (rt element)

Versecontent

components/content/Verse

Blockquote for poetry with preserved whitespace (pre inside blockquote). Variants: center and left.

Still waters —
a leaf falls without a sound.
The space between.

Still waters —
a leaf falls without a sound.
The space between.

Props (1)

Prop	Type	Default	Description
variant	"center" \| "left"	"center"	Alignment variant

RSSTextcontent

components/content/RSSText

No-op component — renders null. Placeholder for RSS-only content that should not appear on the web.

Renders nothing — placeholder for RSS-only content.

Interactive Components

BarChartinteractive

components/interactive/BarChart

Bar chart powered by Recharts. Accepts Chart.js-compatible data shape.

Requires client:visible — Recharts ResponsiveContainer needs DOM measurement. Usage: <BarChart client:visible data={chartData} />

Props (1)

Prop	Type	Default	Description
data	{ labels: string[]; datasets: { data: number[] }[] }	—	Chart data

DoughnutChartinteractive

components/interactive/DoughnutChart

Doughnut chart powered by Recharts. Custom tooltip and legend.

Requires client:visible — Recharts ResponsiveContainer needs DOM measurement. Usage: <DoughnutChart client:visible data={chartData} />

Props (1)

Prop	Type	Default	Description
data	{ labels: string[]; datasets: { data: number[] }[] }	—	Chart data

Marqueeinteractive

components/interactive/Marquee

Continuous horizontal scroll ticker. Auto-measures content width and sets animation duration via CSS custom property.

Props (1)

Prop	Type	Default	Description
pixelsPerSecond	number	65	Scroll speed in px/s

Roadmapinteractive

components/interactive/Roadmap

Vertical timeline list of RoadmapMilestone entries connected by a crimson dot rail.

Props (1)

Prop	Type	Default	Description
milestones	RoadmapMilestoneData[]	—	Array of milestone entries

SeriesStepperinteractive

components/interactive/SeriesStepper

Collapsible series navigator with progress rail. Shows current position in a multi-part essay series.

Props (3)

Prop	Type	Default	Description
steps	SeriesStep[]	—	Series steps with id and title
currentId	string	—	ID of the currently active step
seriesName	string	—	Accessible series label

TableOfContentsinteractive

components/interactive/TableOfContents

In-page TOC with active section tracking via IntersectionObserver. Collapsed on mobile, expanded on xl+.

Props (1)

Prop	Type	Default	Description
headings	{ id: string; text: string }[]	—	Section headings to track

HoverPreviewinteractive

components/interactive/HoverPreview

Global floating image preview. Mounts a single hidden img that follows the cursor over data-hover-preview anchors. No visible initial state.

No visible output — renders a hidden positioned img that activates on anchors with data-hover-preview attribute.

LightboxRootinteractive

components/interactive/LightboxRoot

Global lightbox portal. Listens for clicks on data-lightbox=true images and renders a full-screen modal. No visible initial state.

Active on this page — click the Image or MarkdownImage showcase above to trigger it.