BibleGateway Design System Deep Dive

1. Brand Overview

BibleGateway is a long-standing digital Bible reading and study tool. Its audience spans from casual readers to dedicated theologians, from mobile-first Gen Z users to seminary professors who still love their desktop monitors. So the design has to do two things at once: be accessible and functional for quick searches, and feel trustworthy and “serious” enough for deep study.

The vibe is utilitarian with a slight warmth. This isn’t a trendy SaaS design with neon gradients. It’s functional, content-first, and relatively conservative. Color choices lean toward deep reds and muted neutrals, which carry connotations of heritage, tradition, and solemnity. Typography is system-based — you’re not seeing custom typefaces here — which keeps performance snappy and removes any distraction from the text itself.

This is a content-heavy platform. The priority is readability and navigability over visual spectacle. That explains the restrained use of border radii, low-key shadows, and a palette that doesn’t scream for attention. It’s an interface that says: “The text is the hero.”

The design philosophy seems to be: keep interactions obvious, keep the UI out of the way, and let the brand identity live in the color palette rather than in flashy motion or custom fonts. Minimal flourish, maximum clarity. The audience is mixed in tech literacy, so affordances are obvious — links are underlined, buttons have solid fills, hover states are clear.

If you’re a designer looking at this, you’ll notice the system is built on an 8px spacing grid (with some oddball half-values like 6.5px), breakpoints are numerous and granular (which signals lots of responsive tailoring), and the type scale is wide but all anchored in system UI fonts. This is a pragmatic, performance-focused design system that has been evolved over years, not invented overnight.

2. Color System

2.1 Primary Colors

The main brand color is a deep brick red — #952004 (rgb(149, 32, 4)). This is used in key interactive elements like the search submit button and user menu icon. Psychologically, deep reds convey tradition, seriousness, and authority. In the religious context, it also nods to liturgical colors, leather-bound books, and aged parchment.

Interestingly, hover/focus states sometimes shift to a brighter blue (rgb(30, 174, 219)) — a strong, modern accent that contrasts sharply with the heritage red. That’s a surprising choice. It modernizes the feel during interaction, but also risks breaking the “traditional” mood if overused.

2.2 Complete Palette

