# DESIGN.md — Newberry House Montessori School

> Newberry House is a Montessori school on Lourensford Estate, Somerset West, Cape Winelands. The visual identity is rooted in nature, growth, and authenticity — clean greens, warm whites, generous photography, and editorial clarity.

---

## 1. Visual Theme & Atmosphere

**Mood:** Warm, organic, trustworthy, aspirational. The feeling of sunlit vineyards and mountain air — grounded yet inspiring.

**Design Philosophy:**
- Nature-forward: photography leads, design supports
- Editorial clarity with generous whitespace
- Green as the unifying thread — growth, stewardship, education
- Approachable premium — not corporate, not playful. Confident and caring.
- Clean lines, rounded elements, organic warmth

**Key Characteristics:**
- Photography-dominant layouts (full-bleed hero images, lifestyle shots)
- Green accent system across all touchpoints
- Outlined icon style for section markers
- Card-based content blocks with soft rounded corners
- Serif display headings for warmth, sans-serif body for readability

---

## 2. Color Palette & Roles

### Primary Colors

| Name | Hex | Role |
|------|-----|------|
| Newberry Green | `#3A913F` | Primary brand color. Headings, icons, accents, buttons, links |
| Dark Green | `#2D5016` | Display headings, large typography, footer backgrounds |
| Forest Green | `#1B5E20` | Hover states, deep accents |

### Neutral Colors

| Name | Hex | Role |
|------|-----|------|
| Near Black | `#1A1A1A` | Body text, high-contrast elements |
| Charcoal | `#333333` | Secondary text, captions |
| Warm Grey | `#6B6B6B` | Muted text, metadata |
| Light Grey | `#F5F5F0` | Section backgrounds, alternating rows |
| Off-White | `#FAFAF7` | Page background (warm tint) |
| White | `#FFFFFF` | Cards, overlays, content surfaces |

### Accent Colors

| Name | Hex | Role |
|------|-----|------|
| Gold | `#D4A843` | Sparse highlight — awards, icons (phone, globe on cover) |
| Soft Teal | `#4CAF50` | Secondary green for data viz, progress indicators |

### Color Usage Ratios
- **70%** White / Off-White (backgrounds, breathing room)
- **20%** Newberry Green (headings, accents, icons, borders)
- **5%** Dark Green (display text, deep UI elements)
- **5%** Neutrals + Gold (body text, metadata, rare highlights)

### Gradients
- Not specified. The brand avoids gradients in favor of flat color and photographic depth.

