Reference

The palette, and where each colour may be used.

The complete pastel brand: the six sticks with their contrast measurements, the roles they fill, and what the stylesheet styles.

Enabling it

brand: _extensions/mcanouil/pastel/brand.yml
format:
  atelier-html:
    theme:
      light:
        - brand
        - _extensions/mcanouil/pastel/pastel.scss
      dark:
        - brand
        - _extensions/mcanouil/pastel/pastel.scss

brand gives Quarto the palette; the stylesheet is what spends it. Both schemes take the same stylesheet, which resolves the light and dark values itself.

The extension contributes project.brand as well, so a project that adds it and names no brand of its own still gets the palette. Naming it is what lets a project put another brand first, and what these sites do.

Sass variables

Two knobs, set in a stylesheet loaded before pastel.scss:

The stylesheet’s Sass variables.
Variable	Default	Description
`$pastel-tint-alpha`	`0.28`	Strength of the pastel washes behind callouts, tabsets, tables, and quotes. Individual surfaces scale it rather than replacing it.
`$pastel-grain-opacity`	`0.07`	Opacity of the paper tooth. `0` turns the grain off.

The palette

Six sticks, each with a pastel for fills, a deep mix for text and links on light paper, and a chalk value for dark mode.

The six sticks and their contrast ratios.
Stick	Pastel	Deep	Chalk	Link, light	Link, dark
mint	`#A9DCC9`	`#1C7059`	`#9FD9C4`	5.31	10.75
sky	`#A6C9E2`	`#1D6790`	`#9CC6E2`	5.49	9.44
lemon	`#EFDDA0`	`#77620F`	`#E7D598`	5.27	11.71
coral	`#EDAFA8`	`#A04238`	`#EBA9A1`	5.60	8.74
peach	`#EFC6A3`	`#8E5720`	`#EAC09B`	5.27	10.20
sage	`#C3D3A8`	`#566B2E`	`#BCCEA0`	5.27	10.16

Body text reaches 12.75 on light paper and 14.16 on night, both AAA.

Each stick also carries one of Bootstrap’s semantic roles.

The semantic roles and the sticks that carry them.
Role	Stick
`primary`	mint
`secondary`, `info`	sky
`tertiary`	lemon
`success`	sage
`warning`	peach
`danger`	coral

Mint carries primary, so a link never competes with the peach and coral that carry status.

Important

The pastels measure 1.20 to 1.65 against the light paper. In the light scheme they are fills and tints only: never text, and never a border that has to be seen for the page to work.

In dark mode the pastel is the ink, which makes the dark scheme the more colourful of the two.

What the stylesheet styles

brand.yml alone gives a palette and nothing else. pastel.scss applies it to:

the paper, including its tooth;
headings, each hue in turn;
inline code, with a blush behind it;
callouts, tabsets, tables, and blockquotes, as tints;
the table of contents panel, tinted, with a real active state.

The page chrome, meaning the navbar, the footer, and the docked sidebar, is left to atelier, which derives it from the same brand from 0.9.0 onwards.

Limitations

HTML output only. PDF, Typst, and Word are unaffected.
The stylesheet assumes atelier for the chrome; used with another theme, the page body is styled and the chrome is not.