A colourful website concept for Amana Kindergarten in Ngong. This package contains 28 editable page artboards (14 screens in desktop and mobile), the supplied school logo, original astronaut and bunny artwork including a confused lost-and-found scene, nine character/pose assets, thirteen icons, a visual-direction board and a character board. The pink frame is gone: bright cyan #00AEEF from the supplied logo highlights the opening-hours header, with a clean cream page and pale-blue preview background. Gallery, Directions, expandable story, Kumon and reviews panels use working HTML controls inside the artboard preview.
amana-kindergarten-figma-kit.zip.assets/fonts/Fredoka.ttf and assets/fonts/Nunito.ttf for local Figma text editing. Figma in a browser may require its font helper. Both families use the SIL Open Font License; the licence files are included alongside them.figma/ onto its canvas, or use Place image. That folder contains both design boards and all 28 page artboards, with preview-only link wrappers converted into plain vector groups. Photos and the generated instructor character remain raster images; the surrounding artwork stays vector.manifest.json.| Page | Design intent |
|---|---|
| Home | Warm rounded astronaut hero, daycare/care cards, one dedicated Kumon feature, transport, opening hours and visit call-to-action. |
| Our days | Draft Day Care, Play group, PP1 and PP2 class options, followed by confirmed daycare/care services, Kumon, school transport and an illustrative day rhythm. |
| Kumon | Ngong centre summary, professional cartoon instructor portrait, published fees and readable timetable, contact links and two clearly separated booking options. |
| Our story | Fictional three-chapter origin story, explicitly labelled for school approval, with summaries and expandable Read more sections. |
| Enrolment × 4 steps | Child and programme; family and contact; secure care/documents handoff; review/consent. |
| Book a visit | Direct handoff to a free booking provider. Actual school booking URL still needed. |
| Events | Live Google Calendar loads by default in a themed mint/cream frame; Month on desktop and Agenda on mobile, without a load button or sample events. |
| Gallery | 15 supplied photos; folder-derived filters, six-photo pagination and an accessible full-photo viewer with previous/next controls. |
| Directions | The supplied Google Maps pin, clear address, opening hours and a direct external directions button. The decorative map is not represented as a real street map. |
| Contact | Phone, WhatsApp, email and Facebook links, opening hours and a star-rated saved-review carousel with clear capture/count labels. |
| 404 / Lost and found | A confused bunny and astronaut shrug together, with clear home and contact recovery links. A real static 404 page is included separately. |
The references inspired the friendly cartoon direction, rounded panels, bolder colours and playful mood. The homepage astronaut is now Maasai-inspired, with a visible brown-skinned face, a red checked shuka over the spacesuit and a colourful beaded collar. This is original, stylised artwork, not a claim of cultural endorsement or a reproduction of ceremonial patterns. A waving teddy bear, cuddly elephant, giraffe and reading-bunny pose join the original bunny, sunshine, pencil, turtle and cloud. Their placement varies by section: the reading bunny appears around stories and Kumon, while different animals welcome visitors and introduce class cards. Cartoon-styled phone, Facebook, WhatsApp and email symbols use matching icon frames and alignment on contact cards and in footers. The map buddy has mismatched googly eyes, a wonky hat, a tongue and little running feet. Hand-drawn arrows use a clear curved shaft and a two-stroke arrowhead, including at button size. No third-party image service is needed.
The original Primary logo.pdf is preserved as assets/amana-original-logo.pdf. Its vector artwork is also supplied as assets/amana-logo.svg, with lettering outlined so it does not depend on installed logo fonts. Only empty page margins were trimmed; proportions, artwork, colours and the supplied “Amana Montessori” wording are unchanged. The website title remains Amana Kindergarten as requested. No further Montessori curriculum or accreditation claims have been added. The handprint crop is used as the browser icon.
Cards use 28px internal padding and 24px gutters. Major sections have 56px mobile or 72px desktop separation. Heading line-height is at least 1.27; body line-height is at least 1.55. Card headings, descriptions and panel buttons are positioned from their wrapped text height rather than assuming a single line. Desktop card rows use equal heights; mobile cards grow with their content. Cartoon characters have dedicated illustration space, clear of text, forms and primary actions. Keep this breathing room in the production CSS rather than treating the mascots as text overlays.
Fredoka gives headings a rounded, bouncy character. Nunito keeps longer copy and form labels clear. Body copy is generally 16-20px; small labels and notes are at least 14px at native artboard size. Hours use large bold text. Avoid novelty script, all-caps paragraphs, distorted letters and low-contrast pastel text. The preview hosts its font files locally; no Google Fonts request is required by visitors.
The header “Call us” link jumps to the same page's #contact-info region and moves keyboard focus to it. Smooth scrolling respects the reduced-motion preference. The section contains direct telephone, WhatsApp, Facebook and email links, prominent opening hours and the Directions page link. SVG navigation is keyboard-operable with named links, visible focus, and button semantics for preview actions. Main controls use 44px or larger touch targets. Decorative icons are hidden from assistive technology; the supplied school logo retains its accessible name.
Native artboard labels are at least 14px and primary link/control areas are at least 44px in both dimensions. Facebook and WhatsApp share a desktop row and matching icon frames; mobile rows share one left alignment. The logo remains in the header and is removed from the shared Contact us section.
Ngong is removed only from the header's opening-hours strip; the real address and directions retain it. Copy uses shorter, specific language while preserving the story's fictional status, draft classes and privacy/approval notes. Buttons, links and contact cards share the same 4px lift and one-degree tilt on hover, with a 4px arrow nudge on SVG links. Within each contact card, the inner icon drawing adds a small side-to-side shimmy over 1.6 seconds, moving at most 1.5 local SVG units with no additional rotation or vertical movement. Reduced motion removes movement, wobble and transitions, keeping non-moving hover feedback and visible keyboard focus. Longer story chapters and the instructor biography use native Read more/Read less disclosures. Kumon's study-method and timetable sections show their full content directly, without disclosures. Expanding other content shifts subsequent artwork/footer content rather than overlapping it.
These are design-level accessibility improvements, not a claim of full WCAG conformance. SVG artboards still scale as a whole; real form controls, semantic headings, reflow at 320px, browser zoom, screen-reader journeys and submission/error feedback must be implemented and checked in the production site. The preview uses its mobile layout up to 980px to avoid shrinking desktop copy in a narrow panel.
Amana is a daycare provider and kindergarten in Ngong, next to Shell Ngong, Kenya, serving children from 18 months to 6 years. Before and after school care, including school pick-ups and drop-offs, is available for children up to 10 years. Opening hours are Monday-Friday, 8am-6pm, updated by the owner. Kumon is offered; no accreditation, subjects, fees, results or transport routes are invented. The repeated Kumon service card is removed from Home and Our days; the dedicated feature and its Explore Kumon link remain.
Phone: 0113 485 222. WhatsApp: +254 113 485 222. Email: info@amanakindergarten.ac.ke. Amana on Facebook. School location in Google Maps. All contact destinations use the latest owner-supplied details.
Content is a concise original summary of Kumon Ngong's centre page, checked on 13 November 2026. Fee cards appear in the order First assessment (free), Registration (KES 3,000 once), then Monthly study (KES 5,000 per subject per month). The note reads “Confirm current charges when booking your assessment.” Kumon lists maths and English for ages 3+ with instructor Liane Amy Nzisa, classes Tuesday-Thursday 3pm-6pm and Saturday 9am-noon. These are Kumon-specific fees, ages and hours, not kindergarten fees, class ages or an extension of Amana's opening hours.
The instructor is shown as a simplified, professional cartoon based on her published portrait, with natural hair, a calm expression and no hat. The character is assets/kumon-liane-character.png; the reference photo remains assets/kumon-liane-nzisa.png. The overlapping pink blob, pencil and decorative limbs are removed; the portrait sits in a clean rounded frame without movement. A full-width profile row sits above equal-height study-method and timetable cards on desktop; mobile stacks all sections with consistent padding. The profile link simply reads “Official Kumon profile” and the telephone link reads “Call Liane”, retaining tel:+254741595090. The centre-location paragraph below the timetable is removed and the study-duration note has extra space above it. The source note appears after “Book a free assessment”. Both booking options share the same rounded purple style, height and hover feedback. Review likeness/derivative-image permission before public reuse.
Weekly Classes and Office Hours are separate, differently coloured blocks with a short explanation of each. Each day has its own row and the Day/Time headers have a solid purple background with bold white text. Class rows list Tuesday, Wednesday and Thursday separately at 3pm-6pm, plus Saturday at 9am-noon. Office rows list Monday, Tuesday and Friday separately at 3pm-6pm, plus Saturday at 1pm-2pm. Both schedules and the full study-method explanation are visible without Read more. “Open the booking form” expands an iframe of Kumon's official free assessment form. A visible OR divider separates this from opening the provider's website. The NOTE: about Kumon's live form, data handling and confirmation is visible even while the form is collapsed. No booking was submitted during implementation or testing. Parents should follow the provider's confirmation and privacy policy; displaying the form does not reserve a place.
The supplied google-reviews.json remains the master source and is not modified. node build-designs.mjs validates it and creates a byte-for-byte display copy at assets/google-reviews.json. The Contact page automatically loads that copy without an API key or a request to Google. Update the master and rebuild to refresh the display copy.
The snapshot contains nine written reviews; four ratings-only entries were excluded. The displayed 4.8/5 average and 13-rating count describe the full Google listing at capture, not just the nine comments. The page labels the capture date and treats relative dates as relative to that snapshot, not today. Author names, review order, ratings and original text are retained, including the four-star review; longer text opens with Read more. Author profile links and the supplied Google Maps listing URL are used directly. Individual review URLs and author avatars were not supplied and are not invented.
The reviews appear one at a time in a manual carousel. Previous/Next buttons, a review counter and Left/Right/Home/End keys on the focused carousel reach all nine in their original order; there is no autoplay. Only the current slide is in the page's tab order. Each card shows an accurate five-star graphic, including an unfilled fifth star for the four-star review; the overall graphic shows 4.8/5. Pastel postcard colours, a paper-tape detail and a brief arrival twist add personality without changing review data. Hover and arrival movement are disabled for reduced motion. Static SVG exports show the first slide and carousel controls; the clickable preview contains the full set.
This is a supplied saved snapshot, not a live feed. Loading failures are explicit and offer retry plus the Google Maps link. No new review scraping or external publication was performed. Before public deployment, confirm rights to redistribute the supplied reviews and comply with the applicable Google Maps terms and attribution requirements.
Optional future live feed: The localhost server retains GET /api/google-reviews, but the current display does not call it. Live retrieval would require Places API (New), billing, a restricted server-side GOOGLE_PLACES_API_KEY and the verified school's GOOGLE_PLACE_ID; never put keys in browser code. That API returns up to five Google-selected reviews and is separate from the supplied nine-comment snapshot. Production would need a protected server/serverless endpoint, appropriate policies and quota controls.
Day Care, Play group, PP1 and PP2 appear as class cards on Our days and as choices in the enrolment field configuration. All four retain “Age range to be confirmed” and “Draft programme”. The supplied descriptive copy is preserved; the truncated final PP2 sentence is completed as “Confirmed learning activities and admission requirements will be added here.” No class-specific age, curriculum, fees, schedule, availability or accreditation is invented. Confirm these details before treating the classes as approved admissions options. The preview enrolment fields remain drawn mockups, not live data collection.
The structure was informed by the supplied enrolment example, not copied as a visual design. Its core subject areas are covered: child, programme, start date, aftercare/meals, address, guardians, contact, medical/support needs, emergency/collection arrangements, documents and consent.
Identity documents, medical aid, allergies/support needs, birth/immunisation records, proof of address and child photos are deliberately shown as secure follow-up only. Before collecting them, choose an appropriate service with access controls, retention/deletion rules, privacy notices and an operator-approved lawful collection process. Do not send sensitive records to Git, static hosting, general email or public calendar events.
The second guardian is abbreviated in the visual mockup. Production should offer structured optional guardian fields, including relationship and individual contact details, and secure handling for identity information. Adapt gender and programme options to actual requirements. No prices or availability have been invented.
Events: The supplied calendar ID is gho7ol6nrj4ebk70u7i126mf88@group.calendar.google.com. The owner's public calendar loads automatically when the Events page opens, making a request to Google without a load/close control. A mint heading, cream background, rounded purple frame and matching event colour blend the embed into the site; Google's internal calendar UI remains provider-controlled. Mobile uses Agenda; desktop uses Month, both in Africa/Nairobi time. Public-view, Add to Google Calendar and iCal / Apple / Outlook links remain below the calendar. No subscription is performed automatically. If Google reports an access error, review sharing settings or use the direct link. Sample events are removed; static SVGs show a clearly labelled live-calendar placeholder rather than invented dates.
Book a visit: Setmore Free is the proposed booking provider. Supply the actual school's booking link, configure trial dates and capacity, and confirm current free-plan terms. This is separate from the school events calendar.
The gallery uses build-time GitHub integration, not runtime GitHub API calls. Keep the photos in assets/gallery/ in the connected repository. A GitHub commit triggers the Cloudflare deployment; node build-designs.mjs regenerates gallery.json as part of this kit's build. For a different production build, run node build-gallery.mjs first and include its generated JSON and photo assets in the deployed output. The browser fetches that JSON and the images from the static site. No API token, public repository or third-party gallery subscription is required.
The supplied folder contained 15 PNG photos and no subfolders. Local JPEG derivatives live in assets/gallery/week-demo/, so the actual filters are All photos and Week Demo. No activity folders were invented. Original files were not moved or modified, and embedded source metadata was not copied into the JPEG derivatives. The source notes file is not included.
Create folders such as assets/gallery/2026/sports-day/ or assets/gallery/2026/art/, add photos and commit to GitHub. Both parent and nested folders become filters automatically, with counts including their descendants. Files directly in the gallery root appear under All photos. Supported extensions are JPG/JPEG, PNG, WebP, AVIF and GIF. Hidden files and non-images are ignored; symlinks are rejected rather than relying on files outside the repository. PNG/JPEG/WebP are recommended for broad compatibility.
Each folder can have an optional captions.json mapping image filenames to {"title":"A short caption","alt":"A meaningful image description"}. The supplied photos include descriptive captions and alt text. Filenames are naturally sorted, folder paths stay distinct, and URL characters are encoded. Invalid captions fail the build explicitly. Pagination shows six photos at a time; the full-photo dialog supports previous/next buttons, left/right arrow keys, Escape and focus return. Album filters survive switching desktop/mobile layouts.
The photo wall now uses a sunny background, a teddy-bear header, colourful album tabs and mint, pink, lavender, peach, sky and yellow photo-card frames. The photographs themselves are unchanged. Captions, filters, focus outlines and photo navigation remain clear and functional.
Photo safeguarding: These supplied photos show identifiable children and are used only in this local review kit. No photos have been uploaded to GitHub or public hosting. Before publishing, verify guardian consent, image rights and any identifying details visible in books or classroom displays. A private GitHub repository does not make the deployed gallery private. Public-gallery photos are publicly accessible; parent-only images need authenticated access.
The optional “Explore other schools in the neighbourhood” link initially shows no explanatory copy. The first mouse hover reveals “This button has other plans.” with a sly face, starting with two hops 420ms apart. It then continues evading whenever the mouse comes near, within its bounded play area; it does not stop after the message. A direct phone tap shows only “Sneaky Click” with an angry face for 700ms before following the map pin. Feedback uses a polite live region with reserved space. The actual href remains https://maps.app.goo.gl/YQVRGVNuArhB7LfF8?g_st=ia. Keyboard focus stops evasion and activation has no delay. Reduced motion removes movement. Returning from Maps resets the interaction. The game never covers real contact/directions actions and has no pause control.
404.html is a standalone, semantic, responsive error page using the original assets/lost-friends.svg illustration. Both the bunny and spaceman have raised hands and uncertain expressions, with question marks instead of a frightening error. Home, Directions and contact links provide recovery. Asset paths are root-relative so they work on missing nested URLs. Cloudflare Pages uses a top-level 404.html for missing paths. The local review server also serves this page with an actual HTTP 404 status rather than a success-shaped response. Unknown ?page= preview values select the 404 artboard; a query-only preview route still has HTTP 200 because it is the existing index document.
The preview switches between distinct 1440px desktop and 390px mobile artboards at 980px, preserving the selected page and enrolment step. It illustrates the responsive design; it is not production semantic HTML. Production should use fluid CSS layouts, real form labels/validation and controls, 44px+ touch targets, accessible focus and reduced-motion support. Keep the primary visit action easy to reach. Use CSS grids to stack cards and form fields, and use an agenda on narrow screens.
Host the finished static implementation on Cloudflare Pages using GitHub integration. For Astro static output, use npm run build and dist. Client-side JavaScript can handle menus and validation; real enquiry/enrolment submission still needs an approved form service or backend. Never embed private keys in browser code. Recheck Cloudflare and booking-provider free tiers before launch.
Agent-Native Design is a free, open-source HTML-based prototyping tool from Builder.io. It supports visual/conversational editing and HTML/ZIP handoff, which can suit a responsive website workflow. It is not vector-native, and direct Figma canvas writes still require an authorised Figma integration. The live hosted editor presented a sign-in/account-creation screen when inspected. No school content, design files or attachments were uploaded to it, and no account was created.
The editable source is now /Users/pac/Documents/MACPAC/AmanaSite1, a local folder without Git version control. The GitHub workflow above is a future deployment option, not an existing repository or upload. With Node.js available, run node build-designs.mjs from this folder. Change content.mjs, vectors.mjs and build-designs.mjs before regenerating; do not hand-edit generated SVGs. No npm dependencies are required. Serve this folder with python3 serve-preview.py and open http://127.0.0.1:43821/. This server includes the custom HTTP 404 response. Keep it bound to localhost for review only, not public production hosting.
Optional PNG regeneration uses node render-previews.mjs on macOS, with Quick Look and Python 3 plus PyMuPDF. The SVGs are the editable originals; PNGs are review copies.
Run the gallery, Directions and saved-review validation tests with node --test gallery.test.mjs runaway.test.mjs review-snapshot.test.mjs. Optional live review-service tests use python3 -m unittest serve_preview_test.py.
Prepared as an editable concept and implementation handoff, not an assertion of a real school's credentials or a functioning admissions system.