Farcaster Xyz
Split Studio
Deep indigo expanse, clean sans-serif geometry, subtly glowing highlights.




Click any value to copy. Roles are suggestions, not gospel.
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | SpotifyMixUITitle | 64px | 700 | 1.4 | 0 | Aa Bb Cc |
| body | SpotifyMixUI | 16px | 400 | 1.4 | 0 | Aa Bb Cc |
| button | SpotifyMixUI | 16px | 400 | 1.4 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #047c96;
--color-surface: #054970;
--color-ink: #c6e9e0;
--color-accent: #9a8165;
--color-detail: #abc8c3;
}
/* CSS variables exposed by source */
:root {
--background-base: #ffffff;
--background-elevated-press: #e7e7e7;
--spacer-24: 24px;
--spacer-16: 16px;
--spacer-40: 40px;
--background-elevated-base: #ffffff;
--text-bright-accent: #4d44ff;
--spacer-20: 20px;
--text-negative: #c91123;
--spacer-72: 72px;
--background-press: #e2e2e2;
--spacer-8: 8px;
--background-highlight: #f5f5f5;
--background-tinted-base: rgba(0,0,0,0.08);
--spacer-12: 12px;
--spacer-4: 4px;
--background-elevated-highlight: #f5f5f5;
--text-warning: #955500;
--text-positive: #107434;
--background-tinted-highlight: rgba(0,0,0,0.12);
--spacer-80: 80px;
--spacer-56: 56px;
--spacer-64: 64px;
--spacer-48: 48px;
--text-subdued: #656565;
--background-tinted-press: rgba(0,0,0,0.19);
--text-announcement: #0b62c8;
--spacer-32: 32px;
--text-base: #000000;
--opacity-black-90: rgba(0,0,0,0.9);
--blue-facebook-100: #2374e1;
--red-light: #e22134;
--yellow-green-55: #3b4f05;
--sidebar-collapsed-width: 64px;
--opacity-black-70: rgba(0,0,0,0.7);
--neon-green: #5ff550;
--pink-180: #fcd2eb;
--pink: #ffcdd2;
--bentobox-height: calc(100vh - 64px - 8px);
--encore-title-font-stack: SpotifyMixUITitle,CircularSp-Arab,CircularSp-Hebr,CircularSp-Cyrl,CircularSp-Grek,CircularSp-Deva,sans-serif;
--solid-white-200: #ffffff;
--tan: #c39687;
--encore-shortest-1: 50ms;
--green-bluedesat-55: #294f44;
--electric-seafoam: #19e68c;
--violet-desat-75: #734d85;
--tangerine: #e3230e;
--wrapped-blue-139: #00aeef;
--storm: #a0c3d2;
--blue-violet-55: #3c00e4;
--violet-pinkdesat-135: #bb8dd0;
--violet-pink-135: #e079cd;
--green-135: #19b551;
--red: #cd1a2b;
--encore-sidebar-base-width: 200px;
--encore-graphic-size-decorative-larger-5: 88px;
--salmon-135: #ef77a1;
--black-90: rgba(0,0,0,0.9);
--violet-pinkdesat-100: #9e57bf;
--yellow-135: #bd9a03;
}Drop-in prompt
Build a landing page in the visual style of Creators Spotify.
Reference design system (extracted from the live site):
- Palette: #047c96, #054970, #c6e9e0, #9a8165, #abc8c3
- Typefaces: SpotifyMixUITitle, SpotifyMixUI
- 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/creators-spotify-com