TruceWell Style Guide

Warm Blue Trust for the public site.

A living reference for TruceWell logo usage, color, typography, Bulma-based components, imagery, and accessibility.

Brand core

  • Positioning: co-parenting coordination with legal-ready structure.
  • Category: co-parenting operations with legal-team collaboration, not just chat.
  • Promise: lower-friction cases at $12/month per case.
  • Audience: parents and family-law teams handling active coordination.

Voice

  • Grounded, calm, credible, and direct.
  • Lead with practical outcomes and legal reliability.
  • Avoid blame, wellness hype, and legal over-promises.
  • Frame conflict as something structure can reduce.

Content tone

  • Keep pages spare, concrete, and conversion-focused.
  • Remove labels, pills, headings, and helper text when nearby content already explains the point.
  • Avoid repeating pricing in adjacent UI elements; say it once where it has the most decision value.
  • Prefer concrete product and proof copy over decorative microcopy.
  • Use eyebrows only when they add orientation; do not use them as ornamental labels.
  • Keep homepage hero and CTA areas especially uncluttered.

Logo system

Primary

Use the horizontal logo in the navbar and on white, cream, or pale-blue surfaces.

Download logo.png

Reverse

Use the reverse logo only on dark navy sections where the primary logo loses contrast.

Download logo-reverse.png

Mark

TruceWell square mark

Use the square mark for favicon, compact, and social contexts.

Download logo-square.png

Color tokens

Brand Navy
#021D4F
Text, dark bands
Deep Blue
#0B3992
Secondary emphasis
Action Blue
#206FDF
CTAs, links
Soft Blue
#5F97E2
Support accents
Pale Blue
#F4F8FD
Panels, tables
Warm Cream
#F8F3EA
Warm surfaces
Text Slate
#334566
Body text
Border Blue
#CBD8EA
Lines, separators

Typography

Public Sans, self-hosted

A shared case workspace for family-law work.

Use Public Sans for headings, body copy, navigation, buttons, forms, tables, and product proof panels.

Headlines are large, clean, and tightly tracked. Body copy stays direct and readable. Labels use moderate uppercase spacing in brand blue.

Bulma and components

Bulma provides layout primitives. TruceWell classes provide brand-specific cards, buttons, proof panels, pricing blocks, and tables.

Proof card

Thin borders, square corners

Use Bulma columns and sections with TruceWell card classes for clear hierarchy.

Pricing

$12/month per case

Both parents included. Legal teams always free.

Workflow detailsProduct previews show case value without live screenshots.
Clear
Case recordStructured previews explain organized, export-ready records.
Ready
Primary action Secondary action

Auth form standard

Sign in

Auth forms

Action Blue submit buttons, Shadowed auth cards

Login and signup forms use the same primary submit treatment: Action Blue background, white text, heavy type, square corners, and full width.

Auth cards use a white surface, Border Blue line, square corners, and the subtle form-box shadow from the login page.

Comparison table

ElementRuleReason
FrameworkBulma onlyKeep the static site simple and maintainable.
CardsThin borders, square cornersMatches the legal-tech trust system.
TablesAllow intentional internal horizontal scrolling on mobilePreserves comparison readability.

Imagery

Family illustration showing parents and children

Use human imagery as support

The family illustration shares the blue language but has a softer consumer style. Use it lower on pages for warmth. Use product-style panels in hero sections for a more premium legal-tech first impression.

Using TruceWell in your content

Rules

  • Write the name as "TruceWell" (capital T, capital W); never "trucewell" in running text.
  • Pair the logo with the tagline "better outcomes, stronger families." on first mention in long-form content.
  • Keep clear space around the logo equal to the height of the wordmark.

Do not

  • Recolor the logo or use it outside the color tokens on this page.
  • Stretch, rotate, or add effects to the logo.
  • Use the reverse logo on light surfaces.

For paid ads and legal-adjacent claims

Follow the ad-copy guardrails in docs/gtm/legal-ops-memos.md (Memo A): no outcome promises, "export-ready" not "admissible", scoped free claims, no competitor names in ad copy. Questions: hello@trucewell.com. What stays private on the product: See What Stays Private.

Accessibility rules

Keep strong contrast, visible focus states, mobile-safe touch targets, descriptive image alt text, and intentional horizontal scrolling only for wide comparison tables.