ParentWise · Brand Design Reference
Secure Parents.
Secure Teens.
Secure Future.
getparentwise.com design system — purple, gold & gradient edition.
1
Visual Language — Color, Gradients, Typography
Color Palette
Purple × Gold — the regal pairing
Deep Plum
#5A3D8F
Primary brand · headers
Brand Purple
#6B4CA3
CTAs · icons on light
Hero Violet
#7B5AB5
Gradient start
Deep Indigo
#3D2970
Gradient end
Honey Gold
#D4B97E
Button start · icons on dark
Gold Mid
#C9A96E
Labels · text on dark
Gold Deep
#B8943A
Button end · text on light
Warm Cream
#F5F1E8
Page bg (light)
Greige Canvas
#C9C3B4
Page surround (both)
Near Black
#1A1A2E
Page bg (dark)
Ghost Lavender
#F0EAF8
Primary text (dark)
Lavender Tint
#EDE8F5
Icon bg · hover (light)
Gradient System
Source: getparentwise.com
Hero
155deg · #7B5AB5→#5A3D8F→#3D2970
Gold Button
135deg · #D4B97E→#B8943A
Dark Section
180deg · #1A1A2E→#0F0820
Dark Card
135deg · #2A1950→#1A1035
Chapter Bar
90deg · #5A3D8F→#6B4CA3
Hero Curve Signature
Your Teen Doesn't Need You to Fix Them
They need to launch from a secure foundation.
border-radius: 50% 50% 0 0 / 100% 100% 0 0 · height: 90px · left: -5% · width: 110%
Typography
DM Sans (UI) · Cormorant Garamond (emotion)
Your family's secure future.
Creating Security During Adolescence
"The real work doesn't start with them. It starts with you."
Science-backed guidance for entrepreneurial parents of teenagers, because the work starts with you.
Founded by M. Aurelius Higgs — educator, coach, and global practitioner with 20+ years working with families.
"Insecurity isn't the absence of safety. It is the absence of authorship."
2
Components — Buttons, Badges, Cards
Button System — hover over each
Badge System — hover over each
Most Popular
Science-Backed
Phase 1 of 3
90-Day Journey
Explore
Free
Offer Cards — hover over each
ParentWise First Steps
Free
A Tiny 5-Day Challenge
Begin where you have the greatest influence — yourself.
Most Popular
Circle of Secure Parents
$7/mo
Community Membership
A worldwide community committed to growth first. Secure parents, secure teens.
ParentWise Pathway
From $3K
90-Day 1:1 Journey
Built around your family, your patterns, and your goals.
3
Interactive States — Hover, Active, Focus Documented
Button States
Gold Button
Default
Pulse + float
animations active
:hover
translateY(-3px)
scale(1.01)
glow 0 12px 40px .65
animations paused
:active
Join Now
translateY(0)
scale(.98)
glow reduced
filter: brightness(.96)
:focus
Join Now
outline: 2px solid
var(--gold-mid)
outline-offset: 3px
Purple Button
Default
bg: var(--btn-pur-bg)
shadow: 0 4px 24px .3
:hover
Join Circle
bg: var(--btn-pur-hbg)
translateY(-2px)
shadow 0 8px 30px .45
:active
bg: var(--purple-deep)
translateY(1px)
shadow reduced
:focus
Join Circle
outline: 2px solid
var(--gold-mid)
outline-offset: 3px
Outline & Gold Outline Buttons
Outline
Default
Transparent bg
border: var(--btn-ol-bd)
Outline
:hover
Learn More
bg: var(--btn-ol-hbg)
border: var(--btn-ol-hbd)
color: var(--tx-primary)
translateY(-2px)
Gold Ol.
Default
Transparent bg
border: var(--btn-gol-bd)
color: var(--btn-gol-tx)
Gold Ol.
:hover
Explore
bg: var(--btn-gol-hbg)
border: var(--btn-gol-hbd)
translateY(-2px)
Badge States
Gold
:hover
Most Popular
filter:brightness(1.08)
translateY(-1px)
Science
:hover
Science-Backed
bg: var(--badge-sci-hbg)
translateY(-1px)
Outline
:hover
90-Day
bg: subtle fill
border strengthens
translateY(-1px)
All badges
:active
Most Popular
translateY(0)
filter:brightness(.96)
Card States
Standard
:hover
ParentWise First Steps
5-Day Challenge
translateY(-4px)
border→gold
shadow deepens
Featured
:hover
Circle of Secure Parents
Community · $7/mo
translateY(-4px)
gold glow shadow
rgba(212,185,126,.25)
Card Button States
Gold Card
Btn :hover
filter:brightness(1.08)
translateY(-1px)
shadow 0 8px 24px .5
Outline Card
Btn :hover
bg: subtle fill
border strengthens
color: tx-primary equiv
Usage map
row :hover
ParentWise Pathway
90-day flagship
bg: bg-inset fills
padding-left shifts in
subtle reveal
Focus ring
(all elements)
Any Button
outline: 2px solid
var(--gold-mid)
outline-offset: 3px
keyboard nav only
4
Motion Tokens · Spacing · Radius
Motion Tokens
Fade Slide In
opacity: 0→1 · translateY: 20px→0
0.6s cubic-bezier(0.22,1,0.36,1)
Gold Button Pulse
goldPulse · box-shadow glow · 3s ∞
Float Y-axis
translateY: 0→-4px→0 · 4s ∞
Shine Sweep ::before
skewX(-20deg) · left: -80%→130%
rgba(255,255,255,0.2) · 2.8s ∞
Orb Drift (hero)
translate(0,0)→(20,-15) · 8s ∞
staggered animation-delay
Mode Switch
background-color .35s ease
border-color / color .28s ease
Spacing & Radius
Base unit: 4px · max-width: 900px
4px — tight: icon padding, inline gaps
8px — compact: badge padding, small gaps
16px — base: component padding
24px — section: card padding, list rhythm
40px — open: between major sections
64px — hero: top/bottom padding
5
Icon System — Phosphor · Duotone · Purple (light) / Gold (dark)
Core & Coaching Icons — hover any icon
ph-globe-hemisphere-west
Circle
ph-flower-lotus
Brand mark
ph-chat-circle-dots
Coaching
ph-seal-check
Science-backed
Usage Map — hover any row
ParentWise First Steps
Growth, entry point. Pairs with gold "Free" badge.
ph-plant
Circle of Secure Parents
Worldwide community. Featured card + "Most Popular" badge.
ph-globe-hemisphere-west
ParentWise Pathway
90-day flagship. Direction, navigation, intentional journey.
ph-compass
Brand Mark / Favicon
Purple on light · Gold on dark. Never swap.
ph-flower-lotus
Attachment Theory
Look Back phase, Inside Out Audit, pattern recognition.
ph-brain
Size Reference — ph-compass
6
Code Reference — Tokens, Interactions, Icons
CSS Implementation
/* ── Gold button — all states ───────────────────────── */
.btn-gold { animation: goldPulse 3s ∞, floatY 4s ∞; cursor: pointer; }
.btn-gold:hover { transform: translateY(-3px) scale(1.01);
box-shadow: 0 12px 40px rgba(201,169,110,.65);
animation-play-state: paused; filter: brightness(1.06); }
.btn-gold:active { transform: translateY(0) scale(.98);
box-shadow: 0 3px 12px rgba(201,169,110,.4); }
.btn-gold:focus-visible { outline: 2px solid var(--gold-mid); outline-offset: 3px; }
/* ── Purple button ──────────────────────────────────── */
.btn-purple:hover { background: var(--btn-pur-hbg); transform: translateY(-2px); }
.btn-purple:active { background: var(--purple-deep); transform: translateY(1px); }
/* ── Outline button ─────────────────────────────────── */
.btn-ol:hover { background: var(--btn-ol-hbg); border-color: var(--btn-ol-hbd);
color: var(--tx-primary); transform: translateY(-2px); }
/* ── Badges ─────────────────────────────────────────── */
.badge { cursor: default; transition: filter .15s, transform .15s; }
.b-gold:hover { filter: brightness(1.08); transform: translateY(-1px); }
.b-sci:hover { background: var(--badge-sci-hbg); transform: translateY(-1px); }
.b-ol:hover { background: var(--badge-ol-hbg); border-color: var(--tx-muted); }
/* ── Cards ──────────────────────────────────────────── */
.card:hover { transform: translateY(-4px); border-color: var(--bd-gold); }
.card.feat:hover { box-shadow: 0 14px 40px rgba(212,185,126,.25); }
.cbtn-gold:hover { filter: brightness(1.08); transform: translateY(-1px); }
.cbtn-ol:hover { background: var(--cbtn-ol-hbg); color: var(--cbtn-ol-htx); }
/* ── Icon color rule ────────────────────────────────── */
[data-mode="dark"] --icon-color: #D4B97E; /* gold on dark */
[data-mode="light"] --icon-color: #6B4CA3; /* purple on light */
<ph-compass color="var(--icon-color)" weight="duotone" size="32"></ph-compass>
Design Principles
01
Contrast first
Every token verified for WCAG AA. Text minimum 4.5:1. Gold button text #1A1000 = 10.2:1 — always.
02
Gold = primary CTA
The animated gold button is the highest-hierarchy CTA. One per section max. Its hover pauses the float.
03
Hover = 3 properties
Every interactive element changes: position (translateY), border/shadow, and background or brightness.
04
:active presses back
Active state always reverses the hover lift — translateY back to 0 or +1px. Communicates physical press.
05
Focus = gold ring
2px solid var(--gold-mid) at 3px offset on every interactive element. Works in both modes.
06
Icons follow bg
--icon-color is the single source of truth. Purple on light, gold on dark. One token, zero duplication.