Purple
#5100A8Primary actions and identity
One family.
One familiar experience.
A clear, welcoming design language for helping parents find their family’s people. Shared across the website, onboarding, and app.
Explore the app Download brand guideWarm, clear, parent-led.
Use the original logo on a light, uncluttered surface. Keep its proportions and clear space equal to the height of the “K”. Never recolor or stretch it.
Speak like a helpful parent
Use short sentences and name the next step. Say “Save your family profile” and “Back to matches”. Explain what is saved and who can see it.
Photography should reflect real, varied families. Use parent-selected images with permission. Never imply a sample family is a real match.
A little play. A lot of clarity.
Yellow
#FFD700Highlights with dark purple text
Teal
#008080Supporting actions and progress
Ink
#252033Primary reading text
Muted
#665D73Supporting text
Canvas
#F7F4FBQuiet backgrounds
Pair white text with purple or teal. Pair yellow with dark purple. Status messages use words and icons as well as color.
Easy to read. Easy to tap.
System sans serif
Use the device’s native system font. Body copy is 16px; supporting text 14px; short uppercase labels 12px. App headings scale from 30–40px.
Keep paragraphs short, left aligned, and comfortably spaced.
Space to breathe
Spacing: 4 · 8 · 12 · 16 · 24 · 32 · 48px
Controls: 12px radius · Cards: 24px radius
Primary controls: 48px tall. Compact controls: at least 44px tall, with adequate width and spacing.
Every action gives an answer.
Hover or keyboard-focus these examples to inspect the shared styles. The links navigate to the app.
Persistent labels explain the field. Focus stays visible until you move away.
State rules
Hover darkens the surface without moving it. Pressed actions deepen again. Disabled controls cannot activate. Loading actions explain progress. Errors say what happened and how to recover.
Respect reduced motion and preserve system colors in high contrast mode.
Built to stay consistent.
The shared stylesheet and navigation components are the implementation reference. New screens should reuse these controls and tokens. This guide documents the system; it is not a claim of a complete accessibility audit.
Reference: visible focus, target sizing, and text contrast.