Color System
GospeLib's color system is built on three primary palettes anchoring every surface, a unique doctrinal color taxonomy for scholarly annotation, and corpus-specific identity colors that tie visual identity to scriptural context.
Primary Palette
Three primaries define the visual language across all surfaces:
| Role | Color | Hex | Token | Usage |
|---|---|---|---|---|
| Pale Navy | #3D5A7A | color.navy.500 | UI chrome, navigation, headers | |
| Warm Tan | #C4A882 | color.tan.400 | Paper surfaces, card backgrounds | |
| Muted White | #F5F3EE | color.white.200 | Primary background, page color |
Navy Scale
| 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|---|---|---|---|---|---|---|---|---|---|
#EEF2F7 | #D4DFE9 | #A9BFD3 | #7E9FBD | #5A80A8 | #3D5A7A | #2E4560 | #1F3046 | #121D2B | #080E15 |
Tan Scale
| 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|---|---|---|---|---|---|---|---|---|---|
#FAF7F3 | #F2EDE4 | #E4D9C9 | #D5C4AD | #C4A882 | #B08E66 | #8C6E4B | #6A5238 | #473826 | #251D13 |
White Scale
| 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|---|---|---|---|---|---|---|---|---|---|
#FFFFFF | #FAF9F6 | #F5F3EE | #EBE8E1 | #DDD9D0 | #CCCAC0 | #B5B2A7 | #999690 | #7A7870 | #575550 |
Doctrinal Color Taxonomy
GospeLib's most distinctive design artifact. Eight canonical colors map to doctrinal themes, providing a complete scholarly annotation language without writing a word. Opinionated by default, fully remappable per user.
| Theme | Color | Hex | Token | Doctrinal Domain |
|---|---|---|---|---|
| Red | #D94F4F | color.doctrinal.gospel | Gospel (faith, repentance, ordinances) | |
| Orange | #E07830 | color.doctrinal.salvation | Plan of Salvation (pre-mortal, mortal, afterlife) | |
| Yellow | #D4A017 | color.doctrinal.christ | Jesus Christ / Atonement (warm gold) | |
| Green | #4A8C5C | color.doctrinal.godhead | God, Godhead, Celestial Glory | |
| Blue | #3D6B9E | color.doctrinal.israel | Israel, Church, covenant people | |
| Purple | #7B4F9E | color.doctrinal.priesthood | Priesthood, Revelation, Prophecy | |
| Brown | #8C6231 | color.doctrinal.history | Names, Dates, Places (historical) | |
| Black | #2A2A2A | color.doctrinal.opposition | Satan, Sin, Opposition |
Highlight Modes
Each doctrinal color supports five annotation modes at different opacities:
| Mode | Opacity | Token Pattern | Usage |
|---|---|---|---|
| Wash | 0.18 | highlight-<color>-wash | Default highlight background |
| Medium | 0.40 | highlight-<color>-medium | Stronger emphasis |
| Text | 1.0 | highlight-<color>-text | Text color mode |
| Underline | 1.0 | highlight-<color>-underline | Underline mode |
| Outline | 1.0 | highlight-<color>-outline | Box/outline mode |
When two highlight colors overlap, they blend visually — signaling a doctrinal intersection (e.g., Atonement + Priesthood = Yellow + Purple).
Personal Highlight Colors
Four pastel colors for free-form user annotation. These occupy their own layer and never overwrite the doctrinal taxonomy:
| Color | Hex | Token |
|---|---|---|
| Yellow | #FFE58A | color.personal.yellow |
| Green | #B8E6C0 | color.personal.green |
| Blue | #AACFED | color.personal.blue |
| Pink | #F5BDD0 | color.personal.pink |
Corpus Identity Colors
Each scriptural corpus has an identity color used for corpus chips, book headers, navigation accents, and constellation nodes.
| Corpus | Color | Hex | Token |
|---|---|---|---|
| Old Testament | #8C6A14 | color.corpus.ot | |
| New Testament | #2E5FA3 | color.corpus.nt | |
| Book of Mormon | #3D7A52 | color.corpus.bom | |
| Doctrine & Covenants | #7A3F8C | color.corpus.dc | |
| Pearl of Great Price | #8C4A28 | color.corpus.pogp | |
| Pseudepigrapha | #5C6B7A | color.corpus.pseudepigrapha |
Corpus colors are desaturated slightly when used as backgrounds to prevent visual competition with the text.
Semantic Colors for Relationship Types
Used in the knowledge graph, connection panels, and inline diff views:
| Relationship | Color | Hex | Token |
|---|---|---|---|
| Cross-reference | #3D7AB5 | color.semantic.crossReference | |
| Topical connection | #5E9E6E | color.semantic.topical | |
| Manuscript variant | #C47A2A | color.semantic.manuscript | |
| Scholarly connection | #7A5E9E | color.semantic.scholarly | |
| Temple connection | #B5833D | color.semantic.temple | |
| Prophetic connection | #9E3D3D | color.semantic.prophetic |
Functional / Semantic UI Colors
| Purpose | Color | Hex | Token |
|---|---|---|---|
| Success | #3D8C5C | color.functional.success | |
| Warning | #C47A2A | color.functional.warning | |
| Error | #C43D3D | color.functional.error | |
| Info | #3D6B9E | color.functional.info |
User-facing error states use warning amber (#C47A2A), not error red. Red is reserved only for destructive action confirmations. See Loading & Empty States for details.
Related Pages
- Dark Mode — color inversions and token resolution per mode
- Design Tokens — full token reference including color scales
- Annotations & Footnotes — highlight color picker UI
- Knowledge Graph — semantic color usage in graph edges