certificate · mdxui

Diffkeel wears certificate. Open the whole page

Best for. Developer tools and API products whose proof is a test or a measurement. Lab paper, one engineering superfamily, hatched dividers, and a dark palette that follows the reader.

Swatches

resolveTokens(THEMES.certificate.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.certificate.theme) in @mdxui/themes@7.0.0-alpha.0, with the dark palette the Theme emits.

Role	Light	Dark
`paper`	`oklch(0.930 0.004 175)`	`oklch(0.185 0.014 210)`
`panel`	`oklch(0.968 0.003 175)`	`oklch(0.225 0.016 212)`
`ink`	`oklch(0.205 0.021 210)`	`oklch(0.930 0.010 185)`
`ink-soft`	`oklch(0.445 0.018 200)`	`oklch(0.680 0.016 195)`
`rule`	`oklch(0.845 0.008 190)`	`oklch(0.320 0.016 212)`
`rule-soft`	`oklch(0.890 0.006 190)`	`oklch(0.270 0.014 212)`
`accent`	`oklch(0.470 0.110 185)`	`oklch(0.760 0.128 178)`
`accent-ink`	`oklch(0.992 0.006 180)`	`oklch(0.185 0.014 210)`
`plate`	`oklch(0.128 0.022 222)`	`oklch(0.128 0.022 222)`
`plate-ink`	`oklch(0.910 0.014 190)`	`oklch(0.910 0.014 190)`
`plate-rule`	`oklch(0.280 0.020 220)`	`oklch(0.280 0.020 220)`
`pass`	`oklch(0.500 0.135 158)`	`oklch(0.760 0.145 160)`
`warn`	`oklch(0.545 0.130 70)`	`oklch(0.790 0.140 70)`
`fail`	`oklch(0.545 0.195 27)`	`oklch(0.700 0.180 27)`

Typefaces

DisplayIBM Plex Sans--display · loaded by head

The page holds whatever the agent writes.

TextIBM Plex 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.

MonoIBM Plex Mono--mono · loaded by head

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

As a table

Role	Typeface
Display	IBM Plex Sans
Text	IBM Plex Sans
Mono	IBM Plex Mono

The head lines load IBM Plex Sans and IBM Plex Mono.

Policies

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

Policy	Value
Dividers	`hatch`, after hero `hatch`, around band `rule`, closing `rule`
Markers	on
Featured plan	`rule`
Icons	`inline`
Scheme	`auto`, light and dark

Dividers

dividers hatchcertificate, as published

dividers nonedirectory’s markup in certificate’s tokens

Both frames show the first sections of the home page, in certificate’s tokens and typefaces. certificate and directory also differ in markers, which shows here too.

Markers

markers oncertificate, as published

markers offdirectory’s markup in certificate’s tokens

Both frames show a steps section, whose eyebrow takes a marker, in certificate’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 rulecertificate, as published

featured platequaypoint’s markup in certificate’s tokens

Both frames show a pricing section with one featured plan, in certificate’s tokens and typefaces. certificate and quaypoint also differ in markers, which shows here too. Their dividers policy differs as well, and has nothing to draw on this section.

Icons

icons inlinecertificate, as published

icons imagevaultline’s markup in certificate’s tokens

Both frames show a feature-grid section with an icon per item, in certificate’s tokens and typefaces. certificate and vaultline also differ in markers, which shows here too. 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.