FRANCES POPSICLE / DESIGN SYSTEM / v1.0

Good food.
Good design.
No fuss.

The source of truth for how Frances Popsicle looks, sounds and behaves. The system should feel practical, cheerful, handmade and unmistakably ours without becoming chaotic or cute for the sake of cute.

VeganFamily-sizedPracticalPlayful

☀ ♡

FrancesPopsicle♥

GOOD FOOD • GOOD PEOPLE • GOOD TIMES

⌁⌁

THE MARK

Friendly, useful, a little handmade.

Frances Popsicle is a family-food identity, not a restaurant brand and not a wellness brand. The mark should feel at home on a meal plan, a recipe card, a grocery list or a refrigerator sign.

FrancesPopsicle♥

FP♥francespopsicle.com

Do

Use generous white space, rounded forms, visible hierarchy and one playful detail at a time.

Don’t

Turn every surface into a collage. The doodles and bright colors work because the underlying layout stays calm.

PALETTE

Bright ingredients. Narrow rules.

Purple carries the brand. Raspberry adds energy. Sky and grass create the outdoorsy family backdrop. Cream and paper keep the saturated colors from fighting each other.

Popsicle Purple

#7A4BB5

Primary brand, active states, emphasis.

Raspberry

#EF6FA9

Secondary brand, buttons, small accents.

Blue Sky

#A9DCF3

Large atmospheric backgrounds.

Grass

#86B95E

Food, fields, positive utility.

Sunshine

#FFD768

Notes, highlights, small cheerful moments.

Cream

#FFF9ED

Primary page background.

Paper

#FFFEFB

Cards, recipes, printable surfaces.

Ink

#2D2A31

Text, borders, hand-drawn structure.

Rule of thumb

One dominant color, one accent, Ink for structure, and plenty of Cream or Paper. Avoid using all brand colors with equal visual weight in one component.

TYPE

Round headlines. Workhorse body copy.

DISPLAY / FREDOKA

Dinner
could be
easy.

Use for the brand, major headlines, short labels and oversized numbers.

BODY / NUNITO

A four-week vegan rotation built around inexpensive staples, homemade bread, real leftovers and dinners people will actually eat.

Use for body copy, recipes, buttons, navigation and utility text.

DisplayGood food.clamp(58px, 7vw, 105px)

H1Four-week rotation64px / 1.0

H2What’s for dinner?42px / 1.05

BodyUse what you have first.16px / 1.5

LabelWEEK 03 / DINNER12px / 0.12em

STRUCTURE

Soft edges, strong outlines.

--radius-small: 12px

--radius-card: 20px

--radius-pill: 999px

4px 4px 0 Ink

Spacing rhythm

8121824365684

LIVE UI

Build from these pieces.

Buttons

See the meal plan Print this week

Badges

VEGANBUDGET WINAMC-INSPIREDGOOD LEFTOVERS

Meal card

WEDWeek 3

DINNER

AMC-style pasta e fagioli

Garlic bread, kale salad and roasted vegetables.

DESSERT Chocolate depression cake

Frances note

Budget note

Checklist

Choose seven dinners Cook one batch of beans Leave one meal movable

DOODLE LANGUAGE

Imperfect on purpose.

Illustrations should look like something added to the family notebook with a marker, not a stock-vector pack. Use them to create personality around otherwise clean layouts.

♥☀🥣🍞🍎🥕⌁⌁♡

Use

Food, bread, bowls, vegetables, hearts, mountains, sun, popsicles, handwritten arrows and little stars.

Avoid

Glossy 3D icons, corporate gradients, realistic clip art, overly polished vector scenes and decorative clutter around every heading.

REAL FOOD

Kitchen table, not test kitchen.

Natural light

Favor window light, real kitchens, porches, picnic tables and ordinary family spaces.

Real portions

Family-size pans, imperfect bread, leftovers and crowded plates are part of the story.

No wellness theater

Do not style inexpensive vegan meals as luxury spa food. The appeal is that normal food works.

HOW WE SOUND

Useful before clever.

Write like someone who actually has to make dinner, shop for it and clean up afterward. Specific beats aspirational. Vegan is a fact about the food, not a sermon.

Practical

Give amounts, substitutions, timing and what can become lunch tomorrow.

Unfussy

Convenience foods are allowed. Canned beans are allowed. Moving Tuesday’s meal to Thursday is allowed.

Warm, not precious

Food can be meaningful without describing every bowl of soup as a journey.

PreferAvoid

“Make enough for lunch tomorrow.”

“Meal prep like a pro.”

“Use canned beans when time matters more than cost.”

“Never compromise on clean ingredients.”

“Cheap, filling and good.”

“A guilt-free nourishing bowl.”

“Dinner could be pasta and sauce tonight.”

“Transform your weeknight dining experience.”

FOR BUILDING

Use the same values everywhere.

:root {
  --sky: #a9dcf3;
  --grass: #86b95e;
  --purple: #7a4bb5;
  --pink: #ef6fa9;
  --yellow: #ffd768;
  --cream: #fff9ed;
  --paper: #fffefb;
  --ink: #2d2a31;

  --radius-small: 12px;
  --radius-card: 20px;
  --radius-pill: 999px;

  --space-1: 8px;
  --space-2: 12px;
  --space-3: 18px;
  --space-4: 24px;
  --space-5: 36px;
  --space-6: 56px;
  --space-7: 84px;
}

THE TEST

Does it feel like something useful that happened to be fun?

If yes, it probably belongs on Frances Popsicle.

Back to the meal plans