Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Ghost
MediaGhost embodies a sophisticated publishing aesthetic that balances editorial gravitas with modern productivity. The brand uses stark contrasts between minimal light interfaces and rich dark dashboard environments, creating a professional yet approachable atmosphere for content creators who value craft over complexity.
Design Identity
Signature Color
Ghost Charcoal
#15171a
editorial sophistication and focused writing environment
Visual Identity
The dramatic shift from bright, minimal marketing pages to dark, data-rich dashboards with vibrant accent charts - creating a clear separation between public presentation and private workspace.
Component Style
Clean geometric elements with subtle rounded corners (6-8px), no heavy shadows, relying on contrast and color for hierarchy. Buttons feel substantial but not aggressive, with balanced padding that suggests confidence without dominance.
Spacing Philosophy
Generous whitespace on marketing surfaces creates breathing room for big typography, while dashboard layouts are efficiently dense with consistent 16-24px gaps that prioritize information density over luxury spacing.
Design Principles
- Typography scales dramatically from 96px headlines to 15px body text
- Dark interfaces (#15171a base) reserved for functional workspaces
- Bright accent colors (yellow #ffd400, pink #ff247d) only in data visualization
- No decorative shadows - hierarchy through color and scale only
- InterDisplay for headlines, InterVariable for UI - consistent font pairing
Target Audience
Independent publishers, content creators, and small media companies who prioritize writing quality and audience engagement over complex marketing automation
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 | 15px | 400 | 22.5px | |
| h1 | 96px | 700 | 96px | |
| h2 | 12px | 700 | 12px | |
| h3 | 36px | 700 | 36px | |
| p | 18px | 700 | 27px | |
| a | 15px | 400 | 22.5px | |
| button | 15px | 400 | 22.5px | |
| nav | 15px | 400 | 22.5px | |
| header | 15px | 400 | 22.5px | |
| main | 15px | 400 | 22.5px |
Color Palette
#15171a#3eb0ef#ffd400#d1ff19#5dcf1f#009c7e#343f44#738a94#c5d2d9#e5eff5#f1f2f3#f05230
