---
name: keren-aliza-design
description: Use this skill to generate well-branded interfaces and assets for the Keren Aliza Project (violinist Aliza Keren's "All 2 Music" platform — concert site, music store, lessons), either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
user-invocable: true
---

# Keren Aliza Project — Design Skill

Read `README.md` in this skill first — it contains the brand context, content fundamentals, visual foundations and iconography rules. Then explore the other available files.

## What's here

- `README.md` — the full system: voice, colors, type, spacing, motion, iconography, caveats.
- `colors_and_type.css` — all design tokens as CSS custom properties (`--color-*`, `--font-*`, `--space-*`, `--radius-*`, `--shadow-*`, `--ease-*`). Import this anywhere.
- `assets/` — logo SVGs (full / compact / favicon), photographic placeholders (`img/`).
- `preview/` — small specimen HTML files for each token group; useful as reference.
- `ui_kits/web/` — desktop UI kit. `index.html` boots the interactive homepage; `*.jsx` are reusable components (Header, Hero, SectionTitle, VideoGrid, AlbumGrid, StoreGrid, Schedule, Reviews, ArticleGrid, Sidebar, Footer, Icons).

## When you're producing artifacts (slides, mocks, throwaway prototypes)

Copy the assets you need into a new working folder and write self-contained static HTML files for the user to view. Concretely:

1. Always `@import` `colors_and_type.css` rather than re-typing tokens.
2. Pull the logo from `assets/logo.svg` (full vertical) or `assets/logo-mark.svg` (horizontal compact). Don't redraw it.
3. Use `assets/img/*` placeholders if you need photography stand-ins.
4. For interactive prototypes, lift the relevant component from `ui_kits/web/` rather than rewriting it.

## When you're working on production code

- Same `colors_and_type.css` — drop it into a shared `theme/` package. The token names (`--color-magenta`, `--color-cream`, `--font-display`, …) are designed to be stable.
- The UI kit components in `ui_kits/web/` are **cosmetic recreations** — they're meant as a visual reference, not as production code. Re-implement them with your real form library / router / state management; just keep the styling and structure.
- Substitute the licensed fonts (Ermilov, Last Christmas) when available — see "Sacramentos" in `README.md`.

## If invoked without other guidance

Ask the user what they want to build or design. Useful questions:
- **Surface:** website page, marketing slide, social card, email, store product, concert poster, lesson handout?
- **Language:** Russian (default), English, Hebrew?
- **Tone:** classical/recital, teaching, casual store, news/blog?
- **Photography:** real photo to drop in, or use a brand placeholder?
- **Length / size:** desktop full page, single hero section, A4 print, 1080×1080 social?

Then act as an expert designer who outputs HTML artifacts (or production code, depending on the need). Always follow the brand rules in `README.md` — Russian voice, sentence case, em‑dash with spaces, no emoji, magenta as the only accent.