skills.rest
mberto10
mberto10COMMUNITY
Explore all skills by this author →
GitHub

FAZ Design Reference

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
One-click install
npx skills add https://github.com/mberto10/mberto-compound --skill faz-design-reference
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
mastra-aimastra-ai
27.1k

brand-guidelines

Enforce Mastra brand colors, typography, and writing guidelines across documentation drafts.

Official
Basic
guideopsguideops

spacious

Define design system specifications for whitespace, padding, and grid layouts.

Community
Advanced
guichefferguicheffer
3

zest-components

Provide reusable React Native UI components with Zest design system theming.

Community
Intermediate
oakossoakoss
14

brand-designer

Generate cohesive brand identities with SVG logos, Tailwind color tokens, and typography systems.

Official
Advanced