{"id":"5a7ba5ff-0476-4f3f-99f9-0b920534dde5","name":"Leonid Kostetskyi","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","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","cssVariable":"--color-canvas-parchment"},{"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","cssVariable":"--color-cocoa-ink"},{"name":"Pure White","hex":"#ffffff","role":"Background for certain interactive states, subtle borders, and an alternative text color on dark backgrounds","group":"neutral","cssVariable":"--color-pure-white"},{"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","cssVariable":"--color-absolute-black"},{"name":"Deep Charcoal","hex":"#121212","role":"Secondary text and outline borders, providing a slightly softer dark tone than Absolute Black","group":"neutral","cssVariable":"--color-deep-charcoal"},{"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","cssVariable":"--color-alert-crimson"}],"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"}],"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."]}}