UI Kit
The single source of truth for every color, type style and component used on this platform. Ship product UI only with what is fixed here.
Color palette
Typography
Heading one
Heading two
Heading three
Heading four
Body text is set for comfortable reading: generous line height and a measured line length, so a listing description or a policy page never feels cramped.
Body text is set for comfortable reading: generous line height and a measured line length, so a listing description or a policy page never feels cramped.
Основной текст набран для комфортного чтения: увеличенный межстрочный интервал и умеренная длина строки — описание объекта или страница политики никогда не выглядят тесно.
ข้อความเนื้อหาถูกจัดวางให้อ่านสบาย: ระยะห่างบรรทัดกว้างขึ้นและความยาวบรรทัดพอเหมาะ ทำให้คำอธิบายประกาศหรือหน้านโยบายไม่รู้สึกอึดอัด
正文排版注重阅读体验：行距宽松、每行长度适中，无论是房源描述还是政策页面都不会显得拥挤。
Good design is as little design as possible.
Buttons
Forms & inputs
Interactive components
Availability calendar
- Your booking dates
- Occupied
- Today
Your booking
- Check-in
- Tue, Dec 8
- Check-out
- Fri, Dec 18
- 10 nights
- $1040
- Long-stay discount (10%)
- −$104
- Total
- $936
- Average per night
- $94
Listing completeness
Badges
Property card
Photo gallery
Used on a single property's own page and on a project/complex page with many units. Click the hero photo to open it fullscreen; arrow keys and swipe page through it there.
Overlays & popups
Charts
Map
Click the pin to preview a listing — drag and pinch to pan and zoom, the same as Google Maps.
This map runs on your own MapTiler key
Labels now follow the site's own current language automatically, switching with the page — try it in a different locale. The free tier covers 5,000 map sessions and 100,000 API requests a month, no card required; worth watching once this leaves /ui-kit for a page with real traffic. The next tier up, Flex, is $30/month for 25,000 sessions and 500,000 requests.