BellsBeans Coffee Roaster

Brand
Style Guide

v0.2 — Accessible Palette Dawn v15.4.1 Applied May 2026
01.

Color Palette

Brand

Primary / Espresso
#1F1611
--bb-primary
Body text, primary buttons, dark section bgs
Accent / Rust
#A5551F
--bb-accent
Eyebrows, links, secondary buttons, badges
AA on cream 4.69:1

Accent Variants

Accent Dark
#8F4A1B
--bb-accent-dark
Hover states, eyebrows on stone bg
Accent Light
#D4824F
--bb-accent-light
Text use on dark bgs only
Accent Bright
#C36A3A
--bb-accent-bright
Decorative only — never behind text

Warm Neutrals

Cream
#F5EFE7
--bb-cream
Primary page background
Stone
#E4DCCF
--bb-stone
Section bgs, subtle panels
Stone Dark
#8A8276
--bb-stone-dark
Card borders, input borders, dividers
UI 3.32:1

Black / White

Black
#000000
--bb-black
Near Black
#1D1D1D
--bb-near-black
Soft Black
#282828
--bb-soft-black
White
#FFFFFF
--bb-white

Warm Greys

Grey 500
#3D362E
--bb-grey-500
Grey 400
#625A50
--bb-grey-400
AA 5.93:1
Grey 300
#6D655B
--bb-grey-300
AA 5.02:1
Grey 200
#D8D2C7
--bb-grey-200
Grey 100
#F0ECE5
--bb-grey-100

State — Backgrounds

Info
#4F6B7A
--bb-info
Success
#6B8E4E
--bb-success
Warning
#D4A547
--bb-warning
Error
#A84432
--bb-error

State — Text / Icons

Info Text
#3F5A68
--bb-info-text
AA 6.40:1
Success Text
#557236
--bb-success-text
AA 4.78:1
Warning Text
#866208
--bb-warning-text
AA 4.88:1
Error Text
#A84432
--bb-error-text
AA 5.20:1

5 Dawn Color Schemes — Remapped to Brand Palette

Scheme 1
Light / Cream
Text: #1F1611
Btn: #1F1611
Links: #A5551F
Button
Scheme 2
Stone
Text: #1F1611
Btn: #1F1611
Links: #8F4A1B
Button
Scheme 3
Dark / Espresso
Text: #F5EFE7
Btn: #F5EFE7
Links: #D4824F
Button
Scheme 4
Accent / Rust
Text: #F5EFE7
Btn: #F5EFE7
Links: #F5EFE7
Button
Scheme 5
White
Text: #1F1611
Btn: #1F1611
Links: #A5551F
Button
02.

Typography

Display / Headings — Fraunces · Google Fonts, variable weight & optical size · line-height 1.1

Sample
Font size
Line height

Heading 1

56px / 600
61.6px

Heading 2

48px / 600
52.8px

Heading 3

40px / 600
44px

Heading 4

32px / 600
35.2px
Heading 5
24px / 600
26.4px
Heading 6
20px / 600
22px

Body — Inter · Google Fonts, weights 400–700 · line-height 1.4

Sample
Font size
Line height
Large Text Bold — The quick brown fox
20px / 700
28px
Large Text Regular — The quick brown fox
20px / 400
28px
Medium Text Bold — The quick brown fox jumps
18px / 700
25.2px
Medium Text Regular — The quick brown fox jumps
18px / 400
25.2px
Normal Text Bold — The quick brown fox jumps over
16px / 700
22.4px
Normal Text Regular — The quick brown fox jumps over
16px / 400
22.4px
Small Text Bold — The quick brown fox jumps over the lazy dog
14px / 700
19.6px
Small Text Regular — The quick brown fox jumps over the lazy dog
14px / 400
19.6px
03.

Spacing Scale

8px base unit

8px
16px
24px
32px
40px
56px
72px
80px
96px
120px
04.

Buttons

Padding: 5× font-size left/right · 1× font-size top/bottom · Radius: 4px

Color

Primary

Secondary

Primary Outline

Secondary Outline

States (Primary)

Default

Active / Pressed

Disabled

States (Secondary)

Default

Active / Pressed

Disabled

Outline — hover fills with border colour, text becomes cream

05.

Settings Applied

All changes from Dawn defaults — config/settings_data.json & assets/brand.css

Setting Dawn Default BellsBeans Value Controls
color_schemes (all 5) changed Black & white palette Espresso / Cream / Rust All section backgrounds and button colors
type_header_font via CSS Assistant Fraunces (variable) All headings (H1–H6)
type_body_font via CSS Assistant Inter All body text, labels, buttons
buttons_radius changed 0px 4px All button corner radius
inputs_radius changed 0px 4px Text inputs, selects, textareas
inputs_border_opacity changed 55% 100% Input border visibility (solid, not muted)
card_corner_radius changed 0px 6px Product card corners
card_style changed standard card Shows card background + border on product cards
card_border_thickness changed 0px 1px Product card border
card_border_opacity changed 10% 55% Product card border visibility
collection_card_corner_radius changed 0px 6px Collection card corners
collection_card_style changed standard card Collection card style
collection_card_border_thickness changed 0px 1px Collection card border
blog_card_corner_radius changed 0px 6px Blog post card corners
blog_card_style changed standard card Blog card style
text_boxes_radius changed 0px 6px Content container corners
media_radius changed 0px 6px Product images & media corners
popup_corner_radius changed 0px 6px Quick-add popups & modals
badge_corner_radius changed 40px 20px Sale / sold-out badge shape
spacing_grid_horizontal changed 8px 24px Horizontal gap between grid items
spacing_grid_vertical changed 8px 24px Vertical gap between grid items
What still needs to be set manually in Shopify Admin After running shopify theme push, open the theme editor (Online Store → Themes → Customize) to:
  • Assign Scheme 1 (Cream) as the default scheme for homepage sections
  • Assign Scheme 3 (Espresso) to any dark hero or announcement bar sections
  • Assign Scheme 4 (Rust) to accent banner / promo sections
  • Upload the brand logo (Online Store → Themes → Customize → Header)
  • Upload the favicon