Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
UI Sources
DesignUI Sources embodies a sophisticated nocturnal aesthetic that positions it as the premium research platform for serious app developers. The stark contrast between deep charcoal backgrounds and crisp white content creates an atmosphere of focused intensity, while the bold 'Rethink Sans' typography at 60px commands attention with surgical precision.
Design Identity
Signature Color
Developer Charcoal
#36393f
Professional depth and technical sophistication - the color of late-night coding sessions and serious product work
Visual Identity
The dramatic dark-dominant layout with a bright white modal floating in space - creating a spotlight effect that makes content feel premium and focused, like viewing blueprints under a precise worklight.
Component Style
Generously rounded buttons (24px+ radius) with substantial padding create approachable pill-shaped elements. The primary CTA uses deep navy (#36393f area tones) with soft shadows, while cards float with subtle elevation. Everything feels cushioned and deliberate rather than sharp or clinical.
Spacing Philosophy
Luxurious breathing room with the modal consuming roughly 60% of viewport width, massive internal padding (40px+), and generous line-height creating an unrushed, premium consultation feel rather than cramped utility.
Design Principles
- Typography scales dramatically: 60px headlines to 16px body with 400-700 weight range only
- Border radius consistently generous at 20px+ for primary elements
- Dark backgrounds dominate with bright content spotlighting
- Shadows are soft and subtle (6px blur max) never harsh
- White space ratios favor content breathing over density
Target Audience
Senior iOS developers and product managers who research competitor apps methodically before building - professionals who value comprehensive analysis over quick inspiration
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 | 24px | |
| h2 | 60px | 700 | 60px | |
| h3 | 16px | 600 | 24px | |
| p | 12px | 400 | 16px | |
| a | 18px | 400 | 27px | |
| button | 16px | 400 | 24px | |
| body | 16px | 400 | 24px | |
| h2 | 60px | 700 | 60px | |
| h3 | 16px | 600 | 24px | |
| p | 12px | 400 | 16px |
Color Palette
#ffffff#121212#3498db#07bc0c#f1c40f#e74c3c#757575#616161#e0e0e0#bb86fc#0060df#36393f
