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

notion-ui-skills

Enforce Notion's UI design system for light-mode interfaces using Inter font and 4px grid.

73|9|Updated Jan 25, 2026
Search Tags:#typography#design system#notion#ui design#spacing#light mode
One-click install
npx skills add https://github.com/ihlamury/design-skills --skill notion-ui-skills
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: notion-ui-skills
Source: https://github.com/ihlamury/design-skills/tree/main/skills/notion
Command: npx skills add https://github.com/ihlamury/design-skills --skill notion-ui-skills

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides opinionated constraints for building interfaces that are visually consistent with Notion's aesthetic, ensuring a familiar and intuitive user experience.

Core Features & Use Cases

  • Light Mode Design: Adheres to Notion's clean, light-mode interface principles.
  • Typography & Spacing: Enforces the use of the Inter font family and a strict 4px grid for consistent layout and readability.
  • Color Palette: Utilizes Notion's specific semantic color tokens for UI elements.
  • Use Case: When designing a new productivity tool that aims for the same user-friendly feel as Notion, these guidelines will ensure pixel-perfect replication of its core UI elements.

Quick Start

Apply Notion's UI design system to build a light-mode interface using the Inter font and a 4px grid.

Frequently Asked Questions about notion-ui-skills

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

FAQPage Schema
How do I design a Notion-style UI with consistent spacing and typography?▼

To design a Notion-style UI, you apply a strict 4px grid system, use the Inter font family, and implement Notion's semantic color tokens to ensure visual consistency and familiar readability for light-mode interfaces.

What are Notion's UI design system constraints for light mode interfaces?▼

Notion's UI design system constraints for light mode include specific semantic color tokens, the Inter font family, a strict 4px grid for layout spacing, and defined accessibility standards for text contrast and interactive states.

Can I use this Notion UI design system for dark mode interfaces?▼

No, this Notion UI design system is strictly built for light mode interfaces. It enforces specific light-mode constraints and semantic color tokens to replicate Notion's clean, light aesthetic and does not support dark mode themes.

How do I ensure text contrast meets accessibility standards when building Notion-style interfaces?▼

To ensure text contrast meets accessibility standards in Notion-style interfaces, you adhere to defined semantic color tokens and accessibility rules provided by the design system for both text contrast and interactive states.

What is the best way to replicate Notion's aesthetic for a new productivity tool?▼

The best way to replicate Notion's aesthetic for a productivity tool is to enforce opinionated UI design constraints, utilizing the Inter font, a 4px grid system, and Notion's specific light-mode semantic color palette for pixel-perfect visual consistency.

Related Skills

Explore More Design & Creative Skills→
ihlamuryihlamury
73

gusto-ui-skills

Enforce Gusto's UI design system constraints for light-mode interfaces.

Community
Intermediate
WebWakaHubWebWakaHub
20

UI Designer

Design accessible, pixel-perfect UI design systems with WCAG AA compliance.

Official
Advanced
sanky369sanky369
29

color-system

Create cohesive color systems with accessible theming and dark-mode support.

Community
Advanced
ihlamuryihlamury
73

todoist-ui-skills

Enforce Todoist-inspired UI design constraints with light mode, Inter font, and a 4px grid.

Community
Intermediate