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

디자인 도구

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.

주요 기능

3,169 GitHub stars
High-contrast color palette optimized for accessibility and minimalism
Hand-drawn SVG path guidelines for organic, imperfect visual elements
Detailed typography specs for Quicksand semi-bold font integration
Specific border-weight (3px-4px) and radius standards for bold UI
Pre-defined Tailwind CSS classes for buttons, cards, and containers

사용 사례

Developing frontend components that match the Notion-style aesthetic
Creating brand-consistent SVG icons and decorative illustrations
Styling documentation and blog layouts for a clean, approachable look

소개

주요 기능

3,169 GitHub stars
High-contrast color palette optimized for accessibility and minimalism
Hand-drawn SVG path guidelines for organic, imperfect visual elements
Detailed typography specs for Quicksand semi-bold font integration
Specific border-weight (3px-4px) and radius standards for bold UI
Pre-defined Tailwind CSS classes for buttons, cards, and containers

사용 사례

Developing frontend components that match the Notion-style aesthetic
Creating brand-consistent SVG icons and decorative illustrations
Styling documentation and blog layouts for a clean, approachable look