ESV Bible

Overview

ESV Bible is a scholarly digital Scripture platform that honors classical theological typography while embracing modern web usability. The design aesthetic is 'Reverent Minimalism'—a careful balance between the gravitas of sacred text and the accessibility of contemporary interface design. The interface uses warm, muted earth tones (sage blue #72abbf, warm tan #ac9d71) paired with high-contrast serif and sans-serif typefaces to create a reading experience that feels both authoritative and inviting. Users encounter a calm, uncluttered canvas that prioritizes the biblical text itself, with supporting tools (bookmarks, notes, search) positioned as secondary affordances rather than visual noise.

The brand voice is scholarly yet pastoral: precise, reverent, and deeply knowledgeable without being condescending. The tone avoids breathless marketing language; instead, it speaks with the quiet confidence of a trusted theological resource. Example sentence in brand voice: 'Matthew's genealogy traces the lineage of Christ through forty-two generations, establishing His claim as the promised Messiah of Israel.'

Colors

The color system is rooted in a warm, academic palette that evokes aged paper, leather-bound volumes, and natural light filtering through study windows. Primary (#72abbf) is a soft sage blue used for interactive elements, links, and focus states—it appears frequently enough to establish brand identity without overwhelming the reverent neutrality of the page. Secondary (#ac9d71) is a warm, scholarly tan deployed on primary action buttons (Sign In, Sign Up) and accents; it carries the weight of intentional user actions. Tertiary (#57ad68) is a muted sage green reserved for success states and affirmative actions. The surface stack progresses from warm cream (#f5f1e4, surface-container-lowest) through soft grays (#fafafa, surface) to near-white (#ffffff, surface-bright), creating subtle visual

Typography

The type system pairs Sentinel (a classical serif by Hoefler & Co.) for display, headlines, and body text with Gotham (a humanist sans-serif) for UI labels, navigation, and metadata. This pairing communicates 'scholarly authority meets modern clarity.' Sentinel at 19px/28px with 0.025em letter-spacing creates a generous, readable body measure ideal for extended Scripture reading; the serif letterforms slow the eye and encourage contemplation. Headlines in Sentinel 28–40px at 400 weight (not bold) maintain elegance and avoid visual aggression. Gotham at 12–14px with 0.05em letter-spacing handles buttons, labels, and form fields, providing crisp legibility at small sizes. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) on small labels (label-sm, 11px) when placed over busy or textured backg

Layout

The layout uses a 12-column grid with a max-width of 1220px, centering content on desktop and collapsing to single-column on mobile. The gutter is 25px (matching the header padding), creating consistent rhythm across all breakpoints. Page rhythm is governed by a 40px (lg spacing) section separator for major content blocks (Bible text, sidebar panels, footer), with 24px (md spacing) used for card-to-card spacing and internal component padding. The two-column layout (Bible text left, sidebar right) maintains a 2:1 ratio on desktop, with the sidebar housing bookmarks, notes, and personal content. White-space is generous but purposeful: 40px vertical margins between major sections prevent cognitive overload, while 12px (sm spacing) between related items (verse numbers, cross-references) create

Elevation & Depth

Depth is achieved through subtle layering rather than dramatic shadows. The base layer (Level 1) is the page background at #fafafa with no shadow. Level 2 (cards, modals, dropdowns) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft, diffused shadow that suggests the element hovers 8px above the surface. Level 3 (elevated modals, expanded panels) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), a larger spread shadow indicating greater distance. Hover states on cards transition from Level 2 to Level 3 shadow over 200ms ease-out, providing tactile feedback without jarring motion. T

Shapes

The shape philosophy is 'Scholarly Restraint'—minimal rounding that respects the geometric precision of printed books while acknowledging modern interface conventions. Buttons use 0.2rem (2px) border-radius, a nearly-square corner that feels authoritative and print-like. Cards and input fields use 0.5rem (5px) border-radius, a subtle softening that prevents harsh edges without appearing playful. Modals and elevated panels use 1rem (12px) border-radius, providing enough curvature to feel contemporary while maintaining formality. The full (9999px) radius is reserved exclusively for badges and sm

Components

Action Elements Buttons are the primary interaction affordance. Primary buttons (Sign In, Sign Up) use secondary color #ac9d71 with white text, 40px height, 5px vertical / 16px horizontal padding, and 2px border-radius. On hover, the background shifts to #9d8d63 (darkened 12% for contrast). Focus state adds a 3px outline in primary color #72abbf at 2px offset. Secondary buttons use transparent background with a 1px border in primary color and primary text; on hover, the background becomes primary-container (#c4dce5) with on-primary-container text (#1a3a47). All buttons use Gotham 12px / 500 weight with 0.05em letter-spacing. Transitions on hover/focus are 150ms ease-out.

Containers & Surfaces Cards have a 1px border in outline-variant (#cacaca), 24px padding, and 0.5rem border-rad

Do's and Don'ts

**Do**

• Do use Sentinel serif for all body text and headlines to maintain scholarly authority; pair with Gotham sans-serif for UI labels and form fields only.
• Do apply primary color (#72abbf) to interactive elements (links, focus states, hover backgrounds) and secondary color (#ac9d71) to primary action buttons; never swap these roles.
• Do maintain 40px (lg spacing) between major content sections and 24px (md spacing) between cards to create breathing room and prevent cognitive overload.
• Do use the subtle shadow stack (0 3px 8px for Level 2, 0 8px 24px for Level 3) to convey depth; never use harsh or dark shadows that feel heavy or aggressive.
• Do keep border-radius minimal (2px for buttons, 5px for cards, 12px for modals) to reinforce the scholarly, print-like aesthetic.
• Do ensure all text meets WCAG AA contrast (4.5:1 for body, 3:1 for large text) by testing on-surface (#424547) against surface backgrounds and primary (#72abbf) against surface-bright (#ffffff).

**Don't**

• Don't use bright, saturated colors or high-contrast accent colors; the palette is intentionally warm and muted to evoke reverence and contemplation.
• Don't apply rounded corners greater than 1.2rem except for badges; excessive rounding undermines the scholarly, authoritative tone.
• Don't use sans-serif typefaces for body text or Scripture passages; Sentinel serif is essential to the brand's identity and readability for extended reading.
• Don't stack shadows or use blur effects on the main content area; reserve backdrop-filter: blur(2px) for modal overlays only.
• Don't use system fonts or generic fallbacks; always load Gotham and Sentinel via @font-face to maintain visual consistency across browsers.
• Don't create buttons or interactive elements with less than 40px height or 5px padding; accessibility and touch-target size are non-negotiable for a Scripture platform.