callboard · mdxui

Vanroster wears callboard. Light only by this Theme’s policy.Open the whole page

Best for. B2B SaaS with a loud brand, events and venues. House paper, stage black, a violet wash light and poster lettering in Bricolage Grotesque.

Swatches

resolveTokens(THEMES.callboard.theme)Light only by this Theme’s policy

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.callboard.theme) in @mdxui/themes@7.0.0-alpha.0.

Role	Light
`paper`	`#F6F5F8`
`panel`	`#FFFFFF`
`ink`	`#16121F`
`ink-soft`	`#332B42`
`rule`	`#DAD6E2`
`rule-soft`	`#E7E4ED`
`accent`	`#6D28D9`
`accent-ink`	`#FFFFFF`
`plate`	`#17121F`
`plate-ink`	`#F5F3F8`
`plate-rule`	`#342B44`
`pass`	`#15803D`
`warn`	`#B45309`
`fail`	`#B91C1C`

Typefaces

DisplayBricolage Grotesque--display · loaded by head

The page holds whatever the agent writes.

TextInstrument Sans--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.

MonoDM Mono--mono · loaded by head

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

As a table

Role	Typeface
Display	Bricolage Grotesque
Text	Instrument Sans
Mono	DM Mono

The head lines load Bricolage Grotesque, Instrument Sans and DM Mono.

Policies

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

Policy	Value
Dividers	`rule`, after article `none`
Markers	off
Featured plan	`plate`
Icons	`inline`
Scheme	`light`, light only

Dividers

dividers rulecallboard, as published

dividers nonedirectory’s markup in callboard’s tokens

Both frames show the first sections of the home page, in callboard’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 offcallboard, as published

markers oncertificate’s markup in callboard’s tokens

Both frames show a steps section, whose eyebrow takes a marker, in callboard’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.

Featured plan

featured platecallboard, as published

featured ruledirectory’s markup in callboard’s tokens

Both frames show a pricing section with one featured plan, in callboard’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 inlinecallboard, as published

icons imagevaultline’s markup in callboard’s tokens

Both frames show a feature-grid section with an icon per item, in callboard’s tokens and typefaces. Nothing else this section draws differs. Under icons image, each icon’s color is set at render, so the right frame’s icons keep vaultline’s colors.

Schemes

scheme: 'light'

Declares dark, emits light

Light only by this Theme’s policy.

callboard declares a dark palette of 48 roles and sets scheme: 'light', so compileTheme checks the palette and emits none of it. Changing that one word to 'auto' turns it on. The values below are data, not a render.

paper

panel

ink

ink-soft

rule

accent

accent-ink

plate

plate-ink

Light above, declared dark below. Declared ink on declared paper: 16.6:1.

Document color-scheme: light. The scheme control stays off: a dark render of callboard does not exist.