Logos Bible Study

Overview

Logos Bible Study is a scholarly digital platform that transforms biblical research into an intuitive, accessible experience. Serving theologians, pastors, students, and lay readers, the design embodies 'Functional Clarity'—a philosophy that prioritizes information hierarchy and task completion over decorative flourish. The aesthetic is rooted in academic tradition: clean typography, generous whitespace (minimum 24px gutters), and a restrained color palette anchored by a vivid cobalt blue (#1e6afe) that signals interactivity without distraction. The interface evokes the quiet focus of a library study room, where every visual element serves a scholarly purpose.

The brand voice is authoritative yet approachable, precise without pedantry. Logos speaks in the language of serious study: 'Consult trusted commentaries,' 'Research the original language,' 'Get step-by-step guidance.' Sentences are direct, active, and grounded in utility. The tone avoids marketing hyperbole; instead, it demonstrates competence through specificity. Example: 'Compare 47 Bible versions side-by-side with original-language tools and cross-references' rather than 'Explore the Bible like never before.'

Colors

The color system is built on a foundation of near-white surfaces (#ffffff, #f4f4f4, #eeeeee) that provide visual rest and readability for long-form theological text. Primary (#1e6afe) is the signature action color, deployed on all CTAs ('Sign in,' 'Create free account,' 'See all deals'), focus states, and active navigation items. It is a medium-saturation cobalt that reads as trustworthy and scholarly without the coldness of pure blue. Secondary (#4797ff) provides a lighter accent for hover states and secondary interactions, creating a 2-step hierarchy within the blue family. Tertiary (#63728c) is a muted slate used for disabled states, secondary text, and metadata (timestamps, bylines, labels). Error (#ff6600) is a warm orange reserved for alerts, warnings, and destructive actions—its war

Typography

The type system uses Source Sans Pro across all scales, a humanist sans-serif that balances warmth with technical clarity—ideal for both scripture passages and interface labels. Display (56px, 700 weight, -0.03em tracking) is reserved for page titles and hero headlines, commanding attention without aggression. Headline-lg (36px, 600 weight) anchors major sections; headline-md (28px, 600 weight) introduces subsections. Title-lg (22px, 600 weight) labels cards and modals. Body-lg (18px, 400 weight, 28px line-height) is used for long-form commentary and devotional text, with generous line-height (1.56) to ease reading of dense theological material. Body-md (16px, 400 weight, 24px line-height) is the default for UI labels, form text, and navigation. Label-md (14px, 600 weight, 0.02em tracking)

Layout

The layout follows a 12-column grid with a max-width of 1200px, centered on viewport. The left sidebar (210px fixed) contains primary navigation (Dashboard, Library, Search, Bible, Study Assistant, Factbook, Guided Study, Notes, Tools); the main content area expands fluidly to fill remaining space. Horizontal gutters are consistently 24px (md spacing); vertical rhythm uses 40px (lg spacing) between major sections and 24px between subsections. The header (56px height, background #eeeeee) contains the Logos wordmark, 'Free Edition' label, and CTAs ('Create free account,' 'Sign in'). Cards within the content area use 24px padding and 8px border-radius, with 12px gaps between stacked cards. The 'EXPLORE' section below the promotional banner displays a 2-column grid on desktop (1 column on mobi

Elevation & Depth

Visual hierarchy is conveyed through a subtle shadow system and background color shifts rather than dramatic depth. Level 1 (Base): flat surface at #ffffff with no shadow, representing the primary content plane. Level 2 (Cards & Inputs): 1px border in #e7e7e7 plus box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a gentle lift above the base. Level 3 (Modals & Popovers): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) with a semi-transparent overlay (rgba(0, 0, 0, 0.6)) behind the modal. Hover states on cards transition to background-color #f4f4f4 and upgrade the shadow to 0 4px 12px rgba(0, 0, 0

Shapes

The shape language is 'Precise Minimalism'—rounded corners are used sparingly and consistently to soften hard edges without introducing visual softness. Buttons and inputs use 3px border-radius (rounded.DEFAULT), a subtle curve that feels technical and refined. Cards use 8px border-radius (rounded.lg), providing a gentle frame around content blocks. Modals and popovers use 12px border-radius (rounded.xl) to signal elevation and importance. Badges and pills use 9999px border-radius (rounded.full) for a fully rounded appearance, reserved for status indicators and small accent elements. The sideb

Components

Action Elements Buttons follow a two-tier system: primary (background #1e6afe, text white, 40px height, 8px vertical padding, 16px horizontal padding, 3px border-radius) for main CTAs like 'Sign in' and 'Create free account'; secondary (background white, text black, 1px border #e7e7e7, same dimensions) for alternative actions like 'View' or 'Learn more.' Primary buttons transition to #4797ff on hover over 150ms. Secondary buttons shift background to #f4f4f4 on hover. Both states apply a 3px inset focus ring in #e9f5ff when keyboard-focused. All buttons use label-md typography (14px, 600 weight, 0.02em tracking) and disable at 50% opacity with cursor: not-allowed.

Containers & Surfaces Cards are the primary content container: 24px padding, 8px border-radius, 1px border #e7e7e7, bac

Do's and Don'ts

**Do**

• Do use primary blue (#1e6afe) exclusively for interactive CTAs, focus states, and active navigation—never for decorative elements or backgrounds.
• Do maintain minimum 24px gutters and 40px section spacing to preserve the scholarly, uncluttered aesthetic.
• Do apply 3px inset focus rings (#e9f5ff) to all keyboard-interactive elements to ensure WCAG AAA keyboard navigation compliance.
• Do use body-lg (18px, 28px line-height) for long-form commentary and scripture passages to maximize readability.
• Do transition all state changes (hover, focus, active) over 150–200ms using ease-out timing to feel responsive without jarring.
• Do use the tertiary color (#63728c) for disabled, secondary, or metadata text to create clear visual hierarchy.

**Don't**

• Don't use rounded corners larger than 12px; excessive rounding undermines the technical, precise aesthetic.
• Don't apply shadows larger than 0 4px 12px rgba(0, 0, 0, 0.08); heavy shadows feel dated and reduce the clean, scholarly feel.
• Don't mix font families; Source Sans Pro is the only typeface—avoid Georgia, Monaco, or other serif/monospace fonts in UI components.
• Don't use the error color (#ff6600) for non-critical messaging; reserve it for alerts, warnings, and destructive actions only.
• Don't reduce padding below 8px in buttons or 12px in cards; tight spacing feels cramped and reduces scannability.
• Don't apply more than one state transition at a time (e.g., don't fade AND scale simultaneously); keep animations simple and purposeful.