Applies Notion Avatar's hand-drawn minimalist style to any artifact that may benefit from having the project's look-and-feel. Use it when brand colors, style guidelines, visual formatting, or design standards apply.
To access Notion Avatar's official brand identity and style resources, use this skill.
Keywords: branding, corporate identity, visual identity, post-processing, styling, brand colors, typography, hand-drawn style, minimalist design, visual formatting, visual design
Notion Avatar follows a hand-drawn minimalist aesthetic characterized by:
Primary Colors:
#fffefc - Warm off-white background (primary surface)#000000 - Pure black for text and borders#6b7280 (gray-500) - For secondary information#374151 (gray-700) - For body content#111827 (gray-900) - For headingsInteractive States:
#f9fafb (gray-50) - Subtle hover states#f3f4f6 (gray-100) - Active/pressed states#000000 - Black borders on hoverAccent Colors:
'Quicksand', system-ui, -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif/fonts/Quicksand.ttfBorders:
border-3 (3px) or border-4 (4px)#000000 (black)solid for most elementsrounded or rounded-full for buttons and cardsButtons:
bg-black text-white font-bold py-2 px-4 rounded-full hover:bg-gray-800border-3 border-black text-black font-bold py-2 px-4 rounded-full hover:bg-gray-50px-6 py-2 rounded-full border-2 border-black transition-colors
bg-black text-whitebg-transparent text-black hover:bg-gray-100Cards & Containers:
bg-whiteborder-3 border-black or border-4 border-blackrounded-lgIcons & Illustrations:
#000000 (black)roundround#fffefc background)@font-face in global.css/public/fonts/Quicksand.ttfswap for better performancetailwind.config.js if neededhtml element: #fffefcborder-3, border-4border-black (#000000)rounded, rounded-lg, rounded-fullborder-solid (default)#000000#ffffff for faces