Capacities
Ecosystem Index
Loading
Watershed
Cool, deep ocean depths—crisp, geometric sans-serif, vast open spaces.
Click any value to copy. Roles are suggestions, not gospel.
- #305fdeoklch(53.1% 0.201 265)Dominant
- #1a3078oklch(34.0% 0.126 267)Surface
- #819ef8oklch(71.6% 0.136 269)Ink
- #a65f60oklch(56.7% 0.093 19)Accent
- #9aa5cdoklch(72.7% 0.059 273)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | messinaSans | 72px | 500 | 1 | -2.88px | Aa Bb Cc |
| h2 | messinaSans | 48px | 500 | 1.25 | -1.44px | Aa Bb Cc |
| h3 | messinaSans | 21px | 500 | 1.17 | -0.63px | Aa Bb Cc |
| body | messinaSans | 20px | 500 | 1.2 | -0.2px | Aa Bb Cc |
| button | Arial | 13px | 400 | 1.4 | -0.133333px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #305fde;
--color-surface: #1a3078;
--color-ink: #819ef8;
--color-accent: #a65f60;
--color-detail: #9aa5cd;
}
/* CSS variables exposed by source */
:root {
--space-36: 36px;
--color-text-action: #041330;
--space-16: 16px;
--color-tangerine: #f96;
--color-marigold: #eca74e;
--space-14: 14px;
--color-cobalt-60: #4a6fff;
--space-4: 4px;
--space-40: 40px;
--color-storm: #5d8bb8;
--space-176: 176px;
--color-cobalt-20: #c1d2fe;
--color-quote-text: #333e63;
--font-size-11xl: 128px;
--color-grey-100: #242c47;
--space-8: 8px;
--color-cobalt-100: #032ca5;
--space-32: 32px;
--space-xl: 128px;
--color-grey-50: #8494c3;
--color-text-secondary: #4f596e;
--color-teal: #1b7a5a;
--color-cobalt-40: #658dfd;
--font-size-4xl: 32px;
--color-forest: #1d7368;
--font-size-md: 16px;
--text-size-lg: 18px;
--background-xlight: #fbfcfd;
--color-cobalt-30: #93aeff;
--primary-button-border-color: transparent;
--color-surface-cobalt-soft: #f0f4ff5c;
--space-2xl: 208px;
--color-cobalt-70: #1246e0;
--color-sea-foam: #c4e7f4;
--color-white: #ffffff;
--color-grey-30: #d1d8e5;
--color-grass: #00bb81;
--color-gray-20: #e5e9f0;
--text-size-xs: 12px;
--color-spring: #8ab280;
--font-size-10xl: 96px;
--color-spring-10: #e0eddd;
--text-size-md: 16px;
--font-size-12xl: 160px;
--color-background: #fff;
--space-144: 144px;
--color-straw: #f9f5d6;
--color-cobalt-1: #f5f8ff;
--color-cobalt-10: #e3ebff;
--color-afternoon: #e9c471;
--space-1: 1px;
--space-2xs: 12px;
--space-10: 10px;
--secondary-button-background-color: #dee6ff;
--color-navy-100: #0b1d45;
--font-size-8xl: 64px;
--color-sky: #c4e7f4;
--font-size-xs: 12px;
--color-poppy: #f63;
--color-spring-20: #c8e8be;
}Drop-in prompt
Build a landing page in the visual style of Watershed.
Reference design system (extracted from the live site):
- Palette: #305fde, #1a3078, #819ef8, #a65f60, #9aa5cd
- Typefaces: messinaSans, Arial
- 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/watershed-com
