Brand Studio

Brand Studio на #/start е единственото място, където оформяш своя бранд - неговите лога, цветове, шрифтове, останалите токени и файловете, които съхранява. Настрой го тук веднъж и всеки инструмент, страница и изнасяне го следват по конструкция, а не чрез преглед.

Промените се преглеждат на живо в цялото приложение, докато ги правиш, така че можеш да видиш как цвят или шрифт се отразяват навсякъде, преди да ги потвърдиш. Всичко е на устройството: брандовите ти файлове и токени никога не напускат машината ти (изборът на Google Font изтегля точно това семейство от Google, еднократно, след диалог за съгласие), а брандът пътува в един файл - брандов пакет.

Това е редакторът. Таблото е огледалото. Разделът Дизайн система в Таблото (#/d) показва твоя бранд само за четене; редактираш го тук, в #/start. Ако по-късно искаш да промениш цвят, върни се в Brand Studio.

Стаите

Студиото е набор от стаи, изброени в лента отстрани - не стъпки. Нищо не е номерирано, нищо не зависи от друго и попадането във всяка от тях е законен вариант:

• Преглед - хъбът. Какво съществува в момента, набързо, с врата към всяка стая.
• Цветове - добавяй цветове по един, задавай роли или генерирай цяла палитра от един цвят.
• Шрифт - четирите шрифта, които четат приложението, твоите инструменти и всяко изнасяне.
• Лога - твоите знаци, във всяка ориентация и обработка.
• Токени - радиус на ъглите, разстояния, сенки и останалата част от системата.
• Файлове - изображенията, аудио и видео файловете, които твоят бранд съхранява.

На телефон същият списък се превръща в хоризонтална лента с чипове, закрепена под заглавната част. Смяната на стая никога не презарежда нищо - редакторът държи всички панели монтирани и просто показва този, който си поискал.

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

Закрепени в долния край на лентата са действията, които принадлежат на цялата дизайн система, а не на една стая:

• Добави от… - избирачът на източник, за внасяне на бранд от файл, PDF, изображение, шрифт или уебсайт. Виж Внасяне на бранд по-долу.
• Табла - кандидатите, които сканиране е открило, но още не е потвърдило. Остава скрита, докато сканиране действително не запази нещо, и тогава показва брой; нищо в нея не променя бранда ти, докато не натиснеш Добави на съответния ред.
• Изнеси - записва целия бранд като един файл LollyBrand-….lolly.
• Токени (.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

Преглед

Преглед е първата стая и има две лица.

С нищо избрано още, тя казва Направи го свое. Започни от референтен материал отваря избирача на източник за лого, екранна снимка, уебстраница или дизайн файл. Избери цвят, Избери начертание и Добави лого отварят съществуващите си контроли направо. Всеки път започва с избор; отварянето на който и да е от тях не записва нищо. Разгледай инструментите е достъпно веднага.

Щом нещо стане твое, същата стая показва какво имаш, с броячите, които си направил, на първо място. Цветовете показват броя цветове, които дизайн системата носи, и добавят приглушено · N starter само където има наследени цветове на показ; лентата до тях слага първо цветовете, които си избрал сам, после тънка линия и избледнелите начални. Шрифтовете показват по роля (Inter за заглавия, с Начален за останалото · SUSE, SUSE Mono под него). Логата показват колко слота са запълнени, или Не е зададено. Токените носят радиуса на ъглите, отбелязан като начален, докато не го преместиш. Файловете казват Все още нищо, докато библиотеката е празна. Всеки блок е врата към своята стая. Тук има броячи, но никога лента за напредък и никога карта за завършване - в това студио нищо не се дължи.

Лога

Започни, като изпразниш папката си със знаци в зоната за пускане отгоре: „Пусни знаци тук или избери няколко наведнъж“ приема толкова файлове, колкото имаш, наведнъж. Всеки файл се анализира за форма и мастило, след което се нарежда под Чакащи слот като чип, показващ предположението си - „Прилича на хоризонталния основен“, с измерването, на което се е базирало, и бутон Постави (Замени, ако този слот вече е зает). Където не е сигурен, чипът го казва открито и вместо това предлага Смени слот, който изброява и осемте. Нищо не се поставя, докато не натиснеш нещо.

Около тази опашка се случват две неща. Знак с излишен празен отстъп получава първо предложение за подрязване - отговори му или натисни Escape и оригиналният файл влиза непроменен. А там, където един знак може да снабди празен сроден слот, стаята предлага производната версия едноцветна или обърната като собствен чип, отбелязан Генериран, който отново изчезва, ако запълниш този слот по друг начин.

Под това е решетката, в която попада всеки знак - слотове ориентация × обработка:

• Ориентации: Хоризонтална (словна марка + символ в ред) и Вертикална (наредени един над друг, за квадратни и високи пространства).
• Обработки: Основна, Основна обърната (за тъмни фонове), Едноцветна и Едноцветна обърната.

Това са осем незадължителни слота. Кликни слот, за да добавиш 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Провери самВземи подписания файл

• Персонализирани знаци - добави знаци, които брандът ти назовава по свой начин (икона, герб, favicon) под Персонализирани знаци; именувай го и избери файл.
• Още самоличности - подбранд, продукт или събитие може да има свой пълен набор от лога. Използвай + Добави друго лого и го именувай; основният ти набор е просто „Твоето лого“.
• Качи SVG и Lolly прочита цветовете му. При съвсем нова инсталация тихо задава основния ти цвят от логото и го съобщава. При съществуващ бранд предлага цвета вместо това само като предложение - „Открит в логото: #…“ с бутон Използвай като основен до него - долу в стаята Цветове, където можеш да го приемеш или отхвърлиш.

Цветове

Стаята расте заедно с дизайн системата. На страницата няма нищо, от което още не си имал нужда, така че първото посещение е едно решение, а останалото идва заедно с палитрата.

Първият цвят

Дизайн система без собствени цветове се отваря в една центрирана колона: Започни с един цвят - голям жив чип, поле и тих ред, който казва, че ролите, нюансите и настройките за печат идват с растежа на системата.

• Чипът е самият избирач. Натисни го и собствената 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Провери самВземи подписания файл

Кликни всеки образец, за да отвориш неговия редактор:

• Преименувай го.
• Задай цвета - селекторът се отваря с перцептуални плъзгачи OKLCH, с режими за Hex, HSL, RGB и CMYK; полето за стойност чете и записва в активното пространство, така че можеш да поставиш шестнайсетичен код или да въведеш процент мастило. Имай предвид, че въвеждането на CMYK задава цвета на екрана чрез преобразуване - за да закрепиш точни мастила, използвай печатното заключване по-долу.
• Съхранен като - избери как се запазва образецът: LCH (по подразбиране - перцептуален, с широка гама, най-добрият избор за редактиране), Hex, RGB или HSL. Замени го, когато трябва да закрепиш точен наследен шестнайсетичен код или да съвпаднеш със стойност в sRGB.
• Използвай като - възложи на този образец пряко една от брандовите роли, без да се връщаш в панела Роли. (Собственият плочка на дадена роля не предлага това - роля не може да поеме роля.)
• Печатни заместители (сгънато) - заключи печатното поведение на цвета:
• CMYK - превключи го от Автоматично на Заключено, за да замениш автоматичното преобразуване sRGB→CMYK с точни стойности на мастилата (C/M/Y/K, 0–100).
• Плашен цвят - превключи го от Няма на Зададен, за да заключиш образеца към плашен цвят; дай му Име (напр. PANTONE 186 C), незадължителна Книга и незадължително Изпълнение (Обикновено мастило по подразбиране) за случаите, когато мастилото изобщо не е мастило - фолио, релефен или вдлъбнат печат, точков лак, мек допир или щанца, биговка или перфорация.
• В други пространства (сгънато) - същата идея, разширена: всеки ред е пространство, в което този образец може да бъде изразен, или изведено от каноничната стойност, или зададено от теб, а зададеното от теб печели при износ.

Тези печатни заключвания са това, което печатницата използва, когато изнесеш 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 и живия образец. Четирите начертания са тези, които приложението, инструментите и всеки износ реално четат:

• Основен - основен текст, бутони и всеки инструмент.
• Заглавия - дисплейното начертание за h1/h2.
• Код - равношироко начертание за код и данни.
• Курсив - истински курсивен спътник за акцент, цитати и вметнати бележки.

Заглавията, кодът и курсивът поотделно отпадат към основния, докато не ги зададеш, така че дизайн система с едно начертание не изисква никакви решения тук.

Оттенък означава, че си го избрал. Карта е оцветена само там, където си инсталирал това начертание. Начално начертание носи същия етикет Начален, който носят наследените групи на палитрата, в приглушен регистър и без оттенък, а роля, която никой не е избрал, се чете като ↳ следва основния, вместо да повтаря името на основния, сякаш е бил избран. Бутонът казва Промени на собствено начертание и Избери начертание навсякъде другаде. Нищо на карта не потвърждава нищо: бутонът отваря сцената за сравнение, ограничена до тази роля.

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, защото ключ на панел е постоянен договор.)

Внеси бранд

Добави от… в основата на релсата отваря двустепенен селектор. Първата стъпка пита какво имаш, не какъв формат е:

• Дизайн токени или дизайн файл - DTCG или Tokens Studio JSON, проект в Penpot, zip с набори токени, пакет дизайн система на Lolly или SVG.
• PDF - презентация или файл с насоки, прочетен на това устройство за цветовете му, маркировките му и вградените му шрифтове.
• Лого или екранна снимка - изображение става предложена палитра, прочетена на това устройство. Нищо не се качва. Това чете цветове, не шрифта или оформлението в картината.
• Запазена интернет страница - избери един HTML файл и неговите CSS файлове, или постави HTML или CSS. До 20 файла и общо 2 MB. Чете се само предоставеният текст; свързаните ресурси не се извличат и скриптове не се изпълняват. Този път работи и без разширението или настолното приложение.
• Файл с шрифт - 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) - изтегля дизайн токените си;
• файл Дизайн токени (.json) - W3C DTCG;
• файл Tokens Studio (.json) - Tokens Studio;
• обикновен SVG (.svg) - Lolly сканира цветовете му и ти позволява да избереш кои да запазиш, като първият става твоят основен.

