directory · mdxui

Benchlist wears directory. Open the whole page

Best for. Directories, listings and marketplaces, and the docs beside a landing. Monochrome, Inter for everything, no dividers, light and dark.

Swatches

resolveTokens(THEMES.directory.theme)

Contrast is the WCAG 2 ratio of each pair, computed from the published values. Body text needs 4.5:1 (AA); a rule is not text and gets no level. Click a chip to copy its custom property.

Every value as a table

From resolveTokens(THEMES.directory.theme) in @mdxui/themes@7.0.0-alpha.0, with the dark palette the Theme emits.

Role	Light	Dark
`paper`	`#FFFFFF`	`#0A0A0A`
`panel`	`#FAFAFA`	`#111111`
`ink`	`#171717`	`#EDEDED`
`ink-soft`	`#404040`	`#D4D4D4`
`rule`	`#E5E5E5`	`#262626`
`rule-soft`	`#EBEBEB`	`#1F1F1F`
`accent`	`#171717`	`#EDEDED`
`accent-ink`	`#FFFFFF`	`#0A0A0A`
`plate`	`#0A0A0A`	`#FFFFFF`
`plate-ink`	`#EDEDED`	`#171717`
`plate-rule`	`#262626`	`#E5E5E5`
`pass`	`#15803D`	`#4ADE80`
`warn`	`#B45309`	`#FBBF24`
`fail`	`#B91C1C`	`#F87171`

Typefaces

DisplayInter--display · loaded by head

The page holds whatever the agent writes.

TextInter--sans · loaded by head

A Theme is a Brand’s tokens plus its render policies. Change one word in the record and every page redraws in these typefaces: 0123456789.

MonoJetBrains Mono--mono · loaded by head

"theme": "directory"  →  renderPage(page, { theme })

As a table

Role	Typeface
Display	Inter
Text	Inter
Mono	JetBrains Mono

The head lines load Inter and JetBrains Mono.

Policies

Four policies change the markup a page renders. Each pair below holds the tokens still and changes the markup.

Policy	Value
Dividers	`none`
Markers	off
Featured plan	`rule`
Icons	`inline`
Scheme	`auto`, light and dark

Dividers

dividers nonedirectory, as published

dividers rulequaypoint’s markup in directory’s tokens

Both frames show the first sections of the home page, in directory’s tokens and typefaces. Nothing else this section draws differs. Their featured policy differs as well, and has nothing to draw on this section.

Markers

markers offdirectory, as published

markers oncertificate’s markup in directory’s tokens

Both frames show a steps section, whose eyebrow takes a marker, in directory’s tokens and typefaces. Nothing else this section draws differs. Their dividers policy differs as well, and has nothing to draw on this section.

Featured plan

featured ruledirectory, as published

featured platequaypoint’s markup in directory’s tokens

Both frames show a pricing section with one featured plan, in directory’s tokens and typefaces. Nothing else this section draws differs. Their dividers policy differs as well, and has nothing to draw on this section.

Icons

icons inlinedirectory, as published

icons imagevaultline’s markup in directory’s tokens

Both frames show a feature-grid section with an icon per item, in directory’s tokens and typefaces. Nothing else this section draws differs. Their dividers and featured policies differ as well, and have nothing to draw on this section. Under icons image, each icon’s color is set at render, so the right frame’s icons keep vaultline’s colors.