Belmond — About
Marquee Hero
Loading
Swisstypefaces
Cool, geometric grid with crisp sans serif, evoking vast, data-driven clarity.
Click any value to copy. Roles are suggestions, not gospel.
- #1070baoklch(53.4% 0.141 249)Dominant
- #043a95oklch(38.2% 0.158 261)Surface
- #9ad2ecoklch(83.4% 0.068 228)Ink
- #608b9boklch(61.1% 0.053 223)Accent
- #d2d0c3oklch(85.6% 0.018 100)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Only Extended VF Variable | 44px | 350 | 1.18 | 0 | Aa Bb Cc |
| h2 | Only Extended VF Variable | 28px | 350 | 1.43 | 0 | Aa Bb Cc |
| h3 | Only Extended VF Variable | 20px | 375 | 1.5 | 0 | Aa Bb Cc |
| body | Euclid Triangle | 18px | 300 | 1.56 | 0 | Aa Bb Cc |
| caption | Suisse Intl | 11px | 400 | 1.25 | 0 | Aa Bb Cc |
| button | Suisse Intl | 10px | 300 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #1070ba;
--color-surface: #043a95;
--color-ink: #9ad2ec;
--color-accent: #608b9b;
--color-detail: #d2d0c3;
}
/* CSS variables exposed by source */
:root {
--light: rgba(255,255,255,.36);
--grey-09: #191919;
--yellow: #FFFF00;
--error-font-size: .875rem;
--handle-border: 1px solid rgb(122 144 158);
--lightrose: rgb(254, 107, 170);
--check-content-background: transparent;
--mark-color: #46789a;
--label-line-height: 1.5rem;
--pink: rgb(245, 67, 255);
--input-line-height: 1.5rem;
--rose: #FF0072;
--lightblue: #88E5FD;
--check-background: white;
--grey-03: #d1d1d1;
--white: white;
--success: oklch(88.82% .2 175.72);
--focus-fg: rgb(252,205,255);
--invalid-fg: #cd1619;
--input-background: white;
--input-padding-left: .5625rem;
--fieldset-margin: 2rem;
--lightorange: #FFB857;
--check-border-radius: 0;
--lightgreen: #57D362;
--lightyellow: #FFFFAA;
--grey-07: #535353;
--track-background: #eeeeee;
--invalid-shadow: 0 0 .1875rem .125rem #cd1619, inset 0 0 .125rem .0625rem #cd1619;
--error: #cd1619;
--french: #0086FF;
--grey-01: #f5f5f5;
--blue: #00CDFF;
--lime: #C8F200;
--track-height: .375rem;
--label-margin: 1.125rem;
--help-font-size: .875rem;
--lightfrench: #57AFFF;
--valid-fg: #bbbbbb;
--info: #57AFFF;
--handle-background: white;
--orange: #FF9300;
--input-border-color: #bbbbbb;
--lightpink: rgb(252,205,255);
--input-margin: .9375em;
--mediumpink: rgb(248,131,255);
--focus-bg: white;
--green: #00BC11;
--aqua: oklch(88.82% .2 175.72);
--input-padding-right: .5625rem;
--radio-border-width: 1px;
--handle-width: 1.25rem;
--label-font-size: 1rem;
--black: black;
--input-border-radius: .1875rem;
--track-border: none;
--label-input-margin: .1875rem;
--grey-02: #dedede;
--lightlime: #E1F898;
--cyan: #40ffff;
}Drop-in prompt
Build a landing page in the visual style of Swisstypefaces.
Reference design system (extracted from the live site):
- Palette: #1070ba, #043a95, #9ad2ec, #608b9b, #d2d0c3
- Typefaces: Only Extended VF Variable, Euclid Triangle, Suisse Intl
- Macrostructure: Marquee Hero
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/swisstypefaces-com
