# Ilya Gamburg — Personal Design System A warm, human-centered design system for Ilya Gamburg's personal brand and prototyping work. Designed to feel **inviting, optimistic, and crafted** — equal parts product-design dashboard and friendly portfolio. > Sources: Two reference dashboard mockups uploaded by the user (`uploads/photo_2026-03-02_13-15-17.jpg`, `uploads/photo_2026-03-02_13-15-32.jpg`) — saved in `assets/reference-*.jpg`. The user requested the **Google Noto** font family. No codebase, Figma, or other design system was attached, so the visual language was distilled directly from the reference imagery and Ilya's stated preferences. ## What this is for A reusable design language for: - Personal portfolio site / case studies - Throwaway prototypes and mocks for client work - Decks, write-ups, and presentations - Demo / storytelling UI for product designs Ilya is exploring The system is **not tied to a single product** — it's a kit of foundations (color, type, spacing, motion) plus reusable UI components Ilya can drop into any new design. --- ## Brand essence - **Warm, optimistic neutrals.** Cream / butter / soft eggshell backgrounds. Never pure white. - **Sunny yellow as the single brand accent.** Used sparingly for emphasis, progress, and "the thing that matters most." - **Inky black for contrast cards.** When something needs gravity, it goes onto a deep near-black surface, not a colored one. - **Soft, generous shapes.** Pill buttons, big rounded cards (16–24px radii), oversized badges. - **Photography-forward.** Real human portraits anchor the system; UI surrounds the person, not the other way around. - **Живое движение.** Страница реагирует на скролл и курсор: перекрашивается по секциям, заголовки поднимаются из-под строки, карточки складываются стопкой, лента едет вбок. Движение плавное (expo-out), без пружинного дребезга. Подробно в разделе «Живой слой». --- ## Index of this system ``` Ilya Gamburg Design System/ ├── README.md ← you are here (foundations, content, visuals, iconography) ├── SKILL.md ← Agent Skill manifest ├── colors_and_type.css ← all CSS variables: palette, type scale, semantic tokens, print rules ├── fonts/ ← (empty, Noto loads from Google Fonts) ├── assets/ ← logo + reference imagery ├── preview/ ← cards rendered in the Design System tab ├── motion/ ← живой слой: ig-motion.css + ig-motion.js (без зависимостей) ├── components/Motion*/ ← карточка и правила для каждого эффекта ├── templates/ ← production-ready starters │ ├── motion-landing.html ← лендинг, где включены все эффекты живого слоя │ ├── deck.html ← slide deck (16:9, with speaker notes) │ ├── lesson.html ← course lesson (3-col, responsive) │ └── catalog.html ← A4 catalog (print-to-PDF) └── ui_kits/ └── personal_site/ ← dashboard-style personal site ``` The remaining sections of this file describe **Content Fundamentals**, **Visual Foundations**, and **Iconography**. --- ## CONTENT FUNDAMENTALS ### Voice First-person, casual, human. Ilya writes like a friend explaining what he's been working on — not like a corporation announcing a product. - **"I" not "we"** — this is a personal brand, never a royal we. - **"You" when addressing the reader** — "Here's what you'll see…", "Drop me a line." - **Sentence case everywhere.** Headings, buttons, labels — all sentence case. Never Title Case Like This. Never ALL CAPS. - **Short over long.** Aim for clauses, not paragraphs. Headlines are 2–7 words. - **Specific over generic.** "Designed the onboarding for 12k weekly users" beats "Worked on UX improvements." ### Tone Optimistic, curious, slightly playful. Confident without bragging. Never cynical, never edgy. | Use | Avoid | |---|---| | "Currently designing X" | "Crafting bespoke digital experiences" | | "Say hi" | "Get in touch today!" | | "Some things I made" | "Selected works portfolio" | | "Available for new projects" | "Now accepting client engagements" | ### Casing & punctuation - **Sentence case** for everything. - **No exclamation marks** unless genuinely warranted (max one per page). - **No em-dashes.** Use a comma, a colon, or a plain hyphen (-) for asides and pauses. - **Numbers as numerals** when scanning matters (`6.1h`, `78`, `2/8`), spelled out in prose. ### Emoji **Sparingly, never decoratively.** A waving hand 👋 next to "Hi, I'm Ilya" is fine. Lists of bullet emoji are not. If in doubt, leave it out. ### Vibe Imagine a designer's portfolio that doubles as a productivity dashboard — friendly, organized, a bit sunny. Examples of copy in this voice: > **Hi, I'm Ilya.** I design product interfaces — mostly dashboards, internal tools, and the occasional marketing site. > > **Currently** Designing onboarding at [Company]. Previously [Other Company]. > > **Say hi** ilya@example.com --- ## VISUAL FOUNDATIONS ### Color A short, opinionated palette built around three families: - **Cream / butter neutrals** for surfaces. The page background is always a warm off-white (`#F8F1E0` family). Cards are a slightly lighter cream (`#FBF5E6`). Pure white is reserved for highlights / glints inside black cards. - **Sunny yellow** (`#F5C84A`) is the single brand accent. Used for: progress fills, the "primary" data series in charts, the active pill in a filter, the "you are here" indicator. Never used as a background for long-form text. - **Inky black** (`#1A1A1A`) is the contrast surface. Used for "dark cards" — the calendar, session history, the active nav pill — to create gravity and rhythm. - **Muted greys** (`#9A958A` warm grey) for secondary text, dividers, dotted gridlines. Semantic states (success / warning / danger) are present but quiet — see `colors_and_type.css`. ### Type **Google Noto** family throughout — многоязычная по дизайну. Поддерживает Latin, Cyrillic, Hebrew в одном блоке: браузер автоматически подбирает правильный файл по юникод-диапазону. - **Noto Sans** + **Noto Sans Hebrew** — UI, body text, headlines. - **Noto Serif** + **Noto Serif Hebrew** — editorial и display (weight 700 для заголовков). - **Noto Sans Mono** — цифры, метаданные, code. Пишите `Hello Привет שלום` в одном элементе — каждое слово получит своё начертание. Для иврита ставьте `dir="rtl" lang="he"` — система отзеркалит вёрстку и подправит вертикальные метрики. Type scale: hero 56–96px (Noto Serif 700), body 16px / 1.55, mono numerals 18–80px для дашбордов. ### Spacing Built on a **4px base unit** with a soft, generous rhythm: - `space-1` 4px → `space-2` 8px → `space-3` 12px → `space-4` 16px → `space-6` 24px → `space-8` 32px → `space-12` 48px → `space-16` 64px → `space-24` 96px Cards have `24–32px` internal padding. Page gutters are `48–64px`. Cards within a grid sit on a `16–20px` gap. ### Backgrounds - **Cream solid** is the default page background. - **Subtle warm gradients** (cream → slightly-yellow-tinted cream, top to bottom) are used on hero / dashboard surfaces to create a "sunlit" feeling. - **No repeating patterns, no textures, no grain.** The warmth comes from the color, not from noise. - **Diagonal hatch fills** appear inside progress bars to indicate "remaining" / "incomplete" states — see the reference dashboard. - **Real photography** (portraits, product shots) is used full-bleed inside cards. Photos are colour-graded warm — never desaturated, never duotoned. ### Motion Движение в системе живёт на двух уровнях. **1. UI-микро (кнопки, пилюли, ховеры).** Дружелюбный мягкий перелёт, три примитива из `colors_and_type.css`: - **Soft-bounce**: появление бейджей и мелких элементов, `320ms cubic-bezier(0.34, 1.45, 0.5, 1)`. - **Gentle-out**: ховер, сдвиг пилюль, перестройка, `260ms cubic-bezier(0.22, 1.2, 0.36, 1)`. - **Press-pop**: отпускание кнопки, `180ms cubic-bezier(0.34, 1.7, 0.64, 1)`, возврат из `scale(0.98)`. **2. Живой слой (скролл и курсор).** Длинные плавные движения без перелёта: `--ig-ease` (expo-out) 900–1400 мс для всего, что въезжает, `--ig-ease-io` для шторок, меню и смены темы. Подключение и правила в разделе «Живой слой» ниже. Чего по-прежнему нет: резиновой пружины, тряски, бесконечных зацикленных анимаций в контенте (кроме бегущей строки, пульса статуса и подсказки «листайте»). ### Живой слой Подключи после базовых стилей: ```html ``` Дальше всё делается атрибутами, JS писать не нужно. Без JS страница показывает весь контент статично. При `prefers-reduced-motion` сдвиги, параллакс, курсор и кинетика выключаются, остаются только смены цвета. | Эффект | Атрибут | Карточка | |---|---|---| | Смена цветовой гаммы по секциям | `data-section-theme="cream\|paper\|butter\|sun\|ink"` | `MotionThemes` | | Подсветка пунктов навигации | `data-spy` на контейнере ссылок | `MotionThemes` | | Заголовки поднимаются по словам | `data-reveal="words"` | `MotionReveal` | | Буквы поднимаются по одной | `data-reveal="chars"` | `MotionReveal` | | Всплытие блока, лейбл сбоку, шторка картинки, список по очереди | `data-reveal="up\|left\|clip\|stagger\|zoom"` | `MotionReveal` | | Жёлтый маркер под словом | `` внутри reveal | `MotionReveal` | | Слова манифеста загораются при скролле | `data-highlight` | `MotionHighlight` | | Стопка карточек, уходящих в глубину | `data-stack` + `.ig-stack-card` | `MotionStack` | | Горизонтальный скролл при вертикальном | `data-hscroll` + `data-hscroll-track` | `MotionHScroll` | | Бегущая строка от скорости скролла | `data-marquee="-1"` | `MotionMarquee` | | Картинка «отъезжает», слои параллакса | `data-zoom="1.18"`, `data-parallax="0.15"` | `MotionParallax` | | Досчитывающиеся цифры | `data-count="640"` | `MotionCounter` | | Свой курсор с подписью | `data-ig-cursor` на ``, `data-cursor="Читать"` | `MotionPointer` | | Наклон карточки + тёплое пятно | `data-tilt` + `.ig-tilt-body` | `MotionPointer` | | Магнитная кнопка, scramble, волна букв | `data-magnetic`, `data-scramble`, `data-wave` | `MotionPointer` | | Начертание букв за курсором | `data-kinetic` | `MotionKinetic` | | Карусель цитат со словами | `data-carousel` | `MotionCarousel` | | Шторка смены языка, меню, тост, лоадер | `data-curtain`, `data-menu-toggle`, `IGMotion.toast()` | `MotionCurtain` | | Хаос точек собирается в порядок | `` | `MotionChaos` | | Полоса прогресса чтения | `
` | `templates/motion-landing.html` | **Сценарий страницы по умолчанию** (как в `templates/motion-landing.html`): 1. Hero на `cream`: kinetic-имя, лид `words` с одним ``, пульс статуса, подсказка «листайте». 2. «Обо мне» на `paper`: манифест `data-highlight`, картинка `clip` + `data-zoom`, цифры `data-count` в `stagger`. 3. «Сейчас» на `butter`: bento из карточек `data-tilt`, одна карточка с `data-chaos`. 4. «Главное» на `cream`: `data-stack` из 3–6 карточек, чередуй cream, butter, ink, yellow. 5. «Путь» на `paper`: `data-hscroll` с годами. 6. Разделитель: две строки `data-marquee`. 7. Цитаты на `butter`: `data-carousel`. 8. Контакт на `sun`: CTA `data-reveal="chars" data-wave`, магнитная кнопка `data-copy`. **Дозировка.** На одном экране не больше двух эффектов, привязанных к скроллу. `data-highlight`, `data-kinetic`, `data-hscroll`, `data-stack` по одному разу на страницу. Reveal только на заголовках, лидах, карточках и картинках, никогда на каждом абзаце статьи. Для страниц-документов (уроки, каталоги, статьи) достаточно `words` на заголовках и смены тем. **Цвет внутри секций.** Пиши `var(--ig-bg)`, `var(--ig-fg)`, `var(--ig-muted)`, `var(--ig-line)`, `var(--ig-card)` вместо hex, тогда блоки перекрашиваются вместе со страницей. **RTL и языки.** В `dir="rtl"` горизонтальная лента, прогресс и маркер идут справа налево сами. Разбитый на буквы текст получает `dir` по своему алфавиту, поэтому русское имя на иврите не переворачивается. После смены языка через `ig:curtain` вызывай `IGMotion.refresh()`. **Инерционный скролл колесом** (как у roman-fedoseev.com) есть, но выключен: включается только ``. На трекпадах Mac он ощущается как задержка и ломает привычный скролл, поэтому для книг и курсов не используй. **Мобильные.** Горизонтальный скролл ниже 900 px становится вертикальным списком, курсор, наклон, магнит и kinetic на тач-экранах не включаются, остальное работает. **Встраивание в превью и модалки.** Любой элемент с `data-ig-scroller` (и `overflow: auto`) становится своим «окном»: темы, reveal, стопка и лента считаются от его прокрутки. Так сделаны карточки `components/Motion*`. ### Hover states - **Buttons / pills:** background darkens by ~6% (cream pills go to a slightly deeper cream; black pills lift to `#2A2A2A`). - **Cards:** subtle 4% lift in the shadow, no scale change. - **Links:** underline appears on hover (no underline at rest), color stays the same. - **Icons:** opacity goes from 70% → 100%. ### Press / active states - **Buttons:** scale `0.98` for 80ms on press, then release. - **Pills with state:** background goes one shade darker than hover, no scale. - **No color flashes, no ripples.** ### Borders - **1px hairlines** in `var(--line)` (a warm low-contrast grey) for dividers inside cards. - **No borders on cards themselves** — separation comes from background contrast and shadow. - **Dotted 1px lines** for calendar/timeline grids — distinctive part of the look. ### Shadows A two-tier system: - **`shadow-soft`** — `0 1px 2px rgba(40,30,10,0.04), 0 8px 24px rgba(40,30,10,0.06)` — for cream cards on a cream page. - **`shadow-card`** — `0 2px 4px rgba(0,0,0,0.06), 0 16px 40px rgba(40,30,10,0.10)` — for elevated / hovered cards. - **No inner shadows.** No glows. ### Protection / overlays When text sits over a photograph, use a **bottom-up gradient scrim** (`linear-gradient(to top, rgba(0,0,0,0.55), transparent 60%)`), never a solid capsule. Text on photos is always white. ### Layout - **12-column grid** at desktop, 16/20/24px gutters depending on density. - **Max content width 1280px** for marketing surfaces; dashboards run edge-to-edge with 32px gutters. - **Sticky top nav** is a floating pill, centered horizontally, sitting 16px below the top edge. It is not a full-width bar. - **Cards align to a baseline grid** so that headings across cards sit at the same Y. ### Transparency & blur Used **rarely and intentionally**: - The floating nav pill uses `backdrop-filter: blur(12px)` over `rgba(255,250,235,0.7)` so the cream tint shows through. - Modal scrims use `rgba(20,18,12,0.45)` — no blur on the scrim. - Otherwise, surfaces are solid. ### Imagery - **Warm-graded portraits** — golden-hour lighting, slight cream cast, never cool. - **Real people, smiling, looking at camera or just off it.** No stock-photo "team in a meeting" tropes. - **Cropped tight** — head and shoulders, filling the card. - **No black & white.** No heavy filters. No grain. ### Corner radii | Token | Value | Use | |---|---|---| | `radius-sm` | 8px | Inputs, small chips | | `radius-md` | 12px | Buttons, badges | | `radius-lg` | 20px | Cards, panels | | `radius-xl` | 28px | Hero cards, dashboard frames | | `radius-pill` | 999px | Pills, tab bars, segmented controls | The dashboard frame itself uses `radius-xl` (28px). Most cards are `radius-lg` (20px). Buttons are pills. ### Cards The defining element of this system. A card is: - **Cream `#FBF5E6` or inky-black `#1A1A1A`** — never a tinted pastel. - **20px corner radius**, `shadow-soft` at rest. - **24–32px internal padding.** - **No border.** - Content inside follows a strict hierarchy: small label (12px, muted) → big number/headline → supporting visual. --- ## ICONOGRAPHY This system uses **Lucide** as its icon library — a clean, 1.5px-stroke, geometric set that matches the system's calm, friendly tone. Lucide icons are: - Loaded from CDN at runtime (`https://unpkg.com/lucide@latest`). - Rendered at **18px** inline with text and **20–24px** in standalone UI affordances (nav, buttons). - Always `currentColor` so they inherit foreground tokens. > **Substitution flag:** No icon set was provided in the source materials. Lucide is used as the closest match to the thin, geometric line-icons visible in the reference dashboards (calendar, monitor, link, chat icons). If Ilya has a preferred set, swap by changing the `