Eurostar
Split Studio
Soft, warm ochre tones and clean sans-serifs evoke serene, modern sophistication.




Click any value to copy. Roles are suggestions, not gospel.
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Branch | 48px | 400 | 1.07 | 2px | Aa Bb Cc |
| h2 | Branch | 48px | 400 | 1.07 | 2px | Aa Bb Cc |
| body | Century Gothic | 17px | 400 | 1.4 | 1px | Aa Bb Cc |
Max content width 1366px
:root {
--color-dominant: #c3bb3b;
--color-surface: #5c581c;
--color-ink: #dcc8b2;
--color-accent: #948254;
--color-detail: #d0bda0;
}
/* CSS variables exposed by source */
:root {
--f-spinner-stroke: 2.75;
--toastify-color-warning: #f1c40f;
--f-button-svg-disabled-opacity: 0.65;
--f-spinner-color-2: rgba(17, 24, 28, 0.8);
--f-button-svg-width: 20px;
--toastify-spinner-color: #616161;
--toastify-toast-offset: 16px;
--toastify-z-index: 9999;
--f-button-border-radius: 0;
--toastify-text-color-error: #fff;
--toastify-color-info: #3498db;
--toastify-toast-top: max(16px, 0px);
--f-button-bg: #f8f8f8;
--f-button-height: 40px;
--toastify-text-color-warning: #fff;
--toastify-toast-padding: 14px;
--f-spinner-color-1: rgba(0, 0, 0, 0.1);
--toastify-toast-max-height: 800px;
--toastify-color-transparent: rgba(255, 255, 255, .7);
--f-button-svg-stroke-width: 1.5;
--toastify-color-progress-error: hsl(6, 78%, 57%);
--toastify-font-family: sans-serif;
--toastify-text-color-light: #757575;
--toastify-toast-shadow: 0px 4px 12px rgba(0, 0, 0, .1);
--toastify-color-progress-info: #3498db;
--loader-highlight-color: #dedede;
--toastify-color-progress-success: #07bc0c;
--toastify-color-dark: #121212;
--toastify-container-width: fit-content;
--toastify-toast-bottom: max(16px, 0px);
--toastify-color-progress-dark: #bb86fc;
--f-button-svg-filter: none;
--toastify-icon-color-success: #07bc0c;
--toastify-toast-min-height: 64px;
--toastify-toast-bd-radius: 6px;
--f-spinner-height: 36px;
--toastify-color-light: #fff;
--f-button-svg-height: 20px;
--toastify-color-progress-warning: #f1c40f;
--toastify-text-color-success: #fff;
--toastify-toast-width: 320px;
--toastify-color-progress-bgo: .2;
--toastify-color-success: #07bc0c;
--toastify-text-color-dark: #fff;
--f-button-color: #374151;
--toastify-color-progress-light: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
--toastify-color-error: hsl(6, 78%, 57%);
--f-spinner-width: 36px;
--f-button-active-bg: #d0d0d0;
--f-button-transform: none;
--toastify-toast-background: #fff;
--toastify-icon-color-error: hsl(6, 78%, 57%);
--toastify-toast-left: max(16px, 0px);
--toastify-toast-right: max(16px, 0px);
--toastify-icon-color-info: #3498db;
--f-button-svg-fill: none;
--f-button-border: 0;
--loader-background-color: #eeeeee;
--f-button-transition: all 0.15s ease;
--toastify-text-color-info: #fff;
}Drop-in prompt
Build a landing page in the visual style of Lyfehotels.
Reference design system (extracted from the live site):
- Palette: #c3bb3b, #5c581c, #dcc8b2, #948254, #d0bda0
- Typefaces: Branch, Century Gothic
- Macrostructure: Split Studio
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/lyfehotels-com--rooms-suites