# ModernBee — REZ Church Design Theme

**Version:** 1.1  
**Origin:** Derived from a REZ Church leadership discussion guide, April 2026  
**Status:** Superseded for new work by REZVIZ (Bone & Bronze, Volume 03). Still valid for existing ModernBee documents. Never mix the two themes inside one document.  
**Purpose:** A reusable HTML print-ready theme for all REZ Church documents — workbooks, guides, handouts, proposals, and congregational materials.

---

## Design DNA

ModernBee is editorial and confident. It uses dramatic typographic contrast (ultra-bold headlines against a warm page), generous whitespace, and a single gold accent to create documents that feel professional but not corporate, serious but not stiff. The signature touch is the **gold period** on cover titles — a small, distinctive brand mark.

The name comes from the gold-and-black palette and the structured, purposeful feel of the layouts — like a well-organized hive.

---

## Correction applied in v1.1

Version 1.0 of this file had no contrast section. It assigned `--mb-gold` `#C8952E` to section labels at 7.5–8pt and to point numerals, both on the warm page ground — **2.43:1**, against a 4.5:1 requirement for normal text and 3:1 for display. The file's only guidance was "don't overuse gold," which is not a rule anyone can check.

Two things were added in v1.1: a `--mb-gold-deep` token for gold type on light grounds, and the Legal Pairs table below. The rule is now stated the same way the successor theme states it — **dark ground takes the lighter accent, light ground takes the darker one.**

---

## Legal Pairs — Contrast

Ratios computed against the WCAG 2.1 relative-luminance formula. Thresholds: 4.5:1 for normal text, 3:1 for 18pt+ normal or 14pt+ bold.

| Pair | Computed ratio | Verdict |
|---|---|---|
| `--mb-text` `#111111` on `--mb-bg` `#f5f3ee` | 17.0:1 | Legal, all sizes |
| `--mb-gold` `#C8952E` on `--mb-text` `#111111` | 7.0:1 | Legal, all sizes — this is why gold works on the Key Verse Box |
| `--mb-text-secondary` `#555555` on `--mb-bg` | 6.7:1 | Legal, all sizes |
| **`--mb-gold-deep` `#8E6921` on `--mb-bg`** | **4.5:1** | **Legal, all sizes — use this for gold type on light grounds** |
| `--mb-gold` `#C8952E` on `--mb-bg` | 2.4:1 | **Never as type.** Bars, rules, and underbars only. |
| `--mb-gold` `#C8952E` on `--mb-surface` `#ffffff` | 2.7:1 | **Never as type.** |
| `--mb-text-tertiary` `#999999` on `--mb-bg` | 2.6:1 | **Never for captions or helper text.** Decorative only. |
| `--mb-text-faint` `#aaaaaa` on `--mb-bg` | 2.1:1 | Running headers and footers only — furniture, not reading. |

**The gold rule.** Gold *type* on a light ground is `--mb-gold-deep`. Gold type on `#111111` is `--mb-gold`. Gold *bars, rules, and underbars* may be `--mb-gold` on either ground, because they carry no text. Never swap them.

**Known limitation, not fixed.** `--mb-text-tertiary` and `--mb-text-faint` were both used for readable small text in v1.0 documents. They fail. Existing documents are left alone; new ModernBee work uses `--mb-text-secondary` for anything a reader is meant to read.

---

## Color Palette

| Token | Hex | Usage |
|-------|-----|-------|
| `--mb-bg` | `#f5f3ee` | Page background (warm off-white / parchment) |
| `--mb-surface` | `#ffffff` | On-screen page card (prints as page bg) |
| `--mb-text` | `#111111` | Primary text, headlines |
| `--mb-text-secondary` | `#555555` | Subtitles, body secondary |
| `--mb-text-tertiary` | `#999999` | Hints, captions, helper text |
| `--mb-text-faint` | `#aaaaaa` | Running headers, footers |
| `--mb-gold` | `#C8952E` | Accent on **dark grounds**, and bars/rules/underbars on any ground. Never type on a light ground. |
| `--mb-gold-deep` | `#8E6921` | Accent **type on light grounds** — labels, numerals, the gold period. Added v1.1. |
| `--mb-rule` | `#e0e0e0` | Horizontal rules, card borders |
| `--mb-rule-light` | `#eeeeee` | Lighter rules (running headers) |
| `--mb-callout-bg` | `#faf6ed` | Callout/info box background (warm cream) |
| `--mb-note-bg` | `#f0f2f5` | Leader note / clarification box background (cool gray) |
| `--mb-note-border` | `#3a3a3a` | Leader note left border (dark) |
| `--mb-spirit-bg` | `#eef3f8` | Spirit sidebar background (cool blue-tint) |
| `--mb-spirit-border` | `#5a8dbd` | Spirit sidebar left border |
| `--mb-scripture-bg` | `#f9f7f3` | Scripture block background |

---

## Typography

### Font Stack

