Elastic
Bento Grid
Loading
Increase — Enterprise-grade Banking APIs
Cool, geometric gradients over stark, clean code – a digital, precise, and modern feel.
Click any value to copy. Roles are suggestions, not gospel.
- #04b2f2oklch(71.9% 0.149 233)Dominant
- #34bcfcoklch(75.2% 0.144 235)Surface
- #1d445aoklch(36.9% 0.058 236)Ink
- #646c7aoklch(52.9% 0.024 262)Accent
- #d4e0c4oklch(89.0% 0.040 126)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h2 | TT Interphases Pro-c98a05336328a01f | 40px | 600 | 1.2 | -0.8px | Aa Bb Cc |
| h3 | TT Interphases Pro-c98a05336328a01f | 24px | 500 | 1.2 | -0.096px | Aa Bb Cc |
| body | TT Interphases Pro-c98a05336328a01f | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | TT Interphases Pro-c98a05336328a01f | 14px | 500 | 1.43 | 0 | Aa Bb Cc |
| button | TT Interphases Pro-c98a05336328a01f | 14px | 500 | 1.43 | 0 | Aa Bb Cc |
:root {
--color-dominant: #04b2f2;
--color-surface: #34bcfc;
--color-ink: #1d445a;
--color-accent: #646c7a;
--color-detail: #d4e0c4;
}
/* CSS variables exposed by source */
:root {
--font-mrz-mono: "MRZ Mono-0084637e854f3a9b","MRZ Mono-0084637e854f3a9b fallback: Courier New",monospace;
--font-weight-bold: 700;
--font-input-mono: "Input Mono-4c4a0ba0f7fa02b9","Input Mono-4c4a0ba0f7fa02b9 fallback: Courier New",monospace;
--spacing: .25rem;
--font-weight-normal: 400;
--font-tt-interphases-pro: "TT Interphases Pro-c98a05336328a01f","TT Interphases Pro-c98a05336328a01f fallback: Arial",Arial,sans-serif;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--ease-in-out: cubic-bezier(.4, 0, .2, 1);
--container-md: 28rem;
--tw-divide-x-reverse: 0;
--tw-ring-offset-shadow: 0 0 #0000;
--tw-content: "";
--tw-inset-shadow-alpha: 100%;
--tw-gradient-from: rgba(0, 0, 0, 0);
--tw-ring-shadow: 0 0 #0000;
--tw-gradient-to: rgba(0, 0, 0, 0);
--tw-shadow-alpha: 100%;
--shiki-token-builtin: #fff;
--shiki-color-background: transparent;
--tw-drop-shadow-alpha: 100%;
--tw-divide-y-reverse: 0;
--tw-border-style: solid;
--tw-scale-z: 1;
--default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
--shiki-token-string-expression: #31f2cc;
--container-2xl: 42rem;
--tw-shadow: 0 0 #0000;
--tw-translate-x: 0;
--tw-ring-offset-width: 0px;
--shiki-token-string: #31f2cc;
--tw-gradient-via-position: 50%;
--tw-outline-style: solid;
--shiki-token-parameter: #bdc2c8;
--tw-inset-ring-shadow: 0 0 #0000;
--tw-space-x-reverse: 0;
--tw-scale-x: 1;
--shiki-token-link: #31f2cc;
--shiki-token-keyword: #3bf;
--tw-translate-z: 0;
--tw-gradient-to-position: 100%;
--tw-gradient-via: rgba(0, 0, 0, 0);
--shiki-token-punctuation: #8995a1;
--tw-scale-y: 1;
--animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
--default-transition-duration: .15s;
--container-lg: 32rem;
--shiki-token-constant: #df3;
--tw-space-y-reverse: 0;
--container-xl: 36rem;
--container-3xl: 48rem;
--tw-translate-y: 0;
--blur-md: 12px;
--ease-out-quint: cubic-bezier(.23, 1, .32, 1);
--ease-out: cubic-bezier(0, 0, .2, 1);
--shiki-token-comment: #8995a1;
--tw-gradient-from-position: 0%;
--shiki-token-function: #31f2cc;
--animate-spin: spin 1s linear infinite;
--container-4xl: 56rem;
}Drop-in prompt
Build a landing page in the visual style of Increase — Enterprise-grade Banking APIs.
Reference design system (extracted from the live site):
- Palette: #04b2f2, #34bcfc, #1d445a, #646c7a, #d4e0c4
- Typefaces: TT Interphases Pro-c98a05336328a01f
- 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/increase-com
