Convert Figma logo to code with AI

nordtheme logonord

An arctic, north-bluish color palette.

6,037
169
6,037
84

Top Related Projects

๐Ÿ˜ธ Soothing pastel theme for the high-spirited!

13,627

Retro groove color scheme for Vim

An arctic, north-bluish clean and elegant Visual Studio Code theme.

A dark Vim/Neovim color scheme inspired by Atom's One Dark syntax theme.

๐Ÿ™ A clean, dark Neovim theme written in Lua, with support for lsp, treesitter and lots of plugins. Includes additional themes for Kitty, Alacritty, iTerm and Fish.

Quick Overview

Nord is an arctic, north-bluish color palette designed for a clean and elegant look across various applications and platforms. It aims to provide a unified visual experience for development environments, syntax highlighting, and user interfaces. The project offers implementations for numerous tools and applications, including text editors, terminal emulators, and web-based projects.

Pros

  • Consistent and visually appealing color scheme across multiple platforms and applications
  • Extensive documentation and implementation guides for various tools
  • Active community and regular updates
  • Designed with accessibility and readability in mind

Cons

  • Limited color variety may not suit all personal preferences
  • Some implementations may require manual configuration or installation
  • Not all applications or tools have official Nord theme support
  • Learning curve for customizing the theme in certain environments

Getting Started

To use Nord in your project, you can typically follow these steps:

  1. Choose the appropriate implementation for your tool or application from the official Nord website.
  2. Follow the installation instructions provided for your specific platform.
  3. Apply the Nord theme in your application's settings or configuration file.

For web-based projects, you can include the Nord CSS file in your HTML:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nord@0.2.0/css/nord.css">

For terminal applications, you may need to add color definitions to your configuration file. For example, in .bashrc:

# Nord color palette
export NORD_DARK_BLACK="#2E3440"
export NORD_LIGHT_BLUE="#88C0D0"
# ... (add more color definitions)

# Set terminal colors
export PS1="\[\033[38;5;6m\]\u\[\033[38;5;15m\] in \[\033[38;5;3m\]\w\[\033[38;5;15m\]\n$ \[$(tput sgr0)\]"

Remember to consult the official documentation for detailed instructions specific to your use case.

Competitor Comparisons

๐Ÿ˜ธ Soothing pastel theme for the high-spirited!

Pros of Catppuccin

  • More color variants (4 palettes: Latte, Frappรฉ, Macchiato, Mocha) offering greater flexibility
  • Larger community with more active contributors and frequent updates
  • Wider range of application ports and integrations

Cons of Catppuccin

  • Less established and potentially less stable than Nord
  • May require more configuration due to multiple palette options
  • Could be considered less "professional" or "serious" due to playful naming conventions

Code Comparison

Nord:

.nord-theme {
  --nord0: #2E3440;
  --nord1: #3B4252;
  --nord2: #434C5E;
  --nord3: #4C566A;
  --nord4: #D8DEE9;
}

Catppuccin:

.catppuccin-mocha {
  --ctp-rosewater: #F5E0DC;
  --ctp-flamingo: #F2CDCD;
  --ctp-pink: #F5C2E7;
  --ctp-mauve: #CBA6F7;
  --ctp-red: #F38BA8;
}

Both Nord and Catppuccin are popular color schemes for various applications and development environments. Nord offers a cooler, more subdued palette inspired by Arctic ice, while Catppuccin provides a wider range of pastel-colored themes. Nord may be preferred for its simplicity and established presence, whereas Catppuccin offers more customization options and a growing community.

13,627

Retro groove color scheme for Vim

Pros of Gruvbox

  • Warmer color palette, which may be easier on the eyes for extended coding sessions
  • More color variations and contrast options, allowing for greater customization
  • Wider adoption across various text editors and IDEs

Cons of Gruvbox

  • Less consistent across different platforms and applications
  • May appear less modern or sleek compared to Nord's minimalist design
  • Color scheme might be too intense for some users, especially in brighter environments

Code Comparison

Nord:

