skills.rest
deepparser
deepparserOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-airbnb

Apply Airbnb's design system tokens, typography, and component styles to UI generation.

Updated Feb 23, 2026
Search Tags:#typography#design system#css#design tokens#ui generation#airbnb#brand styling
One-click install
npx skills add https://github.com/deepparser/skills --skill design-airbnb-deepparser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-airbnb
Source: https://github.com/deepparser/skills/tree/main/design-airbnb
Command: npx skills add https://github.com/deepparser/skills --skill design-airbnb-deepparser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that match Airbnb's visual identity requires exact design tokens — colors, typography scales, shadows, and spacing — that are tedious to reverse-engineer and easy to get wrong. ## Core Features & Use Cases - Complete Design Token Catalog: Provides Airbnb's exact color palette (Rausch Red #ff385c, near-black #222222), Cereal VF typography scale, three-layer shadow system, and border-radius scale. - Component Specifications: Defines button variants, listing cards, search bars, category pill bars, form inputs, and circular navigation controls with precise CSS values. - Light and Dark Previews: Bundled HTML preview files show the design system rendered in both themes for visual verification. - Use Case: When asked to build a travel marketplace landing page, apply Airbnb's photography-first listing cards, pill-based category filters, and warm near-black typography to produce an on-brand interface. ## Quick Start Use the design-airbnb skill to create a listing search page styled like Airbnb with cards, a search bar, and category filters.

Frequently Asked Questions about design-airbnb

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

FAQPage Schema
How do I make a UI look like Airbnb's website?▼

Apply Airbnb's core tokens: pure white background, near-black #222222 text, Rausch Red #ff385c reserved for primary CTAs, and Cereal VF typography at weights 500-700. Use three-layer card shadows and generous border-radius of 8px for buttons and 20px for cards.

What colors does the Airbnb design system use?▼

The primary accent is Rausch Red #ff385c, with Deep Rausch #e00b41 for pressed states. Premium tiers use Luxe Purple #460479 and Plus Magenta #92174d. Text uses warm near-black #222222, with #6a6a6a for secondary text.

What font and typography scale does Airbnb use?▼

Airbnb uses Cereal VF, a custom variable font, with fallbacks to Circular and system fonts. Headings use weights 600-700 with negative letter-spacing from -0.18px to -0.44px, while body text runs at 14px weight 400 with 1.43 line height.

Does this skill include a dark mode version of the Airbnb design?▼

Yes, the skill bundles both preview.html for the light theme and preview-dark.html for the dark theme. These files show the full token catalog, components, and elevation levels rendered in each mode for visual reference.

What shadow style should I use for Airbnb-style cards?▼

Use the three-layer shadow stack: rgba(0,0,0,0.02) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 2px 6px, rgba(0,0,0,0.1) 0px 4px 8px. This combines a subtle border ring, soft ambient blur, and primary lift for a warm elevation effect.

When should I avoid using Rausch Red in an Airbnb-style interface?▼

Rausch Red #ff385c is a singular accent reserved for primary CTAs and brand moments only. Do not apply it to backgrounds or large surfaces, and do not introduce additional brand colors beyond the Rausch, Luxe, and Plus palette.

Related Skills

Explore More Design & Creative Skills→
nexu-ionexu-io
93.2k

copywriting

Generate and refine marketing copy for landing pages, homepages, and digital advertisements.

Official
Basic
Norfolk-GroupNorfolk-Group

component-library

Provides a UI component library with usage rules for the Hospitality portal.

Official
Intermediate
0xharryriddle0xharryriddle
3

Frontend Responsive Design Standards

Standardize mobile-first responsive UI design with breakpoints, typography, and touch targets.

Community
Advanced
automatedigitalautomatedigital
1

popular-web-designs

Generate HTML/CSS replicating design systems from 54 real-world websites.

Official
Intermediate