Svelte: Limitations and guidelines on using the Svelte logo and publishing a fork of svelte.dev

Created on 24 Jul 2020  路  6Comments  路  Source: sveltejs/svelte

I cannot find any offical guidelines on using the Svelte logo as well as forking and publishing the svelte.dev website.
Are there any?

Why I'm asking:

I have recently published svelthree, a Svelte components library utilizing three.js. I've forked svelte.dev for svelthree.dev, so it does look pretty similar to svelte.dev, even though I've made some changes.

The Logo

svelthree-logo_too_similar_deprecated

I took the official Svelte logo, inverted the colors and added a black outline which should kind of associate the link to three.js, which actually has no official logo, but they do use the black triangle on Twitter, it just doesn't seem to be very offical. Beside that I used the three.js font for the logotype, so I have something from Svelte and something from three.js covered.

My questions:

  1. Is Svelte logo usage generally allowed?
  2. Are there some official guidelines concerning Logo-usage? Here sveltejs/branding it's just stated: "Logos etc for Svelte and related projects" and I'm not sure what this exactly means. Does "related projects" mean only official Svelte projects or also third party Svelte related projects?
  3. Am I allowed to use the Svelte logo the way I did it? (which would of course be "no" if 1. is "no")

If you wonder why I didn't just design a completely different logo:

  1. I like the Svelte logo and identify svelthree to at least 50% with the technology itself.
  2. I don't see svelthree qualified enough for a visually completely detached branding (but may be wrong on this). If you look deeper what svelthree does, I should actually put both logos next to each other (if three.js had an official one).
Svelthree doesn't really invent something new:

"_Svelthree is a  components library for declarative construction of reactive and reusable  scene graphs utilizing three.js source in a slightly modified version._"

It's basically Svelte + three.js or three.js + Svelte + "a bit" a of my custom logic on top. That's why I personally don't have any issues with not being "more special", although I'm generally a creative person with a strong impulse to be original.

  1. Good logo design is not easy and takes a lot of time and I've invested that time in developing the library instead.

The Website Design

svelthree_too_similar

I like the svelte.dev website, especially it's reduced, not distracting design and of course REPL. I actually need a website just like that, where I can publish interactive usage examples and let people do some experiments or just try svelthree before starting a project. I was sure the svelte.dev website was open source, but I'm not sure anymore (?):

  1. Is the svelte.dev website really open source?

    • The "svelte" sub folder doesn't contain a LICENCE only the parent "svelte" folder

    • The README.md file describes running the website locally, but not deploying it, nevertheless there's all you need to deploy it by yourself. Everything I did / changed is public and MIT:

      svelthree-website

      svelthree-site-kit

Svelte discord feedback

I've asked for some feedback in the Svelte discord concerning the looks of svelthree.dev and after a while got a pretty clear answer that several (many? most? all?) maintainers don't like this being done like I did, and that the website doesn't differentiate enough from svelte.dev, so I've decided to asap change the logo, further customize the layout, the fonts and the colors in hope it'll then be different enough. Good that I've first asked! 馃槵

Proposal (if no guidelines yet exist)

  1. Adding clear official guidelines concerning Svelte logo usage.
  2. Adding clear official guidelines (licence?) concerning forking the svelte.dev website. If it is allowed to fork it, especially concerning the design of the website and the extent of visual modifications that have to be applied on the fork before publishing.

Thank you!

All 6 comments

I think the overarching principle here is that any site should look visually distinctive enough from the Svelte site that it won't confuse people into thinking that it's an official Svelte project run by the Svelte maintainers.

If I went to your site before having read this ticket I could very well find myself thinking that it was an official Svelte project due to the substantial similarities between the sites.

Open source licenses generally give the right to utilize code without facing claims for copyright infringement. They do not grant the usage of trademarks. E.g. I can copy every line of code of the Kubernetes project, but can only use their logo in accordance with their branding guidelines which state:

the use of these marks must avoid confusion regarding The Linux Foundation鈥檚 association with the product. The use of the mark cannot imply that The Linux Foundation or its projects are sponsoring or endorsing the product

Svelte should probably provide similar guidelines on https://github.com/sveltejs/branding as you've suggested

I think a similar principle would apply here. You can copy all the site's code and no one will mind copy/pasted blocks of code, but that's separate issue from trademark, where the site license doesn't apply.

When it comes to issues of trademark, there's no hard and fast rule such as some exact number of pixels need to be different, but there's a general set of principles that inform:

  • Degree of similarity between designs
  • Similarity of the goods and services
  • Evidence of actual confusion
  • User sophistication

Here there's substantial similarity between designs, both sites are promoting Svelte libraries, multiple people have indicated that they would be confused, and some users may be new to the Svelte ecosystem and unfamiliar with which projects are official. That's probably enough to say that the sites are too similar in this case

Disclaimer: While I've spent a great many hours of my life I'd like to get back talking to lawyers about these issues, I am not a lawyer and this is not legal advice :wink:

I sent a PR to the branding repo to clarify things as you suggested. I'm not a maintainer, so don't speak for the project, btw, so I can't say if the guidelines I've proposed will be accepted. But I've invested a lot of time in trying to understand these issues in the past and thought I'd try to share what I know in this area

I'm sure it's frustrating to have invested the time and now go back and update the site, but thanks for asking about it and agreeing to put in some changes based on the feedback!

Very cool. Thank you!

Actually, being also a graphics designer, I think I changed the logo / logotype far enough. I should have deleted the S in the background which is very prominent and most connecting visual element and should have been deleted anyway. So I was maybe a bit too early with showing the website to the community. 馃槙

I would still like to keep the logo as it really connects the two technologies I'm using in svelthree: Svelte with the S and three.js through the black Roboto Mono font. It's not about the project being endorsed, I just think it's really ok like that and it cannot be easily confused with the official logo, associated yes, but that's intended. Especially if I would only use it together with the logotype or just the logotype alone.

I'm on designing something else already, which will also be cool, but it's visually not so closely bound to Svelte or three.js, and I feel that's a pitty, it even makes me a bit sad to be honest. When you invest so much time into mastering two different technologies and finally bring them together, you do identify yourself and "the product" with them.

Yeah, it's a balance but I think finding a more unique design is the right call here.

The sapper site is a good example of the svelte design brand being used for secondary sites, https://sapper.svelte.dev - I don't think it'd be obvious to someone looking at your site as designed that it didn't come form the svelte team.

It's a cool project, you should have a cool 3d project as the background!

It's a cool project, you should have a cool 3d project as the background!

Thank you! :)

The initial disappointment about not being allowed to use the Svelte "S" logo is meanwhile gone because I think the new logo visualizes even better what svelthree is doing (wrapping / overriding three.js, powering it with Svelte, but also leaving it as it is).

I also understand the website was too lookalike, maybe if I initially removed the "S" in the background it wouldn't have caused the maintainers to be that negative about it. But I hope it's all cool now. Myself and several other people I asked think the new logo is good and it suites the project even better, because it has more visual linkage to three.js than the old one.

Thanks @benmccann for your fix via https://github.com/sveltejs/branding/pull/4

Was this page helpful?
0 / 5 - 0 ratings

Related issues

noypiscripter picture noypiscripter  路  3Comments

ricardobeat picture ricardobeat  路  3Comments

AntoninBeaufort picture AntoninBeaufort  路  3Comments

rob-balfre picture rob-balfre  路  3Comments

thoughtspile picture thoughtspile  路  3Comments