Cafe design skill for AI agents

Overview

Cafe is a warm, cozy design system skill file that instructs AI coding assistants to generate interfaces with the inviting atmosphere of a neighborhood coffee shop. Every surface feels like linen tablecloths and worn wood counters. Every color is pulled from espresso, steamed milk, and natural parchment. When you give this skill file to an AI assistant, the output carries a quiet warmth that makes users want to linger — the digital equivalent of a good seat by the window with a flat white.

This skill is ideal for lifestyle brands, food and beverage platforms, recipe sites, blog templates, small business storefronts, booking interfaces, wellness apps, and any product where the experience should feel personal, unhurried, and human.

Design Tokens

Color Palette

Cafe draws its entire palette from the coffee counter — rich browns, soft creams, and warm neutrals that feel organic and grounded:

The palette is monochromatic by intent. The primary brown (#5D4432), text color (#3E2B1E), and secondary cream (#E9E3DD) all live on the same warm spectrum, creating a tonal harmony that feels cohesive and restful. There are no competing hues — the interface stays in the brown-cream family, with the standard semantic colors (success, warning, danger) appearing only for system feedback where color-coding is functional.

Typography

Cafe uses Poppins as both the primary and display font — a geometric sans-serif with a friendly, rounded character:

• Primary and display font: Poppins — its circular letterforms, generous x-height, and soft terminals create a warm, approachable reading experience. Where sharper geometric fonts (Inter, Roboto) feel technical, Poppins feels conversational — like hand-chalked menu boards translated to screen
• Monospace font: JetBrains Mono — used for code blocks, pricing details, and technical content where fixed-width clarity is needed

The typography uses a desktop-first expressive scale — sizes are calibrated for comfortable reading on wide viewports first, then adapt responsively. The rounded geometry of Poppins complements the warm brown palette naturally — both carry the same sense of softness and approachability. At display sizes (24–32px), Poppins headings feel like cafe signage: bold, friendly, and legible at a glance.

Spacing

Cafe uses an extended spacing scale: 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48px. The scale is wider than most systems, with both a finer bottom end (2px for subtle details) and a more generous top end (48px for section breaks):

• The 2px step allows for fine adjustments — hairline borders, subtle padding on badges, micro-spacing between tightly grouped elements
• The 48px step provides generous section separation, creating the breathing room that makes the cafe aesthetic feel relaxed rather than crammed
• Mid-range values (8–24px) handle the bulk of component padding and layout gaps

This scale reflects the Cafe philosophy: there is no rush. Generous whitespace between sections mimics the unhurried atmosphere of a well-designed coffee shop where tables aren't pushed together and there's always room to breathe.

The Cafe Aesthetic

Beyond tokens and type, the skill file defines the visual qualities that make Cafe feel like a physical space:

• Warm neutrals everywhere — the brown-cream palette creates a tonal environment where no element feels digital or clinical. Borders use warm grays, shadows use warm tones, and hover states shift within the brown spectrum
• Soft, not soft — corners are gently rounded, shadows are subtle, and transitions are smooth — but the interface isn't weak. The deep coffee-brown primary and dark espresso text provide the contrast and hierarchy needed for clarity
• Natural texture in spirit — while the skill file doesn't mandate background textures, it guides AI assistants to create layouts that evoke the layered warmth of a cafe: cream-colored cards on parchment surfaces, brown buttons that feel like wooden accents, secondary backgrounds that suggest linen
• Content-forward calm — the muted palette lets photography, illustrations, and content take center stage. The UI recedes into a supportive role, framing content like a well-designed menu frames its dishes

Component Coverage

Cafe includes guidance for over 40 component families, each tuned to carry the warm, inviting aesthetic:

• Inputs and forms — soft-cornered buttons in coffee browns, warm-bordered text inputs, selects, checkboxes, radios, switches, textareas, date/time pickers, file uploaders
• Data display — cream-surfaced cards, warm-toned tables, data lists, data grids, charts, stats/metrics, badges, avatars
• Navigation — breadcrumbs, pagination, steppers, sidebars, top bars, tabs, command palette
• Overlays and feedback — modals, drawers, tooltips, popovers, alerts, toasts, notifications, progress indicators, skeletons
• Page-level patterns — search, empty states, onboarding, authentication screens, settings pages, documentation layouts, pricing blocks

Each component defines required states (default, hover, focus-visible, active, disabled, loading, error) with interaction behavior for keyboard, pointer, and touch. Hover states use subtle warmth shifts within the brown-cream spectrum. Focus states use visible outlines that complement the warm palette. All token usage for spacing, typography, and color is explicit.

Accessibility

Cafe enforces WCAG 2.2 AA compliance as a baseline, with specific attention to the contrast challenges of a warm, muted palette:

• Keyboard-first interactions with visible focus states on every interactive element — focus rings use the primary brown or a darker contrast color that remains visible against cream and parchment surfaces
• Sufficient contrast between the espresso text (#3E2B1E) and the parchment surface (#F9F7F5), and between the primary brown (#5D4432) and the secondary cream (#E9E3DD)
• Semantic HTML structure and proper ARIA attributes throughout
• Testable acceptance criteria for every accessibility requirement

Warm, low-saturation palettes can easily fail contrast checks when browns get too close to creams. The skill file provides verified contrast ratios for every token-on-token combination and specifies where darker fallback values are required. When the cozy aesthetic pushes a color pairing below WCAG thresholds, the skill file always prioritizes readability.

How to Use with AI Tools

Cursor and Claude

1. Pull the skill file into your project:

npx typeui.sh pull cafe

2. The skill file saves as a SKILL.md in your project. Cursor automatically detects skill files and uses them as context during code generation.

3. Start prompting — ask Cursor to build landing pages, blog layouts, or e-commerce storefronts, and the output will follow the Cafe system's warm brown palette, Poppins typography, and generous spacing.

Claude (Anthropic)

Use Cafe directly with Claude by adding the skill file as context:

1. Copy or download the skill file from the design skill page
2. Paste it at the start of a Claude conversation, or add it to a Claude Project as project knowledge
3. Prompt Claude to generate UI code — it will produce warm, inviting interfaces following the Cafe tokens, tonal palette, and accessibility requirements

Other AI Tools

The skill file is standard markdown compatible with any AI assistant that accepts context or system instructions:

• ChatGPT — paste into Custom Instructions or at the start of a conversation
• Windsurf / Codeium — place the file in your project directory
• GitHub Copilot — add to your repository's context or instruction files
• v0 by Vercel — paste the design tokens and warm palette rules as prompt context

Design Philosophy

Cafe is built on the idea that the best digital experiences feel like physical ones. The skill file follows three principles:

1. Warmth is the brand — every design decision serves the same goal: make the user feel comfortable. The brown-cream palette, the rounded Poppins type, the generous spacing — they all contribute to an interface that feels like a place you want to be
2. Monochromatic discipline — by staying within the warm brown spectrum for all structural colors, the interface achieves a tonal harmony that busy multi-hue palettes cannot. Color variety comes from content (photos, illustrations), not from the UI chrome
3. Space is hospitality — the extended spacing scale with its 48px ceiling creates the digital equivalent of a cafe that doesn't crowd its tables. Generous whitespace signals that the experience is designed for comfort, not efficiency at all costs