notion

SaaS dashboard aesthetic with clean data focus and productivity tool styling

Design Aesthetic

Clean, functional SaaS interface aesthetic. Dashboard-inspired layouts with clear data hierarchy. Notion, Linear, and modern productivity tool styling. Information-dense but organized. Professional and trustworthy.

Background

Color: Light Gray (#F7F7F5) or Pure White (#FFFFFF)
Texture: None - clean solid backgrounds

Typography

Primary Font (Headlines)

System UI stack or Inter. Semi-bold weight for emphasis. Clean, functional letterforms. Slightly tighter letter-spacing.

Secondary Font (Body)

Same family in regular weight. Optimized for screen reading. Comfortable line height (1.5-1.6).

Color Palette

Role	Color	Hex	Usage
Background	Light Gray	#F7F7F5	Primary background
Card Background	Pure White	#FFFFFF	Content cards
Primary Text	Near Black	#1F1F1F	Headlines, body
Secondary Text	Gray	#6B6B6B	Metadata, labels
Border	Light Border	#E5E5E5	Card borders, dividers
Accent Blue	Notion Blue	#2383E2	Links, primary actions
Accent Green	Success	#0F7B6C	Positive metrics
Accent Red	Alert	#E03E3E	Negative metrics
Accent Yellow	Warning	#DFAB01	Cautions

Visual Elements

Card-based layouts with subtle borders or shadows
Clean data tables and charts
Progress bars and metric displays
Icon-based navigation hints
Checkbox and toggle styling
Tag and label chips
Subtle hover state styling
Breadcrumb and hierarchy indicators

Style Rules

Do

Use card-based content organization
Create clear data hierarchy
Use subtle shadows and borders
Keep layouts grid-aligned
Present metrics prominently

Don't

Use decorative illustrations
Add gradients or complex backgrounds
Create artistic layouts
Use rounded blob shapes
Add slide numbers, footers, or logos

Best For

Product demos, SaaS presentations, productivity tool pitches, metrics dashboards, feature walkthroughs, B2B presentations, technical product marketing

notion.md 2.1 KB History Raw