Varumärkesstudion

Varumärkesstudion#/start är den enda platsen där du formar ditt varumärke - dess loggor, färger, typsnitt, resten av dina tokens och filerna det håller. Ställ in det här en gång så följer varje verktyg, sida och export det per konstruktion, inte genom granskning.

Ändringar förhandsvisas live i hela appen medan du gör dem, så att du kan se en färg eller ett typsnitt landa överallt innan du bekräftar det. Allt sker på enheten: dina varumärkesfiler och tokens lämnar aldrig din dator (att välja ett Google-typsnitt hämtar den familjen från Google, en gång, efter en samtyckesdialog), och varumärket reser i en enda varumärkespaket-fil.

Det här är redigeraren. Instrumentpanelen är spegeln. Fliken Designsystem på instrumentpanelen (#/d) visar ditt varumärke skrivskyddat; du redigerar det här på #/start. Om du vill ändra en färg senare, kom tillbaka till Varumärkesstudion.

Rummen

Studion är en uppsättning rum listade i en rad längs sidan - inte steg. Inget är numrerat, inget är spärrat mot något annat och att komma till vilket som helst av dem är legitimt:

På en telefon blir samma lista en horisontell chipsrad fäst under rubriken. Att byta rum laddar aldrig om något - redigeraren håller alla sina paneler monterade och visar helt enkelt den du bad om.

Djuplänka ett rum med #/start?area=<key>. Nycklarna är overview, color (observera den amerikanska stavningen i URL:en), type, logos, tokens, catalogue (Filer-rummet - panelnyckeln är ett permanent kontrakt, så URL:en behåller det gamla namnet) och versions. ?tab= är det sedan länge etablerade aliaset för samma sak och fungerar fortfarande, så gamla länkar och bokmärken fortsätter att fungera; allt okänt öppnar Översikt i stället för att köra fast.

Fästa vid radens nederkant finns åtgärderna som hör till hela designsystemet snarare än till ett enda rum:

Studions rumsrad - Översikt, Färger, Typsnitt, Loggor, Tokens och Filersigned by Lollyvector SVGKontrollera självGet the signed file20 paths~1.1k nodes37 groups19 KBStudions rumsrad - Översikt, Färger, Typsnitt, Loggor, Tokens och Filersigned by Lollyvector SVGKontrollera självGet the signed file20 paths~1.1k nodes37 groups19 KBTry it in the app

Översikt

Översikt är rummet du landar i, och det har två ansikten.

Med inget uppsatt ännu erbjuder det två dörrar - Börja från en fil (design tokens, ett Penpot-projekt, ett designsystempaket eller en SVG) och Börja från grunden (lägg till en färg, fortsätt sedan när du vill) - och en tyst utgång Utforska verktygen under dem, för att lämna också är ett legitimt svar.

När ett designsystem väl finns visar samma rum vad du har: paletten och dess färgantal, de typsnittsfamiljer som gäller, hur många loggplatser som är fyllda, hur många tokens det finns och Filer-rummet. Varje block är en dörr in i sitt rum. Det finns antal här, aldrig en förloppsindikator och aldrig ett slutkort - inget i den här studion är skyldigt dig något.

Loggor

Börja med att tömma din mapp med märken i släppzonen högst upp: "Släpp märken här, eller välj flera på en gång" tar så många filer du har i en enda omgång. Varje fil läses för sin form och sitt bläck, och köas sedan under Väntar på en plats som ett chip som säger vad den tror - "Ser ut som Horisontell primär", med det mått den gick på, och en knapp Placera (Ersätt, där den platsen redan är fylld). Där den är osäker säger chippet det rakt ut och erbjuder Byt plats i stället, som listar alla åtta. Inget placeras förrän du trycker på något.

Två saker händer runt den kön. Ett märke med överflödig tom marginal får ett beskärningsförslag först - besvara det eller tryck Escape så går originalfilen in orörd. Och där ett märke kan förse en tom syskonplats erbjuder rummet den härledda mono- eller omvänd-versionen som ett eget chip, märkt Genererad, som försvinner igen om du fyller den platsen på ett annat sätt.

Under det finns rutnätet varje märke hamnar i - platser för orientering × behandling:

Det är åtta valfria platser. Klicka på en plats för att lägga till en PNG, SVG, JPEG eller WebP; klicka på en fylld plats för att ersätta den. Varje plats är valfri och allt stannar på den här enheten.

Logomatrisen - varje orientering längs toppen, varje behandling som sin egen streckade plats, alla valfriasigned by Lollyvector SVGKontrollera självGet the signed file8 paths~4.8k nodes19 groups54 KBLogomatrisen - varje orientering längs toppen, varje behandling som sin egen streckade plats, alla valfriasigned by Lollyvector SVGKontrollera självGet the signed file8 paths~4.8k nodes19 groups54 KB

Färger

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 SVGKontrollera självGet 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 SVGKontrollera självGet the signed file114 paths~26k nodes149 groups4 images523 KB

Det rikaste rummet, i två paneler. Den vänstra är där du arbetar; den högra är din levande palett. Dra avdelaren mellan dem för att ändra storlek (Enter på den fäller ihop paletten ur vägen).

Färger-rummet - en primärfärg härleder ramper, provkort med kontrastförhållanden och en levande palettsigned by Lollyvector SVGKontrollera självGet the signed file61 paths~9.4k nodes77 groups200 KBFärger-rummet - en primärfärg härleder ramper, provkort med kontrastförhållanden och en levande palettsigned by Lollyvector SVGKontrollera självGet the signed file61 paths~9.4k nodes77 groups200 KB

Lägg till en färg, ge den sedan ett jobb

Lägg till en färg är hela den enkla vägen: klistra in eller välj en färg i valfri notation så blir den precis en token. Inget härleds från den, inget föreslås in i den, inget annat krävs. Klistra in en hel lista med färger så blir varje en chip du kan lägga till för sig.

Roller är lagret ovanpå - vilken färg som spelar vilken del. Roller är valfria (ett designsystem med tre lösa färger och inga roller är ett fullgott sådant), vilken swatch som helst kan ta en, och kontrastavläsningen mäts mot ytan, APCA först.

Expertflyglarna

Fyra hopfällda avsnitt finns under dessa två. Öppna den du vill; var och en är djuplänkningsbar som #/start?area=color&focus=<wing>:

En färg, en hel palett

Inuti Generera en startpalett, välj en primärfärg så räknar Lolly ut en fullständig palett - ljusa och mörka ytor, text, accenter och fullständiga ton-/nyansramper - med samma perceptuella färgmatematik (OKLCH) som motorn använder överallt. Justera härledningen:

Inget i denna flygel skriver något till ditt varumärke. Det är en förhandsvisning, live i hela appen så att du kan bedöma den, ända fram till du trycker på Ersätt palett (nedan).

Under primärfärgen ser du levande ramper för Primär / Neutral / Sekundär / Blandning och provkort för Ljus och Mörk, var och en med sin egen kontrastavläsning - WCAG-förhållandet med APCA-talet Lc bredvid. Klicka på ett steg i Neutral- eller Sekundär-rampen för att förankra den nyansen i stället för det härledda standardvärdet.

De fyra rampstegen staplade ovanför ljusa och mörka exempelkort, där varje kort har sitt eget WCAG-kontrastförhållandesigned by Lollyvector SVGKontrollera självGet the signed file25 paths~4.6k nodes60 groups57 KBDe fyra rampstegen staplade ovanför ljusa och mörka exempelkort, där varje kort har sitt eget WCAG-kontrastförhållandesigned by Lollyvector SVGKontrollera självGet the signed file25 paths~4.6k nodes60 groups57 KB

Skapa din palett (harmonigenerator)

Fortfarande i samma flygel genererar Build your palette matchande accentfärger utifrån din primärfärg. Välj en Harmony - Complementary, Adjacent, Triad, Tetrad eller Analogous (som har ett eget antal Accents, 2 till 5, och en nyansvinkel, Angle, från 10° till 45°) - och varje kandidat kommer med ett automatiskt genererat, läsbart namn och en + Add-knapp. Att lägga till en placerar den färgen direkt i din palett, ett tryck till en token. "Your palette, applied" förhandsgranskar hela uppsättningen på riktig grafik.

Genererade accenter, var och en med ett färgprov, ett automatgenererat namn, dess hex-kod och en Add-knappsigned by Lollyvector SVGKontrollera självGet the signed file8 paths936 nodes14 groups15 KBGenererade accenter, var och en med ett färgprov, ett automatgenererat namn, dess hex-kod och en Add-knappsigned by Lollyvector SVGKontrollera självGet the signed file8 paths936 nodes14 groups15 KB

Att spara en genererad palett

Replace palette är den enda kontrollen i den här flygeln som faktiskt skriver något, och den skriver aldrig direkt. Tryck på den och ett granskningskort öppnas först, rubricerat "Replace the palette?", som radar upp exakt vad som är på väg att hända: hur många roller som behåller den tilldelning du gjort, hur många färger du själv lagt till som behålls, hur många nyanskurvor som ankras om, hur många trycklås som pinnas om, hur många dolda nyanser som förblir dolda, hur många gradientstopp som behåller sin färg.

Replace palette på det kortet genomför bytet; Cancel avbryter och ändrar ingenting. När det är klart blir kortet till "Palette replaced." med en enda Undo-knapp redan i fokus - och en kontrollpunkt av hela designsystemet tas innan bytet, så att "lägg tillbaka det som det var" blir en återställning i stället för en förlorad eftermiddag.

Paletten, diagrammet och varje färgprov

Den högra panelen listar alla färger ditt varumärke har, grupperade (Primary, Neutral, Secondary, Spectrum, Custom, Roles), där varje grupp kan fällas ihop och har sin egen + Add. Nedanför fälls Colour chart ut till två vyer av samma färgprov: Wheel (OKLCH-hjulet - dra en punkt för att ändra dess färg, klicka på en punkt för att redigera den eller klicka på tomt utrymme för att släppa ett nytt färgprov) och Gamut-diagrammet, som visar var det visningsbara intervallet faktiskt tar slut. #/start?area=color&focus=chart öppnar kortet direkt, precis som ?wheel alltid har gjort.

Färgpaletten, varje grupp fällbar, med nedladdningspillret placerat längs nederkantensigned by Lollyvector SVGKontrollera självGet the signed file155 paths~14k nodes199 groups1 image191 KBFärgpaletten, varje grupp fällbar, med nedladdningspillret placerat längs nederkantensigned by Lollyvector SVGKontrollera självGet the signed file155 paths~14k nodes199 groups1 image191 KB

OKLCH-hjulet - vinkeln är nyans, avståndet ut är mättnad (chroma) och gråtonerna följer en ljushetsskala nedför sidansigned by Lollyvector SVGKontrollera självGet the signed file274 paths~3.7k nodes67 groups83 KBOKLCH-hjulet - vinkeln är nyans, avståndet ut är mättnad (chroma) och gråtonerna följer en ljushetsskala nedför sidansigned by Lollyvector SVGKontrollera självGet the signed file274 paths~3.7k nodes67 groups83 KB

Klicka på valfritt färgprov för att öppna dess redigerare:

Dessa trycklås är det ett tryckeri använder när du exporterar en CMYK-PDF eller TIFF - se Exportera.

Deleting a swatch är säkert: härledda rampsteg och temaroller döljs (den underliggande token fortsätter att slå upp värdet, så inget längre fram går sönder), medan färger du själv lagt till tas bort helt.

Gradienter

En valfri Gradients-panel bygger övertoningstoken från din palett för bakgrunder och accenter. Hoppa över den helt om ditt varumärke inte använder gradienter. Varje gradient har en förhandsgranskning, namngivna stopp (2–8) och en vinkel. Det viktiga beteendet: ett stopp refererar till ett färgprov, så byter du färg på det färgprovet följer gradienten med. Interpolationen sker i OKLCH för rena övertoningar. Ta bort ett stopp för att korta serien.

Ta med paletten någon annanstans

Pillret som flyter längs nederkanten av palettpanelen laddar ner hela paletten som Design tokens (JSON), CSS variables, CSS classes, SCSS variables, en GIMP palette (.gpl) eller en Adobe Swatch Exchange (.ase) - så att varumärket går rakt in i Illustrator, Figma, GIMP eller ett stilmallsdokument. Det ligger utanför panelens rullningslist, så det behåller sin plats oavsett hur långt paletten rullas. (Du kan också ladda ner paletten från vyn Catalogue.)

Typsnitt

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 SVGKontrollera självGet 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 SVGKontrollera självGet the signed file74 paths~11k nodes99 groups234 KB

Rummet inleds med fyra rollkort - de fyra typsnitt som appen, dina verktyg och varje export faktiskt läser av. Varje kort visar vad som just nu fyller den rollen, satt i det typsnittet, med en rad riktig text under:

Headings, code och italic faller alla tillbaka på primary tills du tilldelar dem, så ett varumärke med ett enda typsnitt behöver inte fatta några beslut här alls. Inget på ett kort genomför något: Change (eller Choose a face på en tom roll) öppnar jämförelsevyn, avgränsad till den rollen.

Typsnittsrummet - rollkorten och ett levande exempel på varje typsnitt i arbetesigned by Lollyvector SVGKontrollera självGet the signed file59 paths~9.3k nodes73 groups196 KBTypsnittsrummet - rollkorten och ett levande exempel på varje typsnitt i arbetesigned by Lollyvector SVGKontrollera självGet the signed file59 paths~9.3k nodes73 groups196 KB

Jämförelsevyn

Vyn öppnas inline i rummet, inte i en dialogruta, så att korten du kom ifrån ligger kvar på skärmen. Sök efter en Google Fonts-familj (Inter, Fraunces, Space Grotesk…) eller släpp en typsnittsfil, tryck på Add to the comparison och kandidaterna ställs sida vid sida i samma ord innan något av dem installeras. Escape avbryter och lämnar tillbaka tangentbordsfokus till kortet du öppnade det från.

Det är den enda dörren in, vilket är varför inget kommer in i ditt varumärke osett. Under scenen sitter de två hanteringspanelerna:

Oavsett vilket stannar typsnittet på den här enheten, renderas i appen, i dina verktyg och i varje export, offline för alltid, och följer med i ditt varumärkespaket - inget hämtas vid renderingstillfället. Allt på Google Fonts levereras under en öppen licens (OFL/Apache/UFL).

Type roles-panelen längst ner visar ett levande exempel för varje roll - brödtext och gränssnitt i primary, ett valfritt visningstypsnitt för de översta rubrikerna, en kursiv för betoning, ett typsnitt med fast breddsteg för kod och data - så att du kan se hela uppsättningen fungera tillsammans.

Type roles-exemplet - rubrik, brödtext, kursiv och kod, var och en satt i det typsnitt rollen slår upp, med typsnittets namn bredvidsigned by Lollyvector SVGKontrollera självGet the signed file17 paths~5.6k nodes29 groups68 KBType roles-exemplet - rubrik, brödtext, kursiv och kod, var och en satt i det typsnitt rollen slår upp, med typsnittets namn bredvidsigned by Lollyvector SVGKontrollera självGet the signed file17 paths~5.6k nodes29 groups68 KB

Tokens

Resten av designsystemet, redigerbart utan att röra kod:

Tokens-rummet - ett reglage för hörnradie plus spacing, sizing, shadows och resten av systemetsigned by Lollyvector SVGKontrollera självGet the signed file73 paths~14k nodes95 groups1 image292 KBTokens-rummet - ett reglage för hörnradie plus spacing, sizing, shadows och resten av systemetsigned by Lollyvector SVGKontrollera självGet the signed file73 paths~14k nodes95 groups1 image292 KB

Files

Släpp filerna ditt varumärke sparar - bortsett från loggor - här: vector, image, audio och motion (video, Lottie, animerat) tillgångar. De hamnar i din Catalogue, sorterade i sektioner och redo i varje verktygs tillgångsväljare. Allt stannar på den här enheten. (Menyraden märker rummet Files; URL-nyckeln förblir catalogue, eftersom en panelnyckel är ett permanent kontrakt.)

Ta in ett varumärke

Add from… längst ner i menyraden öppnar en tvåstegsväljare. Det första steget frågar vad du har, inte vilket format det är:

Väljer du designfilskällan är det andra steget kortet nedan: de godkända formaten leder som ikonplattor i prioritetsordning, och hela kortet är ett enda släppmål - klicka var som helst på det eller dra en fil till det. Du kan också släppa en fil direkt på studion.

Importkortet - de godkända formaten leder som ikonplattor, och hela kortet är ett enda släppmålsigned by Lollyvector SVGKontrollera självGet the signed file19 paths~3.2k nodes35 groups2 images175 KBImportkortet - de godkända formaten leder som ikonplattor, och hela kortet är ett enda släppmålsigned by Lollyvector SVGKontrollera självGet the signed file19 paths~3.2k nodes35 groups2 images175 KB

Vad varje designfil ger dig:

En källinstallation tar en kontrollpunkt först, så "återgå till innan importen" blir en enda återställning. Och det en skanning hittar går inte rakt in: kandidater hamnar i Tray, där var och en läggs till med ett eget tryck, genom det rum som äger den typen av material.

#/start?source=<kind> öppnar väljaren på en given källa (file, pdf, image, font, url), och ?import öppnar den på den vanliga listan.

Flytta ett varumärke mellan enheter

Export längst ner i menyraden skriver en enda LollyBrand-…zip - dina token, typsnitt, loggor och temainställning, med ett integritetsmanifest som verifieras när den kommer tillbaka in. Bredvid den skriver Tokens (.json) det enkla design-tokens-dokumentet för sig själv: inga typsnitt, inga loggor, bara token, vilket är det ett repo, ett CI-steg eller ett annat tokenverktyg faktiskt läser.

Att ta tillbaka en sker via Add from… → Design tokens or a design file (ovan), eller genom att dra och släppa på studion. Så är det en kollega ger dig ett varumärke, eller hur du tar med ett till en andra installation - inget konto, inget moln. För att ta in ett varumärke från kommandoraden i stället, se ingest:brand.

Versioner

Versioner längst ner i listen är där ett designsystem slutar vara ett rörligt mål. Publicera en och du får en permanent, namngiven kopia som sparas på den här enheten: den ändras aldrig efteråt, så ett verktyg som fäster den fortsätter rita samma sak. Panelen förblir dold tills det finns något eget att publicera, så en studio som aldrig publicerar ser aldrig kontrollerna.

Tre saker att veta innan du trycker på något, och panelen säger alla tre före tryckningen snarare än efter:

Du kan Publish only, eller Publish and make active - skillnaden är om verktyg och appen följer den versionen från och med nu eller fortsätter följa din senaste redigering. Follow the latest again gör varje redigering live i samma stund den görs. #/start?area=versions öppnar panelen direkt.

När varumärket är låst

Vissa builds levereras med ett låst varumärke - dess färger, typsnitt och tokens är vad varje verktyg och export använder, och det finns inget att ändra. I det fallet ersätts studion med en kort notis som förklarar att den här byggnaden levereras med ett fast varumärke och att redigering är avstängd. Detta är avsiktligt: det är så en organisation garanterar att allt förblir on-brand.

Vart du ska gå härnäst