Standardhotels
Ecosystem Index
Loading
Bird
Warm, muted earth tones and playful sans-serifs create a breezy, approachable, open feeling.
Click any value to copy. Roles are suggestions, not gospel.
- #b43817oklch(52.0% 0.166 35)Dominant
- #325412oklch(40.5% 0.101 133)Surface
- #e4bca5oklch(82.4% 0.056 52)Ink
- #a8785boklch(61.4% 0.073 52)Accent
- #d0bbaaoklch(80.5% 0.034 61)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Poppins | 72px | 700 | 1.25 | 0 | Aa Bb Cc |
| h2 | Poppins | 48px | 700 | 1 | 0 | Aa Bb Cc |
| h3 | Poppins | 16px | 700 | 1.5 | 0 | Aa Bb Cc |
| body | Inter | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | Inter | 14px | 500 | 1.43 | 0 | Aa Bb Cc |
| button | Arial | 13px | 400 | 1.4 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #b43817;
--color-surface: #325412;
--color-ink: #e4bca5;
--color-accent: #a8785b;
--color-detail: #d0bbaa;
}
/* CSS variables exposed by source */
:root {
--text-2xl: 1.5rem;
--text-7xl: 4.5rem;
--text-lg: 1.125rem;
--color-sand: #fff4e9;
--text-5xl--line-height: 1;
--text-base--line-height: 1.5;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--color-new-road: #002139;
--color-esb-on-light: #0b819b;
--text-lg--line-height: calc(1.75 / 1.125);
--color-white: #fff;
--font-sans: "Inter", sans-serif;
--font-weight-bold: 700;
--text-6xl: 3.75rem;
--text-xs--line-height: calc(1 / .75);
--radius-2xl: 1rem;
--radius-md: .375rem;
--text-7xl--line-height: 1;
--radius-lg: .5rem;
--text-xl: 1.25rem;
--color-sea: #90e8fb;
--color-esb: #26ccf0;
--radius-3xl: 1.5rem;
--text-2xl--line-height: calc(2 / 1.5);
--spacing: .25rem;
--font-weight-semibold: 600;
--text-xl--line-height: calc(1.75 / 1.25);
--text-sm: .875rem;
--color-air: #c4f2fc;
--text-4xl: 2.25rem;
--text-sm--line-height: calc(1.25 / .875);
--text-3xl--line-height: 1.2;
--text-5xl: 3rem;
--text-3xl: 1.875rem;
--text-xs: .75rem;
--color-black: #000;
--font-weight-medium: 500;
--font-weight-normal: 400;
--font-display: "Poppins", sans-serif;
--radius-xl: .75rem;
--text-6xl--line-height: 1;
--text-4xl--line-height: calc(2.5 / 2.25);
--text-base: 1rem;
--container-md: 28rem;
--tw-inset-shadow-alpha: 100%;
--cc-btn-primary-hover-border-color: transparent;
--tw-ring-shadow: 0 0 #0000;
--cc-webkit-scrollbar-bg: rgba(255, 255, 255, .05);
--cc-btn-primary-hover-text: #002139;
--cc-toggle-readonly-bg: rgba(255, 255, 255, .1);
--tw-drop-shadow-alpha: 100%;
--cc-overlay-bg: rgba(0, 0, 0, .5);
--cc-btn-secondary-bg: transparent;
--cc-btn-primary-border-color: transparent;
--tw-outline-style: solid;
--cc-cookie-category-expanded-block-hover-bg: #dee4e9;
--cc-cookie-category-block-hover-bg: #e9eff4;
--cc-btn-secondary-hover-text: #fff;
--tw-inset-ring-shadow: 0 0 #0000;
--cc-pm-toggle-border-radius: 4em;
}Drop-in prompt
Build a landing page in the visual style of Bird.
Reference design system (extracted from the live site):
- Palette: #b43817, #325412, #e4bca5, #a8785b, #d0bbaa
- Typefaces: Poppins, Inter, Arial
- Macrostructure: Ecosystem Index
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/bird-co
