FAZ Design Reference

Name: FAZ Design Reference
Availability: InStock
Author: mberto10

Reference FAZ corporate design colors, typography, components, and layout guidelines.

Updated Aug 23, 2026

Search Tags:#typography #design system #color palette #corporate identity #UI guidelines #layout patterns

Ready to run

npx skills add https://github.com/mberto10/mberto-compound --skill faz-design-reference

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: FAZ Design Reference
Source: https://github.com/mberto10/mberto-compound/tree/main/plugins/work-toolkit/skills/design-reference
Command: npx skills add https://github.com/mberto10/mberto-compound --skill faz-design-reference

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive and structured reference for the FAZ (Frankfurter Allgemeine Zeitung) corporate design system, enabling consistent and on-brand development of digital products.

Core Features & Use Cases

Brand Guidelines: Access to core brand colors, typography rules, and spacing.
UI Component Patterns: Reference for standard UI elements like buttons, badges, and teasers.
Layout Principles: Guidelines on grid systems, responsive design, and the "Markenbühne" concept.
Use Case: A developer building a new article page for the FAZ website can quickly reference the correct typography, color palette, and layout structure to ensure brand consistency.

Quick Start

Consult the FAZ corporate design reference for brand colors and typography.

Frequently Asked Questions about FAZ Design Reference

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

What are the FAZ corporate design brand colors and typography rules for digital products?▼

The FAZ corporate design system specifies brand colors including Deep Blue, Gray, and Gold, alongside typography rules using Sang Bleu Kingdom and Suisse fonts to ensure visual consistency across digital products.

How do I build a wireframe using FAZ layout patterns and grid systems?▼

To build a wireframe, apply FAZ layout principles like the Markenbühne concept and responsive grid systems, then combine them with standard component patterns such as buttons, badges, teasers, and navigation elements.

Can I use FAZ UI guidelines for prototyping an article page layout?▼

Yes, you can use these UI guidelines for prototyping an article page by referencing the structured component definitions, layout structures, and responsive rules to achieve strict brand consistency for the FAZ website.

What standard UI component patterns are defined in the FAZ design system?▼

The FAZ design system defines standard UI component patterns including buttons, badges, teasers, and navigation elements, providing structured references for consistent interface development in wireframes and prototypes.

Does the FAZ corporate design reference include responsive design rules?▼

Yes, the FAZ corporate design reference includes responsive design rules and grid systems to ensure digital products adapt correctly while maintaining the Markenbühne layout principle and overall brand consistency.