skills.rest
ihlamury
ihlamuryCOMMUNITY
Explore all skills by this author →
𝕏@yagizihlamurGitHub

airbnb-ui-skills

Enforce Airbnb UI constraints for light-mode interfaces with Inter font and 4px grid.

73|9|Updated Jan 25, 2026
Search Tags:#typography#design system#ui design#spacing#light mode#airbnb
One-click install
npx skills add https://github.com/ihlamury/design-skills --skill airbnb-ui-skills
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: airbnb-ui-skills
Source: https://github.com/ihlamury/design-skills/tree/main/skills/airbnb
Command: npx skills add https://github.com/ihlamury/design-skills --skill airbnb-ui-skills

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides opinionated constraints for building interfaces that are visually consistent with Airbnb's design system, ensuring a familiar and polished user experience.

Core Features & Use Cases

  • Aesthetic Consistency: Apply Airbnb's light mode, Inter font, and 4px grid system to your designs.
  • UI Element Guidelines: Adhere to specific color palettes, typography scales, spacing rules, and border-radius values.
  • Use Case: When developing a new feature for a travel booking platform, use these guidelines to ensure the UI matches the clean, modern aesthetic users expect from brands like Airbnb.

Quick Start

Apply the airbnb-ui-skills to design a light-mode interface using Inter font and a 4px grid.

Frequently Asked Questions about airbnb-ui-skills

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

FAQPage Schema
How do I apply Airbnb's UI design system to a new interface?▼

Airbnb UI design system constraints enforce light-mode interfaces using the Inter font, a 4px spacing grid, semantic color tokens, and specific typography styles to ensure visual consistency and a polished user experience.

What typography and spacing rules does the Airbnb design system use?▼

The Airbnb design system typography uses the Inter font family with specific font sizes and weights, while spacing rules are strictly based on a 4px scale grid to maintain consistent layout alignment across all UI elements.

How do I style interactive states for buttons and inputs in a light-mode design system?▼

To style interactive states for buttons and inputs in a light-mode design system, apply defined semantic color tokens and specific guidelines for focus, hover, and disabled states to maintain accessibility and aesthetic consistency.

Can I use this UI design system for a travel booking platform?▼

Yes, you can use this UI design system for a travel booking platform to ensure your interface matches the clean, modern aesthetic users expect from brands like Airbnb, utilizing light mode and a 4px grid system.

Do I need specific dependencies to build Airbnb-inspired interfaces?▼

No specific dependencies are required to build Airbnb-inspired interfaces, as the constraints focus on applying semantic color tokens, Inter typography, and 4px grid spacing directly within your existing design workflow.

Related Skills

Explore More Design & Creative Skills→
ihlamuryihlamury
73

gusto-ui-skills

Enforce Gusto's UI design system constraints for light-mode interfaces.

Community
Intermediate
ihlamuryihlamury
73

railway-ui-skills

Enforce Railway-inspired dark mode UI constraints with Inter font and a 4px grid system.

Community
Intermediate
ihlamuryihlamury
73

slack-ui-skills

Enforce Slack UI design constraints for light-mode interfaces with Inter font and 4px grid.

Community
Intermediate
ihlamuryihlamury
73

mailchimp-ui-skills

Enforce Mailchimp UI design constraints with light mode, Inter font, and 4px grid.

Community
Intermediate