Poly
Bento Grid
Loading
Abyssale — Creative Automation for Agencies & Teams
Deep teal expanse, crisp sans-serif geometry, subtly layered negative space.
Click any value to copy. Roles are suggestions, not gospel.
- #ad44a4oklch(56.3% 0.178 331)Dominant
- #84fcbcoklch(90.4% 0.142 158)Surface
- #59054coklch(32.0% 0.136 336)Ink
- #9a7178oklch(59.2% 0.053 7)Accent
- #d4acc4oklch(78.7% 0.056 342)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Calsans | 80px | 600 | 1.1 | -0.4px | Aa Bb Cc |
| h2 | Calsans | 72px | 600 | 1.4 | -0.4px | Aa Bb Cc |
| h3 | Calsans | 18px | 600 | 1.2 | -0.4px | Aa Bb Cc |
| body | Inter | 18px | 400 | 1.5 | -0.4px | Aa Bb Cc |
| button | Inter | 14px | 500 | 1.5 | -0.4px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #ad44a4;
--color-surface: #84fcbc;
--color-ink: #59054c;
--color-accent: #9a7178;
--color-detail: #d4acc4;
}
/* CSS variables exposed by source */
:root {
--background-color--background-alternate: white;
--text-color--text-primary: #062023;
--background-color--background-pink: #ff90fd;
--border-color--border-primary: #eaf2f2;
--text-color--text-warning: #5e5515;
--border-color--border-alternate: #788485;
--background-color--background-blue: #90ebff;
--background-color--background-warning: #fff267;
--text-color--text-success: #0a363a;
--background-color--background-secondary: #eaf2f2;
--text-color--text-secondary: #788485;
--text-color--text-error: #3c043b;
--background-color--background-success: #68ffad;
--text-color--text-alternate: white;
--background-color--background-alternative-to: #fafafa;
--background-color--background-error: #3c043b;
--border-color--border-secondary: #0a363a;
--background-color--background-primary: #0a363a;
--native-link: #00f;
--base-color-neutral--black: #062023;
--link--color: white;
--base-color-brand--integration--make: #6c00cb;
--base-color-brand--aubergine: #3c043b;
--base-color-brand--skydive: #90ebff;
--_blue---blue: #32066f;
--base-color-system--warning-yellow-dark: #5e5515;
--base-color-brand--pinkish: #ff90fd;
--base-color-system--error-red-dark: #3c043b;
--page--dark: #0a363a;
--base-color-brand--obsidian: #32066f;
--base-color-system--success-green-dark: #0a363a;
--link-color--link-primary: #68ffad;
--base-color-system--error-red: #ff90fd;
--page--light: #68ffad;
--base-color-system--focus-state: #68ffad;
--base-color-brand--integration--n8n: #eb4a71;
--base-color-brand--integration--zapier: #ff8e35;
--base-color-neutral--white: white;
--base-color-brand--mint: #68ffad;
--base-color-brand--evergreen: #0a431d;
--link-color--link-alternate: white;
--margin-bottom: 0px;
--base-color-neutral--neutral: #788485;
--link-color--link-secondary: #062023;
--base-color-neutral--dark-grey: #3c4747;
--base-color-system--warning-yellow: #fff267;
--base-color-brand--lemon: #fff267;
--base-color-brand--forest: #0a363a;
--base-color-brand--amber: #ff8e35;
--base-color-system--success-green: #68ffad;
--base-color-brand--carmine: #67080a;
--charcoal: #131315;
--base-color-neutral--light-grey: #eaf2f2;
}Drop-in prompt
Build a landing page in the visual style of Abyssale — Creative Automation for Agencies & Teams.
Reference design system (extracted from the live site):
- Palette: #ad44a4, #84fcbc, #59054c, #9a7178, #d4acc4
- Typefaces: Calsans, Inter
- 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/abyssale-com
