quaypoint · mdxui

Harbor tides wears quaypoint. Light only by this Theme’s policy.Open the whole page

Best for. API and data products, and anything sold as readings. Chart paper, harbor navy and a signal-orange accent, with Space Grotesk as instrument lettering.

Swatches

resolveTokens(THEMES.quaypoint.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.quaypoint.theme) in @mdxui/themes@7.0.0-alpha.0.

Role	Light
`paper`	`#F4F6F8`
`panel`	`#FFFFFF`
`ink`	`#0F1B2A`
`ink-soft`	`#2C3B4D`
`rule`	`#D3DBE2`
`rule-soft`	`#E3E9EE`
`accent`	`#C2410C`
`accent-ink`	`#FFFFFF`
`plate`	`#0B1F33`
`plate-ink`	`#F1F5F9`
`plate-rule`	`#24384D`
`pass`	`#0F766E`
`warn`	`#B45309`
`fail`	`#B91C1C`

Typefaces

DisplaySpace Grotesk--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": "quaypoint"  →  renderPage(page, { theme })

As a table

Role	Typeface
Display	Space Grotesk
Text	Inter
Mono	JetBrains Mono

The head lines load Space Grotesk, 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	`rule`, after article `none`
Markers	off
Featured plan	`plate`
Icons	`inline`
Scheme	`light`, light only

Dividers

dividers rulequaypoint, as published

dividers nonedirectory’s markup in quaypoint’s tokens

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

markers oncertificate’s markup in quaypoint’s tokens

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

featured ruledirectory’s markup in quaypoint’s tokens

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

icons imagevaultline’s markup in quaypoint’s tokens

Both frames show a feature-grid section with an icon per item, in quaypoint’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.

quaypoint 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 quaypoint does not exist.