Swim Club · Features
Split Studio
Loading
Click any value to copy. Roles are suggestions, not gospel.
- #e2541doklch(62.9% 0.188 39)Dominant
- #e8c494oklch(84.0% 0.075 74)Surface
- #93320aoklch(45.5% 0.139 39)Ink
- #a5825eoklch(63.1% 0.066 67)Accent
- #a0bcccoklch(78.0% 0.038 233)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Bookmania | 65px | 400 | 1 | -1.296px | Aa Bb Cc |
| h2 | Bookmania | 50px | 400 | 1 | -1.008px | Aa Bb Cc |
| h3 | CircularXX | 18px | 700 | 1.2 | 0 | Aa Bb Cc |
| body | CircularXX | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | CircularXX | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #e2541d;
--color-surface: #e8c494;
--color-ink: #93320a;
--color-accent: #a5825e;
--color-detail: #a0bccc;
}
/* CSS variables exposed by source */
:root {
--tw-ring-offset-shadow: 0 0 #0000;
--oke-border-width: 1px;
--oke-text-primaryColor: #AA163F;
--header-height: 70px;
--oke-text-regular: 14px;
--tw-ring-shadow: 0 0 #0000;
--oke-button-borderColorHover: #DBDDE4;
--oke-stars-backgroundColor: #E5E5E5;
--oke-button-backgroundColorActive: #676986;
--oke-filter-backgroundColor: #FFFFFF;
--announcement-height: 40px;
--oke-reviewsTab-backgroundColor: #676986;
--oke-attributeBar-shadingColor: #9A9DB1;
--oke-stars-foregroundColor: #FF5555;
--oke-filter-borderColor: #EBE7D7;
--oke-button-borderColorActive: #676986;
--oke-button-textColor: #272D45;
--oke-filter-borderColorActive: #676986;
--tw-border-spacing-x: 0;
--oke-highlightColor: #FF5555;
--oke-text-large: 20px;
--oke-reviewsTab-textColor: #FFFFFF;
--oke-filter-searchHighlightColor: #B2F9E9;
--oke-button-textColorHover: #272D45;
--oke-text-small: 12px;
--tw-scale-y: 1;
--tw-ring-color: rgba(59,130,246,.5);
--screen-height-inner: 900px;
--tw-translate-y: 0;
--oke-button-borderColor: #DBDDE4;
--oke-border-color: #EBE7D7;
--swiper-theme-color: #007aff;
--oke-button-fontSize: 14px;
--oke-starRating-spaceBelow: 0px;
--tw-rotate: 0;
--mobile-header-height: 70px;
--oke-filter-textColor: #2C3E50;
--oke-attributeBar-borderColor: #9A9DB1;
--tw-ring-offset-color: #fff;
--oke-starRating-spaceAbove: 0px;
--screen-height: 900px;
--oke-button-textColorActive: #FFFFFF;
--oke-widget-spaceAbove: 20px;
--tw-skew-x: 0;
--oke-widget-spaceBelow: 20px;
--oke-attributeBar-backgroundColor: #EBE7D7;
--swiper-navigation-size: 2.75rem;
--oke-button-fontWeight: 700;
--oke-avatar-size: 48px;
--oke-filter-backgroundColorActive: #EBE7D7;
--tw-shadow: 0 0 #0000;
--tw-translate-x: 0;
--tw-ring-offset-width: 0;
--oke-avatar-placeholderTextColor: #2C3E50;
--tw-scroll-snap-strictness: proximity;
--tw-scale-x: 1;
--oke-stars-borderWidth: 0;
--tw-shadow-colored: 0 0 #0000;
--tw-border-spacing-y: 0;
--oke-filter-textColorActive: #FFFFFF;
}Drop-in prompt
Build a landing page in the visual style of Persephone.
Reference design system (extracted from the live site):
- Palette: #e2541d, #e8c494, #93320a, #a5825e, #a0bccc
- Typefaces: Bookmania, CircularXX
- 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/persephone-bio
