Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Scientific American
MediaScientific American embodies editorial gravitas through a restrained palette of deep blues and crisp whites that evokes laboratory precision and academic authority. The GT America typography creates a distinctly American intellectual voice - confident yet accessible, bridging rigorous science with public understanding.
Design Identity
Signature Color
Scientific Blue
#007fad
Evidence-based trust and peer-reviewed authority - the color of laboratory equipment and academic credibility
Visual Identity
Dense content grids with generous article imagery and consistent teal accent bars that separate scientific disciplines - creating a journal-like hierarchy that feels both authoritative and approachable.
Component Style
Clean rectangular buttons with minimal 4-6px border radius, subtle shadows, and solid fills. Components feel substantial and trustworthy rather than playful - like scientific instruments designed for precision over aesthetics.
Spacing Philosophy
Compact editorial spacing maximizes content density while maintaining readability. Tight 12-16px gaps between related elements with larger 32-48px section breaks create newspaper-like information hierarchy.
Design Principles
- Border radius never exceeds 6px - keeping components authoritative, not playful
- Typography uses only GT America family - maintaining consistent editorial voice
- Blue accent color (#007fad) appears consistently across CTAs and category tags
- Content images are always high-contrast and substantial in size
- White space serves function over form - maximizing information density
Target Audience
Science-curious professionals, educators, and informed citizens who value authoritative sources over flashy presentation - people who read footnotes and check citations.
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 | |
| h1 | 16px | 400 | 24px | |
| h2 | 26px | 700 | 33.8px | |
| h3 | 24px | 700 | 26.4px | |
| p | 16px | 400 | 20.8px | |
| a | 16px | 700 | 20.8px | |
| button | 16px | 700 | 19.2px | |
| input | 16px | 400 | 24px | |
| header | 16px | 400 | 24px | |
| footer | 12.8px | 400 | 22.4px |
Color Palette
#ffffff#f6f6f6#000000#1a1a1a#222222#45423f#333333#666666#696979#676767#737373#d6d6d6