Novu - Open-source notifications infrastructure for devs and product teams
Bento Grid
Loading
Spline — Pricing
Deep indigo expanse, clean sans-serif geometry, a cool, futuristic digital stillness.
Click any value to copy. Roles are suggestions, not gospel.
- #fbb405oklch(81.5% 0.168 80)Dominant
- #048444oklch(53.8% 0.139 153)Surface
- #4d95f9oklch(67.1% 0.165 257)Ink
- #72769doklch(57.7% 0.060 280)Accent
- #cac9cboklch(83.7% 0.003 308)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Spline Sans | 58px | 500 | 1.24 | 0 | Aa Bb Cc |
| h2 | Spline Sans | 36px | 500 | 1.22 | 0 | Aa Bb Cc |
| h3 | Spline Sans | 14px | 500 | 1.71 | 0 | Aa Bb Cc |
| body | Spline Sans | 16px | 400 | 1.15 | 0 | Aa Bb Cc |
| button | Spline Sans | 16px | 400 | 1.15 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #fbb405;
--color-surface: #048444;
--color-ink: #4d95f9;
--color-accent: #72769d;
--color-detail: #cac9cb;
}
/* CSS variables exposed by source */
:root {
--color-white-070: #ffffffb3;
--color-white-008: #ffffff14;
--color-white: #fff;
--color-panel-bg: rgba(255,255,255,.08);
--color-white-001: #ffffff03;
--color-btn-bg: #ffffff0d;
--color-text-paragraph: #fff9;
--color-free-darker: rgba(255,255,255,calc(.08 + .03));
--color-blue-lighter: #5797ff;
--color-purple-bright: #a770ff;
--color-blue-dark: #217ce5;
--color-super-darker: #008761;
--color-green-bright: #47b35f;
--color-super: #00a376;
--color-bg: #000;
--color-red: #fd585b;
--color-text-main: #fff;
--color-super-lighter: #38e2b3;
--color-team: #915eff;
--color-white-010: #ffffff1a;
--color-team-lighter: #d680ff;
--color-green: #49bc541a;
--color-white-090: #ffffffe6;
--color-white-003: #ffffff08;
--color-blue-ios: #5966f3;
--color-blue: #0062ff;
--color-white-020: #fff3;
--color-purple: #8f66ff21;
--color-text-navigation: #ffffffb3;
--color-bg-pink: #ffe6e6;
--color-menu-dropdown: #1e1e23cc;
--color-panel-bg-hover: rgba(255,255,255,calc(.08 + .03));
--color-yellow: #ffb01f;
--color-bg-greenish: #c1f6e8;
--color-white-005: #ffffff0d;
--color-btn-bg-highlight: #ffffff0f;
--color-free: rgba(255,255,255,.08);
--color-bg-transparent: #1110;
--color-pink: #ff5cab;
--color-white-040: #fff6;
--color-white-060: #fff9;
--color-team-darker: #7448d4;
--color-white-080: #fffc;
--removed-body-scroll-bar-size: 0px;
--panel-bg-alpha: .08;
}Drop-in prompt
Build a landing page in the visual style of Spline — Pricing.
Reference design system (extracted from the live site):
- Palette: #fbb405, #048444, #4d95f9, #72769d, #cac9cb
- Typefaces: Spline Sans
- 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/spline-design--pricing
