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-…zip. - Токени (.json) - самостоятелният документ с дизайн токени, за хранилище, стъпка на компилиране или друг инструмент за токени.
- Версии - публикувай, активирай и възстановявай именувани копия на дизайн системата. Скрито, докато няма какво твое за публикуване (или линк с
?area=versionsне го поиска по име).
signed by Lollyvector SVGПровери самGet the signed file20 paths~1.1k nodes37 groups19 KB
signed by Lollyvector SVGПровери самGet the signed file20 paths~1.1k nodes37 groups19 KBTry it in the app
Преглед
Преглед е стаята, в която попадаш, и има две лица.
Когато още нищо не е настроено, предлага две врати - Започни от файл (дизайн токени, проект в Penpot, пакет с дизайн система или SVG) и Започни от нулата (добави един цвят, после продължавай, когато пожелаеш) - и тих изход Разгледай инструментите под тях, защото и напускането е законен отговор.
След като дизайн система вече съществува, същата стая показва какво имаш: палитрата и броя ѝ цветове, действащите шрифтови семейства, колко слота за лого са запълнени, колко токена има и стаята Файлове. Всеки блок е врата към своята стая. Тук има само броячи, никога лента за напредък и никога карта за завършване - в това студио нищо не се дължи.
Лога
Започни, като изпразниш папката си със знаци в зоната за пускане отгоре: „Пусни знаци тук или избери няколко наведнъж“ приема толкова файлове, колкото имаш, наведнъж. Всеки файл се анализира за форма и мастило, след което се нарежда под Чакащи слот като чип, показващ предположението си - „Прилича на хоризонталния основен“, с измерването, на което се е базирало, и бутон Постави (Замени, ако този слот вече е зает). Където не е сигурен, чипът го казва открито и вместо това предлага Смени слот, който изброява и осемте. Нищо не се поставя, докато не натиснеш нещо.
Около тази опашка се случват две неща. Знак с излишен празен отстъп получава първо предложение за подрязване - отговори му или натисни Escape и оригиналният файл влиза непроменен. А там, където един знак може да снабди празен сроден слот, стаята предлага производната версия едноцветна или обърната като собствен чип, отбелязан Генериран, който отново изчезва, ако запълниш този слот по друг начин.
Под това е решетката, в която попада всеки знак - слотове ориентация × обработка:
- Ориентации: Хоризонтална (словна марка + символ в ред) и Вертикална (наредени един над друг, за квадратни и високи пространства).
- Обработки: Основна, Основна обърната (за тъмни фонове), Едноцветна и Едноцветна обърната.
Това са осем незадължителни слота. Кликни слот, за да добавиш PNG, SVG, JPEG или WebP; кликни запълнен слот, за да го замениш. Всеки слот е незадължителен и всичко остава на това устройство.
signed by Lollyvector SVGПровери самGet the signed file8 paths~4.8k nodes19 groups54 KB
signed by Lollyvector SVGПровери самGet the signed file8 paths~4.8k nodes19 groups54 KB
- Персонализирани знаци - добави знаци, които брандът ти назовава по свой начин (икона, герб, favicon) под Персонализирани знаци; именувай го и избери файл.
- Още самоличности - подбранд, продукт или събитие може да има свой пълен набор от лога. Използвай + Добави друго лого и го именувай; основният ти набор е просто „Твоето лого“.
- Качи SVG и Lolly прочита цветовете му. При съвсем нова инсталация тихо задава основния ти цвят от логото и го съобщава. При съществуващ бранд предлага цвета вместо това само като предложение - „Открит в логото: #…“ с бутон Използвай като основен до него - долу в стаята Цветове, където можеш да го приемеш или отхвърлиш.
Цветове
signed by Lollyvector SVGПровери самGet the signed file114 paths~26k nodes149 groups4 images523 KB
signed by Lollyvector SVGПровери самGet the signed file114 paths~26k nodes149 groups4 images523 KB
Най-богатата стая, в два панела. Левият е мястото за работа; десният е твоята палитра на живо. Плъзни разделителя между тях, за да ги преоразмериш (Enter върху него скрива палитрата встрани).
signed by Lollyvector SVGПровери самGet the signed file61 paths~9.4k nodes77 groups200 KB
signed by Lollyvector SVGПровери самGet the signed file61 paths~9.4k nodes77 groups200 KB
Добави цвят, после му дай задача
Добави цвят е целият прост път: постави или избери цвят в която и да е нотация и той става точно един токен. Нищо не се извежда от него, нищо не се предлага в него, нищо друго не се изисква. Постави цял списък с цветове и всеки от тях става чип, който можеш да добавиш самостоятелно.
Роли е слоят отгоре - кой цвят изпълнява коя роля. Ролите са незадължителни (дизайн система от три несвързани цвята без роли е напълно валидна), всяко квадратче може да получи роля, а отчитането на контраста се измерва спрямо повърхността, първо по APCA.
Експертните крила
Четири сгънати секции стоят под тези две. Отвори тази, която искаш; всяка е с дълбок линк като #/start?area=color&focus=<wing>:
- Генерирай начална палитра (
focus=generate) - един цвят в пълен набор от нюанси. Описано по-долу. - Криви на нюансите (
focus=curves) - преобрази степен по степен. Светлота, наситеност и оттенък получават всеки своя крива, превключвани с L / C / H, а нюансите отдолу се преизпичат на живо, докато влачиш. - Контраст (
focus=contrast) - Заключване на контраста пренастройва степен, за да постигне цели по APCA спрямо избран от теб фон, като всяка стъпка запазва собствения си оттенък и наситеност; Завърти оттенъка завърта цялата степен физически по кръга, като всеки нюанс запазва своята светлота и наситеност. - Печат (
focus=print) - в какво се превръща основният цвят на печатна преса: автоматичната му екранна стойност, или фиксирана CMYK стойност, или именувано директно мастило вместо това.
Един цвят, цяла палитра
В Генерирай начална палитра избери Основен цвят и Lolly извежда пълна палитра - светли и тъмни повърхности, текст, акценти и пълни степени на отсенки/нюанси - като използва същата перцептивна цветова математика (OKLCH), която двигателят използва навсякъде. Настрой извеждането:
- Схема - Едноцветна, Допълваща, Аналогова или Триадна - задава как вторичният цвят се съотнася с основния ти.
- Нюанси - плъзгач от 3 до 20 (по подразбиране 5) определя колко стъпки генерира всяка степен.
- Фина настройка (сгъната) - Интензивност на интерфейса (Приглушена / Дълбока), Контраст (Комфортен / Висок) и Текст върху бранда (Автоматично / Светъл / Тъмен).
Нищо в това крило не записва каквото и да е в бранда ти. Това е преглед, на живо в цялото приложение, за да го прецениш, чак докато не натиснеш Замени палитрата (по-долу).
Под основния цвят ще видиш живи степени Основна / Неутрална / Вторична / Смесена и специмен карти за светла и тъмна тема, всяка с отчет на собствения си контраст - съотношението по WCAG заедно с фигурата Lc по APCA. Кликни стъпка в Неутралната или Вторичната степен, за да фиксираш този нюанс вместо изведения по подразбиране.
signed by Lollyvector SVGПровери самGet the signed file25 paths~4.6k nodes60 groups57 KB
signed by Lollyvector SVGПровери самGet the signed file25 paths~4.6k nodes60 groups57 KB
Изгради своята палитра (генератор на хармонии)
Все още в същото крило, Изгради своята палитра генерира съответстващи акцентни цветове от твоя основен. Избери Хармония - Комплементарна, Съседна, Триада, Тетрада или Аналогична (която носи собствен брой Акценти, от 2 до 5, и Ъгъл на нюанса от 10° до 45°) - и всеки кандидат пристига с автоматично генерирано, четимо от човек име и бутон + Добави. Добавянето поставя този цвят в палитрата ти веднага, едно натискане към един токен. "Твоята палитра, приложена" показва целия набор върху реални графики.
signed by Lollyvector SVGПровери самGet the signed file8 paths936 nodes14 groups15 KB
signed by Lollyvector SVGПровери самGet the signed file8 paths936 nodes14 groups15 KB
Потвърждаване на генерирана палитра
Замени палитрата е единственият контрол в това крило, който записва нещо, и никога не го прави веднага. Натисни го и първо се отваря карта за преглед, озаглавена "Да заменим ли палитрата?", изброяваща точно какво предстои да се случи: колко роли остават както си ги задал, колко цвята, добавени от теб самия, се запазват, колко криви на отсенките се пренасочват, колко печатни заключвания се закрепват отново, колко скрити отсенки остават скрити, колко спирки на градиенти запазват цвета си.
Замени палитрата на тази карта потвърждава действието; Отказ излиза и не променя нищо. След като е изпълнено, картата става "Палитрата е заменена." с вече фокусиран единствен бутон Отмени - и контролна точка на цялата дизайн система се прави преди смяната, така че "върни го както си беше" е възстановяване, а не изгубен следобед.
Палитрата, диаграмата и всеки образец
Дясното поле изброява всеки цвят, който твоят бранд носи, групирани (Основни, Неутрални, Вторични, Спектър, Персонализирани, Роли), всяка група сгъваема със собствен + Добави. Под нея Цветова диаграма се разгъва в два изгледа на едни и същи образци: Колело (OKLCH колелото - завлечи точка, за да я пребоядисаш, кликни точка, за да я редактираш, или кликни на празно място, за да добавиш нов образец) и диаграмата Гама, която показва къде реално свършва показваемият диапазон. #/start?area=color&focus=chart отваря картата директно, както винаги прави ?wheel.
signed by Lollyvector SVGПровери самGet the signed file155 paths~14k nodes199 groups1 image191 KB
signed by Lollyvector SVGПровери самGet the signed file155 paths~14k nodes199 groups1 image191 KB
signed by Lollyvector SVGПровери самGet the signed file274 paths~3.7k nodes67 groups83 KB
signed by Lollyvector SVGПровери самGet the signed file274 paths~3.7k nodes67 groups83 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 - виж Изнасяне.
Изтриването на образец е безопасно: изведените стъпки на степента и ролите на темата се скриват (базовият токен продължава да се разрешава, така че нищо надолу по веригата не се чупи), докато цветовете, които си добавил сам, се премахват изцяло.
Градиенти
Незадължителен панел Градиенти изгражда токени за преливане от твоята палитра за фонове и акценти. Пропусни го изцяло, ако твоят бранд не използва градиенти. Всеки градиент има преглед, именувани спирки (2–8) и ъгъл. Ключовото поведение: спирка сочи към образец, така че пребоядисването на този образец следва в градиента. Интерполацията се извършва в OKLCH за чисти преливания. Изтрий спирка, за да съкратиш поредицата.
Изнеси палитрата другаде
Плаващото хапче, закотвено в долния край на полето с палитрата, изтегля цялата палитра като Дизайн токени (JSON), CSS променливи, CSS класове, SCSS променливи, GIMP палитра (.gpl) или Adobe Swatch Exchange (.ase) - така че брандът пада направо в Illustrator, Figma, GIMP или стилов лист. Той стои извън скролера на панела, така че запазва мястото си независимо колко се скролва палитрата. (Можеш също да изтеглиш палитрата от изгледа Каталог.)
Шрифт
signed by Lollyvector SVGПровери самGet the signed file74 paths~11k nodes99 groups234 KB
signed by Lollyvector SVGПровери самGet the signed file74 paths~11k nodes99 groups234 KB
Стаята започва с четири карти на роли - четирите начертания, които приложението, твоите инструменти и всеки износ реално четат. Всяка карта показва какво обслужва тази роля в момента, зададено в това начертание, с ред реален текст под нея:
- Основен - основен текст, бутони и всеки инструмент.
- Заглавия - дисплейното начертание за
h1/h2. - Код - равношироко начертание за код и данни.
- Курсив - истински курсивен спътник за акцент, цитати и вметнати бележки.
Заглавията, кодът и курсивът всеки поотделно отпадат към основния, докато не ги зададеш, така че бранд с един шрифт не изисква никакви решения тук. Нищо на карта не потвърждава нещо: Промени (или Избери начертание за празна роля) отваря сцената за сравнение, ограничена до тази роля.
signed by Lollyvector SVGПровери самGet the signed file59 paths~9.3k nodes73 groups196 KB
signed by Lollyvector SVGПровери самGet the signed file59 paths~9.3k nodes73 groups196 KB
Сцената за сравнение
Сцената се отваря на място в стаята, не в диалог, така че картите, от които си дошъл, остават на екрана. Потърси семейство от Google Fonts (Inter, Fraunces, Space Grotesk…) или пусни файл с шрифт, натисни Добави към сравнението и кандидатите застават един до друг в едни и същи думи, преди който и да е от тях да се инсталира. Escape отменя и връща клавиатурата на картата, от която си я отворил.
Това е единствената врата навътре, затова нищо не влиза в бранда ти незабелязано. Под сцената седят двата панела за управление:
- Шрифтове на това устройство - всяко инсталирано семейство, ролите, които обслужва, и изтриване. Добави начертание тук отваря същата сцена за сравнение без ограничение до роля.
- Твоите шрифтове - качи TTF, OTF или WOFF от собствената си машина. Това е пътят за лицензиран корпоративен шрифт, който вече притежаваш.
Във всеки случай начертанието остава на това устройство, изобразява се в приложението, в твоите инструменти и във всеки износ, офлайн завинаги и пътува в твоя брандов пакет - нищо не се дърпа при изобразяване. Всичко в Google Fonts се разпространява под отворен лиценз (OFL/Apache/UFL).
Панелът Роли на шрифта в основата показва жив образец на всяка роля - основен текст и потребителски интерфейс в основното начертание, незадължително дисплейно начертание за горните заглавия, курсив за акцент, равноширок шрифт за код и данни - така че да видиш целия набор да работи заедно.
signed by Lollyvector SVGПровери самGet the signed file17 paths~5.6k nodes29 groups68 KB
signed by Lollyvector SVGПровери самGet the signed file17 paths~5.6k nodes29 groups68 KB
Токени
Останалата част от дизайн системата, редактируема без докосване на код:
signed by Lollyvector SVGПровери самGet the signed file73 paths~14k nodes95 groups1 image292 KB
signed by Lollyvector SVGПровери самGet the signed file73 paths~14k nodes95 groups1 image292 KB
- Заоблени ъгли - единичен плъзгач за радиус (0–1.5rem), който картите, бутоните и панелите в цялото приложение следват.
- Още токени - добавяй и редактирай отстояния, размери, дебелина на щриха, прозрачност, завъртане, обикновени числа и сенки. Избери тип, именувай го (Отстъп, Сянка на карта…) и задай стойността му. Те се съхраняват като стандартни дизайн токени (DTCG) и пътуват с твоя бранд.
Файлове
Пусни тук файловете, които твоят бранд пази - освен логата: векторни, изображение, аудио и движение (видео, Lottie, анимирано) активи. Те попадат в твоя Каталог, сортирани по раздели и готови в селектора на активи на всеки инструмент. Всичко остава на това устройство. (Релсата озаглавява стаята Файлове; ключът в URL остава catalogue, защото ключ на панел е постоянен договор.)
Внеси бранд
Добави от… в основата на релсата отваря двустепенен селектор. Първата стъпка пита какво имаш, не какъв формат е:
- Дизайн токени или дизайн файл - DTCG или Tokens Studio JSON, проект в Penpot, zip с набори токени, пакет дизайн система на Lolly или SVG.
- PDF - презентация или файл с насоки, прочетен на това устройство за цветовете му, маркировките му и вградените му шрифтове.
- Изображение - екранна снимка или снимка; цветовете ѝ се четат на това устройство и нищо не се качва.
- Файл с шрифт - TTF, OTF или WOFF. Отваря стаята Шрифт, където начертанието се инсталира.
- Уебсайт - една страница, прочетена за цветовете и шрифта ѝ. Тази плочка се появява само на устройство, което наистина може да прочете страница, защото деактивирана плочка, рекламираща нещо, което никой не може да натисне, е по-лошо от липсата на плочка. Където се появява, тя назовава четеца си ясно: изтеглено от приложението на това устройство, или прочетено чрез разширението за браузър в фонов раздел, влязло като теб. Посочването на URL само предварително попълва полето - бутонът за извличане е съгласието, така че връзка, изпратена ти от някого, никога не може да стартира четене сама.
Избери източника дизайн файл и втората стъпка е картата по-долу: приетите формати водят като плочки с иконки в реда на предпочитание, и цялата карта е една цел за пускане - кликни навсякъде по нея или завлечи файл върху нея. Можеш също да пуснеш файл направо върху студиото.
signed by Lollyvector SVGПровери самGet the signed file19 paths~3.2k nodes35 groups2 images175 KB
signed by Lollyvector SVGПровери самGet the signed file19 paths~3.2k nodes35 groups2 images175 KB
Какво ти дава всеки дизайн файл:
- пакет LollyBrand (
.zip) - инсталира се с една стъпка; - износ от Penpot (
.penpot) - изтегля дизайн токените си; - файл Дизайн токени (
.json) - W3C DTCG; - файл Tokens Studio (
.json) - Tokens Studio; - обикновен SVG (
.svg) - Lolly сканира цветовете му и ти позволява да избереш кои да запазиш, като първият става твоят основен.
Инсталация от източник взима контролна точка първо, така че "върни се към преди внасянето" е едно възстановяване. И това, което сканирането открива, не влиза направо: кандидатите попадат в Тавата, където всеки се добавя с отделно натискане, през стаята, която притежава този вид материал.
#/start?source=<kind> отваря селектора на даден източник (file, pdf, image, font, url), а ?import го отваря на обикновения списък.
Премести бранд между устройства
Изнеси в основата на релсата записва един LollyBrand-…zip - твоите токени, шрифтове, лога и предпочитание за тема, с манифест за цялост, който се проверява при връщането обратно. До него Токени (.json) записва самостоятелно обикновения документ с дизайн токени: без шрифтове, без лога, само токени, което е това, което репо, стъпка в CI или друг инструмент за токени реално чете.
Връщането на такъв е Добави от… → Дизайн токени или дизайн файл (по-горе), или завличане и пускане върху студиото. Така колега ти подава бранд, или пренасяш такъв към втора инсталация - без акаунт, без облак. За да внесеш бранд от командния ред вместо това, виж ingest:brand.
Версии
Версии в основата на релсата е мястото, където дизайн системата спира да бъде подвижна мишена. Публикувай една и получаваш постоянно, именувано копие, запазено на това устройство: то никога не се променя след това, затова инструмент, който го закача, продължава да рисува същото нещо. Панелът остава скрит, докато няма нещо твое за публикуване, затова студио, което никога не публикува, никога не вижда контролите.
Три неща да знаеш, преди да натиснеш каквото и да е, а панелът казва и трите преди натискането, не след него:
- Версията е постоянна. Изтриване все още няма, затова панелът заявява какво е било запазено и че остава запазено, вместо да предлага бутон, който лъже.
- Премахванията водят картата за съвместимост. Добавените и променените токени са новина; премахнат е нещото, което чупи инструмент, затова се назовава първи и наричаме нещата с истинските им имена.
- Публикуването не може да се отмени; възстановяването - може. Възстанови последното от тази версия е обикновена редакция на главата, затова влиза в стека за отмяна на студиото, а панелът ти предлага Отмени веднага.
Можеш да Publish only, или Publish and make active - разликата е дали инструментите и приложението следват тази версия оттук нататък, или продължават да следват последната ти редакция. Follow the latest again прави всяка редакция активна в момента на нейното извършване. #/start?area=versions отваря панела директно.
Когато брандът е фиксиран
Някои билдове доставят заключен бранд - неговите цветове, шрифтове и токени са тези, които всеки инструмент и експорт използват, и няма нищо за промяна. В този случай студиото се заменя с кратка бележка, обясняваща, че този билд идва с фиксиран бранд и редактирането е изключено. Това е нарочно: така една организация гарантира, че всичко остава в рамките на бранда.
Накъде оттук
- Using Lolly - платното, запазването, проектите и каталогът.
- Design Tokens - моделът на токени, в който е изразен твоят бранд.
- Exporting & formats - печатни единици, CMYK и форматите, в които твоят бранд се рендира.