Design System
GospeLib's design system governs every visual surface, interaction, and motion across mobile, tablet, and web. It ensures the app feels like entering a sacred space — reverent, calm, and unhurried — while being the most powerful scripture study tool ever built.
Design Philosophy
The central premise: every tool is present but invisible until needed. Power lives one gesture below the surface of a clean, paper-like reading environment. The experience should feel as though the app understands what you're trying to do the moment you begin trying to do it.
The Five Principles
| Principle | Description |
|---|---|
| Reverent Minimalism | The default state of every screen is the simplest possible version of itself. Complexity reveals itself through interaction, never through display. |
| Depth Without Clutter | Every feature is accessible within two gestures from any reading context. No feature requires navigating away from the text. |
| Material Warmth | Inspired by Material Design's elevation and motion model, but executed in parchment, warm linen, and deep ink rather than bright primaries. Paper-like where it touches content; clean and modern where it touches chrome. |
| Infinite Configurability, Tasteful Defaults | Every layout, font, color mode, and tool placement is user-configurable. The defaults are opinionated enough that first-time users feel immediately at home. |
| Unmistakably GospeLib | The color system, shape language, iconography, motion character, and doctrinal color taxonomy together create an ecosystem identity recognizable across every surface. |
What GospeLib Is Not
- It is not a Gospel Library clone — the Church's app serves a different audience and purpose.
- It is not Logos or Accordance for iOS — those are built for evangelical Protestant seminary students.
- It is not a social reading app, a gamified devotional, or a curriculum delivery system. It is a personal scholarly study environment.
Two Surface Characters
All surfaces in GospeLib fall into one of two categories:
| Surface | Character | Background | Edges |
|---|---|---|---|
| Paper | Warm, textured, holds scripture and annotations | white-200 (#F5F3EE) with subtle noise grain | Floating via shadow — no borders |
| Chrome | Clean, flat, cooler — for navigation and tools | white-100 (light) / navy-800 (dark) | Crisp elevation shadows |
Section Guide
| Section | What You'll Find |
|---|---|
| Foundations | Color system, typography, elevation & shape, iconography, motion & haptics |
| Components | Reader experience, annotations, original language tools, knowledge graph, study tools, layout |
| Patterns | Loading states, onboarding, sharing & deep linking, subscription boundaries |
| Dark Mode | Three reader modes (Light, Study Dark, Blackout) plus Night Warm |
| Accessibility | WCAG compliance, screen reader support, reduced motion, left-hand mode |
| Design Tokens | Full token reference — colors, typography, spacing, elevation, motion |
| Platform Strategy | Phone, tablet, and web adaptations |