All logo assets

README.md

@@ -1 +1,30 @@
-# art
+# Loops Brand Assets
+Logos and other brand assets for [Loops](https://github.com/joinloops). Original design by [@nclm](https://github.com/nclm).
+
+## Colors
+The brand colors of Loops are:  
+⚫ `#000000` Pure Black  
+🟡 `#ffe500` Loops Yellow 
+
+## Logos
+The logo assets consist of the black Loops symbol over a yellow roundel. Use the logo when representing the Loops application in most communications, articles and visuals. The roundel can be extended to a full Loops Yellow background when needed. Use the optically adjusted small versions at sizes `80px` and below.
+> [!NOTE]  
+> The shapes in the logo SVGs are _not_ flattened. Consider them a source file.
+
+| Logos | PNG | SVG |
+| :--- | :---: | :---: |
+| **Full size** | <img src="loops-logo.png" width="160px" /> | <img src="loops-logo.svg" width="160px" /> |
+| **Optically adjusted** <br/> for sizes `≤ 80px` | <img src="loops-logo-opticalsmall.png" width="80px" /> | <img src="loops-logo-opticalsmall.svg" width="80px" /> |
+
+## Icons
+The icon assets consist of the black Loops symbol over a transparent background. Use the icon in buttons, links and UIs when referring to Loops or a Loops profile. It’s preferrable to use it over Loops Yellow but not mandatory. Use the optically adjusted small versions at sizes `60px` and below.
+> [!NOTE]  
+> The shapes in the icon SVGs _are_ flattened. Perfect for inserting on webpages.
+
+| Icons | PNG | SVG |
+| :--- | :---: | :---: |
+| **Full size** | <img src="loops-icon.png" width="120px" /> | <img src="loops-icon.svg" width="120px" /> |
+| **Optically adjusted** <br/> for sizes `≤ 60px` | <img src="loops-icon-opticalsmall.png" width="60px" /> | <img src="loops-icon-opticalsmall.svg" width="60px" /> |
+
+> [!IMPORTANT]
+> The Loops symbol is positionned so that the triangle is optically centered in a holding shape, meaning it’s shifted to the right compared to a naive mathematical centering. Keep it like so unless you know what you’re doing :)