Brand Studio

Brand Studio#/start er det ene stedet du former merkevaren din - logoene, fargene, typografien, resten av tokenene og filene den holder på. Sett det opp her én gang, så følger hvert verktøy, hver side og hver eksport det ved konstruksjon, ikke ved gjennomgang.

Endringer forhåndsvises live i hele appen mens du gjør dem, slik at du kan se en farge eller en font slå inn overalt før du bekrefter den. Alt skjer på enheten: merkevarefilene og tokenene dine forlater aldri maskinen din (å velge en Google-font henter den ene familien fra Google, én gang, etter en samtykkedialog), og merkevaren reiser i én enkelt merkevarepakke-fil.

Dette er redigeringsverktøyet. Dashbordet er speilet. Fanen Designsystem på dashbordet (#/d) viser merkevaren din skrivebeskyttet; du redigerer den her på #/start. Vil du endre en farge senere, kom tilbake til Brand Studio.

Rommene

Studioet er et sett med rom listet i en skinne nedover siden - ikke trinn. Ingenting er nummerert, ingenting er sperret av noe annet, og å komme til hvilket som helst av dem er like legitimt:

På en telefon blir den samme listen en horisontal chip-stripe festet under toppteksten. Å bytte rom laster aldri noe på nytt - redigeringsverktøyet holder alle panelene sine montert og viser rett og slett bare det du ba om.

Dyplenk til et rom med #/start?area=<key>. Nøklene er overview, color (merk den amerikanske stavemåten i URL-en), type, logos, tokens, catalogue (rommet Filer - panelnøkkelen er en permanent kontrakt, så URL-en beholder det gamle navnet) og versions. ?tab= er det etablerte aliaset for det samme og løses fortsatt opp, så gamle lenker og bokmerker fortsetter å virke; alt ukjent åpner Oversikt i stedet for å ende blindt.

Festet til bunnen av skinnen er handlingene som hører til hele designsystemet, ikke ett rom:

Skinnen med studiorom - Oversikt, Farger, Type, Logoer, Tokens og Filersigned by Lollyvector SVGSjekk det selvGet the signed file20 paths~1.1k nodes37 groups19 KBSkinnen med studiorom - Oversikt, Farger, Type, Logoer, Tokens og Filersigned by Lollyvector SVGSjekk det selvGet the signed file20 paths~1.1k nodes37 groups19 KBTry it in the app

Oversikt

Oversikt er rommet du lander i, og det har to sider.

Med ingenting satt opp ennå tilbyr det to dører - Start fra en fil (designtokens, et Penpot-prosjekt, en designsystempakke eller en SVG) og Start fra bunnen (legg til én farge, fortsett så videre når du vil) - og en stille utgang Utforsk verktøyene under dem, fordi det å forlate også er et legitimt svar.

Når et designsystem finnes, viser det samme rommet hva du har: paletten og fargeantallet dens, skriftfamiliene i bruk, hvor mange logoplasser som er fylt, hvor mange tokens det er og rommet Filer. Hver blokk er en dør inn til rommet sitt. Det er antall her, aldri en fremdriftslinje og aldri et sluttkort - ingenting i dette studioet skyldes deg.

Logoer

Start med å tømme mappen din av merker inn i slippsonen øverst: «Slipp merker her, eller velg flere samtidig» tar imot så mange filer du har, i én omgang. Hver fil leses for form og farge, og settes deretter i kø under Venter på plass som en chip som sier hva den tror - «Ser ut som Horisontal primær», med målet den bygger på, og en Plasser-knapp (Erstatt, der plassen allerede er fylt). Der den ikke er sikker sier chipen det tydelig og tilbyr Bytt plass i stedet, som lister alle åtte. Ingenting plasseres før du trykker på noe.

To ting skjer rundt den køen. Et merke med overflødig tom marg får et beskjæringstilbud først - svar på det eller trykk Escape, så går originalfilen inn urørt. Og der et merke kan fylle en tom søsterplass, tilbyr rommet den avledede mono- eller omvendt-versjonen som sin egen chip, merket Generert, som forsvinner igjen hvis du fyller den plassen på en annen måte.

Under det ligger rutenettet hvert merke ender opp i - orientering × behandling-plasser:

Det er åtte valgfrie plasser. Klikk en plass for å legge til en PNG, SVG, JPEG eller WebP; klikk en fylt plass for å erstatte den. Hver plass er valgfri, og alt forblir på denne enheten.

Logomatrisen - hver orientering på tvers øverst, hver behandling som sin egen stiplede plass, alle valgfriesigned by Lollyvector SVGSjekk det selvGet the signed file8 paths~4.8k nodes19 groups54 KBLogomatrisen - hver orientering på tvers øverst, hver behandling som sin egen stiplede plass, alle valgfriesigned by Lollyvector SVGSjekk det selvGet the signed file8 paths~4.8k nodes19 groups54 KB

Farger

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 SVGSjekk det selvGet 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 SVGSjekk det selvGet the signed file114 paths~26k nodes149 groups4 images523 KB

Det rikeste rommet, i to felt. Venstre er der du jobber; høyre er din live palett. Dra skillelinjen mellom dem for å endre størrelse (Enter på den slår sammen paletten av veien).

Rommet Farger - en primærfarge avleder skalaer, prøvekort med kontrastforhold og en live palettsigned by Lollyvector SVGSjekk det selvGet the signed file61 paths~9.4k nodes77 groups200 KBRommet Farger - en primærfarge avleder skalaer, prøvekort med kontrastforhold og en live palettsigned by Lollyvector SVGSjekk det selvGet the signed file61 paths~9.4k nodes77 groups200 KB

Legg til en farge, gi den så en jobb

Legg til en farge er hele den enkle veien: lim inn eller velg en farge i hvilken som helst notasjon, og den blir nøyaktig ett token. Ingenting avledes fra den, ingenting foreslås inn i den, ingenting annet kreves. Lim inn en hel liste med farger, og hver blir en chip du kan legge til for seg.

Roller er laget over toppen - hvilken farge som spiller hvilken del. Roller er valgfrie (et designsystem med tre løse farger og ingen roller er et helt godt et), enhver fargeprøve kan ta én, og kontrastavlesningen måles mot underlaget, APCA først.

Ekspertfløyene

Fire sammenfoldede seksjoner ligger under de to. Åpne den du vil ha; hver er dyplenkbar som #/start?area=color&focus=<wing>:

Én farge, en hel palett

Inne i Generer en startpalett velger du en Primærfarge, og Lolly regner ut en komplett palett - lyse og mørke flater, tekst, aksenter og fulle tone-/skyggeskalaer - ved hjelp av den samme perseptuelle fargematematikken (OKLCH) motoren bruker overalt. Juster avledningen:

Ingenting i denne fløyen skriver noe til merkevaren din. Det er en forhåndsvisning, live i hele appen slik at du kan vurdere den, helt til du trykker Erstatt palett (under).

Under primærfargen ser du live Primær-/Nøytral-/Sekundær-/Blande-skalaer og prøvekort for Lys og Mørk, hver med sin egen kontrastavlesning - WCAG-forholdet med APCA-tallet Lc ved siden av. Klikk et trinn i Nøytral- eller Sekundær-skalaen for å forankre den nyansen i stedet for den avledede standarden.

De fire trinnene stablet over lyse og mørke prøvekort, hvert kort med sin egen WCAG-kontrastverdisigned by Lollyvector SVGSjekk det selvGet the signed file25 paths~4.6k nodes60 groups57 KBDe fire trinnene stablet over lyse og mørke prøvekort, hvert kort med sin egen WCAG-kontrastverdisigned by Lollyvector SVGSjekk det selvGet the signed file25 paths~4.6k nodes60 groups57 KB

Bygg paletten din (harmonigenerator)

Fortsatt i samme fløy genererer Bygg paletten din matchende aksentfarger fra primærfargen din. Velg en Harmoni - Komplementær, Tilstøtende, Triade, Tetrade eller Analog (som har sin egen Aksenter-telling, 2 til 5, og en nyanse-Vinkel fra 10° til 45°) - og hver kandidat kommer med et automatisk generert, lesbart navn og en + Legg til-knapp. Å legge til en setter fargen rett inn i paletten din, ett trykk til ett token. «Paletten din, i bruk» forhåndsviser hele settet på ekte grafikk.

Genererte aksenter, hver med en fargeprøve, et automatisk generert navn, sin hex-verdi og en Legg til-knappsigned by Lollyvector SVGSjekk det selvGet the signed file8 paths936 nodes14 groups15 KBGenererte aksenter, hver med en fargeprøve, et automatisk generert navn, sin hex-verdi og en Legg til-knappsigned by Lollyvector SVGSjekk det selvGet the signed file8 paths936 nodes14 groups15 KB

Å ta i bruk en generert palett

Erstatt palett er den eneste kontrollen i denne fløyen som skriver noe, og den skriver aldri med en gang. Trykk på den, og et gjennomgangskort åpnes først, med overskriften «Erstatte paletten?», som lister opp nøyaktig hva som er i ferd med å skje: hvor mange roller beholdes slik du satte dem, hvor mange farger du selv har lagt til beholdes, hvor mange nyansekurver forankres på nytt, hvor mange trykklåser festes på nytt, hvor mange skjulte nyanser forblir skjult, hvor mange gradientstopp beholder fargen sin.

Erstatt palett på det kortet tar det i bruk; Avbryt går bort og endrer ingenting. Når det er kjørt, blir kortet til «Palett erstattet.» med en Angre-knapp som allerede har fokus - og et sjekkpunkt av hele designsystemet tas før byttet, slik at «sett det tilbake slik det var» blir en gjenoppretting i stedet for en tapt ettermiddag.

Paletten, diagrammet og hver fargeprøve

Panelet til høyre lister opp hver farge merkevaren din har, gruppert (Primær, Nøytral, Sekundær, Spektrum, Egendefinert, Roller), og hver gruppe kan foldes sammen med sin egen + Legg til. Under det folder Fargediagram seg ut til to visninger av de samme fargeprøvene: Hjulet (OKLCH-hjulet - dra en prikk for å fargelegge den om, klikk en prikk for å redigere den, eller klikk på tomt område for å slippe en ny fargeprøve) og Fargeromskartet, som viser hvor det visbare området faktisk slutter. #/start?area=color&focus=chart åpner kortet direkte, slik ?wheel alltid har gjort.

Palettpanelet, hver gruppe kan foldes sammen, med nedlastingspillen plassert nederstsigned by Lollyvector SVGSjekk det selvGet the signed file155 paths~14k nodes199 groups1 image191 KBPalettpanelet, hver gruppe kan foldes sammen, med nedlastingspillen plassert nederstsigned by Lollyvector SVGSjekk det selvGet the signed file155 paths~14k nodes199 groups1 image191 KB

OKLCH-hjulet - vinkel er nyanse, avstand ut er metning, og gråtonene følger en lyshetsskinne nedover sidensigned by Lollyvector SVGSjekk det selvGet the signed file274 paths~3.7k nodes67 groups83 KBOKLCH-hjulet - vinkel er nyanse, avstand ut er metning, og gråtonene følger en lyshetsskinne nedover sidensigned by Lollyvector SVGSjekk det selvGet the signed file274 paths~3.7k nodes67 groups83 KB

Klikk på en fargeprøve for å åpne redigeringsverktøyet:

Disse trykklåsene er det et trykkeri bruker når du eksporterer en CMYK-PDF eller -TIFF - se Eksportering.

Å slette en fargeprøve er trygt: avledede trinn i fargeskalaen og temaroller blir skjult (det underliggende tokenet fortsetter å løses opp, så ingenting lenger nede går i stykker), mens farger du selv har lagt til fjernes helt.

Gradienter

Et valgfritt Gradienter-panel bygger blandingstokens fra paletten din for bakgrunner og aksenter. Hopp over det helt hvis merkevaren din ikke bruker gradienter. Hver gradient har en forhåndsvisning, navngitte stopp (2-8) og en vinkel. Nøkkeloppførselen: et stopp refererer til en fargeprøve, så fargelegg den fargeprøven om, og gradienten følger med. Interpolasjonen skjer i OKLCH for rene overganger. Slett et stopp for å korte ned forløpet.

Ta paletten med deg

Den flytende pillen plassert nederst på palettpanelet laster ned hele paletten som Designtokens (JSON), CSS-variabler, CSS-klasser, SCSS-variabler, en GIMP-palett (.gpl) eller en Adobe Swatch Exchange (.ase) - slik at merkevaren går rett inn i Illustrator, Figma, GIMP eller et stilark. Den ligger utenfor panelets rullefelt, så den beholder plassen sin uansett hvor langt paletten rulles. (Du kan også laste ned paletten fra Katalog-visningen.)

Skrift

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 SVGSjekk det selvGet 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 SVGSjekk det selvGet the signed file74 paths~11k nodes99 groups234 KB

Rommet ledes av fire rollekort - de fire skriftene appen, verktøyene dine og all eksport faktisk leser. Hvert kort viser hva som tjener den rollen akkurat nå, satt i den skriften, med en linje ekte tekst under:

Overskrifter, kode og kursiv faller hver tilbake til primærskriften til du tildeler dem, så en merkevare med én skrift trenger ingen valg her i det hele tatt. Ingenting på et kort tar noe i bruk med en gang: Endre (eller Velg en skrift på en tom rolle) åpner sammenligningsstadiet avgrenset til den rollen.

Skrift-rommet - rollekortene og et levende eksempel på hver skrift i arbeidsigned by Lollyvector SVGSjekk det selvGet the signed file59 paths~9.3k nodes73 groups196 KBSkrift-rommet - rollekortene og et levende eksempel på hver skrift i arbeidsigned by Lollyvector SVGSjekk det selvGet the signed file59 paths~9.3k nodes73 groups196 KB

Sammenligningsstadiet

Stadiet åpnes inline i rommet, ikke i en dialogboks, slik at kortene du kom fra blir stående på skjermen. Søk i en Google Fonts-familie (Inter, Fraunces, Space Grotesk...) eller slipp en skriftfil, trykk Legg til i sammenligningen, og kandidatene stilles side om side i de samme ordene før noen av dem installeres. Escape avbryter og gir tastaturet tilbake til kortet du åpnet det fra.

Det er den ene døren inn, og det er derfor ingenting kommer inn i merkevaren din usett. Under scenen ligger de to administrasjonspanelene:

Uansett hvilken vei blir skriften værende på denne enheten, tegnes i appen, i verktøyene dine og i all eksport, offline for alltid, og reiser med merkevarepakken din - ingenting hentes ved rendering. Alt på Google Fonts leveres under en åpen lisens (OFL/Apache/UFL).

Skriftroller-panelet nederst viser et levende eksempel på hver rolle - brødtekst og grensesnitt i primærskriften, en valgfri visningsskrift for toppoverskriftene, en kursiv for uthevelse, en fastbreddeskrift for kode og data - slik at du kan se hele settet fungere sammen.

Eksemplet for skriftroller - overskrift, brødtekst, kursiv og kode, hver satt i skriften rollen løses til, med skriftnavnet ved siden avsigned by Lollyvector SVGSjekk det selvGet the signed file17 paths~5.6k nodes29 groups68 KBEksemplet for skriftroller - overskrift, brødtekst, kursiv og kode, hver satt i skriften rollen løses til, med skriftnavnet ved siden avsigned by Lollyvector SVGSjekk det selvGet the signed file17 paths~5.6k nodes29 groups68 KB

Tokens

Resten av designsystemet, redigerbart uten å røre kode:

Tokens-rommet - en glidebryter for hjørneradius pluss avstand, størrelse, skygger og resten av systemetsigned by Lollyvector SVGSjekk det selvGet the signed file73 paths~14k nodes95 groups1 image292 KBTokens-rommet - en glidebryter for hjørneradius pluss avstand, størrelse, skygger og resten av systemetsigned by Lollyvector SVGSjekk det selvGet the signed file73 paths~14k nodes95 groups1 image292 KB

Filer

Slipp filene merkevaren din har - bortsett fra logoer - her: vektor-, bilde-, lyd- og bevegelsesressurser (video, Lottie, animert). De havner i Katalog, sortert i seksjoner og klare i hvert verktøys ressursvelger. Alt forblir på denne enheten. (Menyen kaller rommet Filer; URL-nøkkelen forblir catalogue, fordi en panelnøkkel er en permanent kontrakt.)

Ta inn en merkevare

Legg til fra… nederst i menyen åpner en velger i to trinn. Det første trinnet spør hva du har, ikke hvilket format det er:

Velg designfil-kilden, og andre trinn er kortet nedenfor: de aksepterte formatene ledes an som ikonfliser i foretrukket rekkefølge, og hele kortet er ett sleppmål - klikk hvor som helst på det, eller dra en fil på det. Du kan også slippe en fil rett på studioet.

Importkortet - de aksepterte formatene ledes an som ikonfliser, og hele kortet er ett sleppmålsigned by Lollyvector SVGSjekk det selvGet the signed file19 paths~3.2k nodes35 groups2 images175 KBImportkortet - de aksepterte formatene ledes an som ikonfliser, og hele kortet er ett sleppmålsigned by Lollyvector SVGSjekk det selvGet the signed file19 paths~3.2k nodes35 groups2 images175 KB

Hva hver designfil gir deg:

En kildeinstallasjon tar et sjekkpunkt først, slik at «tilbakestill til før importen» er én gjenoppretting. Og det en skanning finner går ikke rett inn: kandidater havner i Skuffen, hvor hver enkelt legges til med sitt eget trykk, gjennom rommet som eier den typen materiale.

#/start?source=<kind> åpner velgeren på en gitt kilde (file, pdf, image, font, url), og ?import åpner den på den enkle listen.

Flytt en merkevare mellom enheter

Eksporter nederst i menyen skriver én enkelt LollyBrand-…zip - tokensene, skriftene, logoene og temapreferansen din, med et integritetsmanifest den bekrefter når den tas inn igjen. Ved siden av skriver Tokens (.json) det rene designtokens-dokumentet alene: ingen skrifter, ingen logoer, bare tokensene, som er det et repo, et CI-trinn eller et annet tokensverktøy faktisk leser.

Å ta en tilbake inn er Legg til fra… → Designtokens eller en designfil (over), eller dra-og-slipp på studioet. Slik gir en kollega deg en merkevare, eller slik tar du en med til en annen installasjon - ingen konto, ingen sky. For å ta inn en merkevare fra kommandolinjen i stedet, se ingest:brand.

Versjoner

Versjoner nederst på skinnen er der et designsystem slutter å være et bevegelig mål. Publiser én, og du får en permanent, navngitt kopi oppbevart på denne enheten: den endres aldri etterpå, så et verktøy som fester seg til den, fortsetter å tegne det samme. Panelet forblir skjult til det finnes noe eget å publisere, slik at et studio som aldri publiserer, aldri ser kontrollene.

Tre ting å vite før du trykker på noe, og panelet sier alle tre før trykket i stedet for etterpå:

Du kan Bare publisere, eller Publiser og gjør aktiv - forskjellen er om verktøyene og appen følger den versjonen fra nå av eller fortsetter å følge din siste redigering. Følg det siste igjen setter hver redigering live i det den gjøres. #/start?area=versions åpner panelet direkte.

Når merkevaren er fast

Enkelte bygg leveres med en låst merkevare - fargene, fontene og tokens er det alle verktøy og eksporter bruker, og det er ingenting å endre. I så fall erstattes studioet med en kort merknad som forklarer at dette bygget leveres med en fast merkevare og at redigering er avslått. Dette er bevisst: det er slik en organisasjon garanterer at alt holder seg på merke.

Hvor du går videre