Added a minimal theme to test out.
This commit is contained in:
1
colors/n8n-minimal.lua
Normal file
1
colors/n8n-minimal.lua
Normal file
@ -0,0 +1 @@
|
||||
require("n8n").load("minimal")
|
||||
@ -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
122
lua/n8n/themes/minimal.lua
Normal 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
48
style_guide.md
Normal 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)
|
||||
Reference in New Issue
Block a user