Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Super
Dev ToolsSuper embodies Notion-ecosystem sophistication with a premium orange-driven palette that communicates creative productivity and professional polish. The Beausite typography creates approachable yet authoritative hierarchy, while generous whitespace and warm grays evoke a sense of elevated simplicity for content creators who value both function and aesthetic refinement.
Design Identity
Signature Color
Super Orange
#d9730d
creative energy and professional confidence for Notion power users
Visual Identity
Distinctive orange accent system paired with sophisticated warm gray backgrounds and generous breathing room that immediately signals premium Notion tooling
Component Style
Soft-cornered buttons with 8px radius and subtle shadows, warm gray cards with gentle hover states, and minimal borders that prioritize content over chrome - everything feels refined but approachable
Spacing Philosophy
Luxurious vertical rhythm with substantial inter-section gaps creating a sense of premium calm, while tight 10px component gaps maintain functional density within content areas
Design Principles
- Orange accents never exceed single focal points per viewport
- Typography scales from 16px base to 57.6px headlines with consistent 1.4x line-height ratio
- Background colors stay within warm neutral spectrum from #fdfdfc to #f7f6f3
- Shadows use rgba(15,15,15,0.1) with 2-4px blur for subtle depth
- Component padding follows 12-24px rhythm for touch-friendly interaction zones
Target Audience
Notion power users and content creators who want professional websites without sacrificing the familiar Notion editing experience
Mood
Design descriptions are AI-generated based on visual analysis and may not fully reflect the brand's official design guidelines.
Design System
Typography Scale
| Element | Font | Size | Weight | Line Height |
|---|---|---|---|---|
| body | 16px | 400 | normal | |
| h1 | 57.6px | 700 | 63.36px | |
| h2 | 38.4px | 600 | 42.24px | |
| h3 | 25.6px | 600 | 30.72px | |
| p | 18px | 400 | 24px | |
| a | 16px | 400 | normal | |
| nav | 16px | 400 | normal | |
| footer | 16px | 400 | normal | |
| main | 16px | 400 | normal |
Color Palette
#fdfdfc#262a2e#37352f#d44e49#ffffff#f7f6f3#a7a39a#282620#efefef#ca922f#878378#2eaadc
