Brand sandbox
The whole system, one scroll.
Logo, colors, typography, components, and section treatments in one place. Use this page during a brand pass to see everything together.
Logo lockup
Hand-drawn SfV monogram + Nunito wordmark with the Family pop.
Dark tone — default (light backgrounds)
Light tone — used inside dark sections
Favicon — adapts to browser theme
light browser chrome → original colors
dark browser chrome → all white (via SVG @media)
The SVG favicon embeds @media (prefers-color-scheme: dark) so the
monogram flips to pure white on dark browser chrome via filter: brightness(0) invert(1).
PNG fallbacks for browsers that don't support SVG favicons.
Color
Primary brand teal, complementary accent, and the neutral scale.
Brand teal
50
#ecfaf9
100
#c7f0ed
200
#9ae3df
300
#6dd6cf
400
#4fcbc4
500
#40c0c9
600
#2da6b0
700
#1f8b94
800
#146f78
900
#0e555c
Accent (complementary wash only)
100
#b7e2ff
300
#89c7f0
500
#5fa9d9
Ink (text)
ink-900
#0a0e1a
Primary text
ink-700
#4b5563
Secondary text
ink-500
#6b7280
Tertiary / placeholder
Surface (backgrounds)
surface-100
#ffffff
Page bg
surface-200
#f8fafc
Alt section bg
surface-300
#f1f5f9
Card surface
Typography
Nunito for display + wordmark (rounded, matches the brushstroke monogram). Inter for body + UI.
Display scale (Nunito 800)
text-7xl · hero
Hero headline
text-5xl · section title large
Section title large
text-4xl · section title medium
Section title medium
text-3xl · section title small
Section title small
Body scale (Inter)
text-lg · lead paragraph
Lead paragraph. We're a small team dedicated to solving the real pains of setting up and supporting plans that protect a family's wealth and estate.
text-base · body paragraph
Body paragraph. Don't we all have enough to worry about? Nobody likes to think about what happens after we're gone — but it's one of the few things that happens to everyone.
text-sm · small body
Small body. Used in cards, captions, and dense areas. Should still be comfortable to read for short paragraphs.
text-xs · caption
Caption / muted. Footnotes, fine print, timestamp text.
Eyebrow + tagline
section eyebrow · text-xs uppercase tracking-[0.2em] text-brand-600 font-semibold
Section eyebrow
logo tagline · Nunito 600 small caps
Protect your legacy
All active weights
Nunito 600 — semibold
The quick brown fox jumps over the lazy dog
Nunito 700 — bold (wordmark)
The quick brown fox jumps over the lazy dog
Nunito 800 — extrabold (display)
The quick brown fox jumps over the lazy dog
Nunito 900 — black
The quick brown fox jumps over the lazy dog
Inter 400 — regular (body)
The quick brown fox jumps over the lazy dog
Inter 500 — medium (UI labels)
The quick brown fox jumps over the lazy dog
Inter 600 — semibold (h3)
The quick brown fox jumps over the lazy dog
Inter 700 — bold (emphasis)
The quick brown fox jumps over the lazy dog
Buttons
Pill-shaped on marketing. Hover lifts and brand-tinted shadows.
On light
On dark
Cards & surfaces
Three flavors: light surface, white-on-white, and frosted glass on dark.
Surface card
Used for personas, features, and most marketing tiles. Soft surface background with white inner-element backgrounds.
White card with border
Used for differentiator grids on white-on-white sections. The border provides edge definition without a heavy shadow.
Dark / frosted card
Used inside dark sections (mission/vision, the math, closing CTA). Frosted glass treatment for nested elements.
Section backgrounds
Five treatments, alternated to create page rhythm.
.bg-white
Plain white. Default for body content sections.
.bg-soft-glow
Soft teal radial gradients on near-white. Hero, CTA bands.
.bg-soft-glow-deep
More saturated teal wash. Peace-of-mind, secondary feature bands.
.bg-ink-deep
Near-black with subtle teal undertone. Anchors the page rhythm.
.bg-brand-deep
Deep teal gradient. The math / proof strip — high color saturation moment.
Motion
.lift on hover —
subtle 4px rise + brand-tinted shadow. Honors prefers-reduced-motion.
Hover me
Hover me
Hover me
Hover me
Brand tokens canonical at sfv-marketing/brand/tokens.css.
Full guidelines in brand/BRAND.md.