Little Doves School

Overview

Little Doves School embodies a vibrant, inclusive educational philosophy through a design system rooted in 'Joyful Maximalism'—a celebration of color, diversity, and cultural richness that mirrors the lived experience of its students and community. The brand serves families seeking an institution that honors African heritage, nurtures individual potential, and creates spaces where every child feels seen and valued. The visual language is intentionally warm and energetic: primary accent colors (vivid orange #ff6900, bright green #61ce70, golden amber #fcb900) are deployed generously across CTAs, highlights, and interactive elements, creating a sense of optimism and forward momentum. The UI evokes clarity and accessibility without sacrificing personality—typography is bold and legible, spacing is generous, and every interaction feels intentional and celebratory.

The brand voice is earnest, inclusive, and action-oriented. Sentences are direct and affirming: 'Every Child Matters. Every Dream Counts.' The tone avoids corporate jargon in favor of human-centered language that speaks to parents' hopes and children's potential. Vocabulary emphasizes nurture, growth, and belonging. Example sentence in brand voice: 'Your child doesn't just learn here—they discover who they are and what they can become.'

Colors

The color system is built on a foundation of clean white (#ffffff) surfaces paired with warm, high-saturation accent colors that drive engagement and emotional connection. Primary (#ff6900, a vivid luminous orange) is the dominant accent, used exclusively on primary CTAs ('Enroll Now'), key interactive states, and brand-defining moments. It commands attention without aggression—the hue sits at the intersection of warmth and energy, evoking both African textile traditions and contemporary optimism. Secondary (#61ce70, a bright, natural green) supports enrollment and positive reinforcement messaging, appearing on secondary CTAs and success states. Tertiary (#fcb900, a golden amber) highlights featured content, badges, and tertiary actions, adding a third dimension of visual interest without

Typography

The type system pairs ProductSans (a geometric, friendly sans-serif used for display and headlines) with the system font stack (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, etc.) for body and label text, creating a hierarchy that feels both distinctive and accessible. Display (72px, 500 weight, -0.02em tracking) anchors hero sections with bold, confident messaging; headline-lg (48px, 600 weight) and headline-md (32px, 600 weight) structure content sections with clear visual breaks. Body text (16px, 400 weight, 24px line-height) is set with 0.01em positive tracking to improve readability on screens and maintain the brand's open, welcoming feel. Labels (15px, 500 weight, 0.03em tracking) on buttons and interactive elements use increased letter-spacing to enhance legibility at small

Layout

The layout system uses a 12-column grid with a maximum container width of 1140px, allowing content to breathe on desktop while remaining focused and scannable. The gutter (24px) is applied consistently between grid columns and as the primary margin unit for section separation, creating a predictable rhythm that users can internalize. White-space is treated as a design element, not wasted space: sections are separated by lg spacing (40px) vertically, while internal component padding uses md (24px) for cards and containers, sm (12px) for tighter groupings like form fields. The spacing scale (unit: 8px, xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) is derived from an 8px baseline, enabling precise, harmonious proportions across all breakpoints. On mobile, the container width adapts fluidly

Elevation & Depth

Depth in this system is achieved through subtle, naturalistic shadows rather than dramatic layering. The elevation scale defines three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for resting state cards and low-emphasis elements, md (0 3px 8px rgba(0, 0, 0, 0.15)) for interactive elements like buttons and hovered cards, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for modals and floating elements. Buttons in their default state carry md elevation to signal interactivity; on hover, the shadow deepens to lg and the background shifts slightly darker (e.g., primary button from #ff6900 to #e55a00) over 2

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are applied strategically to soften the interface while maintaining clarity and structure. Buttons and primary interactive elements use a 10% border-radius (approximately 4–5px on 48px buttons), creating a subtle, friendly roundness that feels approachable without being overly playful. Cards and containers use 3px border-radius, a minimal curve that preserves the clean, structured feel while avoiding sharp corners. Input fields use 4px border-radius to align with the card aesthetic and signal that they are part of the same design languag

Components

Action Elements Buttons are the primary drivers of user engagement and are designed to be unmissable. The button-primary component uses {colors.primary} (#ff6900) background with {colors.on-primary} (#ffffff) text, 10% border-radius, 12px vertical and 32px horizontal padding, and {elevation.md} shadow. On hover, the background darkens to #e55a00 and the shadow deepens to {elevation.lg} over 200ms, creating a tactile press-down effect. The button-secondary uses {colors.secondary} (#61ce70) and follows the same geometry, supporting secondary actions like 'Learn More' or 'Contact Us'. Button-tertiary uses {colors.tertiary} (#fcb900) for tertiary actions, ensuring three distinct visual priorities without cognitive overload. All buttons use {typography.label-md} (15px, 500 weight, 0.03em tr

Do's and Don'ts

**Do**

• Do use {colors.primary} (#ff6900) exclusively on primary CTAs and key interactive moments—it is the brand's signature accent and should never be diluted or overused.
• Do maintain generous white-space (lg spacing: 40px) between major sections to create visual breathing room and reinforce the unhurried, child-centric aesthetic.
• Do apply text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) to small labels and text overlaid on photographic backgrounds to ensure 7:1 contrast and readability.
• Do use the full rounded scale (3px for cards, 10% for buttons, 9999px for badges) to create a clear visual hierarchy and signal component purpose.
• Do transition interactive elements (buttons, cards, inputs) over 150–200ms with ease-out timing to create a tactile, responsive feel without jarring snappiness.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text on colored backgrounds—use {colors.on-primary} (#ffffff) and {colors.on-secondary} (#ffffff) tokens to ensure consistent contrast and warmth.
• Don't apply shadows darker than rgba(0, 0, 0, 0.15) or use pure black in shadows—the brand's warm, light aesthetic requires softer, more naturalistic depth.
• Don't mix ProductSans and system fonts within a single headline or button—use ProductSans for display/headlines and system fonts for body/labels to maintain visual clarity.
• Don't exceed three accent colors (primary, secondary, tertiary) in a single view—additional colors dilute hierarchy and create visual chaos that contradicts the brand's inclusive, welcoming mission.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full)—consistency in shape language reinforces the brand's structured, trustworthy character.