| Role | Family | Weight | Fallback |
|------|--------|--------|----------|
| **Headlines** | DM Sans | 800 / 900 (ExtraBold / Black) | Helvetica Neue, Helvetica, Arial, sans-serif |
| **Labels** | DM Sans | 600 / 700 | same sans fallback |
| **Body** | Source Serif 4 | 400 / 600 | Georgia, Times New Roman, serif |
| **UI / Meta** | DM Sans | 400 / 500 | same sans fallback |

Google Fonts import:
```
https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,600;0,9..40,700;0,9..40,800;0,9..40,900;1,9..40,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap
```

### Type Scale

| Element | Font | Size | Weight | Color | Notes |
|---------|------|------|--------|-------|-------|
| Cover title | DM Sans | 42–48pt | 900 | `--mb-text` | Line-height 1.05. Period in `--mb-gold-deep` on light grounds. |
| Section heading | DM Sans | 22–26pt | 800 | `--mb-text` | Line-height 1.15 |
| Sub-heading | DM Sans | 14–16pt | 700 | `--mb-text` | Line-height 1.25 |
| Point title | DM Sans | 13pt | 700 | `--mb-text` | Used inside numbered teaching blocks |
| Section label | DM Sans | 7.5–8pt | 700 | `--mb-gold-deep` | ALL CAPS, letter-spacing 0.14em. On `#111` grounds use `--mb-gold`. |
| Running header | DM Sans | 7.5pt | 600 | `--mb-text-faint` | ALL CAPS, letter-spacing 0.1em |
| Body text | Source Serif 4 | 11–11.5pt | 400 | `--mb-text` | Line-height 1.6 |
| Body bold | Source Serif 4 | 11–11.5pt | 600 | `--mb-text` | — |
| Subtitle/tagline | Source Serif 4 | 12–13pt | 400 italic | `--mb-text-secondary` | Line-height 1.5 |
| Footer text | DM Sans | 7.5pt | 500 | `--mb-text-faint` | — |
| Point number | DM Sans | 26–28pt | 900 | `--mb-gold-deep` | Short underbar beneath may be `--mb-gold`. On `#111` grounds the numeral uses `--mb-gold`. |

---

## Signature Elements

### Gold Accent Bar
- Position: top-left of cover page, above document label
- Size: 40px wide × 4px tall
- Color: `--mb-gold`
- Border-radius: 2px

### Gold Period
- On cover titles, the final period is rendered in the ground-correct gold
- Implementation: wrap the period in a span with `color: var(--mb-gold-deep)` on a light ground, `var(--mb-gold)` on `#111`
- This is the single most recognizable ModernBee brand mark

### Numbered Points
- Large gold number (26–28pt, weight 900, color `--mb-gold`)
- Short gold underbar (24px wide, 3px tall) directly below the number
- Followed by bold point title and body text
- Used for teaching outlines, proposal items, reason lists

### Cards
- Border: 1px solid `--mb-rule`
- Border-radius: 4–6px
- Padding: 24–28px
- Background: transparent or page background
- Used to contain numbered proposals, tracks, options
- Optional gold left accent on "track" cards (3.5px border-left)

---

## Component Patterns

### Callout Box (warm — info, tips, key points)
```
background: var(--mb-callout-bg);    /* #faf6ed */
border-left: 3.5px solid var(--mb-gold);
padding: 14px 18px;
border-radius: 0 4px 4px 0;
```

### Leader Note Box (cool — teacher instructions, clarifications)
```
background: var(--mb-note-bg);       /* #f0f2f5 */
border-left: 3.5px solid var(--mb-note-border);  /* #3a3a3a */
padding: 12px 16px;
border-radius: 0 4px 4px 0;
```
Label: "LEADER NOTE" in DM Sans 7.5pt, 700, letter-spaced, color `--mb-note-border`

### Spirit Sidebar (recurring Holy Spirit thread — workbook only)
```
background: var(--mb-spirit-bg);     /* #eef3f8 */
border-left: 3.5px solid var(--mb-spirit-border); /* #5a8dbd */
padding: 10px 14px;
border-radius: 0 4px 4px 0;
```
Label: "THE SPIRIT IN THIS" in DM Sans 7pt, 700, letter-spaced, color `--mb-spirit-border`

### Scripture Block
```
background: var(--mb-scripture-bg);  /* #f9f7f3 */
border-left: 3.5px solid var(--mb-gold);
padding: 14px 20px;
border-radius: 0 4px 4px 0;
font: Source Serif 4, italic, 10.5–11pt
```
Reference line: DM Sans, 9pt, 600, color `--mb-text-tertiary`

### Key Verse Box (high-contrast — used on session title pages)
```
background: #111111;
color: #ffffff;
padding: 24px 28px;
border-radius: 6px;
text-align: center;
```
Verse text: Source Serif 4 italic, 13pt, white  
Reference: DM Sans 9pt, 600, `--mb-gold`, ALL CAPS, letter-spaced

