Skip to content
DesignMunkDesignMunk Submit a site

Maggie App

maggie-app.com
Turn chaos into chuckles with Maggie—your pocket guide to parenthood.
Apps & Mobile Lifestyle Framer Homepage BN Dime
Share Visit site
maggie-app.com DESKTOP · 1440
Maggie App

AI Breakdown

Design export

---
version: alpha
name: Maggie App
description: Turn chaos into chuckles with Maggie—your pocket guide to parenthood.
colors:
  primary: "#03594d"
  tertiary: "#f6bbfd"
  neutral: "#82eda6"
  border: "#e5e7eb"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: BN Dime Display Regular
    fontSize: 80px
    fontWeight: 400
    lineHeight: 1.2
  headline-md:
    fontFamily: BN Dime Display Regular
    fontSize: 53px
    fontWeight: 400
    lineHeight: 1.21
    letterSpacing: 0.009em
  headline-sm:
    fontFamily: Homemade Apple
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.19
    letterSpacing: 0.004em
  headline-xs:
    fontFamily: BN Dime Display Regular
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.21
    letterSpacing: 0.021em
  body-md:
    fontFamily: Helvetica Neue
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.011em
rounded:
  sm: 8px
  full: 9999px
spacing:
  xs: 8px
  sm: 16px
  md: 32px
  lg: 60px
  xl: 100px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "#0000ee"
    rounded: "{rounded.full}"
    padding: 12px 38px
    height: 40px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 12px 38px
    height: 40px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Maggie App: Mint Canvas, Big-Block Headlines and Playful Pills

## Overview

Maggie targets parents of young kids with a bright, approachable interface. The tone is playful and supportive, never corporate. Pages lean spacious with oversized headlines, short handwritten asides, and friendly pills. Color carries mood (mint surface, teal text, pink accents); hierarchy is set by type scale and hard offset shadows rather than dense borders or complex grids.

## Colors

