# POP EAT Adeje — Design System

**POP EAT Adeje** is a children's leisure centre and family café in the centre of Adeje
(Los Olivos district), Tenerife, Canary Islands. Children aged 1–12 play in a multi-level
soft-play zone — two ball pools, slides, a jumping structure, a LEGO Duplo wall, a sensory
wall, themed playhouses and a sports corner — while parents sit in the café (Lavazza coffee,
Valor hot chocolate, cakes). The commercial core of the business is **turnkey themed
birthday parties**, sold as four packages for 10 / 15 / 20 children.

The brand identity is **pop-it toy aesthetics**: silicone bubble grids, the full toy rainbow,
heavy rounded sticker lettering with thick white keylines, and a bear mascot built into the
wordmark. Nothing is square, nothing is muted, nothing is subtle.

- Trading name: POP EAT Adeje · Address: C. Piedra Redonda 50, 38670 Adeje, Tenerife
- Phone / WhatsApp: +34 689 74 38 74 · E-mail: popeatadeje@gmail.com
- Instagram [@popeat.es](https://www.instagram.com/popeat.es) · Facebook [/PopEat.es](https://www.facebook.com/PopEat.es/)
- Hours: Mon–Fri 16:00–21:00 (**Wednesday closed**), Sat–Sun 11:00–21:00
- Google rating 4.9 ★
- Languages: Spanish (primary), Russian, English

## Products / surfaces represented

| Surface | Where it lives | Notes |
|---|---|---|
| Marketing website **popeat.es** | `ui_kits/website/` | Single-page, anchor-nav, ES/RU/EN switch. The centre's main channel; bookings actually complete on WhatsApp. |
| **Print & social promo posters** | `ui_kits/posters/` | Party-package posters and product promos (cotton candy, decorated ice cream). Square/portrait, Spanish only. |
| In-venue **menu boards** | `assets/menu/` (artwork only) | Photographed boards supplied as raster art; not rebuilt as components. |

## Sources given to me

Read-only local codebase mounted as **`www/`** (a static-site working folder, not a git repo):

- `www/popeat-data.json` — **the single source of truth for facts** (its own header says so):
  prices, four party packages with 10/15/20 tiers, café menu, kids' menus, hours, booking
  policy, ES/RU/EN string tables. Version stamp `2026-08-26`.
- `www/pop-eat.md` — Russian-language business brief (positioning, zones, audience, offer).
- `www/POP EAT Adeje — Centro de Ocio Infantil y Cafetería Familiar en Tenerife.html` — a saved
  copy of the live page (Russian rendering), plus `…_files/` (Google-Fonts CSS, embedded map).
- `www/build.js` — the generator that renders the page from `popeat-data.json`.
- Artwork: `POP-EAT-LOGO-NEW.png`, `fon.png` (pop-it texture), `pop-eat-screensaver.png`,
  party posters, promo posters, menu boards, an illustrated location map.

**Not available to me** (flag when accuracy matters): the site's own `css/style.css`,
`js/main.js`, `js/i18n.js` were not included in the export, so measured production values
(exact paddings, easing curves, hover colours) could not be read. Everything in
`tokens/` marked "verbatim" was lifted from the saved HTML's inline styles and meta tags;
everything marked "sampled" was taken from the poster artwork. No Figma file was provided.

---

# CONTENT FUNDAMENTALS

**Language priority.** Spanish first, Russian second, English third. Spanish is the customer-facing
default; Russian is a real audience (the brief and the saved page are both Russian) and gets full
parity, not a courtesy translation.

**Voice: warm, concrete, parent-to-parent.** The copy sells *relief* as much as fun — the child is
safe and busy, the parent gets a coffee. It never talks about "experiences", "journeys" or "magic".

**Person.** "We" for the centre (*hemos reunido…*, «мы объединили…»), "you"-plural informal for the
customer (*consulta*, *reserva tu fecha*, «уточняйте», «забронируйте»). Never the formal *usted*.
Spanish uses `tú`; Russian uses «вы» in polite plural but stays friendly.

**Casing.** Sentence case for headings and body. UPPERCASE is a *graphic* device, not a writing
one — reserved for poster headlines, package names (KIDS ONLY, BÁSICO, PRIVATE PARTY, TODO
INCLUIDO), badges (TOP, PREMIUM) and micro-caps labels (kickers, nav, field labels). Never
uppercase a sentence.

**Sentence length.** Short. One idea per sentence, two sentences per paragraph, three paragraphs
maximum per section. Bulleted checklists carry the detail.

**Numbers and money.** Spanish/European conventions, always: comma decimal, space, symbol after —
`1,10 €`, `2,50 €`, `15,00 €`. Duration with a comma too: `2,5 horas`. Times on the 24-hour
clock with a colon: `16:00–21:00`. Phone grouped `+34 689 74 38 74`. Never `$`, never `€7.00`.

**Concrete over adjectival.** Brand names are stated because they are proof: *café Lavazza*,
*chocolate Valor*, *LEGO Duplo*, *2 kg cake*, *60 € deposit*, *48 h*, *1–12 años*. When a claim
can be a number, it is a number.

**CTA vocabulary** (short, imperative, verb-first): *Reservar* · *Reservar cumpleaños* · *Llamar* ·
*WhatsApp* · *Cómo llegar* · *Enviar* / «Забронировать» · «Заказать праздник» · «Позвонить» ·
«Как доехать» · «Отправить». Never "Learn more", never "Click here", never "Discover".

**Honesty about limits** is part of the tone. The Wednesday closure and the deposit are stated
plainly, in the same friendly register: *"Los miércoles el centro está cerrado. La fiesta es
posible reservando el centro completo, con precios de entre semana."*

**Emoji: yes — deliberately, as iconography, never inside sentences.** Colour emoji sit inside
coloured circles or tiles as the icon system (🤸 🟡 🧱 🖐️ ☕ 🎂 📍 📞 ✉️ 🕒 🍕 🫧 🎈). They never
appear in a headline, a paragraph, a button label or a price.

**Quotation marks** follow the language: Spanish and Russian both use guillemets — «…» / «…» —
in testimonials.

**Examples to imitate**

> Piscina de bolas, LEGO, cafetería familiar y cumpleaños inolvidables en el centro de Adeje.
> Precio por niño, los padres entran gratis.
> Cuatro paquetes, de 10 a 20 niños. Reserva tu fecha con antelación: los fines de semana se llenan rápido.
> «Un sitio único donde se juntan ludoteca, zona de juego y cafetería.» — María G.

**Examples to avoid:** "Welcome to a world of imagination!" · "Book now and discover the magic ✨" ·
"Our state-of-the-art facility" · "PRECIOS INCREÍBLES PARA TODA LA FAMILIA".

---

# VISUAL FOUNDATIONS

## The one-line summary
A toy shop, not a website: saturated pop-it colour, everything rounded, everything slightly 3D,
type that behaves like a vinyl sticker, and motion that overshoots.

## Colour
Two palettes that must not be mixed carelessly.

1. **Pop-it rainbow** (`--pop-red` → `--pop-pink`, eight hues, verbatim from popeat.es). Used for
   *texture and cycling accents*: bubble grids, icon discs, per-letter sticker lettering, the
   rainbow rule. Never for body text, never as a page background.
2. **Poster core** (sampled from the artwork): `--brand-magenta #e8156b` (the action colour — every
   CTA, every price, every link), `--brand-navy #1f2c86` (every heading and all body-adjacent
   strong text), `--brand-royal #2b45c4` (second headline colour), `--brand-sun #ffc61e` (rosettes,
   time pills, footer column titles), `--brand-cherry #e03427` (the city pill, errors),
   `--brand-grape #6b2fbf`, `--brand-cream #fbf3e4` (poster card fill).

Ink is violet-tinted, not neutral grey: `--ink-900 #1a1330` down to `--ink-100`. Backgrounds
alternate white and the two-stop wash `--gradient-page` (`#fff4f4 → #eef6ff`, 135°). At most two
background treatments per page. WhatsApp green `#25d366` is a real brand surface here, not a
third-party colour — WhatsApp is the booking channel.

**Never invented:** no blue-purple hero gradients, no dark mode, no pastel-desaturated version of
the palette.

## Type
- **Baloo 2** (500/700/800) — `--font-display`: all headings, prices, poster lettering. Chosen for
  its fat rounded terminals; it reads as extruded plastic.
- **Fredoka** (500/600/700) — `--font-ui`: body, buttons, badges, labels, nav. Note the brand has
  **no 400 weight**: 500 is the lightest text in the system.
- **Nunito** (`--font-cyrillic`) — substitution for Russian copy, because neither Baloo 2 nor
  Fredoka ships a Cyrillic subset. See "Font substitutions" below.
- Scale 12 → 76px plus fluid `--text-hero` and `--text-price`. Line height 0.98 for stacked poster
  headlines, 1.18 for headings, 1.6 for body. Tracking is tight on display (−0.01em) and wide on
  micro-caps (0.04em) / kickers (0.16em).
- **Sticker lettering** is the signature: heavy uppercase caps with a 5–6px white keyline drawn as a
  12-direction `text-shadow` ring plus a soft drop shadow. Two modes only — one colour per *line*
  (magenta + royal, or grape + magenta), or one colour per *letter* cycling the rainbow. Two or
  three words maximum; it stops reading as a sticker the moment it wraps.

## Spacing & layout
4px base, 4 → 128. Container 1180px (narrow 760px for prose and FAQ). Sections 96px vertical
(64px tight), card gap 24px, feature-grid gap 32px, header 72px. Grids are simple and symmetric:
3-up services, 2-up tariffs, 4-up packages, 4-up gallery. Nothing is asymmetric or offset for
effect. The web layout **breathes**; the posters do the opposite — poster cards use 40px padding
and pack content edge to edge.

**Fixed elements:** the header is sticky, translucent white (`rgba(255,255,255,.92)`) with a 10px
backdrop blur and a soft shadow; the WhatsApp bubble is fixed bottom-right at all times. Nothing
else is pinned.

## Backgrounds
Three, and only three:
1. flat white,
2. the two-stop `--gradient-page` wash for alternating sections,
3. **full-bleed pop-it toy photography** (`assets/brand/pattern-bg.png`) with an optional white or
   ink veil (`PopitSurface` `veil="soft" | "strong" | "ink"`) so type stays legible.

No repeating vector patterns, no noise, no hand-drawn illustration as texture, no aggressive
gradients. Poster backgrounds are photographic 3D scenes — pop-it toys, balloons, confetti,
a cake — never flat colour.

## Corners
Nothing is square. 8 / 12 / 18 / 28 (web card) / 40 (poster card) / 56, plus `--radius-pill` (999)
for every button and badge and `50%` for every bubble, icon disc and avatar-scale element.

## Cards
White (or cream) fill, 28px radius on web / 40px on posters, soft ambient shadow
`--shadow-card: 0 10px 30px rgba(26,19,48,.10)`, **no border by default**. Emphasis is a 4px
**inset magenta keyline** on a cream fill — the poster treatment — never a coloured left border,
never a 1px grey outline. Featured cards additionally carry a floating pill badge overlapping the
top edge.

## Shadows
Three stacked systems:
- **Ambient** — `--shadow-sm / -card / -lift`, violet-tinted (`rgba(26,19,48,…)`), never pure black.
- **Coloured glow** — `--shadow-magenta / -navy / -sun`, added on hover for primary actions only.
- **3D toy ledge** — a hard, offset-only shadow under buttons and price chips (`0 5px 0` in a dark
  tint of the fill). This is what makes controls look moulded. **Press removes the ledge**
  (`0 1px 0`) so the button physically sinks.
- **Inset dimple** — `--bubble-inset`, a paired dark-bottom / light-top inset shadow that turns any
  circle into a silicone pop-it bubble. Used on bubble grids, icon discs, checklist ticks.

## Borders
Rarely 1px. Hairlines are `--ink-100` and mostly appear as **dashed** dividers inside lists
(2px dashed, faint navy on cream). Structural strokes are 2px (form controls, ghost buttons) or
4px (poster keyline, white sticker keyline around badges). Form controls draw their border as an
`inset box-shadow`, so focus can thicken and colour it without shifting layout.

## Motion
Springy and short. `--ease-pop: cubic-bezier(.34,1.56,.64,1)` — a deliberate overshoot — is the
default for hover and enter; `--ease-out` for colour-only changes. Durations 160 / 240 / 420ms;
section reveals 620ms with a 24px rise. Nothing fades slowly, nothing eases linearly, nothing
loops. All motion tokens collapse to 1ms and all transforms to `none` under
`prefers-reduced-motion`.

## Hover / press / focus
- **Hover:** lift `translateY(-3px)` (buttons, cards) or grow `scale(1.03)` (round controls, gallery
  tiles), plus a lighter fill and the coloured glow. Links go magenta → grape and gain a 2px
  underline at 3px offset. Never opacity-only.
- **Press:** `scale(.96) translateY(2px)`, the ledge collapses, the fill darkens one step. The
  control squashes like a rubber toy.
- **Focus:** `--ring-focus: 0 0 0 4px rgba(232,21,107,.30)` on every interactive element. Outlines
  are never removed without a ring replacing them.
- **Disabled:** 45% opacity, ledge and shadow removed, `not-allowed` cursor. No grey repaint.

## Transparency & blur
Used in exactly three places: the sticky header (92% white + 10px blur), the gallery-tile caption
capsule (92% white + 6px blur), and modal scrims (`rgba(26,19,48,.72–.78)` + 6–8px blur). Body
text is never set on a blurred surface, and blur is never decorative.

## Protection strategy
Type over photography is protected by **capsules and veils, not gradient scrims**: a badge pill, a
frosted caption capsule, or a whole-surface veil. The one gradient-as-protection case is the
poster's own artwork. White sticker keylines do the same job for headline type.

## Imagery
Warm, saturated, high-key, evenly lit, shot close. Primary colours dominate; skin tones are warm.
No black-and-white, no grain, no film emulation, no muted "editorial" grade, no dark backgrounds
(the one exception is the in-venue café menu board, which is dark by design). Photography is
always of the real venue, the real food, or the real toys.

## Font substitutions — please confirm
Both brand faces are Google Fonts and are loaded from Google's CDN exactly as the live site does,
so **no font binaries were substituted**. One real gap: **Baloo 2 and Fredoka have no Cyrillic
subset**, so Russian copy currently renders in **Nunito** (`--font-cyrillic`), the closest rounded
Google face with full Cyrillic coverage. If you have a licensed Cyrillic display face — or want
Russian headlines set in something else — send it and I will swap it in.

---

# ICONOGRAPHY

The brand has **two icon systems and no icon font**.

1. **Colour emoji as content icons.** This is the deliberate, documented approach: a colour emoji
   glyph centred in a rainbow-filled circle (`border-radius:50%`) or rounded tile, with the
   `--bubble-inset` dimple shadow so it reads as a pop-it bubble. The vocabulary in use:
   🤸 jumping · 🟡 ball pool · 🧱 LEGO · 🖐️ sensory wall · ☕ café · 🎂 birthdays ·
   👧 children · 🍕 food · 🫧 bubble disco · 🎈 balloons · 🎭 character visit ·
   📍 address · 📞 phone · ✉️ e-mail · 🕒 hours.
   Emoji render in `--font-emoji` (Apple/Segoe/Noto colour emoji). They are **icons only** — never
   inside sentences, headlines, buttons or prices.

2. **Four line-art SVGs**, for the four real channels only, copied out of the site's own markup
   into `assets/icons/`: `whatsapp.svg`, `instagram.svg`, `facebook.svg`, `map-pin.svg`. Solid
   `currentColor` fills, 24×24 viewBox, no strokes. They appear white inside a brand-coloured
   circle (`SocialLink`). **Do not add other networks** — the business uses these four.

No Lucide/Heroicons/Font Awesome, no CDN icon set, no unicode dingbats as icons. The two typographic
marks the system does use as glyphs are the check `✓` (checklist ticks, feature rows), `✕`/`‹`/`›`
for dialog and lightbox controls, and `★` for the Google rating. If a new content icon is needed,
add an emoji to the vocabulary above — do not draw an SVG.

**Logo.** `assets/logo/pop-eat-logo.png` is the real supplied wordmark: pop-it bubble letters with
the bear mascot occupying the space between POP and EAT, over the words "Centro de Ocio Infantil".
Use it as artwork only — never re-typeset, recolour, outline, rotate or crop it. Clear space is half
the logo height on every side; add `glow` (a drop shadow) over photography or dark fills.

---

# INDEX

## Root
| File | What it is |
|---|---|
| `styles.css` | The entry point consumers link. `@import` lines only. |
| `readme.md` | This document. |
| `SKILL.md` | Agent-Skills front matter, for using this system in Claude Code. |
| `HANDOFF.md` | Build notes for the next designer: provenance of every value, decisions, verified vs guessed, next steps. |
| `DEPLOY.md` | How to serve this on a static web server. |
| `thumbnail.html` | Homepage tile for the design system. |

## Tokens (`tokens/`)
`fonts.css` (Google Fonts + @font-face) · `colors.css` · `typography.css` · `spacing.css` ·
`shape.css` (radii, borders, shadows, ledges, dimples) · `motion.css` · `base.css` (element defaults).

## Components (`components/`) — 32 primitives
- **core/** `Button` `IconButton` `Badge` `Card` `PriceTag` `Rosette` `Checklist`
- **brand/** `Logo` `TaglineStrip` `PopitGrid` `StickerHeading` `PopitSurface`
- **content/** `SectionHead` `ServiceCard` `PriceCard` `PackageCard` `StatCard` `ReviewCard`
  `MenuList` `FaqItem` `GalleryTile` `FeatureRow` `InfoRow`
- **forms/** `Field` `Input` `Select` `Textarea` (+ `fieldStyles.js`, shared control skin)
- **navigation/** `SocialLink` `LangSwitch` `SiteHeader` `SiteFooter` `FloatWhatsApp`

Each has a `.d.ts` props contract and a `.prompt.md` usage note; each directory has one
`@dsCard` showcase HTML.

### Intentional additions
No component library existed in the sources — the site is generated markup, not components — so this
inventory was authored from the real UI. Three items exist because the *brand* needs them even
though the website has no such widget: `Rosette`, `StickerHeading` and `TaglineStrip` are lifted
from the poster artwork, and `PriceTag`/`FeatureRow` likewise serve the poster surface.
`FloatWhatsApp` and `LangSwitch` are real site features.

## Guidelines (`guidelines/`) — foundation cards
Colors: pop-it rainbow · poster core · ink & tints · semantic aliases · gradients.
Type: display · UI & body · scale · sticker lettering · Cyrillic substitution · roles.
Spacing: scale · page rhythm · control padding.
Brand: logo & clear space · descriptor strip · pop-it surface · corner radii ·
shadows/ledges/dimples · poster anatomy · imagery library · iconography.

## UI kits (`ui_kits/`)
- `website/` — popeat.es recreation (see its README). Interactive: language switch, anchor nav,
  FAQ accordion, gallery lightbox, booking modal with live pricing, contact form.
- `posters/` — print & social poster recreations built from the same components.
- `ds-loader.js` — shared loader used by both kits.

## Assets (`assets/`)
`logo/` wordmark · `brand/` pop-it texture, key visual, preview · `icons/` four channel SVGs ·
`posters/` seven promo posters · `menu/` seven menu boards · `illustrations/` illustrated location map.