The Sojourner theme.

Deep green. Warm white. A little gold.

Forest leads the brand. Midnight keeps the words clear. Gold draws attention to the moments that matter.

Color palette

Five colors, each with a clear role. Hex values below are read from the live theme.

Forest

--color-forest

Brand color, links, and primary actions

Sage

--color-sage

Supporting surfaces, diagrams, and secondary text on midnight

Midnight

--color-midnight

Headlines, body text, and dark sections

Warm white

--color-warm-white

Main canvas and text on dark surfaces

Gold

--color-gold

Selective emphasis and featured actions, with midnight lettering

On warm white, use midnight for text and forest for links and buttons. On midnight, use warm white for text and sage for supporting details. Gold fills take midnight lettering; gold and sage are not body-text colors on warm white. Supporting shades keep controls readable in both themes.

Three fonts. Three roles.

Manrope guides the interface. Literata carries the reading. PT Serif Italic supplies scripture emphasis.

Manrope

Interface, buttons, marketing headings

Modernize your business.

Clear language. Comfortable spacing. A familiar way forward.

Literata

Scripture, book, chapter, verse, editorial serif

Room for the words.

A reading face for passages that deserve time and attention.

PT Serif Italic

Scripture italics

Thy word is a lamp unto my feet, and a light unto my path.

Psalm 119:105 · KJV

One theme, in light and dark.

Same hierarchy, different reading surfaces. These previews use the shared theme tokens, including the cards and controls.

Light reading

Interactive specimen

Psalm 119:105 · KJV

Thy word is a lamp unto my feet, and a light unto my path.

Literata for the passage. PT Serif Italic for the emphasis. Manrope for the controls.

1 of 2 example verses

Dark reading

Interactive specimen

Psalm 119:105 · KJV

Thy word is a lamp unto my feet, and a light unto my path.

Literata for the passage. PT Serif Italic for the emphasis. Manrope for the controls.

1 of 2 example verses

The theme in use

Live controls using the same colors and fonts. Open the gallery to try their states and interactions.

Explore the component gallery

Buttons

Button

Button — sizes

IconButton

StatefulButton

MagneticButton

Forms

Input

Textarea

Brief

Select

Discipline

Checkbox

Remember my reading position

Radio

Reading preference

LightDark

Switch

Reduced motion

Data

Badge

NeutralAccentSignal

Tag

SavedReading

Avatar

BASO

Table

Font	Role
Manrope	Interface
Literata	Reading
PT Serif Italic	Scripture italics

Feedback

Progress

Reading progress60%

Skeleton

Tooltip

Toast

Bookmark saved

Continue from this passage next time.

Dialog

Navigation & disclosure

Tabs

Breadcrumb

Pagination

Accordion

Surfaces

Card

Light card

Warm-white surface

A quiet surface for supporting content, with midnight text for comfortable reading.

TiltCard

Tilt me