.nord0 { color: #2E3440; }
.nord1 { color: #3B4252; }
.nord2 { color: #434C5E; }
.nord3 { color: #4C566A; }
.nord4 { color: #D8DEE9; }

Gruvbox:

.bg0    { color: #282828; }
.bg1    { color: #3c3836; }
.bg2    { color: #504945; }
.bg3    { color: #665c54; }
.bg4    { color: #7c6f64; }

Both Nord and Gruvbox are popular color schemes for developers, each with its own strengths. Nord offers a cool, minimalist palette inspired by Arctic ice, while Gruvbox provides a warm, retro-inspired look. The choice between them often comes down to personal preference and the specific requirements of the development environment.

An arctic, north-bluish clean and elegant Visual Studio Code theme.

Pros of Visual Studio Code

  • Specifically tailored for VS Code, providing a seamless integration
  • Includes custom UI theming for VS Code-specific elements
  • Regular updates to support new VS Code features and syntax highlighting

Cons of Visual Studio Code

  • Limited to a single editor, while Nord is more versatile across platforms
  • May have a smaller community contribution base due to its specific focus
  • Potentially slower adoption of new Nord color palette changes

Code Comparison

Nord (general color definitions):

$nord0: #2E3440;
$nord1: #3B4252;
$nord2: #434C5E;
$nord3: #4C566A;

Visual Studio Code (specific VS Code settings):

"colors": {
  "editor.background": "#2E3440",
  "editor.foreground": "#D8DEE9",
  "activityBarBadge.background": "#88C0D0",
  "sideBarTitle.foreground": "#D8DEE9"
}

The Visual Studio Code repository focuses on implementing the Nord theme specifically for VS Code, while the Nord repository serves as the core project defining the color palette and design principles. Visual Studio Code offers a more tailored experience for its target editor but lacks the broader applicability of the main Nord project.

A dark Vim/Neovim color scheme inspired by Atom's One Dark syntax theme.

Pros of onedark.vim

  • More vibrant and colorful syntax highlighting
  • Easier on the eyes for long coding sessions
  • Better support for popular Vim plugins

Cons of onedark.vim

  • Less consistent across different file types
  • May not be suitable for users who prefer muted colors
  • Limited customization options compared to Nord

Code Comparison

Nord:

hi Normal guifg=#D8DEE9 guibg=#2E3440
hi Comment guifg=#4C566A
hi Constant guifg=#8FBCBB
hi String guifg=#A3BE8C
hi Identifier guifg=#88C0D0

onedark.vim:

hi Normal guifg=#ABB2BF guibg=#282C34
hi Comment guifg=#5C6370
hi Constant guifg=#E5C07B
hi String guifg=#98C379
hi Identifier guifg=#E06C75

Nord offers a cooler, more subdued color palette with a focus on blues and greens, while onedark.vim provides a warmer, more diverse range of colors. Nord's consistency across different file types and extensive customization options make it a popular choice for those who prefer a unified look. On the other hand, onedark.vim's vibrant colors and better plugin support appeal to users who want a more lively coding environment. Both themes have their strengths, and the choice ultimately depends on personal preference and specific use cases.

๐Ÿ™ A clean, dark Neovim theme written in Lua, with support for lsp, treesitter and lots of plugins. Includes additional themes for Kitty, Alacritty, iTerm and Fish.

Pros of tokyonight.nvim

  • Specifically designed for Neovim, offering deeper integration and optimized performance
  • More extensive customization options, including multiple style variants (storm, night, day, moon)
  • Active development with frequent updates and community contributions

Cons of tokyonight.nvim

  • Limited to Neovim, while Nord supports a wider range of applications and platforms
  • Steeper learning curve for customization due to more complex configuration options
  • May require more setup time compared to Nord's simpler, out-of-the-box experience

Code Comparison

tokyonight.nvim:

require("tokyonight").setup({
  style = "storm",
  transparent = true,
  terminal_colors = true,
  styles = {
    comments = { italic = true },
    keywords = { italic = true },
    functions = {},
    variables = {},
  },
})

Nord:

colorscheme nord
let g:nord_italic = 1
let g:nord_underline = 1
let g:nord_bold = 1
let g:nord_uniform_diff_background = 1

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

An arctic, north-bluish color palette.

A total of sixteen, carefully selected, dimmed pastel colors for a eye-comfortable, but yet colorful ambiance.

Created for clear, uncluttered and elegant designs following a minimal and flat style pattern. For syntax highlighting it aims to ensure an undisturbed focus on important parts of the code, a good readability and a quick visual distinction between the different syntax elements.

Nord consists of four named color palettes providing different syntactic meanings and color effects for dark & bright ambiance designs.

Nord color palette cards

All colors are numbered from nord0 to nord15 where each palette contains a different amount of colors. The naming convention preserves the compatibility for terminal color schemes and allows an uncomplicated use as base for such.

Getting Started

Visit the official website to learn all about Nord's colors and palettes and how to install and integrate Nord in your own projects or use the color swatches for your favorite applications.

Quick Start

Install Nord using npm or yarn:

# npm
npm install --save nord

# yarn
yarn add nord

Please see the complete installation and usage guide for more details.

Port Projects

Unify the appearance and usage experience for your favorite applications รขย€ย” from code editors, shell terminals to modern UIs and libraries.

Nord supports a broad and constantly growing spectrum that allows to customize your daily tool stack.

Nord port project illustration

Color Swatches

Next to the many ways of integrating Nord into your project, all color palettes of Nord are also available in various native color swatch formats.

Easily import Nord into macOS, Adobe products like Photoshop & Illustrator, GIMP/Krita/Inkscape and many more.

Nord color swatch toolbox

Contributing

Nord is an open source project and we love to receive contributions from the community!

There are many ways to contribute, from writing- and improving documentation and tutorials, reporting bugs, submitting enhancement suggestions that can be added to Nord by submitting pull requests.

Please take a moment to read the full contributing guide to learn about the development process, the project's used styleguides, branch organization and versioning model.

The guide also includes information about minimal, complete, and verifiable examples and other ways to contribute to the project like improving existing issues and giving feedback on issues and pull requests.

Copyright ยฉ 2016-present Sven Greb

NPM DownloadsLast 30 Days