A little less admin.
A lot more human.
The direction brings the people and purpose of church life into a clear, welcoming digital experience. It gives Tithely a confident voice, makes its tools easy to understand, and leaves space for the stories that make the work meaningful.
One visual language
Warm, clear typography
Geist’s variable weights connect generous headlines with readable body text and quiet labels. A consistent hierarchy helps people find their next step.
A familiar green, in balance
Mint carries the brand and highlights useful actions. Deep ink adds confidence; white and stone create breathing room. Sage, sky, lilac and sea glass bring warmth and variety.
Light with a purpose
Soft gradients create atmosphere around stories and product moments. Gentle tonal shifts connect the sections and give the page a calm, continuous rhythm.
People at the center
Church photography and personal stories keep the experience grounded in real life. Clear product screens and focused illustrations show how the tools support that work.
Considered shape and depth
Soft corners, fine edges and restrained shadows form a consistent card and button system. Layered graphics add dimension, while simple rounded icons keep information easy to recognize.
A little life in the details
Measured reveals, responsive hover states and small leaf flourishes make the experience feel attentive. Motion guides attention and gives each interaction a clear response.
Together, these choices create a website that feels approachable and capable: easy to scan, comfortable to explore, and clear about where to go next. The same visual language carries from the first headline through the product stories, actions and form.
A few things to try
Some details reveal themselves as you move through the moodboard.
- Explore and present
- Use Explore the direction to begin, Index to jump between boards, and the Tithely logo to return to the opening. The opening and Explore the direction fade together. Navigation gently hides as the opening fades toward white and returns when you scroll up. Present shows one board at a time; use the on-screen arrows or your keyboard’s arrow keys to navigate, and Escape to exit.
- Typography and color
- Scroll to reveal the headline’s color in reading order; scrolling back reverses it. Hover, focus or click the font-weight labels to compare the type. Click a color swatch to copy its hex value.
- Patterns and product icons
- Hover or focus a pattern to reveal its product scene and motion. Move across the product icons to bring their colors to life.
- Buttons
- Hover to see the fill, depth and arrow treatments. Click to release three small leaves upward from one point along the top edge; the point and direction change on the next click. Each new click replaces the previous burst, while a soft ripple confirms the action.
- Tools and customer stories
- Hover or focus the small info icons for tool descriptions. The customer video previews silently on hover. Its play button stays in place; click to watch the full interview. The pricing and written-story buttons demonstrate their visual states within this moodboard.
- Product screens
- Watch the demonstration move from Giving to People. Click either tab to explore that view, or use Replay to restart the sequence. The intro video plays a silent preview when visible. Use the centered Watch intro button for the full video.
- The form
- Focus the fields to see their active states and try the required-field validation. Hover Explore other options for a glimpse of the cards, then click to reveal them. Each card opens a short product walkthrough. Get started shows a confirmation in this prototype.
You can also explore with Tab and Enter. Dialogs close with their close button or Escape, and motion follows the viewer’s reduced-motion preferences.
