# Keren Aliza Project — Design System [![Deploy to GitHub Pages](https://github.com/OWNER/REPO/actions/workflows/pages.yml/badge.svg)](https://github.com/OWNER/REPO/actions/workflows/pages.yml) [![Sanity checks](https://github.com/OWNER/REPO/actions/workflows/check.yml/badge.svg)](https://github.com/OWNER/REPO/actions/workflows/check.yml) [![License: MIT (code) · All Rights Reserved (brand)](https://img.shields.io/badge/license-MIT%20%2B%20brand-EE077D)](LICENSE.md) A complete brand & UI system for **Keren Aliza Project** ("All 2 Music"), the personal website and creative platform of violinist **Aliza Keren** (Mevaseret Zion, Israel). The site lives at the intersection of a personal artist portfolio, a music store, a teaching practice (the "Do‑Re‑Mi" method) and an editorial blog — all in Russian, addressed to a Russian‑speaking diaspora audience of music lovers, parents, students and concert organizers. > **Tagline:** Скрипка · Творчество · Импровизация > _Violin · Creativity · Improvisation_ > > **Hook:** Слушать и играть музыку души > _Listen and play the music of the soul_ ## Quick start ```bash # 1. Clone git clone https://github.com/OWNER/REPO.git keren-aliza-design cd keren-aliza-design # 2. Serve over http (needed by the JSX-in-browser UI kits) python3 -m http.server 8080 # 3. Open open http://localhost:8080/ # landing page open http://localhost:8080/ui_kits/web/index.html # desktop kit open http://localhost:8080/ui_kits/mobile/ # mobile kit ``` No build step, no `npm install` — every file is hand‑written static HTML/CSS/JSX. CI publishes the same site to GitHub Pages on every push to `main`. ## Source This system was reconstructed from a single Figma file the user attached: - **File name:** `All 2 music.fig` - **Pages in scope:** New‑Design (39 frames, the canonical desktop+mobile design), UI‑Kit (13 frames, the formal style guide), Sign (auth screens), Archive / Old‑Design (legacy), Cover. - **Designer credit (from cover):** E. Ustinskiy. - **Copyright line on the page footer:** "All2Music © 2005‑2025". The Figma file is mounted as a read‑only virtual filesystem; the cover, color, typography and component frames were used as the ground truth. Screenshots of the rendered Home Page, Logo, Colors and Typography frames are the authoritative reference for visuals. --- ## Index | File | What's inside | | --------------------------------- | ----------------------------------------------------------------------------- | | `README.md` (this file) | Brand context, content fundamentals, visual foundations, iconography | | `SKILL.md` | Agent‑Skill packaging — read this first if you imported the system | | `LICENSE.md` | MIT for code; All Rights Reserved for brand assets | | `CONTRIBUTING.md` | Local preview, branch/commit conventions, CSS / component / icon style rules | | `index.html` | Landing page — deployed to GitHub Pages, links every artefact | | `colors_and_type.css` | All design tokens: color, type, spacing, radius, shadow, motion | | `assets/` | Logo (svg), favicon, hero portrait, album / video / store photography | | `assets/img/` | Photographic assets pulled from the Figma file | | `preview/` | One‑off HTML cards that populate the Design System tab | | `ui_kits/web/` | High‑fidelity web UI kit — `index.html` is the demo, `*.jsx` are components | | `ui_kits/web/README.md` | UI kit notes, component list, how to read it | | `ui_kits/mobile/` | High‑fidelity mobile UI kit (360px Figma frame), shown inside an iOS shell | | `ui_kits/mobile/README.md` | Mobile kit notes, deviations from desktop, component list | | `.github/workflows/pages.yml` | Deploys `main` to GitHub Pages on every push | | `.github/workflows/check.yml` | Sanity checks — required files, token count, style‑object collisions, HTML | --- ## What this brand is A **one‑woman artist site** rather than a corporate brand: the entire homepage is built around Aliza, her recordings, her concert calendar, her articles and her teaching. Everything else (the store, the blog, the partner programme) is downstream of the artist persona. Three product surfaces live inside the one site: 1. **Artist portfolio** — bio, photos, video & audio reel, concert calendar, press, reviews. 2. **Music store** — sheet music, scores, backing tracks, audio albums for sale (in USD). 3. **Editorial + education** — long‑form articles about violin technique and the proprietary "До‑Ре‑Ми" teaching method, plus an online lessons funnel. The site is content‑heavy and old‑internet in structure (left column main body, right column sticky cream sidebar with news + newsletter signup + tags + partners) — and the design honors that, rather than fighting it. --- ## Content fundamentals **Language.** Russian throughout, with occasional Hebrew place names ("Mevaseret Zion / Jerusalem area, Israel" in the footer). Latin script appears only for the brand name ("Keren Aliza Project") and English/Latin titles in the music store (e.g. "Music for the Soul by Aliza Keren"). **Voice.** Warm, slightly classical, professional but personal. Aliza is addressed by name in third person ("живых концертов Ализы Керен" — "Aliza Keren's live concerts"). The reader is addressed politely with **вы** (formal "you"). No second‑person commands in marketing copy. **Casing.** Sentence case for everything — titles ("Музыкальный магазин"), buttons ("Купить", "Подписаться"), sidebar headings ("Новости", "Подписка на новости"). The only ALL CAPS in the brand are the three tagline words inside the logo (СКРИПКА · ТВОРЧЕСТВО · ИМПРОВИЗАЦИЯ) and the CTA inside the hero ("СЛУШАТЬ МУЗЫКУ ДЛЯ ДУШИ"). **Tone examples (verbatim from the design):** - _"Импровизация — это не только музыка, но и стиль жизни: свобода и текучесть, опирающиеся на крепкую профессиональную базу, человеческие и духовные ценности."_ - _"Видео оригинальных композиций и любимых мелодий с живых концертов Ализы Керен"_ - _"Ноты для скрипки, фортепиано, синтезатора, минусовки, аудиоальбомы"_ Note the **em‑dash with spaces** ( — ), **«guillemet» quotes**, and the unhurried, complete sentences with multiple subordinate clauses. This is not startup copy; it's closer to a concert programme note. **Newsletter / dates.** Dates are written `5 мая 2022.` (cardinal day · genitive month · year · period). News bullets always begin with the date. **Emoji.** None. Anywhere. Iconography is done with line icons or with single‑character decorative dots (a small magenta •). --- ## Visual foundations The system has a **dual personality**: a saturated, almost retro **dark navy → yellow gradient** chrome wrapping a calm, paper‑white editorial body. The result is energetic at the edges and quiet in the middle — exactly right for a personal artist site that is also a music shop and a teaching practice. ### Palette | Token | Hex | Usage | | ------------- | --------- | ------------------------------------------------------------------ | | `magenta` | `#EE077D` | The single brand accent. CTAs, bullets, link arrows, table row highlights, focused borders. Used sparingly. | | `yellow` | `#FFE820` | The logo color. Appears only inside the logo and the menu band gradient. | | `yellow-warm` | `#FCC655` | Top of the menu gradient. | | `yellow-pale` | `#F9EF9F` | Bottom of the menu gradient. | | `cream` | `#FEEECC` | Surface‑2 warm: sidebar, dropdown trays, alternate table rows. | | `navy-deep` | `#190E83` | The site header band background. | | `ink` | `#171717` | All body text, borders and the hero background. | | `ink-strong` | `#08080F` | Display headings. | | `paper` | `#FFFFFF` | Default surface. | | `paper-cool` | `#F9FAFF` | Surface‑2 cool: product cards in the store, audio album cells. | Note: `#EE077D` is the only accent. No purple buttons, no teal links, no green confirmations. State changes (hover, error) shift in lightness, not hue. ### Type Three families do all the work: - **Nunito Sans** — UI workhorse. Bold for all H1–H4 (40/26/20/16, all `-4%` tracking, all 120% leading). Regular/Medium/Bold for body at 12/14/16 with 140% (12) or 160% (14+) leading. - **Lato** — Editorial. Used for news headlines in the sidebar, article excerpts, reviews. Slightly humanist counter to Nunito's geometry. - **Ermilov** — Display only. The heavy chapter headers on UI‑Kit spreads ("Buttons", "Colors", "Header"). 110px, weight 700, 100% line‑height. **Substituted with Manrope ExtraBold** (paid font — see Sacramentos). - **Sacramento** — Script accent. Used once, in the logo tagline "Слушать и играть музыку души". **Substitute for "Last Christmas PERSONAL USE"** (personal‑use font — see Sacramentos). Type rule of thumb: **never use Ermilov below 34px** (it's a display face), and **never use the script face for more than a single line of brand copy**. ### Backgrounds, gradients & full‑bleed The site is **mostly flat color blocks**, not gradients. There are two signature gradients, both used in chrome only: - The **menu band** sits under the header and runs `#FCC655 → #F9EF9F` top to bottom. - The **header band** itself is a flat deep navy (`#190E83`) — but it nests on top of decorative pattern frames that approximate stars/notes. Full‑bleed photography is **not** part of the system. Photos always live inside rounded containers (12/16/24/30 px radius). The hero card uses a hard black background (`#171717`) with the artist's name set in white H1 plus a magenta CTA pill — no photograph behind it on the desktop layout. ### Corner radii A strict scale: **4 / 12 / 16 / 24 / 30 px**, full pill (9999) for badges. - `4 px` — color swatches, micro chips - `12 px` — buttons, inputs - `16 px` — sidebar panel, product cards, CTAs labelled "wide" - `24 px` — UI‑Kit chapter cards (the whole "Buttons" board, etc.) - `30 px` — the hero card and the Figma cover thumbnail ### Borders & shadows The system is almost shadowless — separation is achieved through warm/cool surface contrast (cream vs. white). When a shadow is used, it is soft and offset down: - `--shadow-soft` for hovering chips / floating tags - `--shadow-card` for store product cards on hover - `--shadow-pop` (a magenta‑tinted glow) for the most important CTAs only Borders are a single hairline (`#F1F1F1` for layout, `rgba(8,8,15,0.20)` for type dividers inside cards). Outlined buttons use the accent color at 1px. ### Hover & press states - **Buttons:** hover fills the outline (border color becomes background, label flips to white). Press is a flat `--accent-hover` (`#D90671`). No scale, no shadow change. - **Links:** color shifts to `--accent-hover` on hover; no underline appears or disappears. - **Menu items:** the cream dropdown tray slides in under the band. Active item has a colored dot to the left. - **Cards:** lift by 1‑2 px and gain `--shadow-card` on hover. No rotation, no parallax. - **Press / active:** the brand uses a small "ripple‑note" press indicator (a tiny musical‑note marker that flashes at the press point); on the web it degrades to a 96% scale. ### Motion - Defaults: `220ms` / `--ease-out`. Anything faster reads as snappy menu work (140 ms). Anything slower reads as decorative slide‑in (360 ms). - The site **does not animate text**. No typewriter effects, no kinetic type. - Carousels (hero arrows, reviews) cross‑fade with a slight horizontal shift (8 px → 0). ### Layout rules - **Desktop canvas is 1440 px.** All page frames in Figma are exactly 1440 wide. - **Two‑column above‑the‑fold:** ~720 px body column + 315 px cream sidebar with a 16px radius. The sidebar **sticks** as you scroll. - Section vertical rhythm is `80 px` (the dominant gap value inside the UI‑Kit cards). - Internal card padding is also `80 px` for chapter cards, `32 px` for product cards, `24 px` for inputs. - **Tables** use alternating row backgrounds: cream (`#FEEECC`) for normal rows, magenta (`#EE077D`) for the highlighted "next concert" row with white text. - Mobile layouts collapse to a single column with the dropdown menu moving into a hamburger. ### Transparency & blur - The site **does not use backdrop‑blur**. Translucent overlays appear only as `0.2–0.7` opacity flat layers over photos. - Sidebar text dividers are `1px` of `#FFFFFF` at 0.7 opacity over cream. ### Color vibe of imagery Photos are warm, daylit, mid‑contrast — concert photography lit by stage washes plus daylight portraits in studio. Skin tones are honest, not pushed. The mood is **classical recital warmth**, not high‑gloss pop. No black & white treatments, no duotone, no heavy grain. --- ## Iconography The site uses a single line‑icon set, **stroke‑only, 1.5–2 px**, with rounded caps. Every icon in the file is a custom SVG, exported individually into the Figma frames (e.g. `Search.svg`, `Vector.svg`, `path2846.svg` in the Header). There is **no icon font** and **no use of Unicode characters as icons**. | Icon | Where | Source in this system | | ------------- | ---------------------------------------------- | --------------------------------------- | | Search | Header utility rail | inline SVG in `ui_kits/web/Header.jsx` | | WhatsApp | Header utility rail (contact channel) | inline SVG | | User | Header utility rail (account) | inline SVG | | Log‑in | Header utility rail | inline SVG | | Shopping bag | Header utility rail + every "Купить" button | inline SVG | | Globe / Ru | Header utility rail (language) | "Ru" / "En" text in a `4 px` rounded chip | | Play | Audio cards, video stills | filled magenta circle with white triangle | | Arrow right | "Link" CTAs ("Об авторе ➜", "Слушать ➜") | inline SVG | | Chevron down | Menu items that open a dropdown | inline SVG | | Check | Bulleted lists (partners block) | filled magenta circle with white check | | Quote marks | Review cards (« and ») | typographic glyphs | | Musical note | The cursor‑press indicator, sidebar list bullets | inline SVG | We linked **Lucide Icons** (via CDN) inside the UI kit so any new icon needed for prototyping can be reached as ``. Lucide's stroke style (1.5 px rounded) matches the brand's existing icons closely. **Flag this substitution to the user** if pixel‑accuracy on a specific icon matters. **Logos and brand marks** - `assets/logo.svg` — full vertical lockup (violin mark + Keren Aliza + PROJECT + 3‑word tagline) - `assets/logo-mark.svg` — horizontal/compact lockup for headers - `assets/favicon.svg` — square 32×32 favicon (yellow violin on ink background) The logo combines a **front‑facing violin pictogram** with the "Keren Aliza" script wordmark and the tiny "PROJECT" cap below. **All three logo variants in this folder are SVG recreations** of the Figma logo (the original is built from 100+ vector paths with an embedded JPG fill) — flag if the user needs a pixel‑exact original export and we'll fetch the rendered PNG. **Photography assets copied from Figma** - `assets/img/album-cover.jpg` — sample album cover used in the Audio Albums grid - `assets/img/video-still.png` — Aliza on stage with the violin; doubles as the photo panel on `partners.html` - `assets/img/store-product.png` — sample music‑store product photo **Partner logos** - `assets/img/sponsors/kikar-hamusica.png` — trimmed Kikar HaMusica logo used in the partner/sponsor strips - `assets/img/sponsors/kikar-hamusica-full.png` — untrimmed source export of the same logo (was previously misfiled as `hero-portrait.png`; the repo has no homepage portrait asset) --- ## Caveats — please read 1. **Display font substitution.** The brand uses **Ermilov** (paid, by Sergey Ermilov) for the 110 px chapter headers. We substituted with **Manrope ExtraBold** — same geometric‑humanist DNA, slightly less heavy at the top. If you can supply the licensed `Ermilov-Bold.woff2` we'll swap it in. Add it under `fonts/` and update the `@import` at the top of `colors_and_type.css`. 2. **Script font substitution.** "Слушать и играть музыку души" is set in **Last Christmas PERSONAL USE** (not commercially licensable). We now substitute with **Sacramento** (Google Fonts, OFL) — a single‑weight elegant copperplate cursive that captures the wedding‑invitation feel of the original much closer than the earlier Caveat substitute. Flag if you have access to the licensed Last Christmas font and we'll swap it back. 3. **Logo SVG is a recreation.** The Figma logo is composed of ~100 small vector paths over an embedded JPG. Our SVG is a clean re‑draw with the same proportions and exact brand yellow. If you need the original raster for print, we can render the Figma node as a high‑res PNG on request. 4. **Mobile UI kit shipped.** Built from the `Home-Page-_-mob` Figma frame at 360 px and shown inside an iOS shell. See `ui_kits/mobile/README.md` for the per‑section deviations. 5. **Icon set linked via CDN.** Lucide icons are pulled from a CDN in the UI kit demo. For an offline / production build, copy the relevant SVGs into `assets/icons/` and reference locally. --- ## A clear, bold ask This is a **first complete pass**. We want to iterate. Concretely: > **Please review the cards in the Design System tab and tell us:** > 1. Are the substitute display and script fonts close enough, or should we wait for the licensed originals? > 2. Is the UI‑kit Home Page demo faithful enough to the Figma source, or are specific sections off? > 3. Do you want a mobile UI kit next, or deeper specimens of the existing components (more button states, more form patterns)? > 4. Anything missing from the visual foundations write‑up? > > **The fastest way to iterate is to leave inline comments on individual cards** in the Design System tab — we'll address them in the next round.