- **primary (#03594d):** Core text and headline color; the anchor for contrast on mint surfaces.
- **tertiary (#f6bbfd):** Accent for primary buttons and playful highlights.
- **neutral (#82eda6):** Brand surface mint used for backgrounds, cards, and large slabs.
- **border (#e5e7eb):** Light divider lines for subtle structure when needed.
- **surface (#82eda6):** Default page surface; keep large fields calm and consistent.
- **on-surface (#03594d):** Text and icon color when placed on surface backgrounds.

## Typography

- Headlines (BN Dime Display Regular): 80px/1.2 for hero, 53px/1.21 (0.009em tracking) for section leads, 24px/1.21 (0.021em) for small headers. BN Dime is custom/self-hosted; agents should substitute Google fonts with a similar chunky, rounded display voice: Bungee, Lilita One, or Paytone One.
- Handwritten accent (Homemade Apple 36px/1.19, 0.004em): Google-hosted and freely available. Use sparingly for short, friendly asides like "meet maggie".
- Body (Helvetica Neue 16px/1.5, 0.011em): Proprietary/system. Substitute Inter or Work Sans from Google Fonts, or system Helvetica/Arial. Keep body sizes modest to let headlines lead.

## Layout

Spacing is generous: xl 100px for hero bands, lg 60px between major sections, md 32px for intra-section gaps, sm 16px and xs 8px for tight clusters. Content generally centers in a single column with stacked sections; wide headlines may break to multiple lines by design. Cards and screenshots sit within the spacing rhythm rather than bespoke gutters. On small screens, step the headline down to 53px and 24px tokens to preserve flow without shrinking body copy.

## Elevation & Depth

Hierarchy uses high color contrast and sharp offset shadows. The only measured shadow is sm: rgb(3, 89, 77) -4px 4px 0 0, a solid, no-blur offset that reads like a cutout. Use it sparingly on cards, pills, and device shots for a tactile, toy-like feel. When separation is needed without depth, rely on the border token or alternating neutral slabs.

## Shapes

Two radii define the language: sm 8px for cards and image containers; full 9999px for interactive pills (buttons, chips, nav). Links are flat (0px) to stay typographic. The contrast between full pills and 8px blocks signals click targets vs. content containers.

## Components

- Button — Primary: Background #f6bbfd, text #0000ee, pill radius 9999px, 40px height, 12px 38px padding. Use for key actions; place on mint surface for contrast.
- Button — Secondary: Text #03594d, pill radius 9999px, 40px height, 12px 38px padding. Works on surface backgrounds where a quieter action is needed.
- Button — Link: Text #03594d, no radius; inline actions.
- Card: Background #82eda6, text #03594d, 8px radius, 16px padding; pair with the sm cutout shadow when emphasis is required.

Distinctive components on this page:

### Top Nav Pills
Small pill links for FAQs, About, Contact, Add Venue. Height 40px, full radius, primary text on the mint surface; apply the sm offset shadow for a tactile tab feel.

### Hero Headline Stack
Center-aligned BN Dime block headline at 80px/1.2 in #03594d over the mint surface. Keep max-width constrained so lines break confidently to 3–6 words.

### Store Badge Row
A horizontal row for App Store and Google Play calls to action. Space with md 32px; sit it immediately under the hero headline with xl 100px band padding.

### Phone Fan Preview
Three overlapping app screenshots, each in an 8px card on the mint surface, staggered with the sm -4px 4px shadow to create a playful "paper fan."

### Shout Stack Marquee
A dramatic, multi-line series using headline-md (53px/1.21, 0.009em). Center-align, keep each word or short phrase per line for rhythm.

### Mission Panel
A section header in headline-md with a short body paragraph (16px/1.5). Optionally add a Homemade Apple subhead for warmth.

## Do's and Don'ts

- Do keep primary text and headlines in #03594d on the mint surface for maximum brand contrast.
- Do reserve Homemade Apple for short, charming asides—avoid long sentences in the handwriting style.
- Do use the sm offset shadow (-4px, 4px, 0 blur, rgb(3,89,77)) on pills and featured cards; elsewhere, stay flat.
- Don't introduce new accent colors; use #f6bbfd for emphasis and #e5e7eb for quiet dividers only.
- Don't reduce button corner radius; interactivity is communicated by full 9999px pills.
- Don't overfill sections with copy; let the oversized headers and spacing carry hierarchy.

## Agent Prompt Guide

Quick color reference — Text: #03594d; Background: #82eda6; Border: #e5e7eb; Accent: #f6bbfd.

1) Build a hero band with headline and store buttons
- Container background: #82eda6; padding-top/bottom: 100px.
- H1: font-family: 'BN Dime Display Regular','Bungee','Lilita One',sans-serif; font-size: 80px; line-height: 1.2; color: #03594d; text-align: center.
- Under the headline, place two buttons: height 40px; padding 12px 38px; border-radius: 9999px; gap 16px.
  • Primary button: background #f6bbfd; color #0000ee; box-shadow: -4px 4px 0 0 rgb(3,89,77).
  • Secondary button: background transparent; color #03594d; box-shadow: -4px 4px 0 0 rgb(3,89,77).

2) Create a three-card phone preview fan
- Each card: width 280px; background #82eda6; color #03594d; padding 16px; border-radius: 8px; box-shadow: -4px 4px 0 0 rgb(3,89,77).
- Overlap the three cards with 32px offsets and slight rotation; center the group below the hero with 60px spacing.

3) Write a mission section with a handwritten kicker
- Kicker: font-family: 'Homemade Apple', cursive; font-size: 36px; line-height: 1.19; letter-spacing: 0.004em; color: #03594d.
- Heading: font-family: 'BN Dime Display Regular','Bungee','Paytone One',sans-serif; font-size: 53px; line-height: 1.21; letter-spacing: 0.009em; color: #03594d.
- Body: font-family: 'Inter','Work Sans','Helvetica Neue',Arial,sans-serif; font-size: 16px; line-height: 1.5; color: #03594d; max-width: 60ch; spacing between elements: 16px.

4) Build a top navigation with pill links
- Layout: left-aligned logo/wordmark and right-aligned pill links; container padding: 16px.
- Links: height 40px; padding 12px 38px; border-radius: 9999px; color: #03594d; background #82eda6; box-shadow: -4px 4px 0 0 rgb(3,89,77); gap 16px; border: 1px solid #e5e7eb.

5) Compose a shout-stack marquee section
- Section background: #82eda6; padding: 60px.
- Each line: font-family: 'BN Dime Display Regular','Bungee','Lilita One',sans-serif; font-size: 53px; line-height: 1.21; letter-spacing: 0.009em; color: #03594d; text-align: center; margin-bottom: 8px.

## Similar Brands

- Duolingo: Bright green base and playful tone; Maggie is chunkier and uses hard offset shadows instead of soft gradients.
- Headspace: Friendly shapes and rounded UI; Maggie is louder, with heavier display type and bolder contrast.
- Bumble: Big typography and candy accent colors; Maggie swaps yellow for mint and leans into pill navigation and cutout shadows.
- Canva: Cheerful palette and approachable voice; Maggie is more single-accent and uses a blockier display font to drive hierarchy.

More like this

Browse Apps & Mobile →
daybridge.com
Daybridge Apps & Mobile
Daybridge
Bring work and life together in one fast, beautiful calendar
Homepage · 1 day ago
letsjive.io
Letsjive Apps & Mobile
Letsjive
Don’t make connecting awkward—Jive makes it easy to connect and follow up.
Homepage · 2 days ago
joinpause.co
Pause Event
Pause
Meet one new Londoner each week—face-to-face, with no phone distractions.
Homepage · 4 days ago
rodeo-labs.com
Rodeo Adventure Labs Ecommerce
Rodeo Adventure Labs
Ride. Explore. Create.
Homepage · 5 days ago