Razorpay - Best Payment Solution for Online Payments India
Bento Grid
Loading
Wealthsimple | More is more
Deep indigo expanse, clean sans-serif geometry, softly glowing data points.
Click any value to copy. Roles are suggestions, not gospel.
- #b47c3coklch(63.1% 0.106 67)Dominant
- #dce4c4oklch(90.4% 0.043 119)Surface
- #634421oklch(41.4% 0.066 68)Ink
- #74848eoklch(60.4% 0.024 235)Accent
- #c2b7a7oklch(78.4% 0.025 77)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | tiempos | 64px | 400 | 1.16 | -0.64px | Aa Bb Cc |
| h2 | the-future | 48px | 500 | 1.16 | 0.24px | Aa Bb Cc |
| h3 | the-future | 18px | 500 | 1.16 | 0.09px | Aa Bb Cc |
| body | the-future | 18px | 400 | 1.4 | 0 | Aa Bb Cc |
| button | the-future | 18px | 400 | 1.4 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #b47c3c;
--color-surface: #dce4c4;
--color-ink: #634421;
--color-accent: #74848e;
--color-detail: #c2b7a7;
}
/* CSS variables exposed by source */
:root {
--color-borders: #32302f;
--color-table-highlight-border: #686664;
--color-text-input: #1c1b1b;
--color-text-button-primary: #fff;
--color-outlines-secondary: #1c1b1b;
--color-scrollbar-thumb: #afaaa7;
--color-text-input-secondary: #1c1b1b;
--color-pagination-item-active: #e4e2e1;
--color-focus-ring-button-secondary: #e4e2e1;
--color-scrollbar-track: #f1f0f0;
--color-nav-context-menu-focus: #e4e2e1;
--color-hover-button-primary: rgba(252,252,252,0.2);
--color-nav-context-menu: #f1f0f0;
--color-text-error-secondary: #a43d12;
--color-input: #fff;
--color-input-gradient-mask: #fff;
--color-table-background: #fcfcfc;
--color-table-border: #e4e2e1;
--color-text-placeholder: #686664;
--color-text-light: #686664;
--color-border-button-secondary: #32302f;
--color-button-secondary: #fcfcfc;
--color-text-success: #486635;
--color-pagination-item-hover: #f1f0f0;
--color-outlines-active: #afaaa7;
--color-text-error: #a43d12;
--color-button-primary: #32302f;
--color-text-placeholder-secondary: #686664;
--color-text: #1c1b1b;
--color-table-highlight: #f1f0f0;
--color-text-muted: #1c1b1b;
--color-hover-button-secondary: rgba(50,48,47,0.2);
--color-outlines: #e4e2e1;
--color-text-success-secondary: #486635;
--color-text-button-secondary: #32302f;
--ws-nav-ui-track-indicator: #1c1b1b;
--ws-z-index-popup: 25;
--ws-color-greyscale-99: #fcfcfc;
--ws-color-text-placeholder: #868686;
--tw-ring-shadow: 0 0 #0000;
--ws-color-text-success: #486635;
--ws-color-input: #fff;
--ws-color-text-button-outline: #1c1b1b;
--ws-nav-ui-arrow-icon-color: #fff;
--ws-nav-ui-track-background: color-mix(in srgb,#1c1b1b 25%,transparent);
--ws-color-greyscale-100: #fff;
--ws-color-greyscale-50: #868686;
--ws-color-celery-70: #99b383;
--ws-spacing-5: 1.25rem;
--nav-background-color: #fcfcfc;
--ws-border-radius-pill: 1000px;
--ws-shadow-floating: 0 1px 4px 0 rgb(16 24 40/10%),0 1px 2px 0 rgb(16 24 40/6%);
--ws-color-outlines-active: #afaaa7;
--ws-focus-ring-offset: 0.125rem;
--ws-color-slate-90: #e4e2e1;
--ws-color-slate-60: #94908d;
--custom-top-sticky-content-px: 56px;
--ws-color-input-message: #686664;
--ws-color-terracotta-70: #ff8a71;
--ws-border-radius-small: 0.25rem;
}Drop-in prompt
Build a landing page in the visual style of Wealthsimple | More is more.
Reference design system (extracted from the live site):
- Palette: #b47c3c, #dce4c4, #634421, #74848e, #c2b7a7
- Typefaces: tiempos, the-future
- Macrostructure: Bento Grid
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/wealthsimple-com
