Hollis & Rye
8 inch, serves 16, piped flowers. From $120 with a written quote in 2 business days. Example only.
Hollis & Rye
Brand Guidelines
How the studio looks, sounds and behaves, on a screen and on a cake box.
Contents
What is in here
- Brand foundation
- Voice and writing
- Logo
- Color
- Typography
- Layout and spacing
- Components
- Imagery and illustration
- Motion
- Accessibility
- Applications
- Do and do not
- Files and handover
Use this guide whenever you make something with the Hollis & Rye name on it: a menu, a box sticker, a post, an email, a page. If something is not covered, choose the plainest option that follows the rules in sections 1, 2 and 10, and ask us.
01
Brand foundation
Hollis & Rye is a custom cake studio that tells you the price before you commit.
Promise
Custom cakes with the price in writing before you commit.
Who it is for
People ordering for a birthday, a wedding or a work event who are tired of days of emails before anyone names a price, and who need to know if their date is workable.
Personality
Plain. We say the number. Steady. We do what we wrote. Warm. Friendly without gushing. Exact. Sizes, days and dollars, not adjectives.
What we never do
Hide a price, promise a date we have not checked, use urgency tricks, or make claims we cannot back up.
Brand in one line, for the team
If a customer reads it once, they should know what it costs, when it is ready and what to do next.
02
Voice and writing
Write the way a careful person talks across a counter. Short sentences, real numbers, one action.
| Say | Do not say |
|---|---|
| We reply in writing within two business days. | We will get back to you ASAP! |
| A $50 deposit holds your date and is taken off the total. | Secure your dream date today. |
| Most custom cakes need 2 weeks. Wedding cakes need 2 months or more. | Order early to avoid disappointment. |
| We cannot promise an allergen-free cake. | Allergy friendly options available. |
Rules
- No exclamation marks and no em dashes. Use a period or a comma.
- Numerals for money, sizes and days: $96, 8 inch, 14 days. Dates as "November 14".
- One action per page, with the same words every time: Request a quote. The builder page may add Build your cake.
- No made-up proof: no invented reviews, awards or results. If a number is an example, say so next to it.
- Explain a form: "A form is a request, not an order. Nothing is charged until you approve the quote."
Words we use and avoid
Use: quote, written, deposit, balance, pickup, delivery, lead time, size, serves. Avoid: dream, bespoke, curated, indulgent, artisanal, luxury, magical, perfect, ASAP.
Sample quote message
8 inch, two layers, serves 16
Cake$96
Delivery within 10 miles$20
Deposit, taken off the total$50
Balance, due 7 days before pickup$66
Example only. Prices in this document are made up.
03
Logo
Two marks: the wordmark for most uses and the monogram for small spaces. Both are concepts drawn in Young Serif, delivered as vector files in the handover.
Hollis & Rye
Primary wordmark on sage or white. The ampersand is Rust #9A4222, the only colored letter.
Hollis & Rye
Reversed on Cocoa. All letters Sage. The colored ampersand is dropped because Rust on Cocoa is too dim.
Hollis & Rye
One color, Cocoa. For stamps, receipts and one-color print.
Monogram for profile images, box seals and favicons.
Clear space and size
Keep clear space around the logo equal to the height of the capital H. Smallest sizes: wordmark 120 px wide on screen or 30 mm in print, monogram 32 px or 10 mm.
Do not
Hollis & RyeDo not stretch or squash.
Hollis & RyeDo not recolor in Terracotta. It is for buttons.
Hollis & RyeDo not add shadows or outlines.
Hollis & RyeDo not place on a busy photo.
Hollis & RyeDo not retype in another font.
04
Color
A quiet sage ground, dark cocoa for text and one warm accent. CMYK values are rough conversions from the screen colors. Always ask the printer for a proof, because printed color will shift.
Sage
#E3EBDD
RGB 227 235 221
CMYK ~3 0 6 8
Page background
#E3EBDD
RGB 227 235 221
CMYK ~3 0 6 8
Page background
Leaf
#CCDAC1
RGB 204 218 193
CMYK ~6 0 11 15
Panels, cards
#CCDAC1
RGB 204 218 193
CMYK ~6 0 11 15
Panels, cards
Cocoa
#3B2417
RGB 59 36 23
CMYK ~0 39 61 77
Text, borders, footer
#3B2417
RGB 59 36 23
CMYK ~0 39 61 77
Text, borders, footer
Terracotta
#B5532F
RGB 181 83 47
CMYK ~0 54 74 29
Button fill only
#B5532F
RGB 181 83 47
CMYK ~0 54 74 29
Button fill only
Rust
#9A4222
RGB 154 66 34
CMYK ~0 57 78 40
Labels, accents
#9A4222
RGB 154 66 34
CMYK ~0 57 78 40
Labels, accents
Rust dark
#7A3418
RGB 122 52 24
CMYK ~0 57 80 52
Text links
#7A3418
RGB 122 52 24
CMYK ~0 57 80 52
Text links
Frosting
#F3E7D3
RGB 243 231 211
CMYK ~0 5 13 5
Cake and quote card
#F3E7D3
RGB 243 231 211
CMYK ~0 5 13 5
Cake and quote card
Line
#A9BC9B
RGB 169 188 155
CMYK ~10 0 18 26
Dividers only
#A9BC9B
RGB 169 188 155
CMYK ~10 0 18 26
Dividers only
Balance
About 60% Sage, 20% Leaf and Frosting, 15% Cocoa, 5% Terracotta and Rust.
Approved text pairs
Measured contrast ratios (WCAG 2.x). Normal text needs 4.5:1, large text (24 px, or 19 px bold) needs 3:1.
| Text on background | Ratio | Use |
|---|---|---|
| Cocoa on Sage | 11.85:1 | All body text and headings |
| Cocoa on Leaf | 9.90:1 | Panels |
| Cocoa on White | 14.48:1 | Forms |
| Sage on Cocoa | 11.85:1 | Footer, dark panels |
| White on Terracotta | 4.95:1 | Button text. Passes, with little room. |
| Rust on Sage | 5.41:1 | Labels, accents |
| Rust dark on Sage | 7.37:1 | Text links |
| Rust dark on Leaf | 6.16:1 | Links in panels |
Never use these as text
| Pair | Ratio | Why |
|---|---|---|
| Terracotta on Sage | 4.05:1 | Fails for normal text. Terracotta is a fill only. |
| Sage on Terracotta | 4.05:1 | Fails. Use white on Terracotta. |
| Terracotta on Cocoa | 2.92:1 | Fails. |
| Rust on Leaf | 4.52:1 | Barely passes. Use Rust dark instead. |
| Line on Sage | 1.66:1 | Dividers only, never text or the only edge of a control. |
05
Typography
Young Serif for headings
Karla for everything you read, in regular and semibold.
| Role | Font | Size and line height |
|---|---|---|
| Display (page title) | Young Serif | 38 to 76 px, 1.04 |
| Section heading | Young Serif | 28 to 44 px, 1.12 |
| Row or card title | Young Serif | 24 to 28 px, 1.2 |
| Body | Karla 400 | 18 px, 1.6, lines no longer than 62 characters |
| Emphasis, buttons | Karla 600 | 18 px |
| Small print | Karla 400 | 15 px minimum |
| Label | Karla 600, uppercase | 13 px, 0.14em spacing, in Rust |
Fallbacks: Georgia for headings, the system sans for body. Numbers: use tabular figures for prices so columns line up. Italics: Young Serif has no italic. Do not fake one.
License
Both typefaces are licensed under the SIL Open Font License 1.1 (license files are included in fonts/, copied from the Google Fonts repository). They can be used on the web and in print and bundled with a site. The web files in this package are the Latin subset only. Accented letters outside the basic set fall back to Georgia, so ask us for the full files if you need them.
06
Layout and spacing
- Page width: content up to 1040 px. Sections use a narrow label column on the left (200 px) and text on the right, with a 32 px gap. On phones this becomes one column.
- Section spacing: 40 to 80 px top and bottom, separated by a 1 px Line divider. No cards inside cards and no grids of identical cards. Lists of things use numbered rows.
- Spacing scale: 4, 8, 12, 16, 24, 32, 48, 64, 80 px.
- Corners: buttons are pills, option chips 12 px, form fields 6 px, panels square.
- Shadows: only the hard 4 px Cocoa shadow on buttons. No blurs or glows.
- Breakpoint: 860 px. Below it, go single column and keep the sticky header to the logo and the quote button.
07
Components
Button
Pill, 3 px Cocoa border, 4 px hard shadow, at least 48 px tall. It presses down 2 px on hover and has a 3 px focus ring. Primary buttons are Terracotta with white text. The wording is always Request a quote.
Option chips
8 inch, serves 1610 inch, serves 28Chocolate +$0
Selected is solid Cocoa with Sage text. The unselected state keeps a 2 px border. Never rely on color alone.
Calendar days
910Few11Full12
Open is plain, few left is a dashed border plus the word "Few", booked is hatched plus the word "Full", selected is solid Cocoa. Demo data must be labeled as demo.
Form field
Event datemm/dd/yyyy
Always a visible label above the field, a 2 px Cocoa border and a 48 px minimum height.
Notice
A form is a request, not an order. Nothing is charged until you approve the quote.
Quote card
Frosting background, 1 px Line border, dotted row dividers.
Cake$96
Delivery$20
08
Imagery and illustration
- Photography: soft window light from the left, shallow depth of field, shot slightly above eye level, plain sage or warm wood surface, no people, no text. Props limited to a stand, a linen napkin, fruit or flowers that match the cake.
- Real photos first. A real bakery should always use photos of its own cakes. Generated pictures are for concept demos only and must never be passed off as baked work.
- Illustration: flat shapes, 3 px Cocoa outline, Frosting and Terracotta fills, a Line-colored ground shadow. One cake per picture.
- 3D cake views: plain geometry, soft light, cream frosting, no glitter or glow, a wood board underneath.
- Alt text: describe the cake in one sentence. Do not start with "image of".
- Files: WebP with a JPG fallback, under 200 KB where possible, with width and height set.
Photography examples
These ten concept images set the standard for the whole system: same sage backdrop, same soft light, a cake as the only subject. They were generated with AI for this fictional demo. A real bakery uses its own photos and holds them to the same direction.
Finish details
Crop rules: collection images 3:2, finish details 1:1, the hero 4:5, the share image 1200 x 630 with the right side left empty for text. Keep the subject off the outer 10% so crops stay safe.
09
Motion
- Timing: 100 ms for taps, 250 ms for changes, 450 ms for entrances. Easing
cubic-bezier(.2,.7,.2,1). - Allowed: a rise and fade on the first headline, quote lines appearing one by one like a receipt, the builder easing between choices, a count-up on prices, and a slow turn on the 3D cake.
- Not allowed: parallax, scroll hijacking, autoplay video with sound, bouncing, anything that moves while someone is reading.
- Reduced motion: turn all of it off. Content must be fully visible with no animation and with JavaScript off.
10
Accessibility
Target: WCAG 2.2 level AA. These are the working rules.
- Text contrast follows section 4. Do not add new color pairs without measuring them.
- Touch targets at least 48 px. Visible 3 px focus ring on everything you can tab to.
- Every form field has a visible label. Errors say what to fix in words.
- No information by color alone (calendar days use a word and a pattern).
- Everything works with a keyboard. The 3D cake turns with the left and right arrow keys.
- Respect reduced motion. Alt text on every real image.
- Payment and card details are never collected on a brochure page. Use the payment provider's own page.
What was tested on the demo site
Contrast of every text style, keyboard use of the builder and calendar, no horizontal scroll at phone width, reduced motion and JavaScript off. Not tested: screen readers, Safari and Firefox, real phones.
11
Applications
Examples of the system applied. These are mockups drawn in HTML, not print-ready files.
Business card, front
Hollis & RyeCustom cakes. Price in writing.
Business card, back
Request a quote at hollisandrye.example
(316) 555-0142Fictional business and number.
(316) 555-0142Fictional business and number.
Cake box seal
H&R
Profile image
Email signature
Hollis & Rye Cake Studio
Custom cakes with the price in writing.
Request a quote · (316) 555-0142 (fictional)
Custom cakes with the price in writing.
Request a quote · (316) 555-0142 (fictional)
Social post
Link preview
Custom cakes with the price in writing
hollisandrye.example
Quote sheet
Hollis & Rye
Quote for a birthday cake
Pickup Saturday, November 14
8 inch, two layers, serves 16
Cake$96
Deposit, taken off the total$50
Balance, due 7 days before pickup$66
Reply YES to approve. Nothing is charged until you do. Example only.
Social posts
One idea per post. Show a finished cake with its size, serves number and starting price in the caption. Post with plain captions and no hashtags stacks. The social graphics set is not part of this demo and would be produced in the full package.
12
Do and do not
DoPut the price and the lead time next to the button.
Do notHide a price behind "contact us".
DoSay what the form does and does not do.
Do notSay a date is available unless a person has checked it.
DoUse real photos of real cakes.
Do notAdd effects that do not help someone order.
DoLabel example prices and demo data.
Do notCollect card numbers in a custom form.
13
Files and handover
| Item | Status in this demo |
|---|---|
| Primary logo (wordmark) and monogram | Concept shown on this page. Final vector files (SVG, PDF, PNG) would be exported at handover. |
| Brand colors | Defined in section 4 with HEX, RGB and approximate CMYK. |
| Font recommendations | Young Serif and Karla, license files included. |
| Photography | Ten concept images are used in this guide and the demo sites. They are AI-generated for a fictional business. Web sizes are in each build folder under images/. The full-size originals stay with Marie Glow Studio. |
| Visual brand direction | Sections 6, 8 and 9. |
| Style guide | This document, as a web page and a PDF. |
| Social media graphics | Profile image and one post idea shown. A full set is not produced in this demo. |
| Website | Starter, premium concept and a Tier 3 concept are built as demos in the project folder. |
Naming
Lowercase, hyphens, no spaces: hollis-rye-wordmark.svg, hollis-rye-monogram-reversed.png, hero-cake.webp.
Approval and changes
Send any use that is not covered here to Marie Glow Studio before it goes public. Version 1.0 is dated November 2, 2026. Fictional client, example content, no real orders.