skills.rest
deepparser
deepparserOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-notion

Apply Notion's design system tokens and component styles when generating UI.

Updated Feb 23, 2026
Search Tags:#typography#design system#css#design tokens#notion#ui generation#brand styling
One-click install
npx skills add https://github.com/deepparser/skills --skill design-notion-deepparser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-notion
Source: https://github.com/deepparser/skills/tree/main/design-notion
Command: npx skills add https://github.com/deepparser/skills --skill design-notion-deepparser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that match Notion's visual identity requires exact design tokens—colors, typography scales, shadows, and spacing—that are tedious to reverse-engineer by hand. This Skill provides the complete Notion design system so generated UI matches the brand accurately. ## Core Features & Use Cases - Complete Design Tokens: Exact color palette (warm neutrals, Notion Blue #0075de), typography scale (NotionInter with size-dependent letter-spacing), spacing, radius, and multi-layer shadow stacks. - Component Specifications: Detailed styling for buttons, cards, forms, navigation, pill badges, and elevation levels with hover, focus, and active states. - Light and Dark Previews: Bundled HTML preview files (preview.html, preview-dark.html) showing the full token catalog rendered in both themes. - Use Case: When asked to build a landing page or dashboard styled like Notion, the Skill supplies exact values—e.g., 64px headlines at -2.125px letter-spacing, whisper borders of 1px solid rgba(0,0,0,0.1)—so the output matches Notion's look without guesswork. ## Quick Start Build a landing page hero section styled like Notion with a blue CTA button and warm white alternating sections.

Frequently Asked Questions about design-notion

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

FAQPage Schema
How do I make a website look like Notion?▼

Use Notion's design tokens: warm neutral grays (#f6f5f4, #615d59), Notion Blue (#0075de) as the single accent, NotionInter font with negative letter-spacing at display sizes, and ultra-thin 1px rgba(0,0,0,0.1) borders. This Skill provides all values plus component specs.

What font and colors does Notion use?▼

Notion uses NotionInter, a modified Inter, with weights 400-700 and letter-spacing from -2.125px at 64px down to normal at 16px. Its palette centers on warm neutrals, near-black text at rgba(0,0,0,0.95), and Notion Blue #0075de for CTAs and links.

Does this Skill include a dark mode version of the Notion design?▼

Yes, it bundles preview-dark.html alongside the light preview.html. The dark theme maps tokens to dark equivalents, such as #191919 backgrounds, rgba(255,255,255,0.92) text, and a lighter #4da3f0 blue accent.

How does Notion style shadows and borders in its UI?▼

Notion uses whisper borders of 1px solid rgba(0,0,0,0.1) and multi-layer shadow stacks whose individual opacity never exceeds 0.05. Cards use a 4-layer stack up to 18px blur; modals use a 5-layer stack reaching 52px blur.

When should I not use the Notion design system for a project?▼

Avoid it when the project needs its own distinct brand identity, heavy color saturation, or dense data displays. Notion's system is minimalist with one accent color and generous whitespace, which suits content-focused pages but not dashboards requiring many simultaneous accent colors.

Related Skills

Explore More Design & Creative Skills→
ohmyhotelcoohmyhotelco
1

pp-design

Generates UI DSL JSON and Stitch wireframes from finalized functional specifications.

Official
Advanced
JaveedIshaqJaveedIshaq
1

supabase-email-templates

Generate HTML email templates from React Email and deploy to Supabase Auth.

Community
Intermediate
Javeria-JavaidJaveria-Javaid

ui-visual-validator

Validates UI modifications through visual evidence, design system compliance, and accessibility checks.

Community
Intermediate
Adham7843Adham7843

ckm:design

Design brand identities, UI elements, and AI-generated mockups.

Community
Advanced