Learner Memoir Design System
This page is the single source of truth for every visual and interaction decision in the app β live, working components, not static pictures. Every future page and feature should be built using the patterns demonstrated here.
The Learner Memoir Design Bible
Learner Memoir should feel like opening a warm, personal, living book β a blend of children's book, scrapbook, and classroom keepsake. Calm, warm, accessible, and timeless β never a corporate dashboard.
π¨ Color
A muted, sun-warmed palette β like aged paper and pressed flowers, not screen-saturated brights. Every color must pass comfortable reading contrast against paper.
Paper
Page background β warm cream, never stark white
Ink
Body text β warm charcoal, never pure black
Terracotta
Primary actions, warmth, celebration
Sage
Secondary accents, growth, calm
Blush
Soft highlights, tags, gentle emphasis
Mustard
Rare accent β milestones & keepsakes only
Rule: no more than two accent colors per screen. Terracotta leads; sage, blush, and mustard support.
βοΈ Typography
Fraunces (a warm storybook serif) carries every title β it's what makes a page feel like a book, not a form. Nunito (rounded, friendly sans) carries all body text and UI labels for easy reading.
Page Title
Section Heading
A gentle, storybook subheading
Body copy stays in Nunito β warm, rounded, and easy on the eyes for long reflections and notes.
Label / Eyebrow Text
Rule: headings are always Fraunces; never mix in a second display font. Body text never drops below 14px.
π Buttons
Pill-shaped, generously padded, one clear primary action per screen. Hover lifts gently β never a harsh snap.
Rule: fully rounded corners, no sharp rectangles. Transitions run 300ms ease-out. Never more than one filled primary button in view at once.
π Forms
Inputs feel like writing on paper: soft borders, generous padding, warm focus rings β never sharp, clinical, or corporate.
Rule: 2px borders, rounded-xl corners, 12px+ padding. Focus state is always the terracotta border, never a harsh blue browser default. Labels are always bold and sit above the field, never inline placeholders alone.
ποΈ Cards
Cards are the "pages" and "keepsakes" of the memoir β soft, thick borders like a photo mat, gentle shadow like paper lifted off a desk.
Keepsake Card
Thick white border, soft shadow β the primary content container.
Interactive Tile
Subtle border, scales gently on hover β used for tappable choices.
Gentle Callout
Dashed border, tinted fill β for optional or encouraging notes.
Rule: corners are always large-radius (1.5β2rem). Shadows stay soft and warm-toned, never gray/blue drop shadows.
Chapter Cards
The new foundation for primary navigation β warm, tactile, and clickable as a whole.
Teacher Tool Cards
The professional-workspace counterpart to Chapter Cards β calm, uniform, understated. Used for every action in the Teacher Dashboard. Never mix with Chapter Cards; a memoir chapter and a workspace tool should never look interchangeable.
Rule: fixed height (h-20), neutral card background, small tinted icon chip, left-aligned label. No color-block fills, no gradients, no decorative texture. Always laid out in a uniform grid so every tool reads the same size.
𧡠Icons & Spacing
Icons are line-based (lucide-react), rounded stroke joins, paired with a warm emoji for personality β never a solid corporate glyph set alone.
Note: the Streamline Ultimate color icon set is now the official icon library, integrated as static image assets through the shared AppIcon component (src/components/icons/AppIcon.jsx) rather than an installed package. Any icon in that library can be used anywhere via <AppIcon name="..." />.
Spacing rhythm (generous, never cramped):
2
4
6
8
12
Rule: icon stroke width 1.5β2px only. Minimum spacing between sections is 24px (space-y-6); page margins never below 16px.
γ°οΈ Page Headers & Dividers
Page headers introduce each "chapter" with a title, warm subtitle, and soft card frame β never a thin corporate top bar.
Example Page Header
A short, warm subtitle sits beneath every title.
Divider styles:
Rule: dividers are dotted/dashed or icon-centered β never a plain solid gray `hr`.
π Motion
Motion feels like a page settling into place β gentle fade-and-rise on entry, soft scale on hover. Nothing bounces, snaps, or spins.
Fade & Rise
Hover me β I scale gently, I don't jump.
Rule: durations 300β500ms, easing always ease-out. Hover scale never exceeds 1.03. No autoplay loops or spinning icons outside of loading states.
βΏ Accessibility
The memoir is used by learners, families, and teachers of every ability β accessibility is part of the design language, not an afterthought.
Color contrast
Body text on paper background meets 4.5:1 minimum. Never rely on color alone (e.g. status badges pair color with a label, not just a dot).
Focus visibility
Every interactive element shows a visible focus ring (terracotta border or ring-2 ring-white/70) β never focus:outline-none without a replacement.
Touch targets
Buttons and tappable cards are at least 44px tall β this app is used by young learners as well as adults.
Alt text & labels
Every uploaded photo/media element and icon-only button includes a descriptive label or aria-label, since content is often authored by children.
Motion
Animations are subtle (translate/opacity only, 200β300ms) β never essential to understanding content, so reduced-motion users lose nothing.