skills.rest
marcosdaniel2002
marcosdaniel2002COMMUNITY
Explore all skills by this author →
WebsiteGitHub

notion-design

Provides Notion design system tokens, typography, and component patterns for building consistent UI.

Updated Jan 5, 2026
Search Tags:#typography#front-end#design system#css#notion#ui components#color tokens
One-click install
npx skills add https://github.com/marcosdaniel2002/tesslo-shop --skill notion-design-marcosdaniel2002
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: notion-design
Source: https://github.com/marcosdaniel2002/tesslo-shop/tree/main/.claude/skills/notion-design
Command: npx skills add https://github.com/marcosdaniel2002/tesslo-shop --skill notion-design-marcosdaniel2002

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building UI that matches the Notion brand requires exact colors, fonts, spacing, and motion specs that are easy to get wrong. This Skill supplies the complete reverse-engineered Notion design system so every component you write matches the original design exactly. ## Core Features & Use Cases - Design Tokens: Exact color palette (background #f9f9f8, accent #ffb110), 4px spacing grid, border-radius scale, shadow tokens, and z-index scale. - Typography System: Font stacks (Noto Sans Arabic, NotionInter, iA Writer Mono) with bundled local font files and a defined type scale. - Component Patterns: Ready-to-use CSS/HTML patterns for cards, buttons, inputs, badges, modals, tables, and navigation, plus motion guidelines and anti-patterns. - Use Case: When asked to build a landing page or dashboard in the Notion style, activate this Skill to generate markup and styles that match Notion's colors, spacing, and elevation without guessing values. ## Quick Start Use the notion-design skill to build a pricing page with a card layout that matches the Notion design system.

Frequently Asked Questions about notion-design

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

FAQPage Schema
How do I build UI components that match the Notion design style?▼

Read the SKILL.md reference first, then apply its color tokens, 4px spacing grid, and component patterns for cards, buttons, inputs, and modals. Every value must come from the defined palette and scales rather than arbitrary numbers.

What fonts and colors does the Notion design system use?▼

It uses Noto Sans Arabic for headings, NotionInter for body text, and iA Writer Mono for code. Core colors are background #f9f9f8, surface #e6f3fe, text #000000, muted #78736f, accent #ffb110, and border #31302e.

Does this design system include the actual font files?▼

Yes, a fonts directory bundles local woff, woff2, and ttf files for NotionInter, Noto Sans Arabic, Noto Sans Hebrew, Lyon Text, iA Writer Mono, and Permanent Marker. Use these in @font-face declarations instead of fetching from external sources.

What styling practices are forbidden in this design system?▼

The system forbids blur and backdrop-blur effects, zebra striping on tables, invented colors outside the palette, arbitrary spacing not on the 4px grid, extra font families, and custom box-shadows outside the defined shadow tokens.

How does the design system handle responsive layouts and animation?▼

It defines mobile-first breakpoints from 374px up to 1600px with a max content width of 1079px. Motion is expressive, using keyframes like fadeIn and scaleIn with durations of 150-300ms for micro-interactions, while respecting prefers-reduced-motion.

Related Skills

Explore More Design & Creative Skills→
octavehqoctavehq

octave-get-brand-components

Capture website design systems to generate reusable component kits with CSS and HTML templates.

Official
Advanced
ajsai47ajsai47
11

canary

Detect production-breaking issues after code deploys using the browse daemon.

Community
Advanced
mheersmheers

quieter

Reduce visual intensity in bold UI designs while preserving usability.

Community
Advanced
hanzoaihanzoai

tailwind-design-system

Establish scalable Tailwind CSS v4 design systems with CSS-first tokens and CVA components.

Official
Advanced