### Forbidden Colors
- Neon or electric greens — the palette is natural, not synthetic
- Pure black (#000000) backgrounds — too harsh for the organic feel
- Bright reds, oranges — conflict with the calm, nature-first aesthetic

---

## 3. Typography Rules

### Font Families

| Role | Font | Fallback | Weight(s) |
|------|------|----------|-----------|
| Display / Headings | **Montserrat** | "Helvetica Neue", Arial, sans-serif | 300 (Light — hero/display), 400 (Regular — H1/H2), 700 (Bold — H3 uppercase subsections) |
| Body / UI | **Open Sans** | "Helvetica Neue", Arial, sans-serif | 300 (Light), 400 (Regular), 600 (SemiBold), 700 (Bold) |
| Monospace (code) | Fira Code | "Courier New", monospace | 400 |

**Note:** Primary fonts not explicitly specified in the prospectus. The above are derived from visual analysis of the PDF and website. **The brand uses NO serif or italic fonts anywhere.** Headings are set in Montserrat — a geometric, modern sans-serif with clean lines and confident weights. Body text is set in Open Sans. For emphasis within display headings, use a lighter accent green (`#6AAF6E`) at the normal (non-italic) weight — never italic, never a different typeface. Confirm with the school's brand assets if available.

**Font Source:** Google Fonts (recommended web-safe fallbacks)

### Type Hierarchy

| Element | Font | Weight | Size | Line Height | Letter Spacing | Transform |
|---------|------|--------|------|-------------|----------------|-----------|
| Hero Display | Montserrat | 300 | 72px | 1.1 | -0.02em | None |
| H1 | Montserrat | 400 | 48px | 1.15 | -0.01em | None |
| H2 (Section Title) | Montserrat | 400 | 36px | 1.2 | -0.01em | None |
| H3 (Subsection) | Montserrat | 700 | 24px | 1.3 | 0.02em | Uppercase |
| H4 | Open Sans | 600 | 18px | 1.4 | 0.01em | None |
| Body Large | Open Sans | 400 | 18px | 1.6 | 0 | None |
| Body | Open Sans | 400 | 16px | 1.6 | 0 | None |
| Body Small | Open Sans | 400 | 14px | 1.5 | 0 | None |
| Caption | Open Sans | 400 | 12px | 1.4 | 0.02em | None |
| Button | Open Sans | 600 | 14px | 1 | 0.05em | Uppercase |
| Nav Link | Open Sans | 600 | 14px | 1 | 0.02em | None |
| Footer | Open Sans | 400 | 14px | 1.5 | 0 | None |

### Typography Rules
- Headings in Newberry Green (`#3A913F`) or Dark Green (`#2D5016`)
- Display headings sometimes split-color: first word in Dark Green, keyword in Newberry Green (e.g., "WORLD CLASS" in dark, "MONTESSORI EDUCATION" in bright green)
- Body text in Near Black (`#1A1A1A`)
- Maximum line length: 72 characters for body text
- Paragraph spacing: 1em between paragraphs
- Section sub-labels (like "TODDLER (18 MONTHS - 3 YEARS)") use bold uppercase sans-serif in Dark Green

---

## 4. Component Stylings

### Buttons

**Primary Button**
- Background: `#3A913F`
- Text: `#FFFFFF`
- Font: Open Sans 600, 14px, uppercase, letter-spacing 0.05em
- Padding: 14px 32px
- Border-radius: 6px
- Border: none
- Hover: background `#2D5016`, subtle lift shadow
- Active: background `#1B5E20`
- Focus: 2px solid `#3A913F` offset 2px
- Disabled: opacity 0.5, cursor not-allowed

**Secondary Button (Outline)**
- Background: transparent
- Text: `#3A913F`
- Border: 2px solid `#3A913F`
- Hover: background `#3A913F`, text `#FFFFFF`
- Same radius and padding as primary

**Ghost Button**
- Background: transparent
- Text: `#FFFFFF` (for use on dark/photo backgrounds)
- Border: 2px solid `#FFFFFF`
- Hover: background rgba(255,255,255,0.15)

### Cards

**Content Card**
- Background: `#FFFFFF`
- Border-radius: 16px
- Padding: 24px
- Shadow: `0 2px 8px rgba(0,0,0,0.08)`
- Border: 1px solid `rgba(58,145,63,0.15)`
- Hover: shadow `0 4px 16px rgba(0,0,0,0.12)`

**Info Card (Partnership cards in prospectus)**
- Background: `#FFFFFF`
- Border: 2px solid `#3A913F` with border-radius 16px
- Padding: 32px
- Text-align: center
- Logo/icon centered, title bold, description below

**Photo Card**
- Border-radius: 12px
- Overflow: hidden
- Image fills top portion
- Content padding: 20px
- No visible border — shadow only

### Navigation

**Header**
- Background: `#FFFFFF`
- Height: 72px
- Logo left-aligned
- Nav links right-aligned, Open Sans 600, 14px
- Active link: Newberry Green underline (2px)
- CTA button: "BOOK A TOUR" in primary green button style
- Sticky on scroll with subtle bottom shadow

**Footer**
- Background: `#2D5016` (Dark Green) or `#1A1A1A`
- Text: `#FFFFFF` / rgba(255,255,255,0.7)
- Links: `#FFFFFF`, hover underline
- Padding: 48px vertical

### Form Inputs

**Text Input**
- Height: 48px
- Border: 1px solid `#D0D0D0`
- Border-radius: 8px
- Padding: 0 16px
- Font: Open Sans 400, 16px
- Focus: border `#3A913F`, box-shadow `0 0 0 3px rgba(58,145,63,0.15)`
- Error: border `#D32F2F`, helper text in red below
- Placeholder: `#999999`

### Badges / Tags

- Background: `rgba(58,145,63,0.1)`
- Text: `#3A913F`
- Font: Open Sans 600, 12px, uppercase
- Padding: 4px 12px
- Border-radius: 100px (pill)

### Links

- Color: `#3A913F`
- Underline on hover
- Font-weight: 600 for standalone links
- Font-weight: 400 for inline links (underlined by default)

### Icons

- Style: Outlined / line icons
- Stroke weight: 2px
- Color: `#3A913F` (primary) or `#2D5016` (dark context)
- Size: 48px for section markers, 24px for inline, 20px for UI
- Corner radius on icons: 2px
- Consistent grid: 24x24 base grid

---

## 5. Layout Principles

### Spacing Scale

| Token | Value |
|-------|-------|
| space-xs | 4px |
| space-sm | 8px |
| space-md | 16px |
| space-lg | 24px |
| space-xl | 32px |
| space-2xl | 48px |
| space-3xl | 64px |
| space-4xl | 96px |
| space-5xl | 128px |

### Grid System
- Max content width: 1200px
- Columns: 12
- Gutter: 24px
- Side margins: 24px (mobile), 48px (tablet), auto-center (desktop)

### Whitespace Philosophy
- Generous — let content breathe. The brand is rooted in nature and open space.
- Section padding: 64px–96px vertical
- Between content blocks: 32px–48px
- No cramped layouts — if it feels tight, add space

### Border Radius Scale

| Token | Value | Use |
|-------|-------|-----|
| radius-sm | 4px | Inputs, small elements |
| radius-md | 8px | Buttons, tags |
| radius-lg | 16px | Cards, panels |
| radius-xl | 24px | Feature cards, modals |
| radius-full | 100px | Pills, avatars |

---

## 6. Depth & Elevation

### Shadow System

| Level | Value | Use |
|-------|-------|-----|
| Shadow 1 | `0 1px 3px rgba(0,0,0,0.06)` | Subtle lift — inputs, small cards |
| Shadow 2 | `0 2px 8px rgba(0,0,0,0.08)` | Default cards |
| Shadow 3 | `0 4px 16px rgba(0,0,0,0.12)` | Hover state, elevated cards |
| Shadow 4 | `0 8px 32px rgba(0,0,0,0.16)` | Modals, dropdowns |

### Overlay
- Photo overlay: `rgba(45,80,22,0.6)` — dark green tint for text legibility on images
- Modal backdrop: `rgba(0,0,0,0.5)`
- Light overlay (white cards on photos): `rgba(255,255,255,0.95)` with backdrop-blur 8px

### Focus Ring
- `0 0 0 3px rgba(58,145,63,0.3)`
- Applied to all interactive elements on `:focus-visible`

---

## 7. Do's and Don'ts

### Do's
- Use photography as the primary storytelling device
- Let green be the single dominant accent — consistency is key
- Use generous whitespace to convey openness and calm
- Pair serif headings with sans-serif body for editorial warmth
- Use outlined icons, not filled — keeps the light, natural feel
- Show real people, real settings (Lourensford, vineyards, mountains)
- Use rounded corners on all containers
- Keep text overlays on photos readable with proper contrast (overlay or text-shadow)

### Don'ts
- Don't use more than two greens in one layout
- Don't use stock photography that feels corporate or staged
- Don't use angular or sharp design elements — no pointed corners, no harsh edges
- Don't use dark mode as default — the brand is light and airy
- Don't use decorative fonts or script typefaces
- Don't place body text directly on busy photography without an overlay
- Don't use colored backgrounds other than white, off-white, or light grey for content areas
- Don't use gradients — the brand relies on flat color and photographic depth
- Don't overcrowd layouts — every element should have breathing room

---

## 8. Responsive Behavior

### Breakpoints

| Name | Value | Description |
|------|-------|-------------|
| Mobile | < 640px | Single column, stacked layout |
| Tablet | 640px – 1024px | 2-column grid, adjusted spacing |
| Desktop | > 1024px | Full 12-column grid |
| Wide | > 1440px | Content centered, max-width 1200px |

### Touch Targets
- Minimum: 44px × 44px
- Buttons: minimum height 48px
- Nav links: minimum height 44px with adequate spacing

### Responsive Rules
- Hero images: full-bleed at all sizes, text overlay adjusts
- Cards: 1 column on mobile, 2 on tablet, 3 on desktop
- Navigation: hamburger menu below 1024px
- Font sizes scale down ~15-20% on mobile
- Section padding reduces to 32px–48px on mobile
- Photo cards stack vertically on mobile

---

## 9. Agent Prompt Guide

### Quick Color Reference
```
Primary Green:    #3A913F
Dark Green:       #2D5016
Forest Green:     #1B5E20
Near Black:       #1A1A1A
Charcoal:         #333333
Light Grey:       #F5F5F0
Off-White:        #FAFAF7
White:            #FFFFFF
Gold:             #D4A843
```

### Ready-to-Use Prompts

**Landing Page:**
"Build a school landing page using the Newberry House design system. Hero with full-bleed mountain/vineyard photo, dark green overlay, white serif heading. Three pillar cards (Education, Environment, Experience) with green outlined icons. CTA button in #3A913F. Warm, editorial feel."

**Information Section:**
"Create a content section with a large Montserrat heading in #2D5016, body text in #1A1A1A, and a grid of info cards with green borders and centered logos. Use Open Sans for body, Montserrat for headings. No serif, no italics."

**Photo Gallery:**
"Build a responsive photo grid with rounded corners (16px), subtle shadow, and optional green badge overlays. Images should feel natural and warm."

### Iteration Guide
1. Start with the color palette — green on white is the foundation
2. Set typography — Montserrat headings (300/400/700), Open Sans body. No serif, no italics.
3. Build cards with rounded corners and subtle shadows
4. Add photography — the brand lives through its imagery
5. Final pass: check whitespace, ensure nothing feels cramped

---

## 10. Brand Platform

### Mission
"To showcase what is possible in education."

### Vision
Combining globally recognised teaching methodologies (Montessori + Cambridge International) with an environment that fosters creativity, curiosity, and respect for the natural world.

### Values
- **Education** — World-class Montessori and Cambridge International programmes
- **Environment** — Earth stewardship, sustainability, organic living
- **Experience** — Real-life learning beyond the classroom

### Brand Personality
- Warm and welcoming
- Grounded in nature
- Confidently progressive
- Community-oriented
- Authentic and unpretentious

### Target Audience
- Parents seeking quality independent education in the Western Cape
- Families who value holistic development, sustainability, and outdoor learning
- International families looking for Cambridge International accreditation

### Tagline
"We look forward to welcoming you to our community, where we aim to showcase what is possible through education."

---

## 11. Tone of Voice & Messaging

### Tone Keywords
- **Warm** — inviting, personal, community-focused
- **Confident** — proud of methodology without being boastful
- **Inspiring** — aspirational language about growth and potential
- **Clear** — straightforward, no jargon

### Writing Principles
- Use "learners" not "students" (Montessori terminology)
- Use "guides" or "educators" not just "teachers"
- Speak to parents as partners in education
- Reference the natural setting authentically — Lourensford, vineyards, mountains
- Avoid corporate education language — keep it human and relatable

### Language
- South African English (British spelling: colour, programme, organisation)
- First person plural: "We believe…", "Our learners…"
- Warm but professional

---

## 12. Logo Guidelines

### Logo Variants (from prospectus and website)
- **Full logo:** Green shield/crest with tree icon + "Newberry House" text + "MONTESSORI SCHOOL" subtitle
- **Crest only:** Green shield with stylised tree
- **Text only:** "NEWBERRY HOUSE" in display type

### Logo Colors
- Primary: Newberry Green (`#3A913F`) on white
- Reversed: White on Dark Green or on photographic backgrounds
- The crest/shield is always green or white — never other colors

### Clear Space
- Minimum clear space: equal to the height of the "N" in "Newberry" on all sides

### Minimum Size
- Not specified in source materials. Recommend 120px wide minimum for digital.

### Incorrect Usage (inferred)
- Do not distort, rotate, or recolor the logo
- Do not place on busy backgrounds without sufficient contrast
- Do not recreate the tree icon in a different style

---

## 13. Imagery & Photography

### Photography Style
- Natural light, warm tones
- Outdoor settings: vineyards, mountains, gardens, trails
- Authentic moments: children learning, playing, gardening, cycling
- Diverse representation of learners
- Depth of field used for intimate portraits

### Subject Matter
- Children engaged in Montessori materials and activities
- Outdoor adventures: mountain biking, swimming, trail running
- Gardens, organic produce, sustainability activities
- The Lourensford Estate landscape — mountains, vineyards, dams
- Community events, sports, cultural activities

### Composition Rules
- Full-bleed hero images for section openers
- Pairs and grids of images within content
- Portrait-style headshots for staff (circular crop or rounded rectangle)
- Action shots preferred over posed shots

### Color Treatment
- Full color, warm white balance
- No heavy filters or color grading
- Natural saturation — greens should feel real, not oversaturated
- Avoid desaturated or moody treatments

### Image Overlays
- Dark green overlay (`rgba(45,80,22,0.6)`) for text on photos
- White card overlay with rounded corners for info boxes on photo backgrounds

---

## 14. Iconography

### Style
- Outlined / line icons
- Consistent 2px stroke weight
- Rounded line caps and joins
- Single color: Newberry Green (`#3A913F`)

### Icon Set (from prospectus)
Section icons include: book/education, seedling/environment, lightbulb-people/experience, graduation cap, sustainability arrows, plant/earth stewardship, sports equipment, chess piece, musical notes, drama masks, art palette, eco leaf, drums

### Size System
- Section markers: 48px
- Inline / list: 24px
- UI / navigation: 20px

### Rules
- Icons are decorative section markers, not primary navigation
- Always accompanied by text labels
- Green on white or white on green — no other combinations

---

## 15. Applications

### Digital Touchpoints
- Website: www.newberryhouse.com
- Social media: Facebook (@NewberryHouse), Instagram (@newberryhousemontessori), LinkedIn (newberry-house-montessori-school)
- Email: secretary@newberry.co.za

### Print
- Prospectus (the source document)
- Event materials (Golf Day branding)

### Contact
- Phone: 021 847 1585
- Email: secretary@newberry.co.za
- Website: www.newberryhouse.com
- Location: Lourensford Estate, Somerset West, Western Cape, South Africa