Are Na
Split Studio
Earthy ochre and slate, precise sans-serifs float in spacious, open fields.




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 | Rector | 52px | 400 | 1.15 | 0 | Aa Bb Cc |
| h2 | Rector | 38px | 400 | 1.26 | 0 | Aa Bb Cc |
| h3 | Rector | 32px | 400 | 1.5 | 0 | Aa Bb Cc |
| body | Dazzed | 16px | 400 | 1.15 | 0 | Aa Bb Cc |
| button | Dazzed | 16px | 600 | 1.15 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #d77b57;
--color-surface: #843c34;
--color-ink: #ecb593;
--color-accent: #97745c;
--color-detail: #d9c9a8;
}
/* CSS variables exposed by source */
:root {
--color-sienna-light: #f5ebe3;
--color-sienna-medium: #d29d7f;
--color-beige: #b9b2a9;
--font-family-sans-serif: "Dazzed","Helvetica Neue",helvetica,arial,sans-serif;
--color-neutral-dark: #434654;
--color-text-secondary: #606373;
--font-family-serif: "Rector",georgia,times,"Times New Roman",serif;
--color-text-link: #b6602f;
--color-gray: #f8f8f8;
--color-white: #fff;
--color-cream: #fcfaf7;
--color-sienna: #b6602f;
--color-neutral-medium: #606373;
--color-border: #e8e5e1;
--color-red: #c71f48;
--color-neutral: #edeeef;
--color-black: #1b1e2d;
--color-green: #dee2d5;
--color-dark-brown: #4d4439;
--color-slate: #606373;
--color-brown: #6d6152;
--color-neutral-light: #f8f8f8;
--color-background-secondary: #fcfaf7;
--color-background-primary: #fff;
--color-text-primary: #1b1e2d;
--color-bluegray: #303340;
--rt-transition-show-delay: 0.15s;
--hex-green-500: #7f9565;
--rt-color-success: #8dc572;
--hex-sienna-700: #733918;
--max-width-desktop-single-col: calc((1060px - (40px * 3)) / 4);
--rt-opacity: 0.9;
--width-desktop-col-gap: 40px;
--hex-brown-900: #201b17;
--hex-neutral-800: #303340;
--hex-green-050: #dee2d5;
--hex-sienna-400: #b6602f;
--rt-color-error: #be6464;
--hex-neutral-500: #606373;
--rt-color-dark: #222;
--hex-neutral-900: #1b1e2d;
--hex-sienna-100: #f5ebe3;
--max-width-desktop-three-col: calc((calc((1060px - (40px * 3)) / 4) * 3) + (40px * 2));
--rt-transition-closing-delay: 0.15s;
--hex-neutral-300: #b4b7c2;
--hex-brown-300: #b9b2a9;
--width-desktop: 1060px;
--hex-neutral-000: #fff;
--hex-sienna-800: #54280e;
--hex-brown-050: #fcfaf7;
--hex-brown-800: #38312a;
--max-width-desktop-two-col: calc((1060px - (40px)) / 2);
--hex-brown-700: #4d4439;
--hex-neutral-700: #434654;
--rt-color-info: #337ab7;
--hex-neutral-400: #8d909e;
--hex-brown-400: #998f84;
--rt-color-warning: #f0ad4e;
--hex-sienna-900: #301506;
--hex-sienna-300: #d29d7f;
}Drop-in prompt
Build a landing page in the visual style of Frontierclimate.
Reference design system (extracted from the live site):
- Palette: #d77b57, #843c34, #ecb593, #97745c, #d9c9a8
- Typefaces: Rector, Dazzed
- 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/frontierclimate-com