— name: brand-guidelines description: 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. license: Complete terms in LICENSE.txt — # Notion Avatar Brand Styling – Hand-Drawn Minimalist Style ## Overview 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 ## Brand Guidelines ### Design Philosophy Notion Avatar follows a **hand-drawn minimalist aesthetic** characterized by: – Clean, simple layouts with generous white space – Hand-drawn SVG illustrations and decorative elements – Bold, confident strokes and borders – Playful yet refined visual language – Emphasis on clarity and ease of use ### Colors **Primary Colors:** – Background: `#fffefc` – Warm off-white background (primary surface) – Primary Text/Border: `#000000` – Pure black for text and borders – Secondary Text: `#6b7280` (gray-500) – For secondary information – Body Text: `#374151` (gray-700) – For body content – Heading Text: `#111827` (gray-900) – For headings **Interactive States:** – Hover Background: `#f9fafb` (gray-50) – Subtle hover states – Active Background: `#f3f4f6` (gray-100) – Active/pressed states – Border Hover: `#000000` – Black borders on hover **Accent Colors:** – Use sparingly for special elements – Maintain high contrast with background – Prefer black/white/gray palette for consistency ### Typography – **Primary Font**: Quicksand (font-weight: 600, semi-bold) – **Font Stack**: `'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` – **Font Weight**: 600 (semi-bold) for all text – **Font Style**: Hand-drawn, friendly, approachable – **Note**: Quicksand font file is located at `/fonts/Quicksand.ttf` ### Visual Elements **Borders:** – Use thick borders for emphasis: `border-3` (3px) or `border-4` (4px) – Border color: `#000000` (black) – Border style: `solid` for most elements – Border radius: `rounded` or `rounded-full` for buttons and cards **Buttons:** – Primary (filled): `bg-black text-white font-bold py-2 px-4 rounded-full hover:bg-gray-800` – Secondary (outlined): `border-3 border-black text-black font-bold py-2 px-4 rounded-full hover:bg-gray-50` – Tab buttons: `px-6 py-2 rounded-full border-2 border-black transition-colors` – Active: `bg-black text-white` – Inactive: `bg-transparent text-black hover:bg-gray-100` **Cards & Containers:** – Background: `bg-white` – Border: `border-3 border-black` or `border-4 border-black` – Border radius: `rounded-lg` – Shadow: Minimal or none (prefer borders over shadows) **Icons & Illustrations:** – SVG format with hand-drawn style – Stroke width: 24px for avatar parts, variable for icons – Stroke color: `#000000` (black) – Fill: Transparent or white for faces – Line caps: `round` – Line joins: `round` ## Features ### Hand-Drawn Aesthetic – All SVG graphics use hand-drawn, organic lines – Avoid perfect geometric shapes – slight imperfections add character – Use rounded line caps and joins for softer appearance – Decorative elements (like header decoration) add visual interest ### Minimalist Layout – Generous white space (`#fffefc` background) – Clean, uncluttered interfaces – Clear visual hierarchy through size and weight – Simple, intuitive navigation ### Bold Borders – Thick borders (3-4px) create strong visual definition – Black borders provide high contrast – Rounded corners soften the boldness – Borders replace shadows for depth ### Typography Application – Quicksand font throughout for consistency – Semi-bold weight (600) maintains readability – Generous line height for body text – Clear hierarchy through size, not weight variation ## Technical Details ### Font Management – Quicksand font is loaded via `@font-face` in `global.css` – Font file location: `/public/fonts/Quicksand.ttf` – Font display: `swap` for better performance – Fallback to system fonts ensures compatibility ### Color Application – Use Tailwind CSS classes for consistency – Custom colors defined in `tailwind.config.js` if needed – Background color applied to `html` element: `#fffefc` – Maintain high contrast ratios for accessibility ### Border Implementation – Tailwind border width utilities: `border-3`, `border-4` – Border color: `border-black` (`#000000`) – Border radius: `rounded`, `rounded-lg`, `rounded-full` – Border style: `border-solid` (default) ### SVG Guidelines – Use hand-drawn style paths, not perfect shapes – Stroke width: 24px for avatar components, 2-4px for icons – Stroke color: `#000000` – Fill: Transparent or `#ffffff` for faces – ViewBox should match intended size – Optimize SVGs with SVGO when possible