Handhold
Split Studio
Loading
Later: Influencer Marketing and Social Media Management
Soft, muted earth tones, clean sans serif, spacious layout - a serene, focused creative haven.
Click any value to copy. Roles are suggestions, not gospel.
- #fa410aoklch(64.8% 0.227 34)Dominant
- #e8a592oklch(78.1% 0.084 36)Surface
- #254c64oklch(39.9% 0.060 238)Ink
- #5986a7oklch(60.1% 0.071 241)Accent
- #d4b4a4oklch(79.4% 0.043 48)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Super X sans Display | 80px | 900 | 1 | 0.40207px | Aa Bb Cc |
| h2 | Inter Tight | 16px | 800 | 1.15 | 0.08px | Aa Bb Cc |
| h3 | Inter Tight | 14px | 600 | 1.25 | 0.14px | Aa Bb Cc |
| body | Inter Tight | 16px | 400 | 1.25 | 0 | Aa Bb Cc |
| button | Inter Tight | 16px | 400 | 1.15 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #fa410a;
--color-surface: #e8a592;
--color-ink: #254c64;
--color-accent: #5986a7;
--color-detail: #d4b4a4;
}
/* CSS variables exposed by source */
:root {
--text-3xs: 0.75rem;
--color-sand: #ede7e4;
--font-weight-semi: 600;
--font-body: "Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;
--color: currentcolor;
--space-5: 2.5rem;
--color-white: #fff;
--text-s: 0.9375rem;
--space-15: 7.5rem;
--space-3: 1.5rem;
--font-weight-bold: 700;
--gap: 2rem;
--text-2xs: 0.8125rem;
--space-1: 0.5rem;
--text: 1rem;
--text-xl: 1.25rem;
--color-charcoal-50: #868686;
--accent: #5124c1;
--color-off-white: #f8f8f8;
--radius-s: 10px;
--background: #fefcfb;
--border-color: #999;
--radius-m: 15px;
--space-6: 3rem;
--space-20: 10rem;
--font-weight-heavy: 900;
--text-color: #000;
--text-h1: clamp(2rem,1.25rem + 3.5vw,4rem);
--primary: #f8f2ea;
--text-quote-l: 2rem;
--color-charcoal: #1e1e1e;
--text-quote: 1.5rem;
--text-2xl: 1.5rem;
--text-hero: clamp(2.5rem,1.5rem + 4.74vw,5.5rem);
--space-1-5: 0.75rem;
--space-4: 2rem;
--text-h2: clamp(1.5rem,1rem + 2.67vw,3rem);
--space-8: 4rem;
--color-offline: #000;
--color-hot-take: #fe3f00;
--color-grid-glow: #f8f2ea;
--space-2-5: 1.25rem;
--text-l: 1.125rem;
--text-small: 0.875rem;
--color-gridglow-20: #fefcfb;
--color-charcoal-80: #4b4b4b;
--font-weight-light: 350;
--shadowline: -0.0625rem;
--radius-l: 20px;
--space-10: 5rem;
--color-viral-crush: #5124c1;
--font-heading: "Super X sans Display","Helvetica Neue",Helvetica,Arial,sans-serif;
--space-0-5: 0.25rem;
--font-weight-extrabold: 800;
--space-2: 1rem;
--text-xs: 0.875rem;
--font-weight-medium: 700;
--font-weight-normal: 400;
--radius-xs: 5px;
--space-12: 6rem;
}Drop-in prompt
Build a landing page in the visual style of Later: Influencer Marketing and Social Media Management.
Reference design system (extracted from the live site):
- Palette: #fa410a, #e8a592, #254c64, #5986a7, #d4b4a4
- Typefaces: Super X sans Display, Inter Tight
- 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/later-com
