mirror of
https://github.com/JimLiu/baoyu-skills.git
synced 2026-07-17 16:09:47 +08:00
Jim Liu 宝玉
70 lines
2.1 KiB
Markdown
70 lines
2.1 KiB
Markdown
# 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
|