Gemini Google
Conversational FAQ
Loading
Wise
Cool, deep teal geometry—crisp sans-serif clarity on vast, airy, white canvases.
Click any value to copy. Roles are suggestions, not gospel.
- #d13034oklch(56.6% 0.197 25)Dominant
- #163505oklch(29.4% 0.082 137)Surface
- #9bea73oklch(86.0% 0.172 136)Ink
- #8c9087oklch(64.7% 0.014 126)Accent
- #b9bfb4oklch(79.7% 0.017 130)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Wise Sans | 89px | 900 | 0.85 | 0 | Aa Bb Cc |
| h2 | Inter | 61px | 600 | 1.1 | -1.82572px | Aa Bb Cc |
| h3 | Wise Sans | 40px | 400 | 0.85 | 0 | Aa Bb Cc |
| body | Inter | 18px | 400 | 1.44 | -0.108px | Aa Bb Cc |
| button | Inter | 20px | 600 | 1.6 | -0.22px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #d13034;
--color-surface: #163505;
--color-ink: #9bea73;
--color-accent: #8c9087;
--color-detail: #b9bfb4;
}
/* CSS variables exposed by source */
:root {
--color-content-link-active: #0e0f0c;
--color-sentiment-positive-primary: #054d28;
--color-interactive-contrast-hover: #cdffad;
--color-dark-maroon: #320707;
--color-sentiment-negative-primary-hover: #b8232b;
--color-sentiment-warning-secondary: #fff7d7;
--color-sentiment-warning-hover: #ffd11a;
--color-background-accent: rgba(56,200,255,0.10196);
--color-interactive-negative-hover: #d03238;
--color-interactive-warning-active: #b86700;
--color-sentiment-negative-hover: #b8232b;
--color-sentiment-warning-content: #4a3b1c;
--color-interactive-primary-active: #0e0f0c;
--color-sentiment-warning: #ffd11a;
--color-sentiment-negative-active: #a72027;
--color-interactive-neutral-active: #c5edab;
--size-112: 112px;
--color-bright-orange: #ffc091;
--color-white: #ffffff;
--color-interactive-neutral-hover: #d3f2c0;
--size-x-large: 56px;
--color-sentiment-positive-primary-hover: #043a1e;
--font-weight-bold: 700;
--size-x-small: 24px;
--color-interactive-accent: #9fe870;
--color-border-overlay: rgba(14,15,12,0.12157);
--color-sentiment-positive-secondary-active: #c5edab;
--font-weight-regular: 400;
--color-background-screen-hover: rgba(22,51,0,0.07843);
--color-sentiment-warning-content-hover: #3b2f16;
--font-size-20: 1.25rem;
--color-background-elevated: #ffffff;
--color-content-negative-active: #a7000d;
--color-interactive-positive: #2ead4b;
--color-interactive-control-hover: #0d1f00;
--color-content-celebration: #0b4c72;
--size-medium: 40px;
--color-interactive-contrast: #9fe870;
--color-sentiment-negative-primary-active: #a72027;
--color-light: #ffffff;
--color-background-screen: #ffffff;
--color-content-negative: #cf2929;
--color-interactive-control-active: #0e0f0c;
--color-interactive-secondary: #868685;
--color-content-positive: #008026;
--size-146: 146px;
--size-64: 64px;
--color-bright-blue: #a0e1e1;
--size-2x-large: 72px;
--color-content-positive-hover: #006d13;
--color-core-contrast: #000000;
--font-size-26: 1.625rem;
--font-size-16: 1rem;
--font-family-regular: "Inter",Helvetica,Arial,sans-serif;
--color-dark: #121511;
--color-content-accent-active: #0077a5;
--size-8: 8px;
--color-interactive-positive-hover: #069939;
--color-interactive-negative: #e74848;
--size-160: 160px;
}Drop-in prompt
Build a landing page in the visual style of Wise.
Reference design system (extracted from the live site):
- Palette: #d13034, #163505, #9bea73, #8c9087, #b9bfb4
- Typefaces: Wise Sans, Inter
- Macrostructure: Conversational FAQ
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/wise-com
