Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Slint logo folder with new design #3432

Merged
merged 22 commits into from
Sep 11, 2023
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
Update logos
  • Loading branch information
aurindam committed Sep 8, 2023
commit 5be5102bcb396afd0020231ec3b8f409260406e2
72 changes: 55 additions & 17 deletions logo/README.md
Original file line number Diff line number Diff line change
@@ -1,40 +1,79 @@
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-1.1 OR LicenseRef-Slint-commercial -->

This directory contains the different versions of the Slint logo.
It is (manually) copied into the website under https://slint.dev/logo/
It is (manually) copied into the website under <https://slint.dev/logo/>

## Branding Guidelines

### Logo

* Do not modify the logo by changing the colors, removing the box or its gradient, changing of the aspect ration,
* Do not modify the logo by changing the colors, changing of the aspect ration,
or other alterations to the corporate identity.

* The logo with the dark box is no longer recommended to use. Prefer always using the logo with the white box.
* When using the logo to refer to Slint from a location not dedicated to Slint,
use the full versions of the logo with the full tagline ("GUI toolkit").

* When using the logo to refer to Slint from a location not dedicated to Slint, use the version of the logo with the full tagline
("The fast and easy UI toolkit") `slint-logo-full-light.svg` on light background or `slint-logo-full-white.svg` on dark background.
![Slint full logo light](./for_Screen/Slint_logo_GUI_toolkit/blue_black/slint_logo_GUI_toolkit_blue_black.svg#gh-light-mode-only)![Slint full logo dark](./for_Screen/Slint_logo_GUI_toolkit/blue_white/slint_logo_GUI_toolkit_blue_white.svg#gh-dark-mode-only)

![Slint logo full](./slint-logo-full-light.svg#gh-light-mode-only)![Slint logo full](./slint-logo-full-white.svg#gh-dark-mode-only)
For print, the equivalent versions in pdf are:

* When using the logo to refer to Slint for illustrative purposes, from a place where the viewer know already about Slint
(e.g. because it is on the Slint website itself) use the simple version of the logo
`slint-logo-simple-light.svg` on light background or `slint-logo-simple-white.svg` on dark background.
* Light background: (./for_Print/slint_logo_GUI_toolkit_blue_black.pdf)
* Dark background: (./for_Print/slint_logo_GUI_toolkit_blue_white.pdf)

![Slint logo simple](./slint-logo-simple-light.svg#gh-light-mode-only)![Slint logo simple](./slint-logo-simple-white.svg#gh-dark-mode-only)
* When using the logo to refer to Slint for illustrative purposes, from a place
where the viewer is expected to already know about Slint (e.g. because it is
on the Slint website itself) use the simple versions of the logo.

* For the rare cases where a square or circular logo is required (eg, social media avatar), `slint-logo-circle-light.svg`
or `slint-logo-square-light.svg` can be used. Prefer the logo with the text on the right if possible.
![Slint simple logo light](./for_Screen/Slint_logo/Slint_logo_blue-black/slint_logo_blue_black.svg#gh-light-mode-only)![Slint simple logo dark](./for_Screen/Slint_logo/Slint_logo_blue-white/slint_logo_blue_white.svg#gh-dark-mode-only)

![Slint logo circle](./slint-logo-circle-light.svg) ![Slint logo square](./slint-logo-square-light.svg)
For print, the equivalent versions in pdf are:

* For an small icon where the text would not be visible otherwise, use `slint-logo-small-light.svg`
* Light background: (./for_Print/slint_logo_blue_black.pdf)
* Dark background: (./for_Print/slint_logo_blue_white.pdf)

![Slint logo small](./slint-logo-small-light.svg)
* For the cases where a square or circular logo is required (e.g. social media
avatar), the square versions of the logo can be used. Prefer the version with
the text.

![Slint square logo light](./for_Screen/Slint_logo_square/blue_black/slint_logo_vertical_box_blue_black.svg#gh-light-mode-only)![Slint square logo dark](./for_Screen/Slint_logo_square/blue_white/slint_logo_vertical_box_blue_white.svg#gh-dark-mode-only)

For print, the equivalent versions in pdf are:

* Light background: (./for_Print/slint_logo_vertical_blue_black.pdf)
* Dark background: (./for_Print/slint_logo_vertical_blue_white.pdf)

* For a small icon where the text would not be visible otherwise, use the square
versions of the logo without the text.

![Slint small logo light](./for_Screen/Slint_icon_square/Slint_icon_blue/slint_icon_box_blue.svg#gh-light-mode-only)![Slint small logo dark preferred](./for_Screen/Slint_icon_square/Slint_icon_blue/slint_icon_box_blue.svg#gh-dark-mode-only)![Slint small logo dark alternate](./for_Screen/Slint_icon_square/Slint_icon_white/slint_icon_box_white.svg#gh-dark-mode-only)

For print, the equivalent versions in pdf are:

* Light background: (./for_Print/slint_icon_blue.pdf)
* Dark background (preferred): (./for_Print/slint_icon_blue.pdf)
* Dark background (alternate): (./for_Print/slint_icon_white.pdf)

### #MadeWithSlint Logo

* Do not modify the logo by changing the colors, changing of the aspect ration,
or other alterations to the corporate identity.

* Use this logo for attributions to Slint (e.g. when using Slint under the [Royalty-Free License](../LICENSES/LicenseRef-Slint-Royalty-free-1.1.md))

![#MadeWithSlint logo light](./for_Screen/MadeWithSlint_logo/blue_black/MadeWithSlint_blue_black.svg#gh-light-mode-only)![#MadeWithSlint logo dark](./for_Screen/MadeWithSlint_logo/blue_white/MadeWithSlint_blue_white.svg#gh-dark-mode-only)

For print, the equivalent versions in pdf are:

* Light background: (./for_Print/MadeWithSlint_blue_black.pdf)
* Dark background: (./for_Print/MadeWithSlint_blue_white.pdf)

### Color

The Slint blue color is #0025FF
The Slint blue color is:

* For Screen: #2379F4 (Hex), R=35 G=121 B=244, Tint = 100
* For Print: CMYK = 75,45,0,0
* For Spot Color (Pantone): PMS 2727 C

### Name

Expand All @@ -45,4 +84,3 @@ The name of the product is ***Slint***, not ~~*Slint UI*~~.
The company (legal entity) behind Slint is *SixtyFPS GmbH*. That name should only be used to refer to the company,
including the *GmbH*. (*SixtyFPS* was the former name of the product but should no longer be used.)
Employees of SixtyFPS GmbH should still use the name *Slint* whenever possible (e.g. on conference badges)

File renamed without changes
Binary file added logo/for_Print/MadeWithSlint_blue_black.pdf
Binary file not shown.
Binary file added logo/for_Print/MadeWithSlint_blue_white.pdf
Binary file not shown.
Binary file added logo/for_Print/slint_icon_blue.pdf
Binary file not shown.
Binary file added logo/for_Print/slint_icon_white.pdf
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file added logo/for_Print/slint_logo_blue_black.pdf
Binary file not shown.
Binary file added logo/for_Print/slint_logo_blue_white.pdf
Binary file not shown.
Binary file added logo/for_Print/slint_logo_vertical_blue_black.pdf
Binary file not shown.
Binary file added logo/for_Print/slint_logo_vertical_blue_white.pdf
Binary file not shown.
Loading