Студія бренду

Студія бренду (Brand Studio) за адресою #/start - це єдине місце, де ви формуєте свій бренд: логотипи, кольори, шрифти, решту токенів і файли, які він зберігає. Налаштуйте це тут один раз, і кожен інструмент, сторінка й експорт слідуватимуть цьому за побудовою, а не за перевіркою.

Зміни попередньо переглядаються наживо в усьому застосунку, тож ви бачите, як колір чи шрифт лягають повсюди ще до того, як зафіксуєте їх. Усе це відбувається на пристрої: файли й токени вашого бренду ніколи не залишають ваш комп'ютер (вибір шрифту Google Font одноразово завантажує саме цю гарнітуру з Google після діалогу згоди), і бренд подорожує у вигляді одного файлу пакета бренду.

Це - редактор. Дашборд - лише дзеркало. Вкладка Design system (Дизайн-система) на Дашборді (#/d) показує ваш бренд лише для читання; редагуєте ви його тут, за адресою #/start. Якщо захочете згодом змінити колір, повертайтеся до Студії бренду.

Кімнати

Студія - це набір кімнат, перелічених на бічній панелі - не кроків. Нічого не пронумеровано, ніщо не залежить від чогось іншого, і потрапити в будь-яку з них цілком правомірно:

• Огляд - центр. Те, що існує зараз, одним поглядом, з дверима до кожної кімнати.
• Кольори - додавайте кольори по одному, призначайте ролі або генеруйте цілу палітру з одного.
• Шрифти - чотири гарнітури, які використовують застосунок, ваші інструменти й кожен експорт.
• Логотипи - ваші знаки в кожній орієнтації та обробці.
• Токени - радіус кутів, відступи, тіні та решта системи.
• Файли - зображення, аудіо- та відеофайли, які зберігає ваш бренд.

На телефоні той самий список перетворюється на горизонтальну смугу чіпів, закріплену під заголовком. Перемикання кімнати ніколи нічого не перезавантажує - редактор тримає всі панелі змонтованими й просто показує ту, яку ви запросили.

Пряме посилання на кімнату через #/start?area=<key>. Ключі: overview, color (зверніть увагу на американське написання в URL), type, logos, tokens, catalogue (кімната Files - ключ панелі є постійним контрактом, тож URL зберігає стару назву) та versions. ?tab= - це давній псевдонім того самого й досі працює, тож старі посилання й закладки продовжують функціонувати; усе нерозпізнане відкриває Overview, а не завершується глухим кутом.

У нижній частині панелі закріплені дії, що стосуються всієї дизайн-системи, а не однієї кімнати:

• Додати з… - вибір джерела для перенесення бренду з файлу, PDF, зображення, шрифту чи вебсайту. Див. Перенесення бренду нижче.
• Tray - кандидати, які знайшло сканування, але ще не зафіксувало. Він лишається прихованим, доки сканування справді щось не збереже, і тоді показує лічильник; нічого в ньому не змінює ваш бренд, доки ви не натиснете Add у відповідному рядку.
• Експорт - записує всю дизайн-систему як один файл LollyBrand-….lolly.
• Tokens (.json) - самостійний документ звичайних токенів дизайну для репозиторію, кроку збирання чи іншого інструмента токенів.
• Відновити налаштування бренду - повернення до контрольної точки, збереженої перед імпортом або заміною налаштувань бренду.
• Версії - публікуйте, активуйте й відновлюйте іменовані копії дизайн-системи. Приховано, доки немає чого публікувати власного (або поки посилання ?area=versions не запросить її за назвою).

signed by Lolly2026-10-21vector SVG18 paths~1.2k nodes40 groups20 KBПеревірте саміОтримати підписаний файл signed by Lolly2026-10-21vector SVG18 paths~1.2k nodes40 groups20 KBПеревірте саміОтримати підписаний файлTry it in the app

Overview (Огляд)

Огляд - це перша кімната, і вона має два обличчя.

Коли ще нічого не обрано, вона каже Зробіть це своїм. Почати з референсу відкриває вибір джерела для логотипа, знімка екрана, вебсторінки чи файлу дизайну. Обрати колір, Виберіть накреслення і Додати логотип відкривають свої наявні елементи керування напряму. Кожен шлях починається з вибору; відкриття жодного з них нічого не записує. Дослідити інструменти доступне одразу.

Щойно щось стає вашим власним, та сама кімната показує що у вас є, з лічильниками, які ви створили, на першому місці. Кольори показують кількість кольорів, які несе дизайн-система, і додають приглушене · N starter лише там, де є успадковані кольори на показ; смуга поряд спершу ставить кольори, які ви обрали самі, потім тонку лінію і потьмянілі стартові. Шрифти показують за роллю (Inter для заголовків, із Стартовий для решти · SUSE, SUSE Mono під ним). Логотипи показують, скільки слотів заповнено, або Не задано. Токени несуть радіус кутів, позначений як стартовий, доки ви його не змінили. Файли кажуть Поки нічого, доки бібліотека порожня. Кожен блок - це двері до своєї кімнати. Тут є лічильники, але ніколи немає індикатора прогресу й ніколи немає картки завершення - у цій студії нікому нічого не винні.

Logos (Логотипи)

Почніть із того, щоб висипати всю папку зі знаками у зону перетягування вгорі: "Drop marks here, or choose several at once" ("Перетягніть знаки сюди або виберіть кілька одразу") приймає стільки файлів, скільки у вас є, за один раз. Кожен файл зчитується за формою та фарбою, а тоді ставиться в чергу під Waiting for a slot (Очікує слот) як чіп, що повідомляє свою здогадку - "Схоже на Horizontal primary", з вимірюванням, на якому вона ґрунтується, і кнопкою Place (Розмістити) (Replace (Замінити), якщо слот уже заповнено). Коли впевненості немає, чіп прямо про це каже і натомість пропонує Change slot (Змінити слот), який перелічує всі вісім. Нічого не розміщується, доки ви щось не натиснете.

Навколо цієї черги відбуваються дві речі. Знак із зайвими порожніми полями спершу отримує пропозицію обрізки - дайте відповідь або натисніть Escape, і оригінальний файл увійде без змін. А там, де знак може заповнити порожній сусідній слот, кімната пропонує похідну версію mono чи reverse як окремий чіп, позначений Generated (Згенеровано), який знову зникає, якщо ви заповните той слот іншим способом.

Під цим розташована сітка, у якій опиняється кожен знак - слоти орієнтація × обробка:

• Orientations (Орієнтації): Horizontal (словесний знак + символ у рядок) і Vertical (складено, для квадратних і високих просторів).
• Treatments (Обробки): Primary, Primary reverse (для темних фонів), Mono (один колір) і Mono reverse.

Це вісім опційних слотів. Клацніть слот, щоб додати PNG, SVG, JPEG або WebP; клацніть заповнений слот, щоб замінити його. Кожен слот опційний, і все залишається на цьому пристрої.

signed by Lolly2026-10-23vector SVG32 paths~12k nodes69 groups123 KBПеревірте саміОтримати підписаний файл signed by Lolly2026-10-23vector SVG32 paths~12k nodes69 groups123 KBПеревірте саміОтримати підписаний файл

• Власні позначки - додайте знаки, які ваш бренд називає по-своєму (іконку, герб, фавікон) у розділі Власні позначки; назвіть і виберіть файл.
• Інші ідентичності - субренд, продукт чи подія можуть мати власний повний набір логотипів. Скористайтеся + Додати ще один логотип і назвіть його; ваш основний набір - просто «Your logo».
• Завантажте SVG, і Lolly зчитає його кольори. На абсолютно новій інсталяції він тихо встановлює ваш основний колір із логотипа й повідомляє про це. На наявному бренді натомість він пропонує колір як підказку - «Знайдено в логотипі: #…» з кнопкою Використати як основний поруч - у кімнаті Кольори, де ви можете прийняти або відхилити її.

Colours (Кольори)

Кімната росте разом із дизайн-системою. На сторінці немає нічого, що вам ще не було потрібно, тож перший візит - це одне рішення, а решта приходить разом із палітрою.

Перший колір

Дизайн-система без власних кольорів відкривається на одній центрованій колонці: Почніть з одного кольору - великий живий чіп, поле і тихий рядок, що каже, що ролі, відтінки й налаштування друку прийдуть із розвитком системи.

• Чіп - це і є засіб вибору кольору. Натисніть на нього, і власна картка OKLCH студії відкриється просто на чіпі, заповнена тим, що вже тримає поле: назва, колесо, чотири диски, альфа і Збережено як, зі Скасувати й Додати колір унизу. Перетягування диска фарбує чіп і переписує поле на льоту, і нічого не потрапляє в дизайн-систему, доки ви не натиснете Додати колір.
• Поле приймає будь-яку нотацію - #e0452b, rgb(224 69 43), oklch(58% .19 32) або звичайну назву кольору - і цілий список кольорів перетворюється на ряд чіпів, які ви додаєте по одному.
• Поряд є ще двоє дверей. Піпетка (у браузері, де вона є) бере колір прямо з екрана, а З зображення зчитує знімок екрана чи фото на цьому пристрої й пропонує знайдені кольори.
• Додати ніколи не вимкнено. Коли в полі немає нічого придатного для читання, воно відкриває засіб вибору - саме це зазвичай і означає натискання порожнього поля; текст, який не вдається розпізнати, отримує рядок під полем, що повідомляє про це, а не мертву кнопку.

Перший колір стає основним, і чіп, який відповідає на додавання, повідомляє про це - «Тепер основний - Vivid Violet» - із Точне налаштування поруч.

signed by Lolly2026-10-21vector SVG167 paths~11k nodes243 groups1 image191 KBПеревірте саміОтримати підписаний файл signed by Lolly2026-10-21vector SVG167 paths~11k nodes243 groups1 image191 KBПеревірте саміОтримати підписаний файл

Стартовий

Стартовий - це слово для всього, що прийшло разом із застосунком, а не було обрано. Нова інсталяція взагалі не несе жодного кольору: у неї є лише одна нейтральна градація, чорнило крізь папір, тож поверхні, текст і тонкі лінії рендеряться ще до того, як хтось щось вирішив. Ці нейтральні кольори - це риштування, тож вони не рахуються як кольори і не малюються на панелі палітри. Вони живуть у кімнаті Токени як Нейтральні · стартові · 9, з Відкрити, яке показує їх на панелі Кольори як одну згорнуту, позначену групу (#/start?area=color&group=neutral).

Те саме слово проходить через кожну кімнату: роль, що спирається на стартовий колір, читається як «Стартовий Paper заміняє», а її засіб вибору пропонує Виберіть…; стартове накреслення носить мітку Стартовий і без відтінку; стартовий радіус кутів позначений на Огляді. Успадкований матеріал ніколи не малюється пунктирною рамкою, бо пунктирна рамка тут означає ціль для перетягування.

У міру зростання палітри

Ваші кольори лишаються поряд із попереднім переглядом In context на широкому екрані й складаються над ним на менших екранах. Попередній перегляд може показувати постер, діаграму чи картку інтерфейсу з використанням вашої палітри. Стартові кольори лишаються у своїй окремій згортній групі, окремо від кольорів, які додаєте ви.

Додавайте окремі кольори або набір відтінків, призначайте їм ролі й відкривайте розширені секції, коли вони потрібні. Кольорова діаграма, градієнти та елементи керування завантаженням лишаються разом із палітрою.

signed by Lolly2026-10-21vector SVG171 paths~12k nodes245 groups1 image198 KBПеревірте саміОтримати підписаний файл signed by Lolly2026-10-21vector SVG171 paths~12k nodes245 groups1 image198 KBПеревірте саміОтримати підписаний файл

Ролі - що читають інструменти

Ролі - це шар над зразками: який колір відіграє яку роль у кожному інструменті й експорті. Ролі опційні (дизайн-система з трьох окремих кольорів і без жодної ролі цілком годиться), будь-який зразок може отримати роль, а показник контрасту вимірюється відносно поверхні, спершу за APCA.

Рядок читається в одному з трьох регістрів, тож смуга ніколи не стверджує рішення, якого ніхто не приймав:

• власний колір, що виконує роль, на повну силу;
• *Стартовий Paper заміняє - приглушено, з Виберіть…* на своєму засобі вибору;
• ↳ успадковує Основний - роль розв'язується через основний колір, а не через власний.

Щойно в палітрі з'являються відтінки, смуга розростається до всіх семи слотів, які може прочитати інструмент: Основний, Додатковий, Поверхня, Текст, Приглушений, Край і На основному. На основному виводиться з основного кольору, читається як Похідний і не має власного засобу вибору.

Власний акцент застосунку - це налаштування, а не токен. Типово інтерфейс успадковує дизайн-систему, і акцент хрому бере основний колір. Це налаштування Вигляду на вашому профілі - Інтерфейс успадковує дизайн-систему - і вимкнення його лишає хром нейтральним. Інструменти, полотна та експорти не залежать від цього в жодному разі, а шрифти й радіус кутів успадковують дизайн-систему незалежно від того, увімкнено налаштування чи ні.

Розширені секції

Чотири згорнуті секції розташовані під попереднім переглядом композиції та кольоровими ролями. Відкрийте потрібну; кожна має пряме посилання як #/start?area=color&focus=<wing>, яке відкриває її незалежно від того, що зараз показує кімната:

• Explore shades & harmonies (focus=generate) - один колір перетворюється на повний набір відтінків. Описано нижче.
• Криві відтінків (focus=curves) - переформовуйте градацію точка за точкою. Світлість, насиченість і відтінок кольору мають власну криву кожен, перемикаються через L / C / H, а відтінки нижче перезбираються наживо, поки ви перетягуєте.
• Контраст (focus=contrast) - Фіксація контрасту перетонує градацію, щоб досягти цілей APCA відносно обраного вами фону, кожен крок зберігає власний відтінок і насиченість; Обернути відтінок повертає всю градацію суцільно по колу, кожен відтінок зберігає світлість і насиченість.
• Друк (focus=print) - чим стає основний колір у друку: його автоматичне значення для екрана, зафіксована збірка CMYK або натомість іменована плашкова фарба.

Один колір - ціла палітра

Усередині Explore shades & harmonies оберіть Starting colour. Lolly пропонує відповідні відтінки, використовуючи ту саму перцептивну кольорову математику (OKLCH), яку рушій застосовує повсюди. Налаштуйте пропозиції:

• Схема - Mono, Complement, Analogous або Triad - визначає, як додатковий колір співвідноситься з основним.
• Відтінки - повзунок від 3 до 20 (типово 5) керує кількістю кроків, які генерує кожна градація.
• Точне налаштування (згорнуто) - Інтенсивність інтерфейсу (Muted / Deep), Контраст (Comfort / High) і Текст на бренді (Auto / Light / Dark).

Зміна початкового кольору й елементів керування змінює лише пропозиції. Клацніть відтінок, щоб додати цей колір, або Add 5 shades, щоб додати групу (кількість слідує вашому налаштуванню Відтінки). Наявні кольори й ролі лишаються на місці. Скасувати прибирає додавання.

Рядки Основний, Нейтральний і Додатковий показують запропоновані відтінки. Відкрийте Theme preview, щоб оглянути світлі й темні приклади та їхні показники контрасту. Оберіть там крок Нейтрального чи Додаткового, щоб скоригувати запропоновані опорні точки теми. Перебудова всієї палітри лишається окремою, перевіреною дією нижче.

signed by Lolly2026-10-21vector SVG22 paths~1.9k nodes49 groups27 KBПеревірте саміОтримати підписаний файл signed by Lolly2026-10-21vector SVG22 paths~1.9k nodes49 groups27 KBПеревірте саміОтримати підписаний файл

Створіть свою палітру (генератор гармоній)

У Find matching colours генератор гармоній пропонує акцентні кольори, що пасують до основного. Оберіть Гармонію - Комплементарна, Суміжна, Тріада, Тетрада або Аналогова (яка має власну кількість Акцентів, від 2 до 5, і Кут відтінку від 10° до 45°) - і кожен варіант надходить із автоматично згенерованою зрозумілою назвою та кнопкою + Додати. Додавання одразу вносить цей колір до палітри, одне натискання - один токен. In context показує ваші додані кольори на зразкових композиціях.

signed by Lolly2026-10-21vector SVG8 paths936 nodes14 groups15 KBПеревірте саміОтримати підписаний файл signed by Lolly2026-10-21vector SVG8 paths936 nodes14 groups15 KBПеревірте саміОтримати підписаний файл

Застосування згенерованої палітри

Додавання запропонованого кольору чи групи відтінків зберігає решту вашої палітри. Для повної заміни відкрийте Rebuild the whole palette… і натисніть Preview full rebuild. Огляд пояснює зміни: скільки ролей залишаться такими, як ви їх призначили, скільки доданих вами самими кольорів буде збережено, скільки кривих відтінків буде переприв'язано, скільки друкарських блокувань буде переприкріплено, скільки прихованих відтінків залишаться прихованими, скільки опорних точок градієнта збережуть свій колір.

Apply rebuilt palette на цій картці застосовує зміни; Скасувати виходить, нічого не змінюючи. Щойно це виконано, картка пропонує кнопку Скасувати, на яку одразу переведено фокус - а контрольну точку всієї дизайн-системи створюють до заміни, тож «повернути як було» - це відновлення, а не втрачений вечір.

Палітра, діаграма та кожен зразок

Палітра перелічує кольори дизайн-системи у згортних групах, кожна з власним елементом + Додати. Створюйте й перейменовуйте групи, щоб упорядкувати роботу. Роль ніколи не створює другу плитку: один токен - одна плитка, а плитка, на яку вказує роль, натомість носить невелику позначку в кутку (P, S, Su, T). Під плитками Кольорова діаграма розгортається у два перегляди тих самих зразків: Коло (колесо OKLCH - перетягніть точку, щоб перефарбувати її, натисніть точку, щоб редагувати, або натисніть порожнє місце, щоб додати новий зразок) і діаграма Гамут, яка показує, де насправді закінчується діапазон кольорів, що відображаються. #/start?area=color&focus=chart відкриває картку напряму, як і завжди робить ?wheel.

signed by Lolly2026-10-21vector SVG113 paths~9.3k nodes231 groups1 image133 KBПеревірте саміОтримати підписаний файл signed by Lolly2026-10-21vector SVG113 paths~9.3k nodes231 groups1 image133 KBПеревірте саміОтримати підписаний файл

signed by Lolly2026-10-21vector SVG529 paths~4.9k nodes161 groups149 KBПеревірте саміОтримати підписаний файл signed by Lolly2026-10-21vector SVG529 paths~5.4k nodes165 groups174 KBПеревірте саміОтримати підписаний файл

Натисніть будь-який зразок, щоб відкрити його редактор:

• Rename його.
• Set the colour - селектор відкривається на перцептивних повзунках OKLCH з режимами Hex, HSL, RGB і CMYK; поле значення зчитує й записує в тому просторі, який активний, тож можна вставити hex або ввести відсотки фарби. Зверніть увагу, що введення CMYK встановлює екранний колір через конвертацію - щоб зафіксувати точні фарби, скористайтеся блокуванням друку нижче.
• Stored as - оберіть, як зразок зберігається: LCH (типово - перцептивний, широкий гамут, найкращий вибір для редагування), Hex, RGB або HSL. Перевизначте це, коли потрібно зафіксувати точний застарілий hex або відповідати значенню sRGB.
• Use as - призначте цьому зразку одну з ролей бренду напряму, без повернення до панелі Roles. (Плитка самої ролі цього не пропонує - роль не може взяти роль.)
• Print substitutes (згорнуто) - зафіксуйте поведінку кольору при друці:
• CMYK - перемкніть із Auto на Locked, щоб перевизначити автоматичну конвертацію sRGB→CMYK точними значеннями фарби (C/M/Y/K, 0–100).
• Spot colour - перемкніть із None на Set, щоб зафіксувати зразок як плашковий колір; вкажіть Name (наприклад, PANTONE 186 C), необов'язковий Book і необов'язковий Finish (звичайна фарба за замовчуванням) для випадків, коли фарба - це взагалі не фарба: фольга, тиснення опукле чи угнуте, вибіркове лакування, soft touch або висічка, біговка чи перфорація.
• In other spaces (згорнуто) - та сама ідея, ширше: кожен рядок - це простір, у якому може бути виражений цей зразок, або похідний від канонічного значення, або заданий вами, і заданий вами має пріоритет при експорті.

Ці блокування друку використовуються друкарнею, коли ви експортуєте CMYK PDF або TIFF - див. Експорт.

Видалення зразка відбувається безпечно: похідні кроки рампи та ролі теми приховуються (базовий токен продовжує розв'язуватися, тож нижче за потоком нічого не ламається), тоді як кольори, додані вами самостійно, видаляються повністю.

Робота з багатьма зразками

Кожен зразок має окрему ручку перетягування. Перетягніть її, щоб змінити порядок кольорів у межах групи, або наведіть фокус, натисніть Пробіл, скористайтеся стрілками і натисніть Пробіл знову, щоб відпустити. Escape скасовує. Порядок зберігається після повторного відкриття студії, і його можна скасувати. Щоб перемістити кольори між групами, скористайтеся елементом Група редактора зразків або виберіть кілька кольорів і скористайтеся Перемістити. Назви токенів і посилання на ролі лишаються незмінними.

Виділення на панелі палітри - це жест, а не режим. Немає кнопки, яку треба натиснути спершу, і панель з'являється з першою вибраною плиткою і зникає з останньою.

• Перетягніть по порожньому місцю панелі, щоб намалювати прямокутник: кожна плитка, якої він торкається, приєднується до виділення, незалежно від меж груп. Згорнута секція не додає нічого, а перетягування, що ніколи не рухається, знімає виділення.
• Shift-клац бере діапазон у порядку читання; Cmd/Ctrl-клац перемикає одну плитку; звичайний клац усе одно відкриває редактор цієї плитки.
• Кожен заголовок групи несе Вибрати всі, а Cmd-A з фокусом на плитці бере кожен колір, який належить дизайн-системі - і ніколи стартовий.
• Сітка має одну точку табуляції. Стрілки переміщують по ній, Shift-стрілки розширюють виділення, Пробіл перемикає плитку, Delete прибирає виділення, а Escape знімає його. (Стрілки лише переміщують фокус: щоб підкоригувати канал, спершу натисніть l, c або h, як каже показник.)
• На сенсорному екрані прямокутника немає. Натисніть і утримуйте плитку, щоб почати виділення, а тоді торкайтеся, щоб додавати; Вибрати всі для кожної групи бере решту.

Сама панель показує {n} вибрано, потім Перемістити до (наявну групу або нову, яку ви назвете прямо в меню), Призначити роль (кожен вибраний колір по черзі бере наступну роль, тож чотири плитки заповнюють усі чотири ролі одним натисканням), Завантажити (виділення в будь-якому з шести форматів палітри), Копіювати значення (по одному рядку на колір у його збереженій нотації) і Видалити. Перемістити до і Призначити роль з'являються, щойно в палітрі є відтінки, якими можна оперувати. Одне Ctrl/Cmd-Z скасовує цілу масову дію - переміщення сорока, обхід ролей, видалення - і видалення повідомляє, що воно зберегло, бо виділення сягає плиток, яких ця кімната не видаляє.

Градієнти

Необов'язкова панель Градієнти будує токени змішування кольорів для фонів та акцентів на основі вашої палітри. Повністю пропустіть це, якщо дизайн-система не використовує градієнти. Кожен градієнт має попередній перегляд, іменовані опорні точки (2-8) і кут. Ключова поведінка: опорна точка посилається на зразок, тож перефарбуйте цей зразок - і градієнт зміниться слідом. Інтерполяція виконується в OKLCH для чистих переходів. Видаліть опорну точку, щоб скоротити перехід.

Перенесіть палітру в інше місце

Плаваюча таблетка, закріплена внизу панелі палітри, завантажує всю палітру як Токени дизайну (JSON), Змінні CSS, Класи CSS, Змінні SCSS, GIMP palette (.gpl) або Adobe Swatch Exchange (.ase) - тож дизайн-система одразу підходить для Illustrator, Figma, GIMP або таблиці стилів. Вона розташована поза прокруткою панелі, тож залишається на місці, як би далеко ви не прокрутили палітру, і з'являється, щойно в палітрі є відтінки. (Палітру також можна завантажити з Ресурсів.)

Шрифти

Ця кімната росте так само. Без власного накреслення це одна картка й одне рішення: Основний, набраний розміром для читання накресленням, яке обслуговує його сьогодні, мітка Стартовий біля назви, заповнена Виберіть накреслення і рядок «Нічого не встановлюється, доки ви не оберете одне». Під карткою розташований рядок «Заголовки, код і курсив успадковують основний, доки ви їх не оберете», з Обрати окремо, яке розкриває інші три картки на решту візиту.

signed by Lolly2026-10-21vector SVG87 paths~9.9k nodes91 groups151 KBПеревірте саміОтримати підписаний файл signed by Lolly2026-10-21vector SVG87 paths~9.9k nodes91 groups151 KBПеревірте саміОтримати підписаний файл

Оберіть одне накреслення - і кімната розгортається в чотири рольові картки, список Fonts і живий зразок. Чотири накреслення - це ті, які насправді читають застосунок, інструменти й кожен експорт:

• Primary - основний текст, кнопки та кожен інструмент.
• Headings - гарнітура для заголовків h1/h2.
• Code - моноширинна гарнітура для коду та даних.
• Italic - справжній курсивний компаньйон для виділення, цитат і приміток.

Заголовки, код і курсив кожен окремо відкочуються до основного, доки ви їх не призначите, тож дизайн-системі з одним накресленням тут узагалі не потрібно жодних рішень.

Відтінок означає, що ви це обрали. Картка тонована лише там, де ви встановили це накреслення. Стартове накреслення носить ту саму мітку Стартовий, яку носять успадковані групи палітри, у приглушеному регістрі й без відтінку, а роль, яку ніхто не обирав, читається як ↳ успадковує Основний, а не повторює назву основного, ніби її було обрано. Кнопка каже Змінити на власному накресленні й Виберіть накреслення усюди інде. Ніщо на картці нічого не фіксує: кнопка відкриває сцену порівняння, обмежену цією роллю.

signed by Lolly2026-10-21vector SVG21 paths~6.1k nodes31 groups73 KBПеревірте саміОтримати підписаний файл signed by Lolly2026-10-21vector SVG21 paths~6.1k nodes31 groups73 KBПеревірте саміОтримати підписаний файл

Сцена порівняння

signed by Lolly2026-10-21vector SVG102 paths~12k nodes117 groups177 KBПеревірте саміОтримати підписаний файл signed by Lolly2026-10-21vector SVG102 paths~12k nodes117 groups177 KBПеревірте саміОтримати підписаний файл

Сцена відкривається прямо в кімнаті, а не в діалоговому вікні, і прямо під карткою, яку ви натиснули. Поки вона відкрита, картки згортаються в однорядкову смугу з роллю та накресленням, тож сцена лишається на першому екрані навіть на телефоні. Escape скасовує дію і повертає клавіатуру картці, з якої ви її відкрили.

Вибір накреслення - це три натискання:

1. Виберіть накреслення на картці.
2. Введіть назву сімейства й натисніть Попередній перегляд - або натисніть одне з шести Закріплено сімейств під полем, одне натискання на кожне. Картка з'являється вже в стані завантаження, зі скелетною смугою там, де буде зразок, замість того щоб накреслення інтерфейсу заміняло накреслення, якого ви ще не бачили.
3. Використати це накреслення.

Згоду запитують один раз, саме на те натискання, яке ви зробили. Коли перегляд уперше сягає Google Fonts, діалог повідомляє, що станеться: Google дізнається назву сімейства та вашу IP-адресу. Далі файл зберігається на цьому пристрої й використовується офлайн. Це єдиний крок у студії, який сягає третьої сторони. Завантажити з Google продовжує і запам'ятовується. Скасувати лишає картку з написом «Не завантажено. Google нічого не надіслано.» з власною живою кнопкою Завантажити з Google, тож передумати - це одне натискання просто на картці. Жодна картка ніколи не показує мертву кнопку: у якому б стані вона не була, її єдина основна дія повідомляє, яким буде наступний крок.

Перетягніть файл шрифту на сцену - і він одразу показується в попередньому перегляді - TTF, OTF або WOFF з вашого власного пристрою, це шлях для ліцензованої корпоративної гарнітури, яку ви вже маєте. Ця зона перетягування - єдині файлові двері в кімнаті.

У будь-якому разі накреслення залишається на цьому пристрої, рендериться в застосунку, в інструментах і в кожному експорті, назавжди офлайн, і подорожує у файлі дизайн-системи - під час рендерингу нічого не завантажується. Усе на Google Fonts постачається за відкритою ліцензією (OFL/Apache/UFL).

Шрифти на цьому пристрої

Панель Fonts перелічує кожне накреслення, яке тримає цей пристрій, і роль, яку воно обслуговує. Накреслення, які додали ви, очолюють список під У дизайн-системі, кожне зі своїми ролями та видаленням, а те, що обслуговує Primary, несе бейдж. Стартові накреслення йдуть слідом в одному згорнутому рядку - Стартовий · SUSE, SUSE Mono · обслуговує Primary й Code, доки ви не оберете - приглушено, без видалення й нічого підвищувати, бо жодне з них не є рішенням, яке хтось приймав. Додати накреслення відкриває ту саму сцену порівняння без обмеження за роллю.

Панель Ролі шрифтів унизу показує живий зразок кожної ролі - основний текст та інтерфейс у основному, необов'язкове дисплейне накреслення для верхніх заголовків, курсив для виділення, моно для коду й даних - із сімейством і його станом поряд із кожним (Inter, SUSE · стартовий, SUSE · успадковує Основний), тож увесь набір можна прочитати одразу.

Токени

Решта дизайн-системи, яку можна редагувати без звернення до коду:

signed by Lolly2026-10-21vector SVG336 paths~32k nodes575 groups1 image490 KBПеревірте саміОтримати підписаний файл signed by Lolly2026-10-21vector SVG336 paths~32k nodes575 groups1 image492 KBПеревірте саміОтримати підписаний файл

• Скруглені кути - один повзунок радіуса (0-1.5rem), якому підпорядковуються картки, кнопки й панелі в усьому застосунку.
• Нейтральні - градація «чорнило крізь папір», з якою постачається нова інсталяція, перелічена як Нейтральні · стартові · 9 з дев'ятьма кроками та Відкрити на панель Кольори. Це єдине місце, де керують стартовими нейтральними, і мітка стартовий зникає тієї миті, коли градацію згенеровано, а не успадковано.
• Більше токенів - додавайте та редагуйте spacing, sizing, stroke width, opacity, rotation, звичайні numbers і shadows. Оберіть тип, дайте йому назву (Gutter, Card shadow…) і встановіть значення. Вони зберігаються як стандартні дизайн-токени (DTCG) і подорожують разом із дизайн-системою.

Файли

Перетягніть сюди файли, які зберігає ваш бренд - окрім логотипів: ресурси типів vector, image, audio і motion (відео, Lottie, анімація). Вони потрапляють до Ресурсів, відсортовані за розділами і готові в засобі вибору ресурсів кожного інструмента. Усе залишається на цьому пристрої. (Панель називає кімнату Файли; URL-ключ залишається catalogue, бо ключ панелі - це постійний контракт.)

Імпортуйте бренд

Add from… внизу панелі відкриває двоетапний вибір. Перший етап запитує, що у вас є, а не який це формат:

• Design tokens or a design file - DTCG або Tokens Studio JSON, проєкт Penpot, zip-архів наборів токенів, пакет дизайн-системи Lolly або SVG.
• PDF - презентація або файл гайдлайнів, зчитується на цьому пристрої для отримання кольорів, міток і вбудованих гарнітур.
• Логотип або знімок екрана - зображення стає пропонованою палітрою, зчитаною на цьому пристрої. Нічого не завантажується. Це зчитує кольори, а не шрифт чи компонування на картинці.
• Збережена веб-сторінка - оберіть один файл HTML і його файли CSS, або вставте HTML чи CSS. До 20 файлів і 2 МБ загалом. Читається лише наданий текст; пов'язані ресурси не завантажуються, а скрипти не виконуються. Цей шлях також працює без розширення чи десктопного застосунку.
• Файл шрифту - TTF, OTF або WOFF. Відкриває кімнату Шрифти, де накреслення встановлюється.
• Вебсайт - одна сторінка, зчитана для отримання кольорів і шрифту. Ця плитка з'являється лише на пристрої, який справді здатен прочитати сторінку, бо вимкнена плитка, що рекламує щось, на що ніхто не може натиснути, гірша, ніж відсутність плитки взагалі. Там, де вона з'являється, чітко вказано, хто читає: завантажено застосунком на цьому пристрої, або прочитано через розширення браузера у фоновій вкладці, увійшовши як ви. Вказання URL лише попередньо заповнює поле - згодою є кнопка отримання, тож посилання, яке хтось вам надішле, ніколи не може самостійно розпочати читання.

Оберіть джерело файлу дизайну, і другий етап - це картка нижче: прийняті формати очолюють список як плитки-піктограми у порядку пріоритету, а вся картка - одна зона для перетягування: натисніть будь-де на ній або перетягніть файл на неї. Файл також можна перетягнути прямо на студію.

signed by Lolly2026-10-21vector SVG20 paths~3.1k nodes35 groups2 images173 KBПеревірте саміОтримати підписаний файл signed by Lolly2026-10-21vector SVG20 paths~3.1k nodes35 groups2 images174 KBПеревірте саміОтримати підписаний файл

Що дає кожен файл дизайну:

• пакет дизайн-системи Lolly (.lolly; застарілий .zip досі приймається) - встановлюється за один крок;
• експорт Penpot (.penpot) - підтягує його дизайн-токени;
• файл Design Tokens (.json) - W3C DTCG;
• файл Tokens Studio (.json) - Tokens Studio;
• звичайний SVG (.svg) - Lolly сканує його кольори і дає змогу обрати, які зберегти, перший стає вашим основним.

Логотип/знімок екрана, вебсайт чи збережена сторінка відкриває Запропоновану систему дизайну. Перегляньте приклад із запропонованими кольорами, за потреби оберіть інший Основний колір і назвіть систему. Використати цю систему дизайну застосовує згенеровані світлу й темну палітри та повертає до Огляду. Наявні шрифти лишаються на місці. Це замінює кольори активної системи та інші налаштування токенів. Спершу має вдатися контрольна точка; Відновити налаштування бренду повертає попередні налаштування.

Деталі джерела та окремі вибори показує, що було зчитано, виявлені назви шрифтів і контраст тексту/дії попереднього перегляду. Це також пропонує Вибери окремі елементи зі списку і Завантажити контекст дизайну. Звіт JSON несе спостереження, запропоновані токени та інформацію про джерело; збережені HTML/CSS містять SHA-256 наданого тексту. Він не містить сирого тексту сторінки і не є підписаним Content Credential. Назви шрифтів - це пропозиції: Шрифти лишаються місцем, де обирають і встановлюють шрифти.

Імпорти PDF та інших файлів дизайну зберігають свої наявні елементи керування переглядом. Елементи, що лишаються в Tray, нічого не змінюють, доки їх не додано через кімнату, якій належить цей тип матеріалу.

#/start?source=<kind> відкриває вибір джерела за заданим типом (file, pdf, image, font, url, page), а ?import відкриває його на звичайному списку.

Перенесіть бренд між пристроями

Експорт унизу панелі записує єдиний файл LollyBrand-….lolly - ваші токени, шрифти, логотипи та налаштування теми, з маніфестом цілісності, який перевіряється під час зворотного імпорту. Веброзсилки до 1.0.7 називали той самий вміст .zip; це застаріле написання досі приймається. Поруч Tokens (.json) записує лише звичайний документ дизайн-токенів окремо: без шрифтів, без логотипів, лише токени - те, що насправді читає репозиторій, крок CI або інший інструмент роботи з токенами.

Повернути його - це Add from… → Design tokens or a design file (вище) або перетягування прямо на студію. Так колега передає вам бренд, або так ви переносите його на другу інсталяцію - без облікового запису, без хмари. Щоб натомість імпортувати бренд із командного рядка, див. ingest:brand.

Відновіть попередні налаштування

Оберіть Відновити налаштування бренду внизу панелі, виберіть датовану контрольну точку, а тоді натисніть Відновити. Це відновлює кольори, налаштування шрифтів та інші токени бренду для активного бренду. Файли шрифтів і зображень лишаються як є.

Lolly зберігає ваші поточні налаштування як Before restore, перш ніж застосувати контрольну точку. Оберіть цю контрольну точку, щоб скасувати відновлення, зокрема й після закриття та повторного відкриття браузера. Останні 20 контрольних точок зберігаються на цьому пристрої. Якщо сховище неможливо прочитати або поточні налаштування неможливо зберегти, діалог повідомляє про проблему, щоб ви могли спробувати знову.

Версії

Версії у нижній частині панелі - це те місце, де дизайн-система перестає бути рухомою мішенню. Опублікуйте одну - і ви отримаєте постійну, іменовану копію, збережену на цьому пристрої: вона більше ніколи не змінюється, тож інструмент, що закріплюється на ній, і надалі малює те саме. Панель залишається прихованою, доки не з’явиться щось власне для публікації, тож студія, яка ніколи не публікує, ніколи не бачить елементів керування.

Три речі варто знати, перш ніж щось натискати, і панель повідомляє всі три до натискання, а не після:

• Версія постійна. Видалення поки що немає, тому панель зазначає, що було збережено, і що воно лишається збереженим, а не пропонує кнопку, яка бреше.
• Видалення очолюють картку сумісності. Додані й змінені токени - це новини; а видалений - це те, що ламає інструмент, тому його називають першим і називають тим, чим він є.
• Публікацію не можна скасувати; відновлення - можна. Відновити останню версію з цієї версії - це звичайна правка головної версії, тож вона потрапляє у стек скасування студії, і панель одразу пропонує вам Скасувати.

Ви можете Publish only або Publish and make active - різниця в тому, чи будуть інструменти й застосунок надалі слідувати цій версії, чи продовжать слідувати вашій останній правці. Follow the latest again робить кожну правку миттєво активною. #/start?area=versions відкриває панель напряму.

Коли бренд зафіксований

Деякі збірки постачають зафіксовану дизайн-систему, як-от SUSE Brand. Відкриття її показує напис лише для читання з Make an editable copy і Switch. Її оригінальні кольори, шрифти й токени лишаються незмінними. Ваші власні локальні системи лишаються редагованими, навіть коли зафіксована система була першою на пристрої. У Профілі Відкрити обирає систему й відкриває її студію; Make a new one створює локальну систему й відкриває її на #/start із фокусом на полі назви.

Куди рухатися далі

• Using Lolly - полотно, збереження, проекти та Ресурси.
• Design Tokens - модель токенів, у якій виражений ваш бренд.
• Exporting & formats - одиниці друку, CMYK і формати, у які рендериться ваш бренд.

Знайдіть і порівняйте стиль

Відкрийте Знайти стиль з Огляду або зі списку дизайн-систем у Профілі. Переглядайте системи, збережені на цьому пристрої, і кілька придатних для повторного використання прикладів Lolly. Шукайте за назвою, тегом кольору чи заявленим шрифтом. Найближча до моєї поточної палітри сортує за виміряною схожістю кольорів, а відповідні сімейства шрифтів розбивають нічию; це не показник якості.

Виберіть один стиль, щоб переглянути його, або два, щоб порівняти. Кнопка перегляду лишається доступною на малому екрані. Вибір стилю нічого не змінює. Використати цю збережену систему перемикає через наявний реєстр дизайн-систем. Використати ці кольори застосовує приклад через звичайний потік контрольної точки та встановлення, зберігаючи наявні шрифти. Відновити налаштування бренду може повернути попередній стиль.

Під Деталі та контекст дизайну збережені системи мають редаговані Пошук тегів і завантаження контексту. Приклади використовують оригінальні рецепти кольорів Lolly; немає віддалено зібраної колекції натхнення чи обов'язкового облікового запису.

signed by Lolly2026-10-21vector SVG30 paths~9.3k nodes44 groups106 KBПеревірте саміОтримати підписаний файлTry it in the app

Порівняння тримає обидві палітри видимими одночасно. Перегляд стилю нічого не змінює, доки ви не оберете Використати ці кольори або Використати цю збережену систему.

Прочитайте докази з джерела

Необов'язкові деталі огляду джерела показують типографіку, проміжки, відступи та значення кутів там, де їх спостережено. Збережені HTML/CSS і нативні зчитування вебсайтів повідомляють оголошені значення, які може й не використовувати відрендерена сторінка. Розширення браузера може повідомляти виміряні стилі з обмеженого зразка видимих елементів, з його вікном перегляду та кольоровим налаштуванням браузера. Старіші розширення досі працюють з оголошеними стилями. Відсутні поля кажуть Не спостерігалося.

Це спостереження, а не автоматичні налаштування стилю. Файли шрифтів не завантажуються й не встановлюються скануванням референсу, а проміжки з джерела мовчки не замінюють ваші власні. Лічильники описують випадки у зразку, а не впевненість чи якість.

Перевірте композицію відносно дизайн-системи

У Design відкрийте Export, а тоді Перед експортом. Перевірка використовує ту саму чинну версію дизайн-системи, що й рендер. Вона порівнює авторські кольори, псевдоніми токенів, вибір шрифтів та ідентифікатори ресурсів зображень. Власні значення можуть бути навмисними; зображення поза заявленими ресурсами бренду - це пункт для перегляду, а не заборонене зображення.

Там, де доступна конкретна пропозиція кольору чи шрифту, її кнопка змінює саме цей один шар. Звичайне Скасувати повертає оригінальне значення. Заблоковані чи змінені шари не перезаписуються застарілою пропозицією. Відсутні докази з джерела лишаються окремо від збігу. Відрендерений контраст і розташування тексту перевіряють наявні змонтовані перевірки. Градієнти, ефекти, вкладений вміст інструментів, права та суб'єктивна якість не оцінюються порівнянням із брендом. Перевірки не блокують Завантажити.

Використовуйте контекст дизайну локально

Завантажити контекст дизайну включає документ токенів, розв'язані кольори, заявлені сімейства шрифтів, ідентифікатори ресурсів, докази з джерела там, де їх записано, покриття та явні правила. Це не включає файли шрифтів чи доказ права власності. Огляд референсу також включає свої запропоновані токени та спостереження.

CLI може прочитати будь-яке з цих завантажень без сервера:

lolly system import ./lolly-design-context.json
lolly system context --output=design-context.json
lolly system check ./design-inputs.json --file=design-context.json

system check приймає входи Design із масивом boxes або скомпільованим документом Design. Вона повідомляє запропоновані виправлення, не змінюючи композицію. Вона не може вимірювати компонування браузера чи відрендерений контраст. Наявний ресурс MCP lolly://design-context надає контекст чинної системи через налаштований локальний процес MCP; нова хостована служба чи ключ API не потрібні.