build website gor primary school

## Neo-brutalist Dashboard UI

## PARTS

### Visual Language
- Color: balance, primitives: #ff0050, yellow, neutrals ~0-10%, greyscale first. Dark for text, light for background. White space reduces cognitive load.
- Palettes by category, contrast, meaning, swatches.

### Typography
- Use the 8-point grid [x8].
- Hierarchy weight / types.
- Font weights: Light 300, Regular 400, Medium 500, Bold 700.
- Start design relationship with atomic design. Baseline grid.
- Web font: Google Fonts. Primary Khmer language: Battambang, Moulpali (designed by Danh Hong). Ysabeau Infant (designed by Christian Thalmann).
- Spacing system: 8pt creates rhythm, 4pt adds detail. Consistent grid creates clarity.
- F-pattern for text: headlines, lists, articles, search results. Z-pattern for logos, top-right buttons, images, main CTAs.
- T = D / S: Bigger = faster, closer = safer, edges = infinite, bottom = thumb zone. Every form: don't make them think.

### UI ELEMENTS
- Icon needs label always. Thumb dictates placement. One active state only. FAB triggers action.
- Buttons: primary, secondary, button group, menu button, split buttons.
- Form controls: checkbox, select, validation, required, divider / rule, switch, slider, image block, full bleed inline with position.

### UI COMPONENTS
- Action bar, sheet, badges, cards, data tables, dialog, filter, footer, footer notes, header, legend, maps, menu, modal, nav megamenu, pagination, progress bar, search, sidebar, site/app navigation, social networking, status, tabs, toolbar, video and media.

### UI PATTERNS
- Authentication, claim reward, default anonymous, login, form structure, permission settings.

### PAGE TEMPLATES
- Home, category, dashboard.

### LAYOUT SYSTEMS
- Grid for site, grid for apps, paneling transition, responsive / breaking points screen size.

### BRANDING
- Identity, logo, tagline, partnership, themes.

### RESEARCH AND USER
- User needs, personas, research techniques.

### PRACTICES
- Accessibility, prototyping, performing, SEO, design thinking.

### CODING STANDARD
- Style, browser and device, environments, progressive enhancement, version control.

### DOWNLOADS
- Book PDF, provided in library.

### GETTING INVOLVED
- Give feedback (email), present at share, contribute.

### ABOUT THE PROGRAM
- Home page, principles / pillars, getting started, FAQ, version history.

### ABOUT THE TEAM
- Team, recruiting, jobs, volunteer.

### UTILITIES
- Variables / tokens, mixins, helpers, customizers, other.

### PROGRAM ROADMAP PLAN
- Showing project risk and SWOT status update.
- TBC, low risk, medium risk, high risk.
- Jan to Aug, comms, development, KPI, status, strengths, weaknesses, opportunities, threats, new business, action, strategy.

### TEAM & COMMUNITY
- About: Mission principles, FAQ, and version history.
- People: Team profiles, Recruiting/Jobs, and Volunteer opportunities.
- Involvement: Feedback loops (email), sharing sessions, and open contributions.
- Resources: Downloadable book PDFs and library assets.

### UX LAWS CHECKLIST
- Hick’s Law: Reduce the number of choices to decrease cognitive load.
- Miller’s Law: Keep information chunks to $7 \pm 2$ items.
- Jakob’s Law: Users prefer your site to work like all the other sites they know.
- Center Bias: Users focus on the center of the screen first.
- Icon Bounding Box: Ensure consistent hit targets even if icons vary in shape.