skills.rest
ihlamury
ihlamuryCOMMUNITY
Explore all skills by this author →
𝕏@yagizihlamurGitHub

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
One-click install
npx skills add https://github.com/ihlamury/design-skills --skill n26-ui-skills
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
ihlamuryihlamury
73

hugging-face-ui-skills

Enforce Hugging Face design constraints for dark mode, Inter font, and 4px grid.

Community
Intermediate
seb1nseb1n
147

Frontend Design

Generate responsive HTML, CSS, and React, Vue, or Svelte components with WCAG accessibility and dark mode.

Community
Advanced
ihlamuryihlamury
73

airbnb-ui-skills

Enforce Airbnb UI constraints for light-mode interfaces with Inter font and 4px grid.

Community
Intermediate
dylantarredylantarre
38

design-tokens-structure

Structures design tokens into a 3-layer system for theming and governance.

Community
Basic