friendly

Name: friendly
Availability: InStock
Author: Bergside

Generate implementable design-system guidance for rounded, pastel-forward product UIs.

2.3k|211|Updated Mar 9, 2026

Search Tags:#accessibility #design system #design tokens #ui guidelines #component states #rounded ui #pastel palette

Ready to run

npx skills add https://github.com/bergside/awesome-design-skills --skill friendly-bergside

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: friendly
Source: https://github.com/bergside/awesome-design-skills/tree/main/skills/friendly
Command: npx skills add https://github.com/bergside/awesome-design-skills --skill friendly-bergside

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams create friendly, approachable interfaces without sacrificing accessibility or consistency.

Core Features & Use Cases

Tokenized foundations: rounded styling, compact spacing rhythm, and a pastel-forward color system for primary/secondary/status messaging.
Implementation-ready typography: a defined scale using Noto Serif Display (and Space Mono for labels) with explicit weights.
Accessibility-first guidance: WCAG 2.2 AA expectations, keyboard-first interactions, and visible focus states.

Quick Start

Use the friendly skill to generate UI guidelines and component rules that apply its tokens and accessibility constraints consistently across your product.

Frequently Asked Questions about friendly

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

FAQPage Schema

How do I create a design system with rounded UI components and pastel palettes?▼

To create a rounded UI design system with pastel palettes, you need tokenized foundations for styling, spacing rhythm, and status messaging. This approach enforces consistent component rules across buttons, inputs, cards, and modals while maintaining visual warmth.

What are WCAG 2.2 AA requirements for keyboard-first interaction states in UI components?▼

WCAG 2.2 AA requirements for keyboard-first interactions demand explicit interaction states and visible focus states across all UI components. Token-based constraints ensure these accessibility rules are consistently applied and pass testable quality gates during engineering delivery.

Can I use design tokens to standardize component states and responsive behaviors across product UIs?▼

Yes, you can use design tokens to standardize component states and responsive behaviors across product UIs. Token-based constraints define primary, secondary, and status messaging colors, ensuring consistent engineering delivery for navigation, modals, and inputs.

Does this pastel-forward visual language work for both web and mobile responsive behaviors?▼

The pastel-forward visual language applies to responsive behaviors in product UIs by using token-based constraints and compact spacing rhythm. It ensures consistent component rules for navigation, cards, and modals across different screen sizes and platforms.

What typography scale works best for accessible UI guidelines using Noto Serif Display?▼

An accessible UI typography scale using Noto Serif Display requires explicit weights for headings and Space Mono for labels. This implementation-ready scale pairs with rounded styling and pastel palettes to maintain readability and WCAG 2.2 AA compliance.

Why do my design system components fail WCAG 2.2 AA keyboard interaction checks?▼

Design system components fail WCAG 2.2 AA keyboard checks when they lack explicit interaction states or visible focus states. Applying token-based constraints and keyboard-first interaction rules ensures components pass testable quality gates for consistent accessibility.