🌅
Communication
The five-minute check-in that changes everything
One small ritual at the end of each day, and how it rebuilt trust for couples in our community.
Brand overview
Heartwise is the visual language of a couples relationship-wellness app. The personality is warm, encouraging, and gently coachy — never clinical. Brand purple (#8C50FB) anchors every primary action and pairs with a rotating pastel family (flamingo, apricot, eggshell, lavender, cream) for feature blocks and topic chips. Typography pairs Gabarito — a soft rounded geometric display face — with Kantumruy Pro for warm, humanist body copy. The marketing site is largely shadow-free, leaning on color blocks and pill buttons; the app reserves its few shadows for lifted question cards, sticker answers, and modal sheets.
Color system
Brand purple drives every primary action; pastels rotate through topic chips and feature blocks; the cream slab anchors pack heroes inside the app.
Brand purples
Purple
#8C50FB
Purple Light
#DCC2F9
Purple Pale
#F9F4FB
Purple Mid
#E7E0EE
Purple Dark
#332669
Pastels
Flamingo
#F2AAAA
Apricot
#FAD7C3
Eggshell
#EBEBD3
Buttercup
#FFCD00
Lavender Soft
#E8DCFF
Salmon
#F8A89F
Cream Card
#F0EAD6
Neutrals
White
#FFFFFF
Off White
#FAFAFA
Light Gray
#E1E1E1
Border
#E7E0EE
Text Secondary
#6B5F96
Ink
#332669
Black
#000000
Semantic
Success
#7BD174
Success Deep
#3DA64B
Error
#F26A6A
Error Deep
#D9544D
Info
#8C50FB
Warning
#FFCD00
App-only chat colors
Chat Partner A
#F8A89F
Chat Partner B
#E8DCFF
Gradients
Purple Sheen
135deg
Warm Glow
135deg
Soft Bg
180deg
Typography
Gabarito is the soft, rounded geometric display face for h1, h2, h3, and h5. Kantumruy Pro is the humanist body face used for h4, paragraphs, button labels, and chat bubble copy.
H1 — Gabarito 64/70 Bold
Connect deeper, every day.
H2 — Gabarito 48/54 Bold
Built for couples who want more.
H3 — Gabarito 32/40 Bold
A daily ritual you both look forward to
H4 — Kantumruy Pro 18/28 Semibold (drops to body face)
Card subheads, list item titles, small group headers.
H5 — Gabarito 24/32 Bold
Mid-tier feature title
Body — Kantumruy Pro 16/24
Heartwise pairs prompts, quizzes, and shared games to help two people stay curious about each other. The voice is warm and gently coachy — never clinical, never preachy.
Label — Kantumruy Pro 12/16 Semibold uppercase
Strength area · Day 1 · Pack
Spacing scale
Base unit 4px. Sections breathe at 120px desktop / 64px mobile.
4px
8px
12px
16px
24px
32px
48px
64px
80px
120px
160px
Border radius
Pill is the default for every interactive button. Cards use 20–30px. Hero illustration containers can go up to 72px on the top corners only.
8px
xs
xs
12px
sm
sm
16px
md
md
20px
lg
lg
30px
xl
xl
40px
2xl
2xl
56px
3xl
3xl
72px
hero
hero
pill
Shadows
The marketing site is largely flat — color blocks instead of shadows. Shadows only appear in the app on lifted question cards, sticker answers, and modal sheets.
none
card · 0 6px 20px
lift · 0 12px 32px
sticker · 0 16px 40px
Motion
Motion should feel warm and human, not technical — bounces are gentle, presses are tactile.
Website — Cards
Pastel feature blocks use 30px radius and zero shadow. Magazine article cards stay white with a subtle hover lift.
Pastel feature cards
💖
Daily questions
Answer a fresh prompt each morning. See your partner's answer once you've shared yours.
🎯
Couple quizzes
Bite-size quizzes you take side-by-side. Discover your strength areas together.
🎲
Connection games
Playful card games that turn a quiet evening into a real conversation.
📖
Magazine
Short reads from real therapists on the things that matter most.
Magazine article card
🌙
Conflict
Why "we never fight" can be a warning sign
Therapists explain how friction, handled well, is actually a marker of a healthy relationship.
Website — Hero
The signature marketing hero is white headline + body on a solid purple slab with 72px corner radius. Buttercup and lavender accents float around the edges.
Stay curious about each other.
Heartwise is the daily five-minute habit couples are using to feel more connected. One question. Two answers. A whole new conversation.
App — Top bar
Inside the app, the top bar is transparent — it inherits the cream/lavender/peach pack hero behind it. Left and right slots hold 44×44 white circle action buttons.
App — Chat bubbles
Memory threads and journey conversations use two bubble variants. Partner A is coral with a 4px tail at the bottom-left; partner B is lavender with a 4px tail at the bottom-right.
👩
I felt really seen when you remembered the meeting today.
👨
I'm so glad. I wrote it on a sticky note last night.
👩
The little things really do add up ✨
App — Pack hero
A pack/quiz/journey detail screen opens with a colored slab — usually cream #F0EAD6 — that hosts a label pill, a 32px Gabarito title, and a circular illustration overlapping the bottom edge. A white content panel with 30px top corners begins below.
App — Journey nodes
Journey steps are rendered as lavender chat-bubble-shaped nodes — the speaking corner shrinks to 6px to suggest a thought bubble. A small white pill labels the node type. A pair of completed-partner avatars sits beneath it.
Quiz
💡
👩👨
Question
❓
👩👨
Game
🏆
👩👨
App — Question rows
Pack question lists are white cards with a 56×56 colored thumbnail, a small "Question N" label pill, and an h4 title. Resting state has no shadow; tap lifts it with the card shadow.
💌
Question 1
What's a small thing I did this week that made you feel loved?
🌱
Question 2
Where would you like us to grow together this month?
🪐
Question 3
If we had a free Saturday with zero plans, what would you want?
App — Comparison pair
Game answer reveal: each partner's guess sits in a white card with a 1.5px green border (correct) or 1.5px coral border (incorrect), and a check or X stamp on top.
✓
Your guess
Sushi night
✕
Mark's guess
Pizza night
App — Score block & radial heart gauge
A pair of pastel podium blocks — lavender vs apricot — show each partner's score side by side. Quiz overall results use a semicircular heart gauge.
Score podium
Mark
8
Jessica
7
Radial heart gauge
75%
Strong connection
App — Bottom CTA & tab bar
A full-width purple pill button is pinned above the safe area as the primary action. The four-icon tab bar sits below with a hairline top border; the active tab tints both icon and label purple.
Home
Journey
Magazine
Profile
App — Modal sheet
Bottom sheets surface flush — no handle. The container is white with 30px top-only corners and a soft sheet-up shadow rising from below.
Edit your answer
Only you and your partner will see this. You can come back and change it any time.
Tailwind reference
These mappings are the source of truth — replace default Tailwind theme values with these when implementing the Heartwise design system. The full mapping (including website-only and app-only scopes) lives in design-system.json under the tailwind key.
tailwind.config.js — theme.extend
module.exports = {
theme: {
extend: {
colors: {
'brand-purple': '#8C50FB',
'brand-purple-light': '#DCC2F9',
'brand-purple-pale': '#F9F4FB',
'brand-purple-mid': '#E7E0EE',
'brand-purple-dark': '#332669',
'pastel-flamingo': '#F2AAAA',
'pastel-apricot': '#FAD7C3',
'pastel-eggshell': '#EBEBD3',
'pastel-buttercup': '#FFCD00',
'pastel-lavender-soft': '#E8DCFF',
'pastel-salmon': '#F8A89F',
'pastel-cream-card': '#F0EAD6',
'chat-partner-a': '#F8A89F',
'chat-partner-b': '#E8DCFF',
'semantic-success': '#7BD174',
'semantic-error': '#F26A6A',
'text-primary': '#332669',
'text-secondary': '#6B5F96',
'text-inverse': '#FFFFFF',
'border-subtle': '#E7E0EE',
},
fontFamily: {
display: ['Gabarito', 'ui-sans-serif', 'system-ui'],
body: ['Kantumruy Pro', 'ui-sans-serif', 'system-ui'],
},
fontSize: {
h1: ['64px', { lineHeight: '70px', fontWeight: '700' }],
h2: ['48px', { lineHeight: '54px', fontWeight: '700' }],
h3: ['32px', { lineHeight: '40px', fontWeight: '700' }],
h4: ['18px', { lineHeight: '28px', fontWeight: '600',
letterSpacing: '-0.225px' }],
h5: ['24px', { lineHeight: '32px', fontWeight: '700' }],
},
borderRadius: {
xs: '8px', sm: '12px', md: '16px', lg: '20px',
xl: '30px', '2xl': '40px', '3xl': '56px',
hero: '72px', pill: '9999px',
},
boxShadow: {
card: '0 6px 20px rgba(51, 38, 105, 0.08)',
lift: '0 12px 32px rgba(51, 38, 105, 0.12)',
sticker: '0 16px 40px rgba(51, 38, 105, 0.14)',
'sheet-up': '0 -16px 40px rgba(51, 38, 105, 0.12)',
},
transitionTimingFunction: {
standard: 'cubic-bezier(0.4, 0, 0.2, 1)',
spring: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
},
transitionDuration: {
tap: '150ms', control: '200ms',
panel: '300ms', playful: '750ms',
},
},
},
};
Component recipes
buttonPrimary
Primary CTA — Try for free, Continue, Send.
inline-flex items-center justify-center rounded-pill bg-brand-purple text-text-inverse px-6 py-3.5 font-body font-semibold text-base transition-transform duration-tap ease-standard hover:-translate-y-0.5 active:scale-95
buttonSecondary
Outline action sitting next to the primary CTA.
inline-flex items-center justify-center rounded-pill border-2 border-brand-purple-dark bg-neutral-white text-text-primary px-6 py-3.5 font-body font-semibold transition-colors duration-tap hover:bg-brand-purple-pale
topicChip
Topic carousel chips. Swap bg-pastel-* to rotate flamingo / apricot / eggshell / lavender-soft.
inline-flex items-center gap-2 rounded-pill border-2 border-neutral-white bg-pastel-flamingo text-text-primary py-2 pl-2 pr-4 transition-[border-color,transform] duration-playful ease-standard active:scale-95 data-[active=true]:border-brand-purple
successPill
Day badges and Strength-area labels.
inline-flex items-center gap-1 rounded-pill bg-semantic-success text-text-inverse px-3 py-1 text-sm font-semibold
appCircleAction
Top-bar back / share / more buttons inside the app.
inline-flex h-11 w-11 items-center justify-center rounded-full bg-neutral-white text-text-primary shadow-none active:scale-95
chatBubblePartnerA
Coral chat bubble for partner A in the memory thread.
self-start max-w-[78%] rounded-lg rounded-bl-[4px] bg-chat-partner-a text-text-primary px-5 py-4 text-lg leading-snug
chatBubblePartnerB
Lavender chat bubble for partner B.
self-end max-w-[78%] rounded-lg rounded-br-[4px] bg-chat-partner-b text-text-primary px-5 py-4 text-lg leading-snug
packHero
Top hero slab on a pack/quiz detail screen.
rounded-t-xl bg-pastel-cream-card px-4 pt-4 pb-6 relative overflow-hidden
questionRow
Pack question list rows with leading illustrated thumbnail.
flex items-center gap-3 rounded-lg bg-neutral-white p-3 transition-shadow duration-control hover:shadow-card
ribbonBanner
Game result announcement. Add notched-end pseudo-elements via clip-path for the chevron tails.
relative inline-flex items-center justify-center bg-brand-purple text-text-inverse px-8 py-3 text-lg font-bold