49 lines
2.4 KiB
Markdown
49 lines
2.4 KiB
Markdown
|
### Logo and usage
|
|||
|
|
|
|||
|
|
- Keep the original n8n logo as the central symbol. [Download](https://drive.google.com/drive/folders/1lSxqKnGNEBdpYK3zaYlWmRVKn0Sa-Szg?usp=sharing)
|
|||
|
|
- In case you need it, the logo type is [Moderat](https://tightype.com/typefaces/moderat).
|
|||
|
|
- Define a clear space around the logo equal to the height of the “n” to ensure readability.
|
|||
|
|
- Do not distort, rotate or recolor the logo outside of the approved palette.
|
|||
|
|
- The logo should be used in Brand Black `#040506`ver white/light backgrounds, and White `#FFFFFF`over dark backgrounds
|
|||
|
|
|
|||
|
|
### Colour palette
|
|||
|
|
|
|||
|
|
| Use | Suggested colours (hex) |
|
|||
|
|
| --- | --- |
|
|||
|
|
| **Primary** | Orange (`#FF9B47`), Pink (`#F4487F`) |
|
|||
|
|
| **Gradients** | #1 `#FF9B47` → `#FF9B47` → `#F4487F`, #2 `#A5355` → `#533D92` → `#40506A` |
|
|||
|
|
| **Neutrals** | Light (`#FFF6EC`), Dark (`#040506`) |
|
|||
|
|
| **Additionals** | `#358FD0`, `#4E2ED0` , `#3530D2` , `#A62585` , `#A5355` |
|
|||
|
|
|
|||
|
|
### Typography
|
|||
|
|
|
|||
|
|
**Primary:** **Geomanist** [Download Font Pack](https://drive.google.com/drive/folders/1Z40-7HyHVCHRF5jH8GYwq-bwCLCkUaqK?usp=sharing) | [Download Free Regular & Italics](https://www.atipofoundry.com/fonts/geomanist)
|
|||
|
|
|
|||
|
|
**Usage:** Headlines, titles (Medium, Bold or Book) and body text (Regular)
|
|||
|
|
|
|||
|
|
**Available Weights:** Use clear hierarchies (sizes and weights) to distinguish headings, subheadings and body text.
|
|||
|
|
|
|||
|
|
- **Regular** - For standard body text and general content
|
|||
|
|
- **Medium** - For subheadings and emphasized text
|
|||
|
|
- **Book** - For extended reading and lighter headlines
|
|||
|
|
- **Bold** - For strong headlines and important callouts
|
|||
|
|
|
|||
|
|
**Secondary:** **Lexend** [Download](https://fonts.google.com/specimen/Lexend)
|
|||
|
|
|
|||
|
|
**Usage:** In cases where it is not possible to use a brand font, please use Lexend for headings (Regular) and body text (Light).
|
|||
|
|
|
|||
|
|
- **Light** - For subtle text and secondary information
|
|||
|
|
- **Regular** - For body text as Geomanist alternative
|
|||
|
|
|
|||
|
|
### Iconography and illustrations
|
|||
|
|
|
|||
|
|
- [Iconography library](https://lucide.dev/icons/)
|
|||
|
|
- Illustrations library ⚠️ WIP
|
|||
|
|
- For UI, include product mockups that integrate these visual elements and show how n8n looks in practice.
|
|||
|
|
|
|||
|
|
### Library ⚠️ WIP
|
|||
|
|
|
|||
|
|
Master deck for presentations **[here](https://docs.google.com/presentation/d/1Xdh_c9MJPRIAudxfG_8EcYtH6aVWfCmAoUGA3FrEXUQ/edit)**
|
|||
|
|
|
|||
|
|
Brand guideline [here](https://www.figma.com/design/OilJWBFTkNIGehgcIr9LQG/n8n_New_branding_?node-id=2075-10&t=5fx81mnVwsb5pav6-1)
|