Friendly design skill for AI agents

Overview

Friendly is a warm, approachable design system skill for AI-powered development. It pairs soft pastel colors with an elegant serif typeface to create interfaces that feel like a handwritten invitation — gentle, welcoming, and unmistakably personal. Where most design systems optimize for efficiency or impact, Friendly optimizes for how the interface makes people feel.

When you add this skill file to your AI coding tool, every component it generates — from softly tinted buttons to rose-and-mint card layouts — carries the same inviting warmth, rounded softness, and serif-driven elegance that makes users feel comfortable rather than commanded.

Design tokens

Color palette

Friendly uses a pastel dual-accent palette that's unlike anything else on typeui.sh — soft rose pink and gentle sage green, two colors that feel like spring afternoon light:

The rose + sage pairing is the softest palette of any typeui.sh design skill. These aren't muted versions of bold colors — they're pastels from the ground up, designed to fill surfaces and backgrounds rather than draw sharp attention. The AI agent uses primary rose for tinted card backgrounds, highlighted sections, and soft button fills. Sage green balances the warmth with a natural, earthy calm. Together they create an interface that feels like a carefully curated living space rather than a software product.

Typography

Friendly uses Noto Serif Display for all body and display text — an elegant serif with optical sizing, generous curves, and a warmth that sans-serif typefaces simply can't replicate. This is the only serif-first design skill on typeui.sh.

Serif typography in UI is a deliberate choice that communicates personality:

• At display sizes (32-40px), Noto Serif Display's refined strokes and contrast create headings that feel editorial and crafted, like a magazine cover or a book title
• At body sizes (14-18px), the serif's stroke variation adds rhythm and texture to reading, making longer content feel more engaging than the flat uniformity of a geometric sans-serif
• The serif voice signals trust, warmth, and humanity — qualities that make users feel they're being spoken to by a person, not a machine

The type scale uses six sizes with a human-friendly range:

• 14px — Captions, helper text, secondary labels
• 16px — Body text (default)
• 18px — Large body, lead text
• 24px — Section headings (h3)
• 32px — Page headings (h2)
• 40px — Hero headings (h1)

Font weights span 100 (thin) to 900 (black). The serif aesthetic shines at moderate weights — 400 for flowing body text, 500-600 for headings that feel confident but not aggressive. The skill guides the AI away from ultra-heavy serif weights at body sizes, where thick serifs can reduce readability.

Space Mono handles monospaced content — code blocks, data tables, and technical contexts. Its slightly quirky, rounded letterforms maintain the friendly personality even in technical contexts where a purely industrial monospace would feel jarring.

Spacing

Friendly uses a compact density mode — an adaptive spacing system that keeps elements close together in a cozy, intimate arrangement. Rather than a fixed pixel scale, the density mode ensures consistent proportions across breakpoints while keeping the interface feeling warm and gathered rather than spacious and formal. The compact approach works hand-in-hand with the pastel palette: soft colors need elements in closer proximity to feel like a cohesive composition rather than isolated items floating in white space.

Component coverage

The skill file covers 40+ component families grouped by function:

• Inputs and forms — buttons, text inputs, selects, comboboxes, checkboxes, radios, switches, textareas, date/time pickers, file uploaders
• Data display — cards, tables, data lists, data grids, charts, stats/metrics, badges, chips, avatars
• Navigation — breadcrumbs, pagination, steppers, sidebars, top bars, command palette, tabs
• Overlays — modals, drawers, sheets, tooltips, popovers, menus
• Feedback — alerts, toasts, notifications center, progress indicators, skeletons, empty states
• Page-level — authentication screens, settings pages, documentation layouts, onboarding flows, pricing blocks, search

For each component, the skill defines required interaction states (default, hover, focus-visible, active, disabled, loading, error), keyboard and touch behavior, spacing and typography token usage, and responsive edge cases.

Design philosophy

Friendly is built on the belief that software should feel like it was made by people who care about the people using it:

