What font is used in the Notion Avatar brand style?

The primary font is Quicksand, specifically used with a semi-bold weight of 600 to maintain a friendly, approachable, and hand-drawn feel.

How should SVGs be formatted for this brand?

SVGs should use hand-drawn paths rather than perfect geometric shapes, featuring a stroke width of 24px for components and rounded line caps/joins.

What are the core visual characteristics of this style?

The style is defined by thick black borders (3-4px), organic hand-drawn SVG lines, generous white space, and a high-contrast minimalist color palette.

Does this skill provide CSS classes?

Yes, it includes specific Tailwind-compatible classes and hex codes, such as border-3 and border-4, along with specific color codes like #fffefc for backgrounds.

Notion Avatar Brand Styling

Name: Notion Avatar Brand Styling
Author: Mayandev

byMayandev

•

3,169

•

Design Tools

Applies Notion's iconic hand-drawn minimalist design system and visual standards to web components and digital artifacts.

This skill provides Claude with the specific design DNA of the Notion Avatar project, enabling the creation of interfaces and assets that feature a distinct hand-drawn minimalist aesthetic. It includes comprehensive guidelines for the Quicksand typography stack, a high-contrast black-and-white color palette, and technical specifications for characteristic 3-4px bold borders. By using this skill, developers can ensure their UI components, SVG illustrations, and layouts maintain the playful yet refined visual language associated with the Notion-style ecosystem.

Key Features

013,169 GitHub stars

02High-contrast color palette optimized for accessibility and minimalism

03Hand-drawn SVG path guidelines for organic, imperfect visual elements

04Detailed typography specs for Quicksand semi-bold font integration

05Specific border-weight (3px-4px) and radius standards for bold UI

06Pre-defined Tailwind CSS classes for buttons, cards, and containers

Use Cases

01Developing frontend components that match the Notion-style aesthetic

02Creating brand-consistent SVG icons and decorative illustrations

03Styling documentation and blog layouts for a clean, approachable look

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add mayandev/notion-avatar brand-guidelines

For use in Claude.ai and ChatGPT

Download Skill