search

Tropix126 / fluent-svelte

A faithful implementation of Microsoft's Fluent Design System in Svelte.
https://fluent-svelte.vercel.app
MIT License
609 stars 27 forks source link

Logo #5

Closed Tropix126 closed 2 years ago

Tropix126 commented 2 years ago

We're going to ideally need a logo before the production release of the library. Using either the Svelte logo or Fluent Design logo directly with some recolors isn't really an option.

lorisobi commented 2 years ago

grafik Using both the Svelte logo and Fluent Design logo directly with some recolors

nikolai-cc commented 2 years ago

To the right is the logo MS uses on fluent.microsoft.com, to the left an implementation of the svelte logo in the same style.

Won't work on small sizes though (as does the ms image)

Screen_Shot_2021-11-20_at_12 08 55
nikolai-cc commented 2 years ago

Actually I found out they do have a smaller icon, which they use inside their figma design files (found here).

Made a version of that, in both fluent-logo and svelte colours, along with a ribbon idea which might not completely fit the style, but the forms reminded me of, and I really like the look of.

Screen Shot 2021-11-25 at 16 16 37 from left to right:

  1. fluent logo
  2. svelte-logo in fluent style with the fluent gradient applied
  3. svelte-logo in fluent style with the colour grabbed from the svelte page
  4. ribbon idea with random colours from fluent palette
  5. ribbon idea with slight gradient for depth based on the same colours as 4.
nikolai-cc commented 2 years ago

Wondering how they would look on a black or a white background? So was I!

Screen Shot 2021-11-25 at 16 28 30

nikolai-cc commented 2 years ago

And finally a couple that have been recoloured based on --fds-accent-base (+dark / light)

Screen Shot 2021-11-25 at 19 41 16
Tropix126 commented 2 years ago

Thanks for everyone's contributions to this 🙂. For the time being, I've decided to use @lorisobi's design, because of how the weight/colors blend well with the new site.