JEMI Brand Kit
The shared family calendar that lifts the mental load — warm, calm, and a little bit retro.
The story
JEMI exists to take the invisible work of running a family — the pickups, the chores, the shopping list, the school plays nobody remembered — and make it visible, shared, and shoulder-able.
The look and feel is what we call Sun-Faded 70s Surf: warm peach and surf teal on a soft cream background, hand-drawn animal mascots, rounded corners, gentle shadows. It feels like a family beach holiday in the late 1970s — relaxed, cosy, never clinical.
The mood is the opposite of a productivity app. No sharp edges, no shouty red badges, no hustle culture. Calm comes first.
Brand essence in five words
Logo & app icon
The wordmark and icon both work on warm, calm and dark surfaces. Always leave clear space around the mark equal to the height of the letter J.
Do
- Use the icon at no smaller than 32px so it stays readable.
- Pair the wordmark with the surf cream or warm white background.
- Round the corners when placing the icon as a profile picture.
Don't
- Don't recolour the wordmark or apply drop shadows.
- Don't stretch, rotate, or skew the marks.
- Don't place the wordmark over busy photography without a soft tinted overlay.
Colour palette
The full palette is in client/constants/theme.ts. These
are the colours that define the brand at a glance.
Primary
Warm Peach
#FBA882
Primary buttons, CTAs
Surf Teal
#46B8A7
Active tabs, links, selected states
Coral Accent
#FA7A53
Priority states, highlights
Surfaces
Surf Cream
#F7F3E9
App background
Warm White
#FFFDF8
Cards, modals
Section Sand
#EFE7D8
Grouped sections
Text
Warm Espresso
#4A3F35
Primary text
Driftwood
#6C635A
Secondary text
Sandy
#B3A89D
Disabled, placeholders
Supporting
Surf Sage
#A7C9A2
Success states
Surf Mustard
#E6B24C
Warnings, golden accents
Surf Red
#C34C2E
Destructive actions
Driftwood Sand
#D4C4A8
Warm neutral accent
Family member colours
Used to identify each person on the calendar. Keep these in order so families recognise their colour.
Warm Gold
#EBD286
Warm Peach
#FBA882
Sandy Gold
#EAD4A6
Dusty Teal
#7DA9B6
Mint Green
#93D3AE
Steel Blue
#9DC3D0
Dusty Blush
#E3B5B8
Typography
One typeface, used throughout: Comfortaa from Google Fonts. Its rounded, friendly forms set the calm, approachable mood that defines JEMI. Available weights: 400 Regular, 500 Medium, 600 SemiBold, 700 Bold.
A calmer family calendar.
Plan the week together.
Today, at a glance.
Pickup & drop-offs
Add an event in seconds, share it with everyone, and let the reminders do the remembering for you.
You'll get a gentle nudge the morning of, and again two hours before.
Last synced 2 minutes ago · all family members up to date.
The mascots
The mascot family is the warm, hand-drawn cast that lives across the app's empty states, onboarding screens and marketing. Each animal has a small role — pick the one that fits the moment.
Voice & tone
JEMI sounds like a kind, capable friend leaning on the kitchen counter — not a productivity app. Five words to anchor every line of copy:
How JEMI speaks
A calmer family calendar.
Welcome in. Let's set up your family — it only takes a minute.
Nothing on today. Enjoy the breathing room.
Hmm — that didn't save. Give it another try?
Add to the week
Heads up — Sam has soccer in 30 minutes.
Do & don't
"Nice work — that's the whole week sorted."
"You're crushing it! 🚀 Stay productive!"
"You can sort this out later if you'd like."
"You MUST complete this action immediately."
Brand in action
The illustrations already living inside the app — the look you should extend in any new artwork.
Social media toolkit
Ten ready-to-use images, all on-brand. Right-click any image to save, or use the download list at the bottom. Captions are suggestions — tweak to suit the moment.
Instagram & Facebook square posts · 1080 × 1080
Instagram stories · 1080 × 1920
Facebook cover & share card · 16 : 9
Profile pictures · 1080 × 1080 (round-cropped)
Accessibility standards
The brand has to work for tired parents on small screens in bright sunshine. Honour these minimums in every layout.
- Body text: 16px minimum on web, 14px on mobile.
- Captions: never below 12px.
- Touch targets: 44 × 44 pt on iOS, 48 × 48 dp on Android.
- Reduced motion: respect
prefers-reduced-motion— animations are decorative, never functional. - Colour reliance: never use colour alone to convey meaning. Pair with an icon or label.
- Comfortaa: use 500 Medium or heavier for any text under 15px.
Contrast (WCAG AA)
| Foreground | Background | Ratio | Use |
|---|---|---|---|
| Espresso #4A3F35 | Surf Cream #F7F3E9 | 9.2 : 1 | Body text ✓ |
| Espresso #4A3F35 | Warm White #FFFDF8 | 10.1 : 1 | Body text ✓ |
| Driftwood #6C635A | Surf Cream #F7F3E9 | 5.4 : 1 | Secondary text ✓ |
| Warm White #FFFDF8 | Surf Teal #46B8A7 | 2.6 : 1 | Large text + UI only |
| Warm White #FFFDF8 | Coral #FA7A53 | 3.2 : 1 | Large text + UI only |
| Espresso #4A3F35 | Warm Peach #FBA882 | 5.7 : 1 | Buttons ✓ |
Asset downloads
Right-click and save, or click any link below.
Logos & icons
Mascot illustrations
Social media artwork
Design tokens (for developers)
Drop-in CSS custom properties matching the React Native theme in
client/constants/theme.ts.
:root {
--jemi-primary: #FBA882;
--jemi-primary-soft: #FDEEE8;
--jemi-accent: #46B8A7;
--jemi-accent-soft: #E2F4F0;
--jemi-coral: #FA7A53;
--jemi-mustard: #E6B24C;
--jemi-sage: #A7C9A2;
--jemi-error: #C34C2E;
--jemi-background: #F7F3E9;
--jemi-section: #EFE7D8;
--jemi-surface: #FFFDF8;
--jemi-text: #4A3F35;
--jemi-text-secondary: #6C635A;
--jemi-text-disabled: #B3A89D;
--jemi-border: #DDD5C4;
--jemi-font: "Comfortaa", system-ui, sans-serif;
--jemi-radius-card: 24px;
--jemi-radius-button: 18px;
--jemi-shadow-card: 0 3px 14px rgba(74, 63, 53, 0.10);
}