Brand Kit · Connected

Logo

Three variants for different backgrounds and contexts. All SVG. Use the sage version on light backgrounds; dark version on photos or dark surfaces.

Mark · Sage

For light / cream backgrounds · SVG + PNG

SVG PNG 512

Mark · Dark

For dark / photo backgrounds · SVG

SVG

Horizontal Lockup

Mark + wordmark · SVG · uses Lora Bold

SVG

Clear space: maintain empty space equal to 25% of the mark's height on all sides. Minimum size: 24×24 pixels for digital, 0.5" for print.

Color palette

Click any swatch to copy the hex value. Sage is primary; terracotta is the accent; cream is the surface.

Click to copy

Sage · Primary

#7BA38C

Click to copy

Sage Dark

#5E8870

Click to copy

Sage Soft

#EEF6F1

Click to copy

Terracotta · Accent

#E07A5F

Click to copy

Terracotta Dark

#B8553A

Click to copy

Cream · Surface

#FFF5F2

Click to copy

Bg · Warm White

#FDFBF7

Click to copy

Text · Near Black

#1a1a1f

Typography

Two free web fonts. Lora (serif) for headlines and quotes. Inter (sans-serif) for body and UI.

Lora

Display · Serif

Use for: headlines, quotes, attribution, display callouts, clinical voice. Google Fonts (free). Pair only with Inter.

Regular 400 Medium 500 Semibold 600 Bold 700 Italic 400 Italic Medium 500

Hero · Lora Bold 700 · 48px Bids are the currency of relationships.

Quote · Lora Medium 500 · 24px · italic Most couples don't have a conflict problem. They have a noticing problem.

Subtitle · Lora Regular 400 · italic 18px Written by a licensed couples therapist.

Inter

UI · Sans-serif

Use for: body copy, buttons, small text, UI elements, captions. Google Fonts (free).

Regular 400 Medium 500 Semibold 600 Bold 700

Body · Inter Regular 400 · 16px Connected is a 60-second nightly practice for couples. One expert-crafted question each evening, answered privately, revealed in the morning.

Button · Inter Semibold 600 · 15px Download on App Store

Eyebrow · Inter Bold 700 · 11px · uppercase · tracked Creator Kit · Brand

Brand voice

Four principles that make Connected content feel like Connected.

Practice > fix

Frame Connected as a daily practice couples do together, not a fix for a broken relationship.

Specific > generic

"You answer one question each night" beats "Improve your communication." Concrete mechanism over abstract benefit.

Name the framework

Gottman's bids, EFT attunement, behavioral self-monitoring — clinical precision builds credibility.

Invitation > sales

No manufactured urgency. No "game-changer." Treat readers like adults.

Usage rules

Quick reference for common decisions.

Do

Use Sage as the primary color and Terracotta as the accent — not the other way around.
Pair Lora (serif) with Inter (sans) — these two are the brand.
Keep 25%-of-logo-height clear space around the mark.
Use the dark-version mark on photos or dark backgrounds.
Render everything at 2× for retina screens.
Quote Josh as "Josh Crane, LPCC" — credential always included.

Don't

Stretch, rotate, or recolor the logo mark. Download a variant instead.
Swap in different fonts that "kind of look like Lora."
Use emoji hearts as a substitute for the logo.
Add drop shadows, gradients, or outlines to the mark.
Use the logo in running text — use the wordmark instead.
Use Josh's name or likeness in a way that implies endorsement of unrelated products.

Quick CSS reference

Paste into your own stylesheet.

:root {
  --sage:        #7BA38C;
  --sage-dark:   #5E8870;
  --sage-soft:   #EEF6F1;
  --terracotta:       #E07A5F;
  --terracotta-dark:  #B8553A;
  --terracotta-soft:  #FFF5F0;
  --cream:       #FFF5F2;
  --bg:          #FDFBF7;
  --text:        #1a1a1f;
  --text-body:   #2a2a32;
  --text-muted:  #6a6a74;

  --font-serif:  'Lora', Georgia, serif;
  --font-sans:   'Inter', -apple-system, sans-serif;
}

/* Google Fonts import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');