Design Tokens
All visual decisions in GospeLib are expressed as semantic tokens defined in packages/ui/src/tokens/index.ts. Tokens are the single source of truth — Figma libraries, CSS custom properties, and React Native StyleSheet values are all derived from this canonical definition.
Color Tokens
Primary Palette
| Scale | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 |
|---|---|---|---|---|---|---|---|---|---|---|
| Navy | ||||||||||
#EEF2F7 | #D4DFE9 | #A9BFD3 | #7E9FBD | #5A80A8 | #3D5A7A | #2E4560 | #1F3046 | #121D2B | #080E15 | |
| Tan | ||||||||||
#FAF7F3 | #F2EDE4 | #E4D9C9 | #D5C4AD | #C4A882 | #B08E66 | #8C6E4B | #6A5238 | #473826 | #251D13 | |
| White | ||||||||||
#FFFFFF | #FAF9F6 | #F5F3EE | #EBE8E1 | #DDD9D0 | #CCCAC0 | #B5B2A7 | #999690 | #7A7870 | #575550 |
Typography Tokens
| Token | Value | Usage |
|---|---|---|
font.family.scripture | GentiumPlus | Scripture text body |
font.family.ui | Inter | UI chrome, labels |
font.family.hebrew | SBLHebrew | Hebrew text (RTL) |
font.family.greek | GentiumPlus | Greek text |
font.size.xs | 11 | Strong's badges, metadata chips |
font.size.sm | 13 | Secondary labels, captions |
font.size.base | 16 | UI body text |
font.size.md | 18 | Default scripture text |
font.size.lg | 20 | Large scripture, section headers |
font.size.xl | 24 | Screen titles |
font.size.2xl | 30 | Marketing headings |
font.size.3xl | 38 | Hero headings |
font.lineHeight.tight | 1.3 | Headings |
font.lineHeight.normal | 1.5 | UI text |
font.lineHeight.reading | 1.6 | Default scripture reading |
font.lineHeight.loose | 2.0 | Hebrew (cantillation marks) |
font.weight.regular | 400 | Body text |
font.weight.medium | 500 | Emphasized labels |
font.weight.semibold | 600 | Section headings |
font.weight.bold | 700 | Strong emphasis |
Spacing Scale
| Token | Value (px) | Usage |
|---|---|---|
space.1 | 4 | Tight internal padding |
space.2 | 8 | Standard internal padding |
space.3 | 12 | Small gaps |
space.4 | 16 | Standard gaps, card padding |
space.5 | 20 | Phone horizontal margin |
space.6 | 24 | Section spacing |
space.8 | 32 | Large section spacing |
space.10 | 40 | Tablet horizontal margin |
space.12 | 48 | Web vertical margin |
space.16 | 64 | Major section breaks |
Border Radius
| Token | Value (px) | Usage |
|---|---|---|
radius.xs | 2 | Micro elements |
radius.sm | 4 | Chips, badges, small controls |
radius.md | 8 | Buttons, inputs, chrome panels |
radius.lg | 12 | Cards, note cards, paper surfaces |
radius.xl | 16 | Bottom sheets (top corners only) |
radius.full | 9999 | Pills, avatars, FABs |
Elevation (Shadows)
| Level | Box Shadow | Usage |
|---|---|---|
| 0 | none | Background (page itself) |
| 1 | 0 1px 3px rgba(20,16,10,0.08), 0 1px 2px rgba(20,16,10,0.06) | Resting cards, inline panels |
| 2 | 0 3px 8px rgba(20,16,10,0.10), 0 2px 4px rgba(20,16,10,0.07) | Raised cards, hover states |
| 3 | 0 6px 16px rgba(20,16,10,0.12), 0 3px 6px rgba(20,16,10,0.08) | Floating panels, bottom sheets |
| 4 | 0 12px 32px rgba(20,16,10,0.14), 0 4px 8px rgba(20,16,10,0.09) | Popovers, command palette |
| 5 | 0 20px 48px rgba(20,16,10,0.18), 0 6px 12px rgba(20,16,10,0.10) | Modal dialogs |
Shadow colors use warm near-black rgba(20,16,10) — never pure black.
Motion Tokens
| Token | Value | Usage |
|---|---|---|
motion.easing.spring | cubic-bezier(0.34, 1.56, 0.64, 1) | Micro-interactions, active states |
motion.easing.smoothInOut | cubic-bezier(0.4, 0, 0.2, 1) | Panel transitions |
motion.easing.decelerate | cubic-bezier(0.0, 0.0, 0.2, 1) | Elements entering screen |
motion.easing.accelerate | cubic-bezier(0.4, 0.0, 1, 1) | Elements leaving screen |
motion.duration.instant | 80ms | Content reveals, lexicon bubbles |
motion.duration.fast | 120ms | State changes, highlights |
motion.duration.standard | 220ms | Panel slides, tab transitions |
motion.duration.deliberate | 350ms | Constellation zoom, full-screen |
motion.duration.slow | 500ms | Onboarding animations |
Layout Tokens
| Token | Value (px) | Usage |
|---|---|---|
layout.readerMaxWidth | 680 | Max-width for scripture text column (web) |
layout.phoneMargin | 20 | Horizontal margin on phone |
layout.tabletMargin | 40 | Horizontal margin on tablet |
layout.gutterStandard | 12 | Annotation gutter in standard mode |
layout.gutterStudyMode | 56 | Annotation gutter in study mode |
layout.contextPanelWidth | 360 | Right-side context panel (tablet/web) |
layout.sideRailCollapsed | 60 | Side rail icon-only width |
layout.sideRailExpanded | 220 | Side rail with labels |
layout.bottomTabBarHeight | 56 | Tab bar height |
layout.touchTargetMin | 44 | Minimum touch target size |
Density Tokens
| Mode | Line Height | Paragraph Spacing | Font Size Delta |
|---|---|---|---|
| Spacious | 1.85 | 0.9em | +2px (→ 20px) |
| Comfortable | 1.6 | 0.5em | 0 (→ 18px) |
| Compact | 1.45 | 0.25em | -3px (→ 15px) |
Platform Export
Tokens are the source of truth in TypeScript. Export targets:
| Platform | Format | Generated By |
|---|---|---|
| Web (CSS) | CSS Custom Properties | Build step |
| React Native | StyleSheet constants | Direct import |
| iOS (Swift) | Swift enum | tokens-to-swift.js |
| Figma | Figma Variables | tokens-to-figma.js |
Related Pages
- Color System — detailed palette documentation
- Typography — font roles and type scale
- Elevation & Shape — shadow and radius details
- Motion & Haptics — animation specifications