Add baoyu-skills package
This commit is contained in:
@@ -0,0 +1,69 @@
|
||||
# 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
|
||||
Reference in New Issue
Block a user