Kaggle
Ecosystem Index
Cool, geometric gradients and sharp sans-serifs evoke a sophisticated, data-driven precision.




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 | The Future | 64px | 500 | 1.1 | -1.92px | Aa Bb Cc |
| h2 | The Future | 40px | 500 | 1.2 | -0.8px | Aa Bb Cc |
| body | The Future | 16px | 400 | 1.25 | 0 | Aa Bb Cc |
| button | The Future | 16px | 400 | 1.25 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #da2e0f;
--color-surface: #c41112;
--color-ink: #74d4fc;
--color-accent: #8d468a;
--color-detail: #b89dc0;
}
/* CSS variables exposed by source */
:root {
--brand--white: white;
--size-unit: 16;
--size-font: calc(clamp(992px, 100vw, 1440px) / (1440 / 16));
--brand--brand-purple: #caaef5;
--size-container: clamp(992px, 100vw, 1440px);
--brand--brand-magneta: #ef2cc1;
--size-container-ideal: 1440;
--brand--transparent: transparent;
--brand--black: #000;
--text--black-40: #0006;
--brand--brand-orange: #fc4c02;
--size-container-min: 992px;
--brand--dark-blue: #010120;
--size-container-max: 1440px;
--shades--white-opacity-16: #ffffff29;
--opacity--blue-40: #9bcdf566;
--opacity--cyan-40: #70e9f066;
--_radius---12: .75em;
--shades--white-opacity-4: #ffffff0a;
--shades--black-opacity-12: #0000001f;
--_spacers---spacers--120: 7.5em;
--opacity--cyan-16: #70e9f029;
--product--blue-01: #9bcdf5;
--shades--black-opacity-4: #0000000a;
--product--cyan-01: #70e9f0;
--_radius---16: 1em;
--_spacers---padding-global: 3em;
--opacity--purple-8: #caaef514;
--product--purple-cards: #70549b;
--product--purple-03: #ede4fc;
--gradients-dark-blue-gradient-footer: linear-gradient(180deg, #151531 0%, rgba(21, 21, 49, 0.90) 100%);
--_radius---8: .5em;
--product--blue-02: #c1dff9;
--shades--black-opacity-90: #000000e6;
--shades--black-opacity-8: #00000014;
--shades--black-opacity-16: #00000029;
--shades--white-opacity-50: #ffffff80;
--shades--white-opacity-90: #ffffffe6;
--product--purple-01: #bdbbff;
--opacity--blue-16: #9bcdf529;
--shades--black-opacity-80: #000c;
--shades--black-opacity-60: #0009;
--shades--black-opacity-24: #0000003d;
--swiper-theme-color: #007aff;
--shades--black-opacity-50: #00000080;
--product--orange-01: #febea3;
--shades--white-opacity-8: #ffffff14;
--shades--white-opacity-60: #fff9;
--shades--white-opacity-40: #fff6;
--shades--white-opacity-12: #ffffff1f;
--opacity--blue-8: #9bcdf514;
--_spacers---spacers--80: 5em;
--product--cyan-02: #c8f6f9;
--product--orange-02: #ffdccd;
--_spacers---spacers--48: 3em;
--shades--white-opacity-24: #ffffff3d;
--shades--black-opacity-70: #000000b3;
--shades--white-opacity-70: #ffffffb3;
--product--cyan-03: #ebfbfc;
--product--pink-02: #fde3f6;
}Drop-in prompt
Build a landing page in the visual style of Together.
Reference design system (extracted from the live site):
- Palette: #da2e0f, #c41112, #74d4fc, #8d468a, #b89dc0
- Typefaces: The Future
- 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/together-ai