The colours, type, shapes and pictures of Fable in one place.
Brand
FableFableTravel & Hotels - Open and sunny: sky and sea blues with sunset accents, places and journeys.
Palette Muted Azure · Aurora Glass style · pictures: Soft blobs with travel & hotels subjects · fonts Outfit and Inter
Colours
Every colour is a token in assets/css/theme.css (--wt-primary ...). The contrast of the text colours is shown against the page; WCAG AA needs 4.5:1 for text.
Light mode
Dark mode
Type
Outfit
Headings
Inter
Text, buttons and forms (Google Fonts)
Small hotels with big character
What makes Fable different
The small habits that make a big difference
Small-group walks with guides who live there, from the morning market to the bar that never makes the guidebooks.
We keep things simple, so you can focus on what matters to you. Travel insurance and car rental can be added in a single click. We listen first, then build a plan around what you actually need. Family rooms, adults-only retreats and pet-friendly stays in one search.
Clear prices, honest advice and no surprises along the way.
Corners and depth
--wt-shadow--wt-shadow-lgComponents
Pictures
Soft blobs in the template colours, with travel & hotels subjects. Every product picture shows its product. Replace them with your own photos of the same size (see PHOTOS.md for the photos of the live demo).
Design files
design-tokens/tokens.json- every token in the W3C Design Tokens format: in Figma, install the Tokens Studio plugin and load the file; Style Dictionary turns it into code for other platforms.design-tokens/style-guide.svg- this page as a board: drag it into Figma, Sketch or Illustrator and every swatch, text and shape stays editable.design-tokens/tokens.css- the same values as CSS variables for other projects in the brand.