n26-ui-skills

Enforce N26's dark-mode UI design system with Inter font and 4px grid.

73|9|Updated Jan 25, 2026

Search Tags:#typography #branding #design system #ui design #dark mode #n26

Ready to run

npx skills add https://github.com/ihlamury/design-skills --skill n26-ui-skills

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: n26-ui-skills
Source: https://github.com/ihlamury/design-skills/tree/main/skills/n26
Command: npx skills add https://github.com/ihlamury/design-skills --skill n26-ui-skills

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides opinionated constraints and guidelines for building user interfaces that are visually consistent with the N26 brand aesthetic, focusing on dark mode, specific typography, and spacing.

Core Features & Use Cases

Dark Mode Implementation: Enforces dark backgrounds and appropriate text contrast.
Consistent Branding: Ensures the use of N26's primary font (Inter), color palette, and spacing system (4px grid).
Use Case: When developing a new feature for a banking application that needs to align with N26's established design language, this Skill will guide the AI to apply the correct colors, fonts, and spacing to maintain brand consistency.

Quick Start

Apply the n26-ui-skills to ensure the interface uses dark mode, Inter font, and a 4px grid.

Frequently Asked Questions about n26-ui-skills

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build a dark mode interface that follows the N26 design system?▼

To build a dark mode interface following the N26 design system, apply guidelines enforcing the Inter font, a 4px grid, specific semantic color tokens, and defined text styles to ensure brand consistency and accessibility.

What typography and spacing rules are required for N26 UI design?▼

N26 UI design requires the Inter font for typography and a strict 4px grid for spacing. All UI elements must adhere to defined semantic tokens and text styles to maintain visual consistency.

Can I use custom color palettes when designing N26-style interfaces?▼

Designing N26-style interfaces requires using predefined semantic tokens for colors rather than custom palettes. This ensures appropriate text contrast on dark backgrounds and maintains brand accessibility.

How do I manage interactive states for banking app features in dark mode?▼

Managing interactive states for banking app features in dark mode involves applying the design system's specific guidelines for borders, colors, and text styles to maintain accessibility and functional clarity.

Does the N26 UI design system support light mode interfaces?▼

The N26 UI design system focuses specifically on dark-mode interfaces, enforcing dark backgrounds and appropriate text contrast. It does not provide guidelines for light mode configurations.