Design system

The colours, type, art and parts that candyboudoir.com and stash.candyboudoir.com are built from. Both sites load one stylesheet, brand.css, and this page uses it too.

A woman with a red bob and cat-eye glasses, in a pink cardigan, sitting in a pink armchair with a laptop

Colour

Each theme fills the same roles. The page follows the system setting, and the button at the end of the top bar switches between auto, light and dark. Contrast is measured against the ground the colour sits on.

Light

Role Colour Contrast
Ground #fff0e5
Text #1a1310 16.5:1
Secondary text #6b4a40 7.0:1
Links #a80217 7.0:1
Tip block, with ivory text #1a1310 16.5:1

Dark

Role Colour Contrast
Ground #1d1512
Text #fff0e5 16.1:1
Secondary text #c8a89c 8.2:1
Links #f87289 6.6:1
Tip block, with ink text #fff0e5 16.5:1

The pink band, in both themes

Role Colour Contrast
Ground #f87289
Text #1a1310 6.8:1
Secondary text #3a2420 5.3:1

Type

Two families, both under the SIL Open Font License and served with the site. Young Serif sets titles and names. Libre Franklin sets everything you read.

  • Page title

    Young Serif, 3 to 5.5rem, the first heading on a page.

  • Section title

    Young Serif, 2.5 to 4rem, in the left columns beside the section.

  • Cherry Pick0.6.3

    Young Serif at 1.75rem for a theme or plugin name, with its version in Libre Franklin.

  • I make free themes and plugins for Stash.

    Libre Franklin 500, 1.25 to 1.75rem, for the opening paragraph.

  • Every theme, plugin and update is free.

    Libre Franklin 400 at 1.0625rem for body text.

  • https://stash.candyboudoir.com/index.yml

    The system monospace, for source URLs, paths and anything typed into Stash.

Art

The wordmark and the character are the only decoration. Each piece has transparent, soft edges, so it sits on either ground.

CandyBoudoir in script, Candy in cherry red and Boudoir in ink, with a bonbon over the i
Wordmark. On light grounds, at the top of candyboudoir.com and small in the plugin site's top bar.
The same wordmark with Boudoir in ivory
Wordmark for the dark theme. Boudoir turns ivory, and the red and the bonbon stay.
The seated character with the whole armchair
Character. Beside the wordmark on candyboudoir.com, sitting on the pink band.
The seated character, cut through the elbow and the armchair at the left
Character, cut at the left. On the plugin site and this page, set against the page's left edge.
The whole seated figure in her armchair, down to her heels
Full figure. On the 404 pages of both sites.
The character's face, winking, drawn flat in red and ivory
Portrait. In the tip block, and drawn down into the favicon.
A red bonbon in a pink twisted wrapper
Bonbon. In the footer of both sites, and over the i of the wordmark.
The sharing card: the character beside the wordmark on ivory
Sharing card. The picture a link to either site shows in chats and on social sites.

Components

Links and buttons

A link A link that leaves the site Button

Theme button

The pink band, with steps and a copy field

  1. In Stash, open Settings > Plugins > Available Plugins and click Add source.

  2. Fill in the field and click Confirm.

    Source URLhttps://stash.candyboudoir.com/index.yml

Theme and plugin rows

  • Tag Candy0.3.0

    Tag Candy matches each tag to a glossy sticker icon by its StashDB link or its name, from more than 900 icons inside the plugin.

    See the icons

News

  1. Tag Candy 0.3.0 carries its icons inside the plugin, so Apply icons works again.

Tip block

Tip me on Ko-fi

The one solid block on a page: ink in the light theme, ivory in the dark theme.

Tip on Ko-fi

Rules

  • The wordmark and the character are the only decoration. Rules and space group things.
  • No cards, shadows, glows, pills, badges, coloured stripes, gradients or tracked capitals.
  • Headings and labels are in sentence case.
  • Numbers appear only for real sequences, dates and versions.
  • Pictures show the work, as theme screenshots, or the brand art.
  • candyboudoir.com speaks in the first person. Every sentence says what a thing does in plain words, with no figure that goes stale.
  • New art goes on the dark ground at twice its size before it ships. A light rim around it is background left over from its cutout.