skills.rest
KAFKA2306
KAFKA2306COMMUNITY
Explore all skills by this author →
𝕏@kafka_vrGitHub

design-system

Enforce typography, contrast, and safe-zone layout for YT3 thumbnails and UI assets.

Updated Jan 19, 2026
Search Tags:#typography#layout#design-system#thumbnail#brand-guidelines#color-contrast#ui-component
One-click install
npx skills add https://github.com/KAFKA2306/yt3 --skill design-system-kafka2306
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-system
Source: https://github.com/KAFKA2306/yt3/tree/main/.agent/skills/design-system
Command: npx skills add https://github.com/KAFKA2306/yt3 --skill design-system-kafka2306

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Establishes a consistent visual identity and layout rules to ensure thumbnails and UI assets communicate clearly, maintain brand cohesion, and remain legible at small sizes.

Core Features & Use Cases

  • Typography: Specifies Latin and Japanese font pairings and a clear size hierarchy for title and subtitle scales to preserve legibility.
  • Color & Accessibility: Defines base and accent colors and enforces a minimum 7.0:1 contrast ratio for all text/background pairs to meet high-contrast accessibility requirements.
  • Layout & Tokens: Prescribes safe-zone padding, character placement using the rule of thirds, and the use of configuration-driven tokens for all parameters.
  • Use Cases: Generating thumbnails, producing UI components and CSS styles, and reviewing visual outputs for brand consistency and mobile legibility checks.

Quick Start

Create a thumbnail for the topic "2026 Financial Protocol" using the design-system guidelines and verify typography, contrast, and safe-zone layout are applied.

Frequently Asked Questions about design-system

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

FAQPage Schema
How do I maintain visual identity and typography consistency across UI components and video thumbnails?▼

Maintain visual identity by applying standardized typography pairings, size hierarchy, and configuration-driven layout tokens to ensure brand cohesion across UI components and video thumbnails.

What is the minimum color contrast ratio needed for accessible thumbnail and UI text?▼

The minimum color contrast ratio required for accessible thumbnail and UI text is 7.0:1, enforced for all text and background pairs to meet high-contrast accessibility requirements.

How do I generate a brand-consistent thumbnail and verify its layout and legibility?▼

Generate a brand-consistent thumbnail by applying safe-zone padding, rule-of-thirds character placement, and typography standards, then verify mobile legibility and 7.0:1 color contrast compliance.

Can I use configuration-driven tokens for safe-zone layout parameters in my UI styling?▼

Yes, you can use configuration-driven tokens for safe-zone layout parameters to standardize UI component styling, ensuring consistent padding and character placement across visual assets.

Does this design system support Latin and Japanese font pairings for marketing assets?▼

Yes, the design system specifies Latin and Japanese font pairings with a clear size hierarchy for title and subtitle scales to preserve legibility in marketing assets.

Why does my thumbnail text fail mobile legibility checks despite using brand colors?▼

Thumbnail text fails mobile legibility checks when text and background pairs do not meet the 7.0:1 contrast ratio, or when safe-zone padding and size hierarchy standards are not applied.

Related Skills

Explore More Design & Creative Skills→
benciumbencium
383

UX Designer

Provide UI/UX design guidance with WCAG 2.1 AA compliance.

Community
Basic
NetzSichtNetzSicht

mobile-first-validation

Validate listing outputs for readability and visual hierarchy at 320px, 375px, and 414px viewports.

Official
Advanced
PatkikPatkik

i-colorize

Recommends UI color palettes and applies them to interface elements for accessibility and branding coherence.

Community
Advanced
DanielV-94DanielV-94

awwwards-ui-skills

Enforce Awwwards-style UI design guidelines with Inter font and 4px spacing grid.

Community
Intermediate