Sample product card
The everyday sourdough
A golden crust, an open crumb, and a slow, thoughtful rise.
Crumb & Oven / Style guide
A little structure.
A lot of warmth.
A practical collection of the ingredients that make this bakery feel like home. Start here, then make it your own.
The brand recipeEdition 01 / 2026
01 / Identity
A mark with a warm heart.
An arched oven, a small loaf, and an open invitation. Keep the symbol and wordmark together whenever space allows.
Primary lockup / light
Crumb & OvenArtisan Bakery
Give the mark room to breathe.
Reversed / dark
Crumb & OvenArtisan Bakery
Use warm light tones on dark surfaces.
Keep proportions intact. Avoid stretching, heavy effects, or placing the mark over busy photographs.
Download symbol02 / Palette
From flour to golden crust.
Soft neutrals do most of the work. Cocoa brings structure; terracotta adds a little warmth. Select a swatch to copy its color.
Color values follow the template’s shared palette.
Available / positiveUnavailable / attentionBlue outline / keyboard focus
03 / Typography
Character, with clarity.
Expressive serif headings meet a quiet, practical sans serif. Both typefaces are served locally with the template.
The expressive one
Aa
Playfair Display
Headings & brand · 500 / 600 / 700
The everyday one
Aa
Inter
Body & interface · 400 / 500 / 600 / 700
Heading levels / H1–H6
Headings organize your page like chapters in a book. H1 is the main title; H2 introduces a section; H3–H6 organize smaller parts inside it. Use the levels in order. The examples show their usual sizes on your screen.
Good things take time.
Fresh from our oven.
A little everyday ritual.
Simple ingredients. Thoughtful details.
Small batches, made with care.
The finishing touches.
Choose a text size
Ten options, from a small note to a large headline. Choose the name that best fits what you want to say, then compare the examples below. Each option shows its size so you can see how they differ.
Made with care.
Made with care.
Made with care.
Made with care.
Made with care.
Made with care.
Made with care.
Made with care.
Made with care.
Made with care.
For paragraphs, start with Reading text or Comfortable reading. Save Tiny note for short captions. Choosing a larger size changes how the text looks; it does not change its H1–H6 heading level.
For your designer: style names
You can choose by the friendly names above. These matching style names are only needed when editing the website’s design settings or code.
| Name in this guide | Style name |
|---|---|
| Tiny note | text-50 |
| Small note | text-100 |
| Reading text | text-200 |
| Comfortable reading | text-300 |
| Intro text | text-400 |
| Small title | text-500 |
| Medium title | text-600 |
| Section title | text-700 |
| Page title | text-800 |
| Large headline | text-900 |
04 / Actions
A clear next step.
One primary action at a time. Hover gently changes color; keyboard focus remains clearly visible.
Smaller & simpler
On a dark surface
Find your favoriteKeep the next step easy to find.
05 / Fields
Make every detail easy.
Labels stay visible. Hints add context. This form is a local example for testing field styles and validation; it does not send messages.
06 / Components
Familiar pieces. Fresh combinations.
Reusable cards, labels, and filters keep the experience consistent as the bakery grows.
Product labels
FeaturedNewSold outAvailable today
Category filters / interactive example
Sample selection: All goods.
Icons / simple and familiar
07 / Rhythm
Room for the good things.
A shared spacing scale keeps small details tidy and larger sections unhurried. Rounded corners soften the structure.
2XS
XS
S
M
L
XL
2XL
Small radius
Card radius
Soft elevationFor cards and raised surfaces
08 / The finishing touches
Gentle movement. Clear feedback.
Interaction should feel natural, never get in the way. Try the button, then use Tab to explore the guide with your keyboard.
Shared interaction timing
Back to the beginningSoft in. Soft out.
- A visible place to land. Keyboard focus uses a clear blue outline, with no delayed appearance.
- Comfort comes first. The template respects the device’s reduced-motion preference.
- More than color. Text labels communicate availability and selected states.
- Check each new combination. Recheck contrast, long text, and small screens when changing the palette or content.
Make this guide your own
Start with the shared palette and type settings in css/tokens.css. The examples use the same component styles as the bakery. Update the brand name and logo lockups here when you personalize the template.
Swatch values and spacing labels read the shared settings automatically. The sample card and form copy are illustrative; they are not connected to the product catalog or an inbox.