# POP EAT Design System — handoff notes Written for the next designer or agent picking this up. Read `readme.md` first (brand context, content fundamentals, visual foundations, iconography, index); this file covers **how it was built, what is verified, what is guessed, and what to do next**. Last worked: 2026-08-27. --- ## 1. What the sources actually were Everything came from one read-only local folder, `www/` — a static-site working directory, **not a git repo, not a Figma file, no component library**. Contents I used: | Source | Trust level | Used for | |---|---|---| | `popeat-data.json` (stamp `2026-08-26`) | **Highest — its own header calls itself the single source of truth for facts** | Prices, four party packages with 10/15/20 tiers, café menu, kids' menus, hours, booking policy, ES/RU/EN string keys | | Saved live page `POP EAT Adeje — …html` (Russian rendering) | High for structure & RU copy | Section order, nav labels, RU prose, pop-it hex values, `theme-color`, inline SVG glyph paths | | `pop-eat.md` (RU business brief) | High for positioning | Audience, zones, tone | | `build.js` | Reference | Confirmed the site is generated from the JSON | | Poster / menu / logo PNGs | High for visual language | Poster palette (sampled), poster anatomy, imagery rules | **Missing from the export — the single biggest gap.** `css/style.css`, `js/main.js`, `js/i18n.js` were referenced by the saved page but not included. Consequence: **no production value was measured.** Every spacing, easing, radius, hover colour and shadow in `tokens/` is either (a) verbatim from inline styles/meta in the saved HTML, (b) sampled from poster artwork, or (c) authored by me to fit the pop-it language. The token files mark which is which in comments — **respect those comments; they are the provenance record.** --- ## 2. Decisions made, and why - **Two palettes, kept separate.** `--pop-*` (the eight toy hues, verbatim from the site) is texture and cycling accent only. `--brand-*` (sampled from posters) carries actions, headings, surfaces. Mixing them freely is the fastest way to make this brand look cheap. - **Magenta `#e8156b` is the single action colour.** Every CTA, price and link. Navy is headings. This was inferred from the posters, where magenta is always the price/CTA colour. - **The "toy ledge"** (`--ledge-*`: a hard offset-only shadow under buttons, removed on press) is my invention, not lifted from production CSS — but it is the mechanic that makes controls read as moulded plastic rather than flat web buttons. If you replace it, replace it with something equally physical; do not just delete it. - **Emoji as the icon system** is deliberate and documented, not laziness. The brief and the venue language are playful, and there is no icon font or SVG icon set anywhere in the sources. Only four line-art SVGs exist (WhatsApp / Instagram / Facebook / map pin), copied verbatim out of the site's own markup into `assets/icons/`. - **No logo was drawn.** `assets/logo/pop-eat-logo.png` is the supplied file, used as artwork. `Logo variant="text"` exists only as an image-fails fallback. - **Component inventory was authored, not transcribed** — because the source has no components. It maps 1:1 onto real UI on the page and posters. The five brand/poster primitives (`StickerHeading`, `Rosette`, `TaglineStrip`, `PriceTag`, `FeatureRow`) exist because the poster surface needs them; they are listed under "Intentional additions" in `readme.md`. --- ## 3. Verified - All 32 components evaluate and render (a temporary harness rendered every one with representative props; it has since been deleted). - All 165 `var(--*)` references resolve against the loaded stylesheets — no unresolved token names. - All 14 images in the website kit resolve. - Website kit interactions work: anchor nav, FAQ accordion, gallery lightbox with prev/next, contact form validation + sent state, and the booking modal re-pricing correctly from real tier data (10 → 15 children = 220 € → 295 €). - `check_design_system` reports **no issues**: 32 components, 29 cards, 165 tokens, 2 fonts. ### Bug found and fixed in review The header language switch defaulted to `['es','ru','en']` while `data.js` ships only `es` and `ru` — clicking EN blanked the page. Fixed by having `SiteHeader` forward a `langs` prop to `LangSwitch`, passing `Object.keys(C.i18n)` from the kit, plus a Spanish fallback in `App.jsx`. **Lesson to carry forward: if you add locales to `data.js`, the switch picks them up automatically — never hard-code the list.** --- ## 4. Known gaps — do not silently "fix" these by guessing 1. **Spanish prose is my translation** of the Russian copy in the saved page. The live ES text was not in the export. Every Spanish string in `ui_kits/website/data.js` needs client sign-off. 2. **English is not implemented.** `popeat-data.json` has EN *labels* but no EN prose. Adding an `en` block to `data.js` is all that's needed structurally. 3. **Cyrillic font substitution.** Baloo 2 and Fredoka ship no Cyrillic subset, so RU renders in **Nunito** via `--font-cyrillic` (switched by `:lang(ru)` in `tokens/base.css`). Needs a licensed Cyrillic display face. 4. **Two factual conflicts between sources**, resolved by preferring the newer JSON — re-confirm: - Age range: saved page says *6 months – 12 years*; `popeat-data.json` says *1–12*. **Using 1–12.** - E-mail: page markup says `popeatadeje@gmail.com`; JSON says `osopolarocio@gmail.com`. **Using the first.** 5. **Poster extra-child prices (15 € / 18 €)** were read off the poster artwork, not the data file. 6. **Poster backgrounds are approximations.** The originals composite 3D rendered scenes (cakes, balloons, confetti). Only the flat pop-it texture was supplied, so `PosterFrame` uses that. For real print work, use the original PNGs in `assets/posters/`. 7. **Responsive behaviour is out of scope.** Both kits are authored at their declared design widths (1180px web, fixed poster sizes). Grids overflow below that. Breakpoints were never specified and the production CSS that would have shown them was missing. 8. **Menu boards were not rebuilt** as components — they are photographed raster art in `assets/menu/`, used as imagery. --- ## 5. Where things live ``` styles.css @import list only — the one file consumers link tokens/ fonts, colors, typography, spacing, shape, motion, base components// 32 primitives; each has .jsx + .d.ts + .prompt.md; one @dsCard per dir guidelines/ 22 foundation specimen cards (Colors / Type / Spacing / Brand) ui_kits/ds-loader.js shared component loader used by both kits ui_kits/website/ popeat.es recreation — data.js holds ALL content & i18n ui_kits/posters/ party poster, social square, story format assets/ logo · brand · icons · posters · menu · illustrations readme.md the design guide (start here) SKILL.md Agent-Skills front matter thumbnail.html homepage tile DEPLOY.md how to serve this on a web server ``` ## 6. If you change one thing, change it here - **Content and copy** → `ui_kits/website/data.js` only. No strings are hard-coded in the JSX. - **Colour, type, spacing, motion** → `tokens/*.css`. Components never hard-code a hex or a px value that has a token. - **A component's look** → its `.jsx`; then update its `.prompt.md` and the directory's `@dsCard` HTML so the Design System tab stays truthful. - **Never hand-write** `_ds_bundle.js`, `_ds_manifest.json`, `_adherence.oxlintrc.json` — generated. - After any edit, run `check_design_system` and fix what it reports. ## 7. Suggested next steps, in priority order 1. Get the production `css/style.css` + `js/main.js` and replace sampled token values with measured ones. 2. Get client-approved Spanish copy; then add the `en` block to `data.js`. 3. Source a Cyrillic display face; swap `--font-cyrillic`. 4. Define mobile breakpoints (360 / 768 / 1180) and add responsive rules to the kits. 5. Rebuild the posters over the real 3D scene art once it is supplied as layered files. 6. Consider converting the two kit screens into `templates//` entries — the tooling now prefers templates over the older `@startingPoint` tags the components still carry.