正文
获取原文件references/styles/notion.md
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