### Discussion Question
```
padding-left: 20px;
border-left: 2px solid var(--mb-rule);
font: Source Serif 4, italic
color: var(--mb-text-secondary)
```

### Time Badge (teacher's guide session flow)
```
font: DM Sans, 9pt, 700
color: var(--mb-gold)
white-space: nowrap
min-width: 65px
```

### Fill-in-the-Blank (workbook)
```
display: inline-block;
min-width: 130px;
border-bottom: 2px solid #d0d0d0;
height: 1.2em;
```

### Reflection Lines (workbook homework)
```
width: 100%;
border-bottom: 1.5px solid var(--mb-rule);
height: 2em;
```

---

## Page Layout

### Print Specs
- Page size: US Letter (8.5 × 11in)
- Page margins: 0.75in top, 0.85in left/right, 0.6in bottom (above footer)
- `@page { size: letter; margin: 0; }` — margins handled by page div padding
- `page-break-after: always` on each `.page` div
- `page-break-inside: avoid` on cards, teaching blocks, day blocks
- `print-color-adjust: exact` on body

### On-Screen Appearance
- Body background: `--mb-bg` (#f5f3ee)
- Page divs: white background, box-shadow, centered, margin 20px auto
- Print media query removes shadow/margin

### Running Header (interior pages)
- Left: document section title
- Right: page type or section
- All caps, 7.5pt, DM Sans 600, color `--mb-text-faint`
- Thin rule below (1px solid `--mb-rule-light`)
- Margin-bottom: 20–24px

### Footer
- Position: absolute, bottom 0.5–0.55in
- Left: document name / series
- Right: page number (or "Session N · Page N")
- Thin rule above (1px solid `--mb-rule-light`)
- DM Sans 7.5pt, 500, color `--mb-text-faint`

### Cover Page
- Gold accent bar top-left
- Document label (RESURRECTION CHURCH · TYPE) in all-caps, letter-spaced
- Massive title with gold period
- Italic serif subtitle
- Generous top padding (1.2–1.8in)
- Footer area: thin rule, edition/date info, author line

---

## Usage Notes

1. **Consistency across document types.** ModernBee should look the same whether it's a workbook, teacher's guide, leadership proposal, or congregational email printed as a handout. The gold, the typography, and the whitespace are the thread.

2. **Don't overuse gold, and use the right one.** Gold is for labels, numbers, accent bars, and the cover period. Never in body text, never as a background fill. **Gold type on a light ground is `--mb-gold-deep`; gold type on `#111` is `--mb-gold`; gold bars and rules may be `--mb-gold` anywhere.** Cap it at roughly 2% of a page by area.

3. **Whitespace is structural.** Generous margins, paragraph spacing, and breathing room between sections are not wasted space — they are part of the design language. Do not compress to fit more content.

4. **Italic serif for voice.** When the author's voice needs to be present (subtitles, taglines, pull quotes, discussion prompts), use Source Serif 4 italic. This creates a human, warm tone against the structured boldness of the headlines.

5. **Cards are for contained options.** Use bordered cards when presenting distinct choices, tracks, or proposals. Don't use them for general content — that's what callout boxes are for.

6. **The gold period is earned.** Only use it on the primary cover title of a document. Not on section headings, not on sub-headings. One per document.

---

## CSS Variable Block (copy into any ModernBee document)

```css
:root {
  --mb-bg: #f5f3ee;
  --mb-surface: #ffffff;
  --mb-text: #111111;
  --mb-text-secondary: #555555;
  --mb-text-tertiary: #999999;
  --mb-text-faint: #aaaaaa;
  --mb-gold: #C8952E;        /* dark grounds, and bars/rules anywhere */
  --mb-gold-deep: #8E6921;   /* gold TYPE on light grounds — 4.5:1 */
  --mb-rule: #e0e0e0;
  --mb-rule-light: #eeeeee;
  --mb-callout-bg: #faf6ed;
  --mb-note-bg: #f0f2f5;
  --mb-note-border: #3a3a3a;
  --mb-spirit-bg: #eef3f8;
  --mb-spirit-border: #5a8dbd;
  --mb-scripture-bg: #f9f7f3;
  --mb-font-heading: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mb-font-body: 'Source Serif 4', Georgia, 'Times New Roman', serif;
}
```

---

## Type Floor

**11pt is the floor for body text.** Running headers, footers, and page numbers are furniture and are exempt at 7.5pt. If content won't fit at 11pt, **add a page.** Never shrink the type or cut the spacing to make it fit.

---

*ModernBee v1.1 · Superseded for new work by REZVIZ (Bone & Bronze, Volume 03)*
*Companion: `PRINT_SAFE_HTML.md` (page mechanics)*

---

*Shipped as a worked example from th3dan.com/theme-file. This is a real, in-use file, including the correction that got made after somebody actually checked the arithmetic. Free to copy and change.*