Design Philosophy

Editorial Craft & Neighborhood Warmth

Reneva Learning Co. is designed like an editorial literary publication, not a generic SaaS edtech template. We prioritize real classroom warmth, intentional asymmetry, generous white space, and real photography.

Rule 1: Action-Only Pink

Hot Pink (#F0357F) is reserved exclusively for actions, buttons, and high-impact micro-accents. Never used for random large background decoration.

Rule 2: Asymmetrical Services

Online Tutoring (Worldwide) uses the blush palette (#FCE4EC) in a tall panel; In-Person Babysitting (Bronx & Westchester) uses baby blue (#DDEEFB) in a shorter panel.

Rule 3: Script Restraint

Script typography is strictly restricted to 1–3 words per page (logo tagline and 1 accent phrase per section). Never for body paragraphs or nav links.

Color Palette & Contrast Audits

70% Cream / White canvas, 20% Deep Navy & Pastel panels, 10% Hot Pink action.

Primary Navy #1B2253

Role: Text, Headings, Footer, Nav

✓ WCAG AAA on Cream (14.2:1)

Core anchor color

Action Pink #F0357F

Role: Primary CTA, Key Links

✓ WCAG AA on White text (4.6:1)

Use with strict restraint (10%)

Tutoring Blush #FCE4EC

Role: Tutoring Panels & Badges

✓ WCAG AAA with Navy text

Warm academic pastel

Childcare Blue #DDEEFB

Role: Babysitting Panels

✓ WCAG AAA with Navy text

Calm, nurturing pastel

Warm Cream #FAF6F0

Role: Global Background (70%)

Gentler on eyes than pure #FFFFFF

Mint Accent #DFF5E1

Role: Success Badges & Outcomes

Micro-accent only

Butter Yellow #FFF1C9

Role: Brush Highlights & Notes

Warm tactile highlight

Warm Gold #E0A93B

Role: Star Ratings & Accents

High-trust rating marker

Typography Hierarchy

Three distinct families: Playfair Display (Headings), Nunito (Body/UI), Caveat/Pacifico (Script Accents).

H1 Heading Mobile: 36/42 · Desktop: 64/70

Real teachers. Real progress.

H2 Heading Mobile: 28/34 · Desktop: 44/52

Why parents choose Reneva

H3 Heading Mobile: 22/28 · Desktop: 28/36

Elementary Learning Foundations

Script Accent Only 1–3 words per page

Learn · Grow · Achieve

Body Typography Mobile: 16/26 · Desktop: 18/30

Online tutoring for students and adults worldwide, plus warm, attentive babysitting in the Bronx and Westchester. Designed by educators who care deeply about every milestone.

Button Component Library

All buttons enforce min 48px touch targets and full accessible focus rings.

Primary Action Button (#F0357F)

Secondary Outline Button (#1B2253)

Text Link with Animated Arrow

Default link Hovered link

Form Inputs & Validation States

Full width inputs on mobile, large labels above fields, 12px rounded corners.

Default State Helper prompt

Focus State Active user focus

Success Validation State ✓ In primary service area

Responsive Breakpoints & Layout Grid

Viewport	Frame Width	Grid Columns	Margins / Gutters	Key Behavior
Mobile (Primary)	390px	4 Columns	16px Margins / 16px Gutters	Single-column stacking, horizontal swipe cards with peek, sticky bottom action bar, full-screen nav drawer.
Tablet	768px	8 Columns	24px Margins / 20px Gutters	2-column layout cards, full top navigation bar expands, bottom sticky bar hides.
Desktop	1440px (Max 1200px)	12 Columns	Auto Margins / 32px Gutters	Asymmetrical 7/5 service grid, sticky program booking sidebar, generous editorial margins.

Interactive Prototype Walkthrough

Test the end-to-end user journeys crafted for Reneva Learning Co.:

Flow 01 → Home to Consultation

Hero headline → Asymmetrical Services → Teacher Profiles → Book Consultation Modal.

Flow 02 → Babysitting & ZIP Check

Baby-blue hero → Enter ZIP 10471 or 10583 → Verify service area → Submit sitter request.

Flow 03 → Academic Programs Deep Dive

Select K-5, 6-8, Adult Reading, Test Prep → Sample session flow → Sticky booking card.