Brand Studio

Brand Studio na #/start je jediné místo, kde tvaruješ svou značku - její loga, barvy, písmo, zbytek tvých tokenů a soubory, které si drží. Nastav to tady jednou a každý nástroj, stránka i export se tím řídí konstrukčně, ne díky kontrole.

Změny se náhledově zobrazují živě napříč celou aplikací, jak je provádíš, takže vidíš, jak barva nebo font dopadne všude, ještě než to potvrdíš. Vše běží na zařízení: tvé soubory značky a tokeny nikdy neopustí tvůj počítač (výběr Google Fontu stáhne od Googlu jednou tu jednu rodinu, po souhlasném dialogu), a značka cestuje v jediném souboru balíčku značky.

Tohle je editor. Dashboard je zrcadlo. Karta Design systém na Dashboardu (#/d) tvou značku zobrazuje jen pro čtení; upravuješ ji tady na #/start. Pokud chceš později změnit barvu, vrať se do Brand Studia.

Místnosti

Studio je sada místností vypsaných v postranní liště - ne kroků. Nic není očíslované, nic není podmíněné ničím jiným a přijít do kterékoli z nich je v pořádku:

Na telefonu se stejný seznam mění na vodorovný pás štítků připnutý pod záhlavím. Přepnutí místnosti nic nenačítá znovu - editor si drží všechny své panely připojené a jednoduše zobrazí ten, který sis vyžádal.

Odkaž přímo na místnost pomocí #/start?area=<key>. Klíče jsou overview, color (všimni si americké varianty v URL), type, logos, tokens, catalogue (místnost Soubory - klíč panelu je trvalý závazek, takže URL si ponechává starý název) a versions. ?tab= je dlouhodobě zavedený alias pro totéž a stále funguje, takže staré odkazy a záložky zůstávají funkční; cokoli nerozpoznaného otevře Overview místo toho, aby skončilo naprázdno.

K patě lišty jsou připnuté akce, které patří celému designovému systému, ne jedné místnosti:

Lišta místností studia - Overview, Colours, Type, Logos, Tokens a Filessigned by Lollyvector SVGOvěř si to sámGet the signed file20 paths~1.1k nodes37 groups19 KBLišta místností studia - Overview, Colours, Type, Logos, Tokens a Filessigned by Lollyvector SVGOvěř si to sámGet the signed file20 paths~1.1k nodes37 groups19 KBTry it in the app

Overview

Overview je místnost, ve které přistaneš, a má dvě tváře.

Když ještě nic není nastaveno, nabízí dvoje dveře - Start from a file (design tokeny, projekt Penpot, balíček designového systému nebo SVG) a Start from scratch (přidej jednu barvu, pak pokračuj, kdy budeš chtít) - a tichý východ Explore the tools pod nimi, protože i odejít je legitimní odpověď.

Jakmile designový systém existuje, tatáž místnost ukáže co máš: paletu a počet jejích barev, aktivní typové rodiny, kolik slotů na loga je vyplněných, kolik je tokenů a místnost Files. Každý blok je dveřmi do své místnosti. Jsou tu počty, nikdy ne ukazatel průběhu a nikdy ne dokončovací karta - v tomto studiu nic není dlužné.

Logos

Začni tím, že vysypeš svou složku se značkami do zóny pro přetažení nahoře: "Drop marks here, or choose several at once" přijme tolik souborů, kolik jich máš, najednou. Každý soubor se prohlédne kvůli tvaru a barvě a pak se zařadí pod Waiting for a slot jako čip, který říká, co si myslí - "Looks like the Horizontal primary", s mírou, ze které vycházel, a tlačítkem Place (Replace, tam, kde je daný slot už vyplněný). Tam, kde si není jistý, to čip otevřeně řekne a místo toho nabídne Change slot, které vypíše všech osm.

Kolem té fronty se dějí dvě věci. Značka s přebytečným prázdným okrajem dostane nejdřív nabídku oříznutí - odpověz na ni nebo stiskni Escape a původní soubor se vloží beze změny. A tam, kde značka může zásobit prázdný sourozenecký slot, místnost nabídne odvozenou verzi mono nebo reverse jako vlastní čip, označený Generated, který zase zmizí, pokud ten slot vyplníš jinak.

Pod tím sedí mřížka, ve které každá značka skončí - sloty orientace × zpracování:

To je osm volitelných slotů. Klikni na slot pro přidání PNG, SVG, JPEG nebo WebP; klikni na vyplněný slot pro jeho nahrazení. Každý slot je volitelný a všechno zůstává na tomto zařízení.

Matice log - každá orientace napříč nahoře, každé zpracování jako vlastní přerušovaný slot, všechny volitelnésigned by Lollyvector SVGOvěř si to sámGet the signed file8 paths~4.8k nodes19 groups54 KBMatice log - každá orientace napříč nahoře, každé zpracování jako vlastní přerušovaný slot, všechny volitelnésigned by Lollyvector SVGOvěř si to sámGet the signed file8 paths~4.8k nodes19 groups54 KB

Colours

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 SVGOvěř si to sámGet 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 SVGOvěř si to sámGet the signed file114 paths~26k nodes149 groups4 images523 KB

Nejbohatší místnost, ve dvou panelech. Levý je tam, kde pracuješ; pravý je tvá živá paleta. Přetáhni oddělovač mezi nimi pro změnu velikosti (Enter na něm paletu sbalí z cesty).

Místnost Colours - primární barva odvozuje škály, karty vzorků s kontrastními poměry a živá paletasigned by Lollyvector SVGOvěř si to sámGet the signed file61 paths~9.4k nodes77 groups200 KBMístnost Colours - primární barva odvozuje škály, karty vzorků s kontrastními poměry a živá paletasigned by Lollyvector SVGOvěř si to sámGet the signed file61 paths~9.4k nodes77 groups200 KB

Přidej barvu, pak jí dej úkol

Add a colour je celá jednoduchá cesta: vlož nebo vyber barvu v jakékoli notaci a stane se přesně jedním tokenem. Nic se z ní neodvozuje, nic se do ní nenavrhuje, nic dalšího se nevyžaduje. Vlož celý seznam barev a každá se stane čipem, který můžeš přidat samostatně.

Roles je vrstva navrch - která barva hraje jakou roli. Role jsou volitelné (designový systém se třemi volnými barvami a bez rolí je naprosto v pořádku), kterýkoli vzorek může roli převzít a odečet kontrastu se měří proti ploše, nejdřív podle APCA.

Expertní křídla

Pod těmi dvěma sedí čtyři sbalené sekce. Otevři tu, kterou chceš; každá je adresovatelná přímým odkazem jako #/start?area=color&focus=<wing>:

Jedna barva, celá paleta

Uvnitř Generate a starter palette vyber Primary colour a Lolly vypočítá kompletní paletu - světlé a tmavé plochy, text, akcenty a plné škály odstínů/tónů - pomocí té samé perceptuální barevné matematiky (OKLCH), kterou engine používá všude. Doladění odvození:

Nic v tomto křídle nezapisuje nic do tvého brandu. Je to náhled, živý napříč aplikací, aby sis ho mohl posoudit, až do chvíle, kdy stiskneš Replace palette (níže).

Pod primární barvou uvidíš živé škály Primary / Neutral / Secondary / Blend a karty vzorků Light a Dark, každá se svým vlastním odečtem kontrastu - poměr WCAG s hodnotou APCA Lc vedle něj. Klikni na krok ve škále Neutral nebo Secondary, abys místo odvozeného výchozího nastavení ukotvil daný odstín.

Čtyři škály nastavené nad kartami vzorků light a dark, každá karta nese vlastní kontrastní poměr WCAGsigned by Lollyvector SVGOvěř si to sámGet the signed file25 paths~4.6k nodes60 groups57 KBČtyři škály nastavené nad kartami vzorků light a dark, každá karta nese vlastní kontrastní poměr WCAGsigned by Lollyvector SVGOvěř si to sámGet the signed file25 paths~4.6k nodes60 groups57 KB

Sestav si paletu (generátor harmonie)

Pořád ve stejném křídle Build your palette generuje odpovídající akcentové barvy z tvé primární. Vyber Harmony - Complementary, Adjacent, Triad, Tetrad nebo Analogous (což s sebou nese vlastní počet Accents, 2 až 5, a úhel Angle od 10° do 45°) - a každý kandidát přichází s automaticky vygenerovaným čitelným názvem a tlačítkem + Add. Přidáním se daná barva okamžitě dostane do tvé palety, jedno stisknutí na jeden token. "Your palette, applied" předvádí náhled celé sady na reálné grafice.

Vygenerované akcenty, každý se vzorkem, automaticky vygenerovaným názvem, svým hex kódem a tlačítkem Addsigned by Lollyvector SVGOvěř si to sámGet the signed file8 paths936 nodes14 groups15 KBVygenerované akcenty, každý se vzorkem, automaticky vygenerovaným názvem, svým hex kódem a tlačítkem Addsigned by Lollyvector SVGOvěř si to sámGet the signed file8 paths936 nodes14 groups15 KB

Potvrzení vygenerované palety

Replace palette je jediný ovládací prvek v tomto křídle, který cokoli zapisuje, a nikdy to nezapíše hned. Stiskni ho a nejdřív se otevře kontrolní karta s nadpisem "Replace the palette?", která vyjmenuje přesně to, co se chystá stát: kolik rolí zůstává tak, jak jsi je přiřadil, kolik barev, které jsi přidal sám, se ponechá, kolik křivek odstínů se znovu ukotví, kolik tiskových uzamčení se znovu připne, kolik skrytých odstínů zůstane skrytých, kolik zastávek přechodu si podrží svou barvu.

Replace palette na této kartě to potvrdí; Cancel odejde a nic nezmění. Jakmile proběhne, karta se změní na "Palette replaced." s tlačítkem Undo, které je už rovnou zaměřené - a kontrolní bod celého designového systému se pořídí před výměnou, takže "vrátit to tak, jak to bylo" je obnova, ne ztracené odpoledne.

Paleta, graf a jednotlivé vzorky

Pravý panel vypisuje každou barvu, kterou tvůj brand nese, seskupenou (Primary, Neutral, Secondary, Spectrum, Custom, Roles), přičemž každou skupinu lze sbalit a má vlastní + Add. Pod ním se Colour chart rozbalí na dva pohledy na tytéž vzorky: Wheel (kolo OKLCH - přetažením bodu ho přebarvíš, kliknutím na bod ho upravíš nebo kliknutím na prázdné místo přidáš nový vzorek) a graf Gamut, který ukazuje, kde zobrazitelný rozsah skutečně končí. #/start?area=color&focus=chart otevře kartu přímo, stejně jako to vždy dělá ?wheel.

Panel palety, každá skupina sbalitelná, s pilulkou pro stažení zaparkovanou na jejím dolním okrajisigned by Lollyvector SVGOvěř si to sámGet the signed file155 paths~14k nodes199 groups1 image191 KBPanel palety, každá skupina sbalitelná, s pilulkou pro stažení zaparkovanou na jejím dolním okrajisigned by Lollyvector SVGOvěř si to sámGet the signed file155 paths~14k nodes199 groups1 image191 KB

Kolo OKLCH - úhel je odstín, vzdálenost od středu je sytost a šedé odstíny jedou po dráze jasu na okrajisigned by Lollyvector SVGOvěř si to sámGet the signed file274 paths~3.7k nodes67 groups83 KBKolo OKLCH - úhel je odstín, vzdálenost od středu je sytost a šedé odstíny jedou po dráze jasu na okrajisigned by Lollyvector SVGOvěř si to sámGet the signed file274 paths~3.7k nodes67 groups83 KB

Kliknutím na kterýkoli vzorník otevřeš jeho editor:

Tyto zámky tisku používá tiskárna při exportu CMYK PDF nebo TIFF - viz Export.

Odstranění vzorníku je bezpečné: odvozené kroky rampy a role motivu se pouze skryjí (podkladový token se dál rozřeší, takže se nic po proudu nerozbije), zatímco barvy, které jsi přidal sám, se odstraní úplně.

Přechody

Volitelný panel Přechody staví z tvé palety blend tokeny pro pozadí a akcenty. Pokud tvá značka přechody nepoužívá, klidně ho přeskoč. Každý přechod má náhled, pojmenované body (2-8) a úhel. Klíčové chování: bod odkazuje na vzorník, takže když přebarvíš daný vzorník, přechod ho následuje. Interpolace probíhá v OKLCH kvůli čistým přechodům. Odstraněním bodu run zkrátíš.

Vezmi paletu jinam

Plovoucí pilulka zaparkovaná na spodním okraji panelu palety stáhne celou paletu jako Design tokeny (JSON), CSS proměnné, CSS třídy, SCSS proměnné, paletu GIMP (.gpl) nebo Adobe Swatch Exchange (.ase) - takže značka rovnou zapadne do Illustratoru, Figmy, GIMPu nebo stylopisu. Sedí mimo posuvník panelu, takže si drží místo bez ohledu na to, jak daleko se paleta posune. (Paletu můžeš stáhnout i z pohledu Katalog.)

Typ

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 SVGOvěř si to sámGet 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 SVGOvěř si to sámGet the signed file74 paths~11k nodes99 groups234 KB

Místnost vede se čtyřmi kartami rolí - čtyřmi tvářemi, které aplikace, tvé nástroje a každý export skutečně čtou. Každá karta ukazuje, co danou roli aktuálně obsluhuje, nastavené v daném řezu, s řádkem skutečného textu pod tím:

Nadpisy, kód a kurzíva se každý vrátí k primárnímu, dokud je nepřiřadíš, takže značka s jedním fontem tu nepotřebuje žádná rozhodnutí. Nic na kartě nic nezavazuje: Změnit (nebo Vybrat řez u prázdné role) otevře srovnávací scénu omezenou na danou roli.

Místnost Typ - karty rolí a živý vzorek každého řezu při prácisigned by Lollyvector SVGOvěř si to sámGet the signed file59 paths~9.3k nodes73 groups196 KBMístnost Typ - karty rolí a živý vzorek každého řezu při prácisigned by Lollyvector SVGOvěř si to sámGet the signed file59 paths~9.3k nodes73 groups196 KB

Srovnávací scéna

Scéna se otevře přímo v místnosti, ne v dialogu, takže karty, ze kterých jsi přišel, zůstanou na obrazovce. Vyhledej rodinu z Google Fonts (Inter, Fraunces, Space Grotesk…) nebo přetáhni soubor s fontem, stiskni Přidat do srovnání a kandidáti stojí vedle sebe ve stejných slovech dřív, než se kterýkoli z nich nainstaluje. Escape zruší akci a vrátí klávesnici kartě, ze které jsi scénu otevřel.

To jsou jediné dveře dovnitř, a proto se do tvé značky nic nedostane bez povšimnutí. Pod pódiem sedí dva správní panely:

Ať tak či onak, řez zůstává v tomto zařízení, vykresluje se v aplikaci, ve tvých nástrojích i v každém exportu, offline navždy a cestuje s tvým balíčkem značky - při vykreslování se nic nestahuje. Vše na Google Fonts se dodává pod otevřenou licencí (OFL/Apache/UFL).

Panel Role typu v patě ukazuje živý vzorek každé role - tělo a UI v primárním, volitelný display řez pro horní nadpisy, kurzívu pro zdůraznění, mono pro kód a data - takže vidíš celou sadu, jak funguje pohromadě.

Vzorek Rolí typu - nadpis, tělo, kurzíva a kód, každý sazen v řezu, na který se daná role rozřeší, s názvem řezu vedlesigned by Lollyvector SVGOvěř si to sámGet the signed file17 paths~5.6k nodes29 groups68 KBVzorek Rolí typu - nadpis, tělo, kurzíva a kód, každý sazen v řezu, na který se daná role rozřeší, s názvem řezu vedlesigned by Lollyvector SVGOvěř si to sámGet the signed file17 paths~5.6k nodes29 groups68 KB

Tokeny

Zbytek designového systému, upravitelný bez zásahu do kódu:

Místnost Tokeny - posuvník rádiusu rohů plus rozestupy, velikosti, stíny a zbytek systémusigned by Lollyvector SVGOvěř si to sámGet the signed file73 paths~14k nodes95 groups1 image292 KBMístnost Tokeny - posuvník rádiusu rohů plus rozestupy, velikosti, stíny a zbytek systémusigned by Lollyvector SVGOvěř si to sámGet the signed file73 paths~14k nodes95 groups1 image292 KB

Soubory

Sem odlož soubory, které tvá značka uchovává - kromě log: vektorové, obrazové, zvukové a pohyblivé (video, Lottie, animované) prostředky. Přistanou v tvém Katalogu, setříděné do sekcí a připravené ve výběru prostředků každého nástroje. Vše zůstává v tomto zařízení. (Lišta pojmenovává místnost Soubory; klíč URL zůstává catalogue, protože klíč panelu je trvalý závazek.)

Přines vlastní značku

Přidat z… v patě lišty otevře dvoufázový výběr. První fáze se ptá, co máš, ne jaký je to formát:

Vyber zdroj se souborem designu a druhá fáze je karta níže: přijímané formáty vedou jako ikonové dlaždice v pořadí preferencí a celá karta je jeden cíl přetažení - klikni kamkoli na ni nebo na ni přetáhni soubor. Soubor můžeš přetáhnout i přímo na studio.

Karta importu - přijímané formáty vedou jako ikonové dlaždice a celá karta je jeden cíl přetaženísigned by Lollyvector SVGOvěř si to sámGet the signed file19 paths~3.2k nodes35 groups2 images175 KBKarta importu - přijímané formáty vedou jako ikonové dlaždice a celá karta je jeden cíl přetaženísigned by Lollyvector SVGOvěř si to sámGet the signed file19 paths~3.2k nodes35 groups2 images175 KB

Co ti dá každý soubor s designem:

Instalace ze zdroje si nejdřív udělá kontrolní bod, takže "vrátit se před import" je jedno obnovení. A to, co skenování najde, nejde rovnou dovnitř: kandidáti přistanou v Přihrádce, kde se každý přidává vlastním stiskem, přes místnost, které daný druh materiálu patří.

#/start?source=<kind> otevře výběr na daném zdroji (file, pdf, image, font, url) a ?import ho otevře na obyčejném seznamu.

Přenes značku mezi zařízeními

Export v patě lišty zapíše jeden LollyBrand-…zip - tvé tokeny, fonty, loga a preferenci motivu, s manifestem integrity, který se ověří při zpětném vložení. Vedle toho Tokeny (.json) zapíše samostatně obyčejný dokument s design tokeny: žádné fonty, žádná loga, jen tokeny, což je to, co skutečně čte repozitář, krok CI nebo jiný nástroj na tokeny.

Vrátit jeden zpátky se dělá přes Přidat z… → Design tokeny nebo soubor s designem (výše), nebo přetažením na studio. Takhle ti kolega předá značku, nebo takhle ji přeneseš na druhou instalaci - žádný účet, žádný cloud. Pro přinesení značky z příkazové řádky viz ingest:brand.

Verze

Versions v patě lišty je místo, kde designový systém přestává být pohyblivým cílem. Publikuj jednu a dostaneš trvalou, pojmenovanou kopii uloženou na tomto zařízení: potom už se nikdy nezmění, takže nástroj, který ji připíná, dál kreslí to samé. Panel zůstává skrytý, dokud není co vlastního publikovat, takže studio, které nikdy nepublikuje, tyto ovládací prvky nikdy nevidí.

Tři věci, které stojí za to vědět předtím, než na cokoliv klikneš - a panel je uvádí všechny tři před stiskem, ne až po něm:

Můžeš zvolit Publish only, nebo Publish and make active - rozdíl je v tom, zda nástroje a aplikace od teď sledují danou verzi, nebo zůstávají u tvé nejnovější úpravy. Follow the latest again dá každou úpravu naživo v okamžiku, kdy vznikne. #/start?area=versions otevře panel přímo.

Když je brand pevně daný

Některé buildy dodávají uzamčený brand - jeho barvy, fonty a tokeny jsou to, co používá každý nástroj i export, a není co měnit. V tom případě je studio nahrazeno krátkou poznámkou, že tento build je dodán s pevným brandem a úpravy jsou vypnuté. Je to záměr: takhle si organizace zaručí, že vše zůstane on-brand.

Kam dál