{"id":"5a7ba5ff-0476-4f3f-99f9-0b920534dde5","source":{"name":"Refero","url":"https://styles.refero.design/","kind":"public-design-reference"},"contributors":[{"name":"Refero","role":"reference-helper","url":"https://styles.refero.design/"}],"attributionLabel":"Referenced with help from Refero","sourceUrl":"https://styles.refero.design/style/5a7ba5ff-0476-4f3f-99f9-0b920534dde5","originalSiteUrl":"https://leonidkostetskyi.com","capturedAt":"2026-04-30T03:08:27.523Z","licenseNote":"Public design-reference facts mirrored from Refero for agent context. Keep source attribution visible and verify rights before reusing media, logos, or brand assets.","name":"Leonid Kostetskyi","summary":"Type-driven architectural minimalism: a stark, high-contrast typographic landscape on a warm, textured canvas.","description":"The Leonid Kostetskyi site presents a minimalist, high-contrast aesthetic with an almost architectural use of typography. Its visual identity relies on sharp typographic forms and an extremely limited color palette, dominated by a warm off-white canvas and a deep, muted reddish-brown for primary text and accents. The design emphasizes content through stark clarity and spacious layouts, avoiding decorative elements or heavy component chrome. Interactivity is subtle, often indicated by fine line treatments or inverse color changes rather than overt button styling.","industry":"design","colorScheme":"light","colors":[{"name":"Canvas Parchment","hex":"#fdfaf3","role":"Page background; a soft, warm off-white providing an antique paper-like feel to the entire experience","group":"neutral"},{"name":"Cocoa Ink","hex":"#472425","role":"Primary text, headings, outline borders, and a subtle action indicator. Its deep red-brown provides strong contrast without the harshness of true black, defining the brand's sophisticated warmth","group":"brand"},{"name":"Pure White","hex":"#ffffff","role":"Background for certain interactive states, subtle borders, and an alternative text color on dark backgrounds","group":"neutral"},{"name":"Absolute Black","hex":"#000000","role":"Background for dark themed sections, and inverse text color. This color is used sparingly to create visual breaks","group":"neutral"},{"name":"Deep Charcoal","hex":"#121212","role":"Secondary text and outline borders, providing a slightly softer dark tone than Absolute Black","group":"neutral"},{"name":"Alert Crimson","hex":"#e73737","role":"Red outline accent for tags, dividers, and focused UI edges. Use as a supporting accent, not as a status color","group":"accent"}],"typography":[{"role":"Primary text for body content, navigational elements, and descriptive links. Its neutrality supports legibility across various UI elements.","sizes":"8px, 9px, 11px, 12px, 15px, 18px, 19px, 20px, 21px","family":"SFUIDisplay","weight":"300, 400","weights":[300,400],"lineHeight":"1.00, 1.10, 1.33, 1.40, 1.60","substitute":"system-ui","letterSpacing":"normal"},{"role":"Distinctive display font for large headlines and titles. The tight letter-spacing and very large sizes create a strong, imposing, and modern visual statement, prioritizing form over immediate readability at extreme scales.","sizes":"11px, 12px, 15px, 27px, 135px, 143px, 165px, 188px","family":"NeueHaasDisplay","weight":"400","weights":[400],"lineHeight":"0.86, 1.00","substitute":"system-ui","letterSpacing":"-0.0250em at large sizes, -0.0200em for smaller headings"},{"role":"Used for a specific functional button style, acting as a system fallback or for very minor interface text where a standard sans-serif is preferred.","sizes":"13px","family":"Arial","weight":"400","weights":[400],"lineHeight":"1.20","substitute":"Arial","letterSpacing":"normal"}],"typeScale":[{"role":"heading","size":27,"lineHeight":1,"letterSpacing":-0.54},{"role":"display-lg","size":135,"lineHeight":0.86,"letterSpacing":-3.375},{"role":"display","size":188,"lineHeight":0.86,"letterSpacing":-4.7}],"spacing":{"radius":{"none":"0px","extraLarge":"9999px"},"elementGap":"16px","sectionGap":"200px","cardPadding":"12px"},"radius":{"none":"0px","extraLarge":"9999px"},"guidelines":{"do":["Prioritize NeueHaasDisplay for titles and headlines, using large sizes (135px, 188px) with tight letter-spacing (-0.0250em) to create monumental textual elements.","Maintain a monochromatic base palette using Canvas Parchment (#fdfaf3) for backgrounds and Cocoa Ink (#472425) for primary text and subtle outlined interactions.","Use no border-radius (0px) for most components, including cards and input fields, to preserve a sharp, architectural aesthetic.","Indicate interactivity for `Link` and `Button` roles primarily through text color changes or subtle line treatments, avoiding prominent background fills on most buttons.","Employ generous vertical spacing, specifically a ~200px section gap, to create an airy, uncrowded layout between major content blocks.","Use Pure White (#ffffff) as the dominant background color for cards and informational blocks within light mode, maintaining visual consistency.","Apply subtle 1px dashed borders of varying colors (Cocoa Ink, Pure White) to delineate active states or structural elements where a visible separation is needed without heavy lines."],"dont":["Avoid using bright, saturated colors unless specifically for semantic feedback (like Alert Crimson #e73737), as they contradict the brand's muted, high-contrast palette.","Do not introduce rounded corners (e.g., above 0px radius) for primary UI elements like buttons, cards, or inputs, as this clashes with the sharp, angular design language.","Refrain from heavy drop shadows or complex elevation schemes; the design is flat and relies on color contrast and minimal borders for visual hierarchy.","Do not use generic system fonts for display elements; stick to NeueHaasDisplay for impact and SFUIDisplay for readability.","Avoid dense, information-heavy blocks of text; focus on clear, concise copy supported by ample whitespace and strong typography.","Do not deviate from the established letter-spacing values for NeueHaasDisplay headlines; the tight tracking is a core part of its visual identity.","Do not add decorative gradients; the system relies on solid colors and text-based visual interest."]},"components":[{"name":"Text Only Button (Cocoa Ink)","role":"Interactive navigation and thematic switches."},{"name":"Circular Toggle Button (Dark)","role":"Theme switcher."},{"name":"Circular Toggle Button (Light)","role":"Theme switcher."},{"name":"Outlined Input Field (Dark Text)","role":"User input fields."},{"name":"Outlined Input Field (Cocoa Ink)","role":"User input fields."},{"name":"Project Card (Implicit)","role":"Display individual work projects or portfolio items."},{"name":"Project Card with Background (White)","role":"Display individual work projects or portfolio items."},{"name":"Project Card with Background (Black)","role":"Display individual work projects or portfolio items for dark themed sections."}],"customSections":[{"title":"Agent Prompt Guide","content":"Quick Color Reference: \ntext: #472425\nbackground: #fdfaf3\nborder: #472425\naccent: #472425\nprimary action: #472425 (outlined action border)\n\nExample Component Prompts:\n1. Create a hero section: Canvas Parchment background (#fdfaf3). Headline 'LEONID KOSTETSKYI' at 188px NeueHaasDisplay weight 400, Cocoa Ink (#472425), letter-spacing -4.7px. Subtext 'CREATIVE DIRECTOR' at 135px NeueHaasDisplay weight 400, Cocoa Ink (#472425), letter-spacing -3.375px. Align all text centrally.\n2. Create a navigation menu: List of links: Home, About, Projects, Awards, Contacts. Text color Cocoa Ink (#472425), font SFUIDisplay weight 400, size 12px, line height 1.4. Apply a 1px dashed Cocoa Ink (#472425) bottom border on hover. Right-align in the header.\n3. Create a dark theme button: 'DARK THEME' text in SFUIDisplay weight 400, size 12px. Background Absolute Black (#000000), text color Absolute Black (#000000), 1px solid Pure White (#ffffff) circular border (50% radius). No padding.\n4. Create a project description paragraph: 'I HELP COMPANIES, BRANDS AND ENTREPRENEURS DEVELOP ANY DIGITAL PRODUCTS AND ACHIEVE THEIR GOALS' in SFUIDisplay weight 400, size 11px, line height 1.33, text color Cocoa Ink (#472425). Apply 16px element gap below it.\n5. Create an outlined input field: Placeholder text in SFUIDisplay weight 400, size 12px, Pure White (#ffffff) 70% opacity. Transparent background. 1px solid Pure White (#ffffff) bottom border (70% opacity). Padding 3px top, 5px bottom, 75px right. No border radius."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777518482963-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777518482963-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/5a7ba5ff-0476-4f3f-99f9-0b920534dde5-1777582955538-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/5a7ba5ff-0476-4f3f-99f9-0b920534dde5-1777582955538-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/5a7ba5ff-0476-4f3f-99f9-0b920534dde5-1777582955538-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/5a7ba5ff-0476-4f3f-99f9-0b920534dde5-1777582955538-preview-detail-poster.jpg"},"similarStyleIds":["b95143f4-f881-4118-acc4-aa97fbce463d","e67ac20e-6497-4756-b7e2-17859a794fb6","3cc1d30c-3b08-48af-bbf0-df195d77835f","d5931dff-2ae3-44c7-b76f-9e5936f90611","25009c35-8b3b-4898-9295-3e0e0aa07207","6bc0dff4-b803-4e0c-a8f5-bef016843ae8","f329f8b4-16d4-430d-9687-7cdf750f29ac","9e6d5a24-a9e6-4026-a037-5ec87afe4147","5fd2cdc0-05ac-4290-b67c-72e7525a532c","4ba6652c-56f1-4bd5-9e2f-9b64a30d66a8","5fae307a-90ef-4181-9525-3ac308896ffc","a90dbcb6-e42c-4992-a83b-94879699dd4f","8321c2d1-686f-4752-9156-ea613a879b9e","e80c5b4a-fd03-460e-a577-49928a4ab5db","b76c7503-0217-4822-80b2-18fa19af46ee","04f6cb02-de90-4d78-9c5f-0eb52f826484","14f10100-a102-427a-88d1-7cc80cbb332d","657e55de-8cff-4d24-9a4e-17d3b7593a55","03a78f26-ebd4-4d09-9012-7c69d327df9a","81a66e75-23af-4525-8a4e-f4a54c2700e7"],"exports":{"designMdUrl":"/references/refero/5a7ba5ff-0476-4f3f-99f9-0b920534dde5/design.md","tokensJsonUrl":"/references/refero/5a7ba5ff-0476-4f3f-99f9-0b920534dde5/tokens.json","tailwindV4Url":"/references/refero/5a7ba5ff-0476-4f3f-99f9-0b920534dde5/tailwind-v4.css","cssVariablesUrl":"/references/refero/5a7ba5ff-0476-4f3f-99f9-0b920534dde5/tailwind-v4.css"}}