COLONY — an Ant Colony Toy demo
COLONY — an Ant Colony Toy

A whimsical, toy-like interface evoking a diggable ant colony with earthy tones, tunnel-shaped layouts, and animated crawling elements built through transforms and transitions.
Category: Playful & Youth
Era: 2020s Modern
Prompt: 6.0 KB · 782 words
# System Prompt: Build "COLONY" Landing Page (Ant Colony Toy)

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality landing page for **COLONY — an ant colony toy** on the first attempt. Follow every rule below strictly.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
* All styling lives in `style.css`. **No `style="..."` attributes in HTML.**
* Target everything via class/ID selectors. Keep HTML semantic and clean.
* **Framework:** Use **Tailwind CSS** (CDN or build) with custom tokens mapped to CSS variables; reusable generic classes (`.btn`, `.card`, `.input-group`) where appropriate. One naming convention only (BEM or a fixed utility set) — never mix.

**1.2 CSS Variables & Theme Tokens**
Define in `:root`:
* Colors: `--primary: #2a1f14`, `--bg-primary: #f2e6d0`, `--bg-secondary: #e8dcc8`, `--text-primary: #2a1f14`, `--text-secondary: #a08c6e`, `--text-success: #6a8a4a`, `--text-error: #b3403a`, `--border-default: #a08c6e`, `--accent: #8aae64`.
* **Contrast pairing:** light backgrounds (`#f2e6d0`, `#e8dcc8`) always pair with dark text (`#2a1f14`); dark surfaces (`#2a1f14`) pair with light text (`#e8dcc8`). Enforce this in every component.
* Radius/shadows: `--radius-sm: 8px`, `--radius-md: 16px`, `--radius-lg: 28px`, `--shadow-sm`, `--shadow-md`.
* Spacing/transitions: `--spacing-gap: 1.5rem`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`.
* Stacking: `--z-dropdown: 10`, `--z-modal: 100`, `--z-toast: 200`.

**1.3 Mandatory Dark Mode**
* Define dark tokens under `@media (prefers-color-scheme: dark)` **and** a `.dark` class: `--bg-primary: #1a130c`, `--bg-secondary: #241a10`, `--text-primary: #e8dcc8`, `--text-secondary: #a08c6e`, `--primary: #f2e6d0`. Maintain contrast pairing in dark mode.
* Provide a visible theme toggle button (sun/moon Google Icon) with `aria-pressed` and `aria-label`. Persist choice via `localStorage`, falling back to `prefers-color-scheme`.

**1.4 Flexbox Layout & Mobile-First**
* Every flex container defaults to `align-items: center` unless explicitly justified otherwise. Use `justify-content` per layout need.
* All layouts mobile-first: multi-card rows become single columns below ~768px. **No horizontal scrolling at any viewport.**

**1.5 Typography & Icons (Google Fonts Mandatory)**
* Text: **Google Fonts** — headings in **Fredoka** (playful, fits the toy brand), body in **Inter**. Bind to `--font-base` / `--font-heading` via `<link>` tags.
* Icons: **Google Material Symbols** only. **No inline SVGs, no local icon files.**

---

## 2. PAGE SECTIONS (in order)

1. **Header/Nav:** Sticky, logo "COLONY" with an ant-themed Google Icon, nav links, theme toggle, CTA button.
2. **Hero:** Playful headline (e.g., "Watch a tiny world dig itself."), subheadline, primary CTA + secondary CTA, decorative ant/tunnel motif built with CSS shapes (border-radius, transforms) — no images required.
3. **Features (3 cards):** e.g., "Living Tunnels," "Real Ants, Real Behavior," "Kid-Safe Design." Each card: Google Icon, title, copy.
4. **How It Works (3 steps):** Numbered step layout with connecting visual flow (CSS pseudo-elements/dotted lines), Google Icons per step.
5. **Testimonials:** 2–3 quote cards with name, role, quote.
6. **Pricing (3 tiers):** e.g., Starter Colony / Classic Colony / Mega Colony. Highlight the middle tier as "Most Popular" with distinct border/background. Each tier: price, feature list (checkmark Google Icons), CTA button.
7. **FAQ:** Accordion using `<details>`/`<summary>` (native, keyboard-accessible) with animated open/close via CSS transitions.
8. **Final CTA:** Full-width dark panel (`#2a1f14` bg, light text) with headline + button.
9. **Footer:** Logo, secondary link groups (Product, Support, Company), social icon links (Google Icons), copyright.

All user-facing copy in **English**, playful & youth-oriented tone. Write real copy — no lorem ipsum.

---

## 3. COMPONENT STATES (MANDATORY)

**Buttons:** Default flex layout (`display: flex; align-items: center; justify-content: center; gap: 0.5rem;`), min 44×44px touch target. **Hover:** brightness/shadow shift + `cursor: pointer`. **Focus:** visible focus ring via `outline`/`box-shadow` using CSS variables. **Active:** `transform: scale(0.97)`. **Loading:** disabled + CSS spinner, no dimension change. **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`. **Danger** (if any): visually distinct via `--text-error` in both themes.

**Cards:** Default flex layout with `--bg-secondary`, subtle border, `--shadow-sm`. **Hover:** `transform: translateY(-2px)` + shadow shift (`--shadow-md`) with `transition: var(--transition-normal)`. **Focus-within:** border highlight when a child is focused.

**FAQ accordion:** smooth `max-height`/grid-row transition on open, icon rotate transform, respects `prefers-reduced-motion`.

**Global:** every interactive element gives visible feedback; all transitions use `var(--transition-normal)` and `var(--ease-standard)`; wrap animations in `@media (prefers-reduced-motion: no-preference)`.

---

## 4. ACCESSIBILITY & UX

* Sufficient contrast in both light and dark modes (verify `#2a1f14` on `#f2e6d0` and inverse).
* Semantic HTML5 (`<header>`, `<main>`, `<section>`, `<footer>`, `<nav>`, `<details>`). Logical focus order, full keyboard operability, skip-to-content link.
* Never rely on color alone — pair icons/text with state changes.
* `aria-live="polite"` region for any dynamic feedback (e.g., theme toggle announcement).

---

## 5. DELIVERABLES

* **Files:** `index.html`, `style.css`, `script.js`. No inline `<script>` beyond one deferred entry-point reference. No inline CSS.
* **JS scope:** theme toggle + persistence only. No other behavioral JS — the FAQ uses native `<details>`.
* **Visual effects:** Hover effects, transitions, transforms, and generous border-radius (`--radius-lg` on cards/buttons for the playful toy aesthetic) as specified.
* No unrequested placeholders; all copy must be real and on-brand.