Notion

## Overview

Professional yet approachable, with a clean modern aesthetic that balances productivity focus with friendly accessibility. The design feels spacious and uncluttered, using subtle depth and gentle curves to create a welcoming workspace environment.

Centered max-width containers with generous whitespace. Grid-based layouts with 28px gutters on desktop, 12px on mobile. Consistent 64px global navigation height with 20px base padding throughout components.

Uses a 4px base grid with scale: 1, 2, 3, 4, 6, 8, 10, 12, 16.

## Colors
- **Primary Blue** (#097fe8): Primary buttons, links, and brand accents
- **Secondary Blue** (#0075de): Secondary actions and hover states
- **Background White** (#ffffff): Main content backgrounds and cards
- **Background Gray Light** (#f6f5f4): Secondary backgrounds and subtle sections
- **Text Dark** (#000000): Primary text content and headings
- **Text Medium** (#615d59): Secondary text and labels
- **Text Light** (#a39e98): Tertiary text and placeholders
- **Border Regular** (#dfdcd9): Standard borders and dividers
- **Accent Red** (#f64932): Error states and important alerts
- **Accent Orange** (#ff6d00): Warning states and notifications
- **Accent Purple** (#9849e8): Special features and highlights
- **Accent Yellow** (#ffb110): Success states and positive feedback

## Typography
- **Headline Font**: NotionInter
- **Body Font**: NotionInter
- **Label Font**: NotionInter

NotionInter serves as the primary typeface across all contexts, creating visual hierarchy through weight and size variations rather than font family changes. Headings use 400-700 weight range with negative letter-spacing (-0.25px) for larger sizes. Body text maintains 400 weight with 500 for emphasis. The scale progresses logically from 12px captions to 40px hero text, with consistent line-height ratios that ensure readability.

## Elevation

Subtle layered shadows create gentle depth without overwhelming the clean aesthetic. Primary elevation uses soft multi-layer shadows (rgba combinations) while maintaining overall flatness. Interface elements float slightly above backgrounds with consistent shadow treatment.

## Components
- **Primary Button**: Blue rounded buttons with medium font weight, used for primary actions like 'Get Notion free'
- **Secondary Button**: Outlined or ghost buttons for secondary actions like 'Request a demo'
- **Navigation Bar**: Clean horizontal navigation with dropdown menus and consistent spacing
- **Hero Section**: Large centered content area with gradient background and prominent call-to-action buttons
- **Agent Avatars**: Circular colorful avatars representing AI agents with consistent sizing and styling
- **Interface Preview**: Product interface mockups with subtle shadows and rounded corners showcasing functionality
- **Logo Grid**: Company logos arranged in a clean grid layout for social proof and partnerships

## Do's and Don'ts
- Do use the comprehensive gray scale for text hierarchy instead of pure black on white
- Do maintain consistent 8px spacing increments for visual rhythm
- Do apply subtle multi-layer shadows for depth rather than harsh single shadows
- Don't use border radius values outside the established scale (3px, 4px, 5px, 8px, 12px, 20px)
- Do use NotionInter for all text to maintain typographic consistency
- Don't exceed 700 font weight to preserve the clean, approachable aesthetic
- Do use accent colors sparingly for status and personality, not as primary interface colors
- Don't compromise contrast ratios - maintain sufficient difference between text and background colors