Buck
Ecosystem Index
Deep teal gradients and crisp sans-serif, fostering expansive, focused digital clarity.




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 |
|---|---|---|---|---|---|---|
| body | gerstner | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | gerstner | 24px | 400 | 1.25 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #288054;
--color-surface: #1f6542;
--color-ink: #99dfbc;
--color-accent: #589c79;
--color-detail: #acccbc;
}
/* CSS variables exposed by source */
:root {
--color-dark-green: #006834;
--text-m: 36px;
--text-lg: 54px;
--spacing: 1px;
--color-transparent-blue: #ddeeffb3;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--text-m--line-height: 1.15;
--text-xl--line-height: .95;
--color-yellow: #fff703;
--color-dark-blue: #004aea;
--color-dark-gray: #393c3d;
--color-gray: #ebebeb;
--color-white: #fff;
--text-lg--line-height: 1.15;
--text-s: 24px;
--font-sans: "gerstner", "gerstner Fallback";
--text-s--line-height: 1.25;
--color-gray-100: lab(96.1596% -.0823438 -1.13575);
--color-white-transparent: #ffffff1a;
--color-light-blue: #def;
--text-xs: 16px;
--text-xs--line-height: 1.3;
--color-green: #73fb79;
--color-light-gray: #f0f0f0;
--color-medium-gray: #aaa;
--radius-xl: .75rem;
--color-dark-gray-transparent: #393c3d1a;
--radius-lg: .5rem;
--text-xl: 96px;
--font-gerstner: "gerstner", "gerstner Fallback";
--header-height: 87px;
--progress-end-width: 100%;
--tw-drop-shadow-alpha: 100%;
--default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
--footer-overlap: 600px;
--tw-translate-z: 0;
--progress-end-direction: right;
--tw-gradient-via: rgba(0, 0, 0, 0);
--tw-scale-y: 1;
--slide-out-x: 0%;
--tw-translate-y: 0;
--ease-out: cubic-bezier(0, 0, .2, 1);
--header-gradient-height: 32px;
--header-affordance-offset: 8px;
--tw-gradient-from: rgba(0, 0, 0, 0);
--tw-gradient-to: rgba(0, 0, 0, 0);
--slide-in-delay: .25s;
--tw-scale-z: 1;
--tw-border-style: solid;
--tw-translate-x: 0;
--tw-gradient-via-position: 50%;
--default-font-family: "gerstner", "gerstner Fallback";
--tw-space-x-reverse: 0;
--tw-scale-x: 1;
--slide-out-delay: 3s;
--tw-gradient-to-position: 100%;
--page-top-space: 96px;
--default-transition-duration: .15s;
--progress-start-width: 0%;
--auto-advance-interval: .3s;
}Drop-in prompt
Build a landing page in the visual style of Linkedbyair.
Reference design system (extracted from the live site):
- Palette: #288054, #1f6542, #99dfbc, #589c79, #acccbc
- Typefaces: gerstner
- 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/linkedbyair-net