Ciid Dk
Split Studio
Crisp, geometric yellow-gold on cool, muted paper - a precise, modern, and subtly energetic feel.




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 | Moderat | 92px | 700 | 1 | -1.38292px | Aa Bb Cc |
| h2 | Moderat | 41px | 700 | 1.1 | -0.614611px | Aa Bb Cc |
| h3 | Moderat | 31px | 700 | 1.1 | -0.47184px | Aa Bb Cc |
| body | Rosart | 21px | 400 | 1.4 | 0 | Aa Bb Cc |
| button | Moderat | 14px | 700 | 1.2 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #fcd404;
--color-surface: #8c740c;
--color-ink: #f2dc67;
--color-accent: #84847f;
--color-detail: #c5bcb6;
}
/* CSS variables exposed by source */
:root {
--color-grey-16: #e0dfd9;
--color-status-warning-shade: #b99d00;
--color-status-warning-glare: #f9e159;
--space-m-3xl: clamp(1.125rem,0.0847rem + 5.2013vw,5rem);
--text-decoration-thickness: 2px;
--font-base: "Rosart","Georgia Pro",Georgia,serif;
--space-m: clamp(1.125rem,1.0243rem + 0.5034vi,1.5rem);
--text-size-base: clamp(1.0625rem,0.9954rem + 0.3356vi,1.3125rem);
--space-regions: clamp(1.875rem,1.7072rem + 0.8389vi,2.5rem);
--space-xl-2xl: clamp(1.875rem,1.3045rem + 2.8523vi,4rem);
--color-grey-4: #4a4847;
--text-size-meta: clamp(1rem,0.9664rem + 0.1678vi,1.125rem);
--color-primary-shade: color(display-p3 0.72549 0.615686 0/1);
--space-xl: clamp(1.875rem,1.7072rem + 0.8389vi,2.5rem);
--size-step--1: clamp(1rem,0.9664rem + 0.1678vi,1.125rem);
--font-system: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
--color-status-success-glare: #acd877;
--color-grey-3: #3e3c3b;
--color-mid-shade: #858480;
--size-step-8: clamp(2.3125rem,0.1313rem + 10.906vi,10.4375rem);
--font-mono: "Moderat Mono",ui-monospace,monospace;
--color-grey-10: #959490;
--color-mid-glare: #e0dfd9;
--color-light-glare: color(display-p3 0.956863 0.952941 0.937255/1);
--size-step--4: clamp(0.625rem,0.7043rem + -0.0839vi,0.6875rem);
--color-grey-11: #a2a09c;
--color-global-text: color(display-p3 0.094118 0.086275 0.090196/1);
--size-step--2: clamp(0.875rem,0.8414rem + 0.1678vi,1rem);
--color-status-success: #8cd039;
--space-2xl: clamp(3rem,2.7315rem + 1.3423vi,4rem);
--color-secondary-shade: color(display-p3 0.690196 0.094118 0.05098/1);
--color-global-bg: color(display-p3 0.929412 0.92549 0.898039/1);
--color-selection-text: color(display-p3 0.929412 0.92549 0.898039/1);
--font-black: 900;
--color-accent: currentColor;
--color-disabled: #575554;
--font-accent: "Family","Georgia Pro",Georgia,"URW Bookman","URW Bookman L",serif;
--color-grey-14: #c7c6c1;
--font-bold: 700;
--color-secondary-glare: color(display-p3 0.972549 0.352941 0.309804/1);
--radius: 0.5em;
--size-step-5: clamp(1.6875rem,1.2177rem + 2.349vi,3.4375rem);
--color-grey-6: #636260;
--text-decoration-color: color(display-p3 0.964706 0.192157 0.137255/1);
--color-mid-dark: #4a4847;
--color-selection-bg: color(display-p3 0.094118 0.086275 0.090196/1);
--color-grey-2: #312f2f;
--text-size-heading-1: clamp(1.6875rem,1.2177rem + 2.349vi,3.4375rem);
--space-2xs: clamp(0.375rem,0.3414rem + 0.1678vi,0.5rem);
--size-step-9: clamp(2.625rem,-0.7643rem + 16.9463vi,15.25rem);
--radius-l: 2em;
--size-step-6: clamp(1.8125rem,1.0742rem + 3.6913vi,4.5625rem);
--size-step-7: clamp(2.0625rem,1.0055rem + 5.2852vw,6rem);
--font-normal: 400;
--color-status-error: #f8473b;
--color-grey-12: #aeada8;
--size-step-4: clamp(1.5625rem,1.2773rem + 1.4262vi,2.625rem);
--color-mid: #575554;
--color-light: color(display-p3 0.929412 0.92549 0.898039/1);
--size-step-3: clamp(1.4375rem,1.2865rem + 0.755vi,2rem);
}Drop-in prompt
Build a landing page in the visual style of Piccalil Li · About.
Reference design system (extracted from the live site):
- Palette: #fcd404, #8c740c, #f2dc67, #84847f, #c5bcb6
- Typefaces: Moderat, Rosart
- 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/piccalil-li--about