{"id":240,"date":"2026-11-03T00:07:09","date_gmt":"2026-11-03T05:07:09","guid":{"rendered":"https:\/\/tailthemes.com\/wordpress\/demo\/table-and-type\/v3\/mireille\/style-guide\/"},"modified":"2026-11-03T00:07:09","modified_gmt":"2026-11-03T05:07:09","slug":"style-guide","status":"publish","type":"page","link":"https:\/\/preview.tailthemes.com\/table-and-type\/style-guide\/","title":{"rendered":"Style guide"},"content":{"rendered":"\n
\n\t\n\t
\n\t\t\n\t\t

Style guide<\/p>\n\t\t\n\t\t\n\t\t

The parts, unassembled<\/h1>\n\t\t\n\t\t\n\t\t

Every section this theme ships, once each, under the slug you type into the inserter to place it. The token sheet opens the page because every one of the specimens below is painted out of it.<\/p>\n\t\t\n\t\t\n\t\t

Before launch<\/span>This page is a demonstration. Delete it, and the navigation row that points at it, before the site goes live \u2014 nothing else in the theme depends on either.<\/p>\n\t\t\n\t<\/div>\n\t\n<\/section>\n\n

table-and-type\/token-sheet<\/p>

The tokens, the ladder and the presets<\/h2>

Every swatch paints from the live custom property rather than a printed hex, so the sheet cannot go stale in either mode or inside any variation.<\/p><\/div>\n

\n\t\n\t
\n\t\t\n\t\t

Style guide<\/p>\n\t\t\n\t\t\n\t\t

The tokens<\/h2>\n\t\t\n\t\t\n\t\t

Two modes, four variations, one set of values that every template, pattern and block reads.<\/p>\n\t\t\n\t<\/div>\n\t\n\n\t

Surfaces<\/h3>
<\/div>

Page<\/p>

–wp–preset–color–background<\/p><\/div>

<\/div>

Card stock<\/p>

–wp–preset–color–card<\/p><\/div>

<\/div>

Quiet ground<\/p>

–wp–preset–color–muted<\/p><\/div>

<\/div>

Secondary<\/p>

–wp–preset–color–secondary<\/p><\/div>

<\/div>

Hairline<\/p>

–wp–preset–color–border<\/p><\/div><\/div><\/div>

Ink and brand<\/h3>
<\/div>

Ink<\/p>

–wp–preset–color–foreground<\/p><\/div>

<\/div>

Quiet ink<\/p>

–wp–preset–color–muted-foreground<\/p><\/div>

<\/div>

Stamp red<\/p>

–wp–preset–color–primary<\/p><\/div>

<\/div>

Served-now chip<\/p>

–wp–preset–color–accent<\/p><\/div>

<\/div>

Link<\/p>

–wp–custom–color–link<\/p><\/div>

<\/div>

Focus ring<\/p>

–wp–preset–color–ring<\/p><\/div><\/div><\/div>

The slip\u2019s own material<\/h3>

These five hold the same value in both modes. A sheet of paper does not relight itself when the room around it does; only its clip and its shadow follow the mode.<\/p>

<\/div>

Slip<\/p>

–wp–custom–color–slip<\/p><\/div>

<\/div>

Slip ink<\/p>

–wp–custom–color–slip-ink<\/p><\/div>

<\/div>

Stamp<\/p>

–wp–custom–color–slip-stamp<\/p><\/div>

<\/div>

Slip edge<\/p>

–wp–custom–color–slip-edge<\/p><\/div>

<\/div>

Clip<\/p>

–wp–custom–color–clip<\/p><\/div><\/div><\/div>

Status<\/h3>

A dot is never the only signal; the sentence beside it carries the claim.<\/p>

<\/div>

Open<\/p>

–wp–custom–color–positive-fill<\/p><\/div>

<\/div>

Warning<\/p>

–wp–custom–color–warning-fill<\/p><\/div>

<\/div>

Critical<\/p>

–wp–custom–color–critical-fill<\/p><\/div><\/div><\/div>

The type ladder<\/h3>

Fraunces sets the headings, the card and the wordmark; Schibsted Grotesk carries the body and the chrome; JetBrains Mono prints every figure, time and docket label.<\/p>

Lunch, until half past two<\/p>

display-xl \u00b7 2.93rem, fluid<\/p><\/div>

Lunch, until half past two<\/p>

display \u00b7 2.34rem, fluid<\/p><\/div>

Lunch, until half past two<\/p>

xx-large \u00b7 1.875rem<\/p><\/div>

Lunch, until half past two<\/p>

x-large \u00b7 1.5rem<\/p><\/div>

Lunch, until half past two<\/p>

large \u00b7 1.125rem<\/p><\/div>

Lunch, until half past two<\/p>

medium \u00b7 1rem<\/p><\/div>

Lunch, until half past two<\/p>

small \u00b7 0.875rem<\/p><\/div>

Lunch, until half past two<\/p>

x-small \u00b7 0.75rem<\/p><\/div><\/div><\/div>\n\t\n\t

\n\t\t\n\t\t

The variations<\/h3>\n\t\t\n\t\t\n\t\t

A variation is a token swap and nothing else: it repaints the room and the ink, never the paper, and it moves nothing.<\/p>\n\t\t\n\t\t\n\t\t

\n\t\t\t

Base<\/p>

Zinc. A Paris-style bistro: warm limestone paper, stamp red, one gold chip. Follows the reader\u2019s system setting and the light\/dark toggle.<\/p><\/div>

Dark<\/p>

The dark half of Zinc as the palette, in both modes: a site that is dark whatever the visitor\u2019s system says.<\/p><\/div>

Cresson<\/p>

Watercress green and a blush slip, for a morning-and-brunch caf\u00e9.<\/p><\/div>

Fa\u00efence<\/p>

Enamel cobalt and an apricot slip, for a tiled bakery-caf\u00e9.<\/p><\/div>\t\t<\/div>\n\t\t\n\t\t\n\t\t

Note<\/span>The four are named here rather than drawn side by side: a style variation is the whole document\u2019s palette, so a second one cannot be painted inside the first. Switch them in Styles \u203a Browse styles and this sheet repaints \u2014 which is the demonstration.<\/p>\n\t\t\n\t<\/div>\n\t\n<\/section>\n

table-and-type\/served-card<\/p>

The slip, and the card\u2019s rows<\/h2>

The signature: a card set once a season, with dated sheets clipped to its corner and one row struck by the sheet that replaced it.<\/p><\/div>\n

\n\t\n\t
<\/div>\n\t\n\t\n\t
\n\t\t\n\t\t
\n\t\t\t\n\t\t\t

Today\u2019s card<\/p>\n\t\t\t\n\t\t\t\n\t\t\t

On the zinc today<\/em><\/h2>\n\t\t\t\n\t\t\t\n\t\t\t

The card is set once a season. What changes for a day is clipped to its corner.<\/p>\n\t\t\t\n\t\t<\/div>\n\t\t\n\t\t\n\t\t

\n\t\t\t\n\t\t\t
\n\t\t\t\t\t\n\t\t

Brunch and Souper are not served today.<\/p>\n\t<\/div>\n\t<\/div>\n\t\t\t\n\t\t\t\n\t\t\t

See the whole card<\/a><\/p>\n\t\t\t\n\t\t<\/div>\n\t\t\n\t<\/div>\n\t\n\t

\"Petit-d\u00e9jeuner<\/figure>

Le petit-d\u00e9jeuner, at the zinc<\/p>

\"A<\/figure><\/div>
\n\t
01<\/span>

Le petit-d\u00e9jeuner<\/h3>

Tuesday to Friday \u00b7 07:30\u00a0\u2013\u2060\u00a011:00<\/p>

Card last changed Sun 1 Nov<\/p>