Note: There are also functional colors not in the palette list but present in component states: bright blue (#1EAEDB) for hover, and others from shadows.

2.3 Color Relationships

Contrast is generally high: white text on deep red, dark gray text on white backgrounds. The deep red (#952004) against white passes WCAG AAA for normal text. The medium gray (#4a4a4a) on white is borderline AAA for large text, fine for normal. The blue hover color (#1EAEDB) on white is accessible, but red on blue is not used — good restraint.

Dark mode? Not implemented. This palette is locked to light backgrounds. The deep charcoal (#231f20) works as a text color on light gray backgrounds without losing readability.

2.4 Usage Guide

• Primary actions: Use #952004 on white for buttons. Keep text black or white depending on fill.
• Secondary actions: Use #517e90 for link buttons, #555555 for less prominent links.
• Backgrounds: Stick to #ffffff or #f4f4f4. Avoid mixing both in the same container unless intentional hierarchy.
• Accents: Forest green (#468254) is rare. Use sparingly for success or nature-related contexts.
• Avoid: Using hover blue (#1EAEDB) as a static color — it’s meant for interaction feedback.
• Links: Default gray (#4a4a4a) with underline; hover shifts to blue (#1883FD) or removes underline.

3. Typography

3.1 Font Families

BibleGateway uses system-ui across most contexts, with fallbacks:
system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial

There’s one instance of Segoe UI specifically, with its own fallback stack:
Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Arial

No Google Fonts, no Adobe Fonts, no variable fonts. This is performance-first and avoids licensing complexity.

3.2 Type Scale

…and many more micro-sizes down to 8.5px captions.

3.3 Hierarchy

The hierarchy is flat — many headings are in the 16–20px range. This makes sense for a text-heavy site where “heading” might just mean a verse label. The only true “page title” jump is the 32px heading. Uppercase transformations are used for emphasis (navigation, labels), not body copy.

Readability is solid; line heights are generally 1.3, which is tight but fine for UI labels. Body text here is basically heading-1 at smaller sizes — again, content is king.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid. Common values:

Not pure multiples — there are half-steps like 6.5px, which suggests legacy tweaks.

4.2 Layout

Breakpoints are abundant: 400px, 425px, 426px, up to 1840px. This is not a simple mobile/tablet/desktop split — it’s tuned for lots of device widths.

5. Visual Elements

Border Radius

Values:

• 0px — flat edges (tables, inputs)
• 2px — buttons, cookie settings
• 3px — divs, tab panels
• 4px — buttons
• 5px — search buttons
• 17px — filter search
• 20px — spans (pill-like)
• 50px — search field
• 50% — close ad (circle)

Mostly sharp with occasional small curves. Rarely large unless for pill shapes.

Shadows

Minimal use:

• rgba(173, 169, 164, 0.25) 3px 3px 6px — soft neutral shadow
• rgba(0, 0, 0, 0.2) 0px 0px 18px — modal depth
• rgb(199, 197, 199) 0px 0px 12px — subtle inset

This is a mostly flat UI; shadows are rare.

Borders

Plenty of 1px solids: white, brand red, dark gray. Dividers are functional, not decorative.

6. Components

6.1 Buttons

Search Dropdown Display
Default: white bg, black text, 0px radius, 1px solid #b2b2b2 border, padding 0 8px.
Hover: no color change.
Focus: outline none.

Search Submit
Default: bg #952004, black text, radius 5px, padding 1px 6px.
Hover: bg #1EAEDB, box-shadow layered, opacity 0.9, text white.
Focus: same as hover with black outline/border.

.btn
Default: bg #126ABB, white text, radius 4px, padding 10px 20px.
Hover: white bg, text #1883FD, opacity 0.9.
Active: bg #2C6415, text white, border 1px solid rgba(162,192,169,0.5).
Focus: bg #1EAEDB, text white, black border.

.btn.subscribe-btn
Default: bg #005E86, white text, radius 4px, padding 10px 20px.
Hover: bg #1EAEDB.
Focus: same with border and box-shadow.

6.2 Links

Four variants:

1. Gray (#4a4a4a) with underline, hover blue (#1883FD) no underline.
2. White (#ffffff) no underline, hover blue.
3. Brand red (#952004) no underline, hover blue.
4. Bright red (#b12102) with underline, hover blue no underline.

6.3 Forms

Inputs:
Default: white bg, black text, 1px solid #b2b2b2, 0px radius, padding 6px 8px.
Focus: bg #1EAEDB, text white, black border.

Alternate: 2px inset #767676 border, padding 0px 10px.

6.4 Cards

Not explicitly extracted, but surfaces use #f4f4f4 with minimal shadows.

7. Design Tokens

:root {
  /* Colors */
  --color-charcoal: #231f20;
  --color-gray-medium: #4a4a4a;
  --color-white: #ffffff;
  --color-slate-blue-gray: #517e90;
  --color-brand-red: #952004;
  --color-forest-green: #468254;
  --color-light-gray: #f4f4f4;
  --color-mid-gray: #d7d7d7;
  --color-dark-gray: #555555;
  --color-hover-red: #b12102;

  /* Typography */
  --font-system: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial;
  --font-segoe: Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Arial;

  /* Spacing */
  --space-1: 1px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6-5: 6.5px;
  --space-7: 7px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-20: 20px;

  /* Radius */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-mdplus: 4px;
  --radius-search: 5px;
  --radius-pill: 20px;
  --radius-full: 50%;
}

8. AI Coding Assistant Prompt

# BibleGateway Design System Specification

You are a BibleGateway design expert. Build UIs matching their visual language exactly.

## Brand Context
BibleGateway prioritizes readability, tradition, and functional clarity. The design uses a heritage red as its anchor, with restrained typography and an 8px spacing grid. Interactions are clear, hover states are distinct, and UI elements are conservative in shape and color.

## Color Palette
- Deep Charcoal: #231f20 — Primary text, dividers
- Medium Gray: #4a4a4a — Secondary text, icons
- White: #ffffff — Background, button fills
- Slate Blue-Gray: #517e90 — Link buttons
- Deep Brick Red: #952004 — Primary brand color (search submit, menu icon)
- Forest Green: #468254 — Accent
- Light Gray BG: #f4f4f4 — Footer logo area
- Mid Gray: #d7d7d7 — Neutral backgrounds
- Dark Gray: #555555 — Link buttons
- Bright Red Hover: #b12102 — Hover/focus accent
- Hover Blue: #1EAEDB — Interaction hover/focus

## Typography
Font families:
- Primary: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial
- Secondary: Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Arial

Type sizes:
| Level | Font | Size | Weight | Line Height | Use For |
|-------|------|------|--------|-------------|---------|
| H1 | system-ui | 32px | 700 | 1.30 | Page titles |
| H2 | system-ui | 21.92px | 600 | 1.20 | Section headings |
| Body | system-ui | 20px | 400 | 1.50 | Body text |
| Label | system-ui | 16px | 400 | 1.15 | Labels |
| Caption | system-ui | 14px | 400 | 1.15 | Metadata |
| Small Caption | system-ui | 13.12px | 700 | 1.40 | Emphasis |

## Spacing & Grid
Base: 8px grid.  
Scale: 1px, 3px, 4px, 5px, 6.5px, 7px, 8px, 10px, 12px, 20px.  
Apply to button padding (5–10px), card spacing (20px), section gaps (20px+).

## Border Radius
- none: 0px — inputs, dropdowns
- sm: 2px — small buttons
- md: 3px — panels
- mdplus: 4px — buttons
- search: 5px — search buttons
- pill: 20px — rounded spans
- full: 50% — circular buttons

## Shadows & Depth
Minimal shadows. Use rgba(173,169,164,0.25) for subtle depth. Avoid heavy shadows.

## Component Specifications

### Primary Button (.search-submit)
Default: bg #952004, text #000000, radius 5px, padding 1px 6px, no border.  
Hover: bg #1EAEDB, text #ffffff, opacity 0.9, box-shadow layered.  
Focus: same as hover + black outline/border.

### Secondary Button (.btn)
Default: bg #126ABB, text #ffffff, radius 4px, padding 10px 20px.  
Hover: bg #ffffff, text #1883FD.  
Active: bg #2C6415, text #ffffff, border rgba(162,192,169,0.5).  
Focus: bg #1EAEDB, text #ffffff, border #000000.

### Navigation Links
Gray (#4a4a4a) underline; hover blue (#1883FD) no underline.

### Input Fields
Default: white bg, black text, 1px solid #b2b2b2, padding 6px 8px.  
Focus: bg #1EAEDB, text #ffffff, border #000000.

## Layout & Responsive Rules
Breakpoints: 400px, 425px, 426px, 450px, ..., 1840px.  
Max content width: 1840px.  
Mobile padding: 8px.  
Desktop padding: 20px.

## Interaction Rules
Transition timing: 150ms ease for state changes.  
Focus indicators: solid black outline.

## DO List
- Use ONLY colors from the palette.
- Maintain 8px grid for spacing.
- Use system-ui font stack.
- Keep border radii consistent.
- Make hover states distinct.

## DON'T List
- Don't invent new colors.
- Don't mix rounded and square corners arbitrarily.
- Don't use heavy shadows.
- Don't hide link underlines unless hovered.

## Code Examples

### Primary Button
```css
.search-submit {
  background: #952004;
  color: #000000;
  padding: 1px 6px;
  border-radius: 5px;
  border: none;
  font-size: 16px;
}
.search-submit:hover {
  background: #1EAEDB;
  color: #ffffff;
  opacity: 0.9;
}
.search-submit:focus {
  outline: 2px solid #000000;
  border: 1px solid #000000;
}
```

### Card
```css
.card {
  background: #f4f4f4;
  padding: 20px;
  border-radius: 4px;
}
```

### Input
```css
.input {
  background: #ffffff;
  color: #000000;
  border: 1px solid #b2b2b2;
  padding: 6px 8px;
}
.input:focus {
  background: #1EAEDB;
  color: #ffffff;
  border: 1px solid #000000;
}
```

9. Summary

TL;DR — BibleGateway’s design system is conservative, content-first, and built for clarity. Heritage reds anchor the brand, system fonts keep performance high, and the 8px grid ensures consistency. Interaction feedback is strong but restrained.

Brand Keywords: heritage-functional, content-first, performance-pragmatic, traditional-modern