Added a minimal theme to test out.

This commit is contained in:
normanras
2026-04-22 18:29:21 -04:00
parent 1e1f820040
commit a3a78226b7
4 changed files with 175 additions and 3 deletions

1
colors/n8n-minimal.lua Normal file
View File

@ -0,0 +1 @@
require("n8n").load("minimal")

View File

@ -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()

122
lua/n8n/themes/minimal.lua Normal file
View File

@ -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

48
style_guide.md Normal file
View File

@ -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)