Alpha: Ships on npm at 7.0.0-alpha.07.0.0-alpha.0

Policies

The choices a design makes once, stated as data beside its tokens: dividers, markers, the featured plan, icon delivery and scheme, each shown as two renders.

The 5 policies

PolicyValuesWhat it decides
dividersa divider policyWhat falls between two sections: none, rule, rule-contained or hatch
markerstrue, falseWhether a small accent square sits before each eyebrow and fine-print item
featuredrule, plateHow the featured plan in pricing stands apart: an inset rule and a stamp, or a plate with a chip
iconsinline, imageWhether an icon is inline SVG in the text's color, or an image with its color resolved from the Theme
schemeauto, lightWhether the page follows the reader's color scheme, or renders its light palette in every scheme

The first four change the markup a page renders, so they take effect when the page renders. scheme changes only the stylesheet.

Reading a pair

Each pair below wears one Theme's tokens. The left frame is a section rendered under that Theme. The right frame is the same section rendered under the bundled Theme whose policies differ most narrowly, with the left Theme's compileTheme output in place of its own. Pick the Theme whose tokens both frames wear; the caption names any other policy the two differ in.

Dividers

A section never declares its own dividers. The composer chooses each one from the pair of sections it sits between, under the Theme's divider policy:

FieldChooses by
defaultAny pair no other field matches
afterThe earlier section's kind; it wins over every other field
afterSurfaceThe earlier section's shell surface
aroundEither neighbor's kind
withinPlateTwo plate sections in a row

The quaypoint policy rules every pair, sets nothing after an article or a plate section, and draws a contained rule between two plates:

{ "default": "rule", "after": { "article": "none" }, "afterSurface": { "plate": "none" }, "withinPlate": "rule-contained" }
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

certificate is the one bundled Theme with markers on: an accent square before each eyebrow and fine-print item.

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.

plate sets the featured plan on the plate with a chip; rule keeps it on paper with an inset accent rule and a stamp.

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.

Icon delivery

A Theme chooses one delivery for every icon. Under image, the render context resolves each icon's role to the Theme's literal value on the background it sits on. The two deliveries rasterize a few pixels apart.

icons imagevaultline, as published
icons inlinequaypoint’s markup in vaultline’s tokens
Both frames show a feature-grid section with an icon per item, in vaultline’s tokens and typefaces. Nothing else this section draws differs.

Scheme

scheme has no dark-only value. A design that is dark in every scheme puts its dark palette in light and declares no dark. See Dark mode.

On this page