Cornellbotanicgardens
Manifesto
Loading
EverSwap - Trade, Lend, Borrow.
Ethereal, gradient peaks cradle soft, flowing sans-serifs in a tranquil, sky-blue haze.
Click any value to copy. Roles are suggestions, not gospel.
- #497fdaoklch(60.4% 0.150 260)Dominant
- #8abdf9oklch(78.5% 0.102 253)Surface
- #345485oklch(44.5% 0.089 259)Ink
- #8ca359oklch(68.0% 0.103 123)Accent
- #c9d3bboklch(85.3% 0.034 126)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Feature Display | 189px | 200 | 1 | 0 | Aa Bb Cc |
| h2 | Feature Display | 104px | 200 | 0.8 | 0 | Aa Bb Cc |
| h3 | Feature Display | 76px | 200 | 1 | 0 | Aa Bb Cc |
| body | Times | 16px | 400 | 1.4 | 0 | Aa Bb Cc |
| button | Britti Sans | 16px | 600 | 1.4 | 0 | Aa Bb Cc |
:root {
--color-dominant: #497fda;
--color-surface: #8abdf9;
--color-ink: #345485;
--color-accent: #8ca359;
--color-detail: #c9d3bb;
}
/* CSS variables exposed by source */
:root {
--color-white: #fbfff4;
--color-dark-green: #203727;
--color-light-green2: #bccca2;
--color-dark-link: #516e5a;
--color-black: #333338;
--color-dark-link-2: #62866d;
--color-pure-black: #000;
--color-pure-white: #fff;
--color-light-green: #e0ffab;
--vh: 9px;
--body1: max(16px, calc(calc(calc(100vw - min(60px, calc(40 * 100vw / 1440)) * 2) / 1440) * 20));
--grid-rows: 1;
--default-font: "Britti Sans";
--body2: max(14px, calc(calc(calc(100vw - min(60px, calc(40 * 100vw / 1440)) * 2) / 1440) * 16));
--ref-screen-width: 1440;
--btn1: max(16px, calc(calc(calc(100vw - min(60px, calc(40 * 100vw / 1440)) * 2) / 1440) * 16));
--btn2: max(16px, calc(calc(calc(100vw - min(60px, calc(40 * 100vw / 1440)) * 2) / 1440) * 18));
--preloader: max(30px, calc(calc(calc(100vw - min(60px, calc(40 * 100vw / 1440)) * 2) / 1440) * 45));
--sub1: max(16px, calc(calc(calc(100vw - min(60px, calc(40 * 100vw / 1440)) * 2) / 1440) * 22));
--grid-columns: 16;
--h2: max(65px, calc(calc(calc(100vw - min(60px, calc(40 * 100vw / 1440)) * 2) / 1440) * 110));
--site-padding-y: min(60px, calc(40 * 100vw / 1440));
--grid-gap-width: calc((100vw - min(60px, calc(40 * 100vw / 1440)) * 2) / ((16 / .15) + 16 - 1));
--header-font: "Feature Display";
--sub2: max(18px, calc(calc(calc(100vw - min(60px, calc(40 * 100vw / 1440)) * 2) / 1440) * 18));
--content-width: calc(100vw - min(60px, calc(40 * 100vw / 1440)) * 2);
--grid-gap-scale: .15;
--h1: max(80px, calc(calc(calc(100vw - min(60px, calc(40 * 100vw / 1440)) * 2) / 1440) * 200));
--grid-span-width: calc(calc((100vw - min(60px, calc(40 * 100vw / 1440)) * 2) / ((16 / .15) + 16 - 1)) + calc(calc((100vw - min(60px, calc(40 * 100vw / 1440)) * 2) / ((16 / .15) + 16 - 1)) / .15));
--grid-column-width: calc(calc((100vw - min(60px, calc(40 * 100vw / 1440)) * 2) / ((16 / .15) + 16 - 1)) / .15);
--site-padding-x: min(60px, calc(40 * 100vw / 1440));
--default: calc(calc(calc(100vw - min(60px, calc(40 * 100vw / 1440)) * 2) / 1440) * 16);
--site-header: 24px;
--content-unit: calc(calc(100vw - min(60px, calc(40 * 100vw / 1440)) * 2) / 1440);
--is-mobile: 0;
--link-footer: max(14px, calc(calc(calc(100vw - min(60px, calc(40 * 100vw / 1440)) * 2) / 1440) * 16));
--h3: max(55px, calc(calc(calc(100vw - min(60px, calc(40 * 100vw / 1440)) * 2) / 1440) * 80));
}Drop-in prompt
Build a landing page in the visual style of EverSwap - Trade, Lend, Borrow..
Reference design system (extracted from the live site):
- Palette: #497fda, #8abdf9, #345485, #8ca359, #c9d3bb
- Typefaces: Feature Display, Times
- Macrostructure: Manifesto
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/everswap-com