• Pastel surfaces, not pastel accents — rose and sage aren't used as thin accent lines or tiny badges. They fill entire card backgrounds, section containers, and button surfaces. The AI agent uses pastels generously, creating an interface that feels bathed in warm light
• Serif as personality — Noto Serif Display communicates trust, craftsmanship, and humanity in a way that no sans-serif can. Every line of text feels authored rather than generated, personal rather than institutional
• Compact and cozy — the tight density keeps elements gathered together like items on a well-organized desk. The interface feels intimate and curated rather than spacious and corporate
• Rounded everything — rounded corners on cards, buttons, inputs, and badges reinforce the soft, approachable feel. No sharp edges, no hard stops. The AI agent applies generous border radii consistently across every component
• Warmth over neutrality — where most design systems default to gray for neutral states, Friendly's pastels mean even inactive elements carry a tint of warmth. Disabled states dim toward rose or sage rather than flat gray

This makes Friendly a strong fit for:

• Wellness, health, and self-care applications
• Personal finance and budgeting tools
• Journaling, note-taking, and productivity apps
• Community platforms and social spaces
• Wedding, event planning, and invitation tools
• Children's and family-oriented products
• Onboarding flows and first-run experiences
• Any product where emotional comfort and approachability are core to the experience

Accessibility

Friendly enforces WCAG 2.2 AA compliance as a hard requirement. Approachable design and accessible design are the same thing — an interface that makes someone feel unwelcome because they can't use it isn't friendly at all. The skill file instructs the AI agent to:

• Use keyboard-first interaction patterns for all interactive elements
• Include visible focus states on every focusable component — adapted to be clearly visible against pastel-tinted surfaces where standard focus rings might blend in
• Maintain sufficient color contrast ratios, with particular care around the pastel primary (#F2D9DC) and secondary (#D9F2D8) as background colors. Dark text (#111827) on pastel surfaces meets AA requirements, but the skill ensures the AI never places pastel text on white or pairs pastels against each other where contrast would fail
• Prioritize accessibility over aesthetics when the two conflict

The pastel palette presents a unique accessibility challenge: these colors are designed to be soft and subtle, which means contrast margins are tighter than bold-colored systems. The skill explicitly encodes which color combinations are permitted and which are prohibited, so the AI agent never produces a rose-on-sage or sage-on-white combination that would fail readability standards.

Every accessibility rule is written to be testable in code review.

How to use with Claude AI

In Cursor IDE

1. Pull the skill file into your project:

npx typeui.sh pull friendly

2. The file is saved to .cursor/skills/friendly/SKILL.md by default. Cursor automatically picks up skill files from this directory and makes them available to Claude.

3. Start prompting — Claude will generate warm, serif-driven interfaces with rose-and-sage pastels, compact cozy layouts, and rounded, approachable components.

In Claude Desktop or API

1. Copy the skill file content from the typeui.sh page (use the Copy button in the sidebar).

2. Paste it into your system prompt or as a reference document at the start of your conversation.

3. Ask Claude to build components or pages. It will follow the Friendly guidelines — using Noto Serif Display for warm typography, the pastel palette for tinted surfaces, and compact density for intimate layouts.

In other AI tools

The skill file is standard markdown and works with any AI tool that accepts system-level instructions:

• Windsurf — place the file in your project's .windsurf/rules/ directory
• GitHub Copilot — add it to .github/copilot-instructions.md or reference it in your prompt
• OpenAI GPTs — upload it as a knowledge file in the GPT configuration
• Any LLM API — include the file content in the system message

What sets Friendly apart

Friendly is the only typeui.sh design skill that optimizes for emotional warmth. While other skills pursue clarity, impact, or thematic immersion, Friendly pursues comfort:

• Only serif-first skill — Noto Serif Display gives every interface a human, editorial voice that no sans-serif system can replicate. Text feels authored, not generated
• Pastel-as-surface palette — rose #F2D9DC and sage #D9F2D8 are used to fill backgrounds and containers, not as thin accent lines. The interface glows with warm light rather than punctuating with bold color
• Compact density mode — the cozy spacing keeps elements gathered close, creating an intimate feel that matches the gentle palette and rounded shapes
• Space Mono personality — the monospace font maintains the friendly character even in technical contexts, with rounded forms that other industrial monospaces lack
• Pastel contrast safeguards — the skill explicitly encodes permitted color combinations to prevent the most common accessibility failures in soft-palette design
• Quality gates — every rule is anchored to a token or measurable threshold, keeping the warm aesthetic consistent whether the AI generates a single card or an entire wellness platform