From a3a78226b72221e864f453542dad0b4b8e52070a Mon Sep 17 00:00:00 2001 From: normanras Date: Wed, 22 Apr 2026 18:29:21 -0400 Subject: [PATCH] Added a minimal theme to test out. --- colors/n8n-minimal.lua | 1 + lua/n8n/init.lua | 7 ++- lua/n8n/themes/minimal.lua | 122 +++++++++++++++++++++++++++++++++++++ style_guide.md | 48 +++++++++++++++ 4 files changed, 175 insertions(+), 3 deletions(-) create mode 100644 colors/n8n-minimal.lua create mode 100644 lua/n8n/themes/minimal.lua create mode 100644 style_guide.md diff --git a/colors/n8n-minimal.lua b/colors/n8n-minimal.lua new file mode 100644 index 0000000..9f9bc51 --- /dev/null +++ b/colors/n8n-minimal.lua @@ -0,0 +1 @@ +require("n8n").load("minimal") diff --git a/lua/n8n/init.lua b/lua/n8n/init.lua index dabf332..47615a6 100644 --- a/lua/n8n/init.lua +++ b/lua/n8n/init.lua @@ -23,7 +23,8 @@ function M.setup(opts) M.config = vim.tbl_deep_extend("force", M.config, opts or {}) end -function M.load() +---@param variant? string e.g. "minimal" +function M.load(variant) if vim.g.colors_name then vim.cmd("hi clear") end @@ -32,10 +33,10 @@ function M.load() end vim.o.termguicolors = true - vim.g.colors_name = "n8n" + vim.g.colors_name = variant and ("n8n-" .. variant) or "n8n" vim.o.background = "dark" - local theme = require("n8n.theme") + local theme = variant and require("n8n.themes." .. variant) or require("n8n.theme") local groups_mod = require("n8n.groups") local c = theme.colors() diff --git a/lua/n8n/themes/minimal.lua b/lua/n8n/themes/minimal.lua new file mode 100644 index 0000000..b1221ce --- /dev/null +++ b/lua/n8n/themes/minimal.lua @@ -0,0 +1,122 @@ +-- n8n-minimal: uses only the official n8n brand style guide palette +-- Primary: #FF9B47 (orange), #F4487F (pink) +-- Neutrals: #FFF6EC (light), #040506 (dark) +-- Additionals: #358FD0, #4E2ED0, #3530D2, #A62585, #533D92, #40506A + +local M = {} + +local orange = "#FF9B47" +local pink = "#F4487F" +local light = "#FFF6EC" +local dark = "#040506" +local blue = "#358FD0" +local purple = "#4E2ED0" +local slate = "#40506A" +local violet = "#533D92" +local magenta = "#A62585" + +function M.colors() + return { + bg = dark, + bg_dark = dark, + bg_float = slate, + bg_popup = slate, + bg_sidebar = dark, + bg_statusline = dark, + bg_visual = violet, + bg_highlight = slate, + bg_search = violet, + + fg = light, + fg_bright = light, + fg_dark = slate, + fg_gutter = slate, + fg_sidebar = light, + + border = slate, + border_highlight = blue, + + accent = orange, + accent_hover = orange, + accent_active = orange, + + keyword = orange, + string = pink, + func = blue, + variable = light, + constant = orange, + number = blue, + boolean = blue, + type = purple, + operator = pink, + property = blue, + parameter = orange, + comment = slate, + punctuation = slate, + tag = orange, + attribute = pink, + namespace = slate, + preproc = pink, + special = magenta, + regex = magenta, + escape = magenta, + builtin = blue, + + json_key = light, + json_string = pink, + json_number = blue, + json_boolean = blue, + json_null = pink, + json_bracket = slate, + + error = pink, + warning = orange, + info = blue, + hint = magenta, + + diff_add = dark, + diff_change = dark, + diff_delete = dark, + diff_text = slate, + + git_add = blue, + git_change = orange, + git_delete = pink, + + neutral_700 = slate, + neutral_800 = dark, + + node_bg = dark, + node_border = violet, + sticky_bg = dark, + sticky_border = slate, + sticky_text = light, + success_bg = dark, + success_fg = light, + danger_bg = dark, + danger_fg = light, + info_bg = dark, + info_fg = light, + + terminal = { + black = dark, + red = pink, + green = blue, + yellow = orange, + blue = blue, + magenta = magenta, + cyan = blue, + white = light, + bright_black = slate, + bright_red = pink, + bright_green = blue, + bright_yellow = orange, + bright_blue = blue, + bright_magenta = violet, + bright_cyan = magenta, + bright_white = light, + }, + } +end + +return M diff --git a/style_guide.md b/style_guide.md new file mode 100644 index 0000000..d048ddc --- /dev/null +++ b/style_guide.md @@ -0,0 +1,48 @@ +### 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)