Лого/екранна снимка, уебсайт или запазена страница отваря Предложената ти дизайн система. Виж пример с предложените цветове, избери различен Основен цвят, ако е нужно, и именувай системата. Използвай тази дизайн система прилага генерираните светла и тъмна палитра и се връща в Преглед. Съществуващите шрифтове остават на място. Това заменя цветовете на активната система и другите настройки на токени. Контролна точка трябва да успее първо; Възстанови настройките на марката връща предишните настройки.

Детайли за източника и индивидуални избори показва какво е прочетено, засечените имена на шрифтове и контраста текст/действие на прегледа. Предлага и Избери отделни елементи от списъка и Изтегли контекста на дизайна. JSON отчетът носи наблюдения, предложени токени и информация за източника; запазените HTML/CSS включват SHA-256 на предоставения текст. Не съдържа суров текст на страницата и не е подписан Content Credential. Имената на шрифтовете са предложения: Шрифт остава мястото за избор и инсталиране на шрифтове.

Импортите на PDF и други дизайн файлове пазят съществуващите си контроли за преглед. Елементите, задържани в Табла, не променят нищо, докато не бъдат добавени през стаята, която притежава този вид материал.

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

Премести бранд между устройства

Изнеси в основата на релсата записва един файл LollyBrand-….lolly - твоите токени, шрифтове, лога и предпочитание за тема, с манифест за цялост, който се проверява при връщането обратно. Уеб версиите преди 1.0.7 наименуваха същото съдържание .zip; това остаряло изписване все още се приема. До него Tokens (.json) записва самостоятелно обикновения документ с дизайн токени: без шрифтове, без лога, само токени, което е това, което репо, стъпка в CI или друг инструмент за токени реално чете.

Връщането на такъв е Добави от… → Дизайн токени или дизайн файл (по-горе), или завличане и пускане върху студиото. Така колега ти подава бранд, или пренасяш такъв към втора инсталация - без акаунт, без облак. За да внесеш бранд от командния ред вместо това, виж 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 и нативните четения на уебсайтове съобщават декларации, които може да не се използват от рендираната страница. Разширението за браузър може да съобщава измерени стилове от ограничена извадка от видими елементи, с неговия viewport и цветово предпочитание на браузъра. По-старите разширения все още работят с декларирани стилове. Липсващите полета казват Не е наблюдавано.

Това са наблюдения, не автоматични настройки на стил. Файлове с шрифтове не се извличат и не се инсталират от сканиране на референтен материал, а разстоянията от източника мълчаливо не заменят твоите собствени. Броячите описват срещания в извадката, не увереност или качество.

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

В 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 ключ.