On flat white paper, Al Jazeera builds a hard-news system from a 300-to-900 Roboto weight spread: orange #fa9000 is confined to the masthead block and the 8px section-eyebrow bar, live red #c31833 marks only breaking bands, badges and timeline dots, and every action is a compact 18px black pill. The corporate network pages invert to a #181818 canvas with #272967 indigo hero panels and gold rules.
Al JazeeraConsumer
Prompt Template
Base Template
Design an Al Jazeera-inspired interface. - Flat white news surface with hairline rules and zero shadows — hierarchy from type weight and density; - Orange #fa9000 only as the masthead logo block and the 8px bar before 300-weight uppercase section eyebrows; - Live red #c31833 reserved for breaking bands, LIVE badges and timeline dots on a silver rail; - Compact black pill controls at 18px radius, email capsule input at 22px; - Roboto across a 300–900 weight spread, with square-cropped 16:9 news photography. Colors: #ffffff, #fa9000, #c31833, #000000, #272967 with #fa9000 accent. Typography: Roboto.
Variant Prompts
📱 Mobile
Design a mobile app with Al Jazeera aesthetics. Use Al Jazeera color identity with #fa9000 accents. Single-column news feed, persistent LIVE pill, and a dot-rail live timeline.
💻 Web
Design a web application with Al Jazeera style. Use Al Jazeera color identity with #fa9000 accents. Packed multi-column news grid with hairline rules and a right rail.
📊 Dashboard
Design a dashboard with Al Jazeera design language. Use Al Jazeera color identity with #fa9000 accents. Timestamped live updates, Most Popular rankings, and red breaking alerts.
📄 Landing Page
Design a landing page with Al Jazeera visual identity. Use Al Jazeera color identity with #fa9000 accents. Masthead logo block, orange eyebrow bars, and photo-dense story cards.
Usage Examples
Al Jazeera News Front
WebBuild a news front page with Al Jazeera design language: white paper surface, orange logo block, 8px eyebrow bars, square 16:9 photography, and compact black pill buttons.
Al Jazeera Live Timeline
DashboardCreate a live-blog dashboard using Al Jazeera style: red LIVE badges, timestamped update blocks on a silver dot rail, and a Most Popular list with oversized slate numerals.
✅ Best For
- News front pages and breaking coverage
- Live blogs and minute-by-minute timelines
- Broadcast network brand and leadership pages
❌ Avoid For
- Playful consumer apps with rounded cards
- Discount-driven e-commerce campaign pages
DESIGN.md File
A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.