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= е дълготраен псевдоним за същото и все още работи, така че старите връзки и отметки продължават да функционират; всичко неразпознато отваря Преглед вместо задънена улица.

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

Лентата на стаите в студиото - Преглед, Цветове, Шрифт, Лога, Токени и Файлове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

Цветове

The Colours room after one colour - the two panes back, the generate offer, roles reading in three registers and the pane at one coloursigned by Lollyvector SVGПровери самGet the signed file114 paths~26k nodes149 groups4 images523 KBThe Colours room after one colour - the two panes back, the generate offer, roles reading in three registers and the pane at one coloursigned 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>:

Един цвят, цяла палитра

В Генерирай начална палитра избери Основен цвят и Lolly извежда пълна палитра - светли и тъмни повърхности, текст, акценти и пълни степени на отсенки/нюанси - като използва същата перцептивна цветова математика (OKLCH), която двигателят използва навсякъде. Настрой извеждането:

Нищо в това крило не записва каквото и да е в бранда ти. Това е преглед, на живо в цялото приложение, за да го прецениш, чак докато не натиснеш Замени палитрата (по-долу).

Под основния цвят ще видиш живи степени Основна / Неутрална / Вторична / Смесена и специмен карти за светла и тъмна тема, всяка с отчет на собствения си контраст - съотношението по WCAG заедно с фигурата Lc по APCA. Кликни стъпка в Неутралната или Вторичната степен, за да фиксираш този нюанс вместо изведения по подразбиране.

Четирите степени, подредени над светли и тъмни примерни карти, всяка карта носеща собствено съотношение на контраста WCAGsigned by Lollyvector SVGПровери самGet the signed file25 paths~4.6k nodes60 groups57 KBЧетирите степени, подредени над светли и тъмни примерни карти, всяка карта носеща собствено съотношение на контраста WCAGsigned 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

OKLCH колелото - ъгълът е нюанс, разстоянието навън е наситеност, а сивите се движат по релса на светлината отстраниsigned by Lollyvector SVGПровери самGet the signed file274 paths~3.7k nodes67 groups83 KBOKLCH колелото - ъгълът е нюанс, разстоянието навън е наситеност, а сивите се движат по релса на светлината отстраниsigned by Lollyvector SVGПровери самGet the signed file274 paths~3.7k nodes67 groups83 KB

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

Тези печатни заключвания са това, което печатницата използва, когато изнесеш CMYK PDF или TIFF - виж Изнасяне.

Изтриването на образец е безопасно: изведените стъпки на степента и ролите на темата се скриват (базовият токен продължава да се разрешава, така че нищо надолу по веригата не се чупи), докато цветовете, които си добавил сам, се премахват изцяло.

Градиенти

Незадължителен панел Градиенти изгражда токени за преливане от твоята палитра за фонове и акценти. Пропусни го изцяло, ако твоят бранд не използва градиенти. Всеки градиент има преглед, именувани спирки (2–8) и ъгъл. Ключовото поведение: спирка сочи към образец, така че пребоядисването на този образец следва в градиента. Интерполацията се извършва в OKLCH за чисти преливания. Изтрий спирка, за да съкратиш поредицата.

Изнеси палитрата другаде

Плаващото хапче, закотвено в долния край на полето с палитрата, изтегля цялата палитра като Дизайн токени (JSON), CSS променливи, CSS класове, SCSS променливи, GIMP палитра (.gpl) или Adobe Swatch Exchange (.ase) - така че брандът пада направо в Illustrator, Figma, GIMP или стилов лист. Той стои извън скролера на панела, така че запазва мястото си независимо колко се скролва палитрата. (Можеш също да изтеглиш палитрата от изгледа Каталог.)

Шрифт

The compare stage open under its card, with the search row, the pinned families and the cards folded to a one-line stripsigned by Lollyvector SVGПровери самGet the signed file74 paths~11k nodes99 groups234 KBThe compare stage open under its card, with the search row, the pinned families and the cards folded to a one-line stripsigned by Lollyvector SVGПровери самGet the signed file74 paths~11k nodes99 groups234 KB

Стаята започва с четири карти на роли - четирите начертания, които приложението, твоите инструменти и всеки износ реално четат. Всяка карта показва какво обслужва тази роля в момента, зададено в това начертание, с ред реален текст под нея:

Заглавията, кодът и курсивът всеки поотделно отпадат към основния, докато не ги зададеш, така че бранд с един шрифт не изисква никакви решения тук. Нищо на карта не потвърждава нещо: Промени (или Избери начертание за празна роля) отваря сцената за сравнение, ограничена до тази роля.

Стаята Шрифт - картите с роли и жив образец на всяко начертание, изпълняващо своята работа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 отменя и връща клавиатурата на картата, от която си я отворил.

Това е единствената врата навътре, затова нищо не влиза в бранда ти незабелязано. Под сцената седят двата панела за управление:

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

Файлове

Пусни тук файловете, които твоят бранд пази - освен логата: векторни, изображение, аудио и движение (видео, Lottie, анимирано) активи. Те попадат в твоя Каталог, сортирани по раздели и готови в селектора на активи на всеки инструмент. Всичко остава на това устройство. (Релсата озаглавява стаята Файлове; ключът в URL остава catalogue, защото ключ на панел е постоянен договор.)

Внеси бранд

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

Избери източника дизайн файл и втората стъпка е картата по-долу: приетите формати водят като плочки с иконки в реда на предпочитание, и цялата карта е една цел за пускане - кликни навсякъде по нея или завлечи файл върху нея. Можеш също да пуснеш файл направо върху студиото.

Картата за внасяне - приетите формати водят като плочки с иконки, а цялата карта е една цел за пускане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

Какво ти дава всеки дизайн файл:

Инсталация от източник взима контролна точка първо, така че "върни се към преди внасянето" е едно възстановяване. И това, което сканирането открива, не влиза направо: кандидатите попадат в Тавата, където всеки се добавя с отделно натискане, през стаята, която притежава този вид материал.

#/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 отваря панела директно.

Когато брандът е фиксиран

Някои билдове доставят заключен бранд - неговите цветове, шрифтове и токени са тези, които всеки инструмент и експорт използват, и няма нищо за промяна. В този случай студиото се заменя с кратка бележка, обясняваща, че този билд идва с фиксиран бранд и редактирането е изключено. Това е нарочно: така една организация гарантира, че всичко остава в рамките на бранда.

Накъде оттук