Style guide
The pieces this site is built from, all live. Tokens are in src/assets/sass/tokens/, components in src/assets/sass/components/, and the brand rules in the stugoo-design skill.
Colour
Dark only. Blue and pink are the brand pair; moss is for About and Say hello; gold and teal are for illustration and state, used sparingly.
Roles
--color-ink--color-ink-muted--color-rule--color-paper--color-surface--color-primary--color-primary-alt--color-success--color-warning--color-danger--color-focus-ring
Paper and ink
--paper-50--ink-0--ink-50--ink-100--ink-300--ink-500--ink-700--ink-800--ink-900
Blue — writing
--blue-300--blue-500--blue-700--blue-900
Pink — recipes
--pink-300--pink-500--pink-700--pink-900
Moss — about
--moss-300--moss-500--moss-700
Gold and teal
--gold-300--gold-500--gold-700--teal-300--teal-500--teal-700
Red
--red-50--red-100--red-300--red-500--red-600--red-700--red-900
Type
System fonts only: the system UI font for display and body (--font-display, --font-body) and the system monospace for labels (--font-mono).
Statement — the homepage line
Sheet title
Heading 1
Heading 2
Heading 3
Heading 4
Lead paragraph, bold at 18px.
Body copy at 16px on a 1.5 line height, with a link and a bold label.
Eyebrow — mono label
Scale
--text-display-xlRecipes--text-display-lgRecipes--text-display-mdRecipes--text-heading-lgRecipes--text-heading-mdRecipes--text-heading-smRecipes--text-body-lgRecipes--text-body-mdRecipes--text-body-smRecipes--text-captionRecipesSpacing
A 4px base scale.
--space-1--space-2--space-3--space-4--space-5--space-6--space-8--space-10--space-12--space-16--space-20--space-24The mark
Drawn once per page as <symbol id="stugoo-mark"> (src/_includes/mark.html). Anything that shows it is a <use> of that symbol, so there's one copy of the artwork however many crops a page has.
Crops
Every crop of the mark from the site drafts, by where it appeared. Each one is crop(frame) from macros/crop.njk: a <use> zoomed by its viewBox (lib/crops.js). Frames are quoted by number; the master negatives are also on the crop library.
Master negatives — 8a — 30 frames
-
01
01 S bowl, wide
220% / 18% 14% -
02
02 Drip crown
260% / 62% 12% -
03
03 Halftone blob
300% / 22% 58% -
04
04 O counter
340% / 86% 72% -
05
05 Bubble cluster
380% / 16% 64% -
06
06 G tail sweep
420% / 74% 30% -
07
07 Dot stem
460% / 58% 74% -
08
08 Halftone column
500% / 60% 10% -
09
09 S shoulder
540% / 12% 16% -
10
10 Stray bubbles
580% / 93% 92% -
11
11 Centre join
620% / 40% 46% -
12
12 Drip tips
660% / 70% 6% -
13
13 Blob edge
700% / 20% 62% -
14
14 Right bowl
740% / 84% 40% -
15
15 Underbelly
780% / 50% 88% -
16
16 Left overhang
820% / 8% 52% -
17
17 Stem and dots
880% / 64% 68% -
18
18 Far corner
940% / 96% 18% -
19
19 Inner curve
1000% / 34% 30% -
20
20 Bubble pair
1060% / 76% 84% -
21
21 Top hairline
1120% / 24% 8% -
22
22 O wall
1180% / 88% 58% -
23
23 Halftone grain
1240% / 46% 62% -
24
24 Bottom bubble
1300% / 14% 90% -
25
25 Drip root
1360% / 68% 22% -
26
26 Dead centre
1420% / 52% 50% -
27
27 Whole-ish
280% / 50% 50% -
28
28 Corner crown
360% / 90% 8% -
29
29 Far left blob
480% / 6% 74% -
30
30 Lower right
560% / 78% 96%
Landing sheet — 6a — 12 frames
-
01
01 Sheet cell 01
600% / 18% 30% -
02
02 Sheet cell 02
320% / 70% 58% -
03
03 Sheet cell 03
900% / 48% 12% -
04
04 Sheet cell 04
440% / 12% 78% -
05
05 Sheet cell 05
750% / 84% 34% -
06
06 Sheet cell 06
260% / 36% 8% -
07
07 Sheet cell 07
1100% / 26% 62% -
08
08 Sheet cell 08
550% / 80% 80% -
09
09 Sheet cell 09
380% / 8% 22% -
10
10 Sheet cell 10
850% / 62% 88% -
11
11 Sheet cell 11
400% / 30% 46% -
12
12 Sheet cell 12
680% / 92% 20%
Index plates — 4a — 4 frames
-
01
01 Plate — Writing
230% / 22% 38% -
02
02 Plate — Kitchen
340% / 72% 66% -
03
03 Plate — About
520% / 14% 74% -
04
04 Plate — Say hello
180% / 58% 18%
Single frames — 6c, 6d, 7a — 3 frames
-
01
01 Post plate, enlarged
520% / 32% 44% -
02
02 About cell, 2:1
340% / 36% 52% -
03
03 About frame, enlarged
400% / 64% 40%
Components
The header, navigation, footer and pink bar are on every page, including this one. The rest, below, are what the pages are made of.
Labels and section links
.eyebrow is the mono label; .eyebrow--muted for secondary text. Each section has a colour, set with .sheet-link--writing, --kitchen, --about, --hello or --index (the "Stugoo" home link in the header).
Statement
.statement, with .statement__link plus a section colour. The homepage line.
Index list
.index > .index-group: a sticky mono label on the left, .index-rows on the right. Used for the recipes A–Z and writing by year.
Recipe search
.kitchen-search. On the recipes page it only appears with JavaScript, and filters the list as you type.
Tool buttons
.tool: small mono toggles. aria-pressed="true" fills them; .tool--cook fills moss.
Ingredients
.ticks: checkboxes that strike through when ticked, no JavaScript needed. Amounts the units code recognises show in pink mono.
Ragu
Method steps
.steps: numbered rows on a shared baseline. In cook mode the numbers become checkboxes.
Notes
.recipe__notes: a moss rule and a muted note under the method.
Notes & thoughts
Better made the day before.
Quotes
A plain <blockquote> (or Markdown >) gets the pink rule and a <footer> or <cite> attribution. .about__quote is the big version on About.
C.T.R.L is brimming with charm. It's an unexpected treat.
Life: Something to do between meals.
Say hello button
.hello-button: the one filled call to action.
Meta row
.sheet-meta: mono notes between hairlines, used under the crop library.
Title block
.title-block: a page or post title with its meta line, closed by a hairline.
The enemy of done
Writing
How Markdown in posts comes out.
A second-level heading
Body copy with a link, some bold and some italic. Paragraphs sit 8px apart; headings get more room above them than below.
A third-level heading
- An unordered list
- With a second item
- An ordered list
- With a second item
A Markdown quote, with its attribution on its own line.
Someone quotable