Twilio
Split Studio
Loading
Anima: Build Websites & Apps with AI | UX Design Agent | Figma to Code
Deep indigo depth, crisp sans-serif clarity, expansive digital stillness.
Click any value to copy. Roles are suggestions, not gospel.
- #0771b8oklch(53.4% 0.139 247)Dominant
- #58a5fcoklch(71.1% 0.149 253)Surface
- #063f77oklch(36.8% 0.110 254)Ink
- #5d4faeoklch(49.1% 0.146 286)Accent
- #bbbcbdoklch(79.5% 0.002 248)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Roslindale Deck | 76px | 400 | 1.2 | -1.52px | Aa Bb Cc |
| h2 | Roslindale Deck | 76px | 400 | 1.2 | -1.52px | Aa Bb Cc |
| h3 | Mulish | 23px | 400 | 1.5 | 0 | Aa Bb Cc |
| body | Times | 16px | 400 | 1 | 0 | Aa Bb Cc |
| button | Mulish | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #0771b8;
--color-surface: #58a5fc;
--color-ink: #063f77;
--color-accent: #5d4fae;
--color-detail: #bbbcbd;
}
/* CSS variables exposed by source */
:root {
--color-white: #fff;
--spacing-xxl: 80px;
--color-grey-200: #d8d8d8;
--primary-hover: #e2412e;
--primary-text: #3b3b3b;
--color-grey-400: #3b3b3b;
--spacing-xs: 12px;
--color-grey-100: #f7f7f7;
--spacing-lg: 32px;
--spacing-md: 24px;
--color-black: #2d2d2d;
--color-green: #009379;
--secondary-text: rgba(59,59,59,0.4);
--color-blue: #36f;
--color-red-primary: #ff6250;
--color-purple: #6d54cf;
--spacing-xl: 40px;
--color-red-hover: #e2412e;
--spacing-sm: 16px;
--color-light-green: #5bb99c;
--shadow: 0px 4px 12px rgba(59,59,59,0.1);
--color-grey-300: #a3a3a3;
--color-yellow: #f8d57e;
--primary: #ff6250;
--color-light-purple: #a898ec;
--background-color: #2b2b2b;
--color-pink: #f2bfaf;
--secondary: #3b3b3b;
--fs-title: clamp(2.25rem,4vw,4.25rem);
--yellow: #f8d57e;
--green: #009379;
--lh-headline: 1.25;
--myColor2: rgba(109, 84, 207, 0.8);
--fs-headline: clamp(3.25rem,5vw,5.375rem);
--pink: #f2bfaf;
--sophisticated-gray: #2b2b2b;
--slightly-stronger-shadow: 0px 4px 12px rgba(59,59,59,0.2);
--fs-main-headline: clamp(2rem,11vw,10rem);
--fs-body-2: clamp(1.25rem,2vw,2rem);
--fs-body: clamp(1.25rem,2vw,1.5rem);
--white: #fff;
--dark-shadow: rgba(0,0,0,0.25);
--red: #ff6250;
--fs-headline-1: clamp(3rem,9vw,6rem);
--tertiary: #d8d8d8;
--quirky-font: "Caveat",cursive;
--lh-title: 1.5;
--purple: #bfaff2;
--lh-body: 1.75;
--blue: #36f;
--myColor1: rgba(51, 102, 255, 0.8);
--light-divider: #f7f7f7;
}Drop-in prompt
Build a landing page in the visual style of Anima: Build Websites & Apps with AI | UX Design Agent | Figma to Code.
Reference design system (extracted from the live site):
- Palette: #0771b8, #58a5fc, #063f77, #5d4fae, #bbbcbd
- Typefaces: Roslindale Deck, Times, Mulish
- Macrostructure: Split Studio
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/animaapp-com
