{"id":"7ad5549e-9baa-4fda-ac43-79d568a86b98","name":"All-In-One Salon","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/7ad5549e-9baa-4fda-ac43-79d568a86b98","originalSiteUrl":"https://glossgenius.com","capturedAt":"2026-04-11T18:51:54.756Z","colors":[{"name":"Inkwell Black","hex":"#17150","role":"Primary text, headline text, dark background sections, button backgrounds. This deep near-black provides strong contrast and a sense of premium quality.","group":"neutral","cssVariable":"--color-inkwell-black"},{"name":"Cloud White","hex":"#ffffff","role":"Main page background, card backgrounds, text on dark backgrounds. Dominates the canvas for a bright, open feel.","group":"neutral","cssVariable":"--color-cloud-white"},{"name":"Porcelain Gray","hex":"#f0f7f6","role":"Secondary background color for sections, card hover states, badge backgrounds. Offers a subtle variation from pure white for content differentiation.","group":"neutral","cssVariable":"--color-porcelain-gray"},{"name":"Obsidian Black","hex":"#000000","role":"Navigation text, icons, button outlines. Used for the sharpest contrast elements, often interactive.","group":"neutral","cssVariable":"--color-obsidian-black"},{"name":"Silver Mist","hex":"#e2e2e2","role":"Subtle borders and dividers for section separation.","group":"neutral","cssVariable":"--color-silver-mist"},{"name":"Genius Yellow","hex":"#cccc25","role":"Calls to Action, active state indicators. This vibrant yellow gives an immediate energetic and positive feel.","group":"brand","cssVariable":"--color-genius-yellow"},{"name":"Genius Yellow Gradient","hex":"#cccc25","role":"Decorative backgrounds and possibly interactive elements, offering a subtle shift in luminescence for visual interest.","group":"brand","gradient":"linear-gradient(rgb(204, 204, 37), rgb(202, 205, 120))","cssVariable":"--color-genius-yellow-gradient"},{"name":"Sky Violet","hex":"#9fa6ff","role":"Promotional banners, card backgrounds, accent areas. This vivid violet provides a playful, modern contrast to the muted neutrals.","group":"accent","cssVariable":"--color-sky-violet"},{"name":"Sky Violet Gradient","hex":"#9fa6ff","role":"Backgrounds for features or promotional blocks, adding depth and visual softness.","group":"accent","gradient":"linear-gradient(rgb(159, 166, 255), rgb(179, 186, 232))","cssVariable":"--color-sky-violet-gradient"}],"typography":[{"role":"Primary typeface for all UI elements, body text, subheadings, and smaller headlines. Its clean sans-serif form ensures high readability and a contemporary feel across all weights and sizes, from small navigation links to substantial section titles.","sizes":"13px, 14px, 16px, 18px, 22px, 32px, 40px, 48px, 72px","family":"Basel Grotesk Book","weight":"400, 500, 600","lineHeight":"0.97, 1.02, 1.05, 1.10, 1.13, 1.20, 1.40","substitute":"Inter","letterSpacing":"0.056, 0.031, 0.071, -0.01, -0.015, -0.02, -0.03, -0.03, -0.04"},{"role":"Used exclusively for large, impactful display text. The significantly tighter line-height and letter-spacing, combined with its high contrast to Basel Grotesk Book, give it a distinctive, elegant, and editorial presence for hero headlines.","sizes":"96px, 144px","family":"Basel Classic Book","weight":"400","lineHeight":"0.80, 0.90","substitute":"Playfair Display","letterSpacing":"-0.03, -0.03"}],"spacing":{"radius":{"nav":"40px","cards":"8px","badges":"8px","buttons":"1440px","interactiveElements":"1440px"},"elementGap":"8px","sectionGap":"72-96px","cardPadding":"20px"},"radius":{"nav":"40px","cards":"8px","badges":"8px","buttons":"1440px","interactiveElements":"1440px"},"guidelines":{"do":["Prioritize Basel Grotesk Book for all functional text: 400 weight for body, 500 for subheadings and buttons, 600 for important UI labels.","Utilize 1440px border-radius for interactive elements like buttons and tags, creating a soft, inviting touch across the UI.","Use Porcelain Gray (#f0f7f6) as a subtle background differentiator for content blocks or badges to break up Cloud White sections.","Reserve GlossGenius Yellow (#cccc25 or its gradient) almost exclusively for primary Calls to Action and active states to command attention.","Employ Basel Classic Book only for large impact headlines (96px, 144px) with tight letter-spacing (-0.03em) and line-height (0.90, 0.80) to maintain an exclusive, editorial feel.","Maintain an element gap of 8px for consistent spacing between related items and navigation links."],"dont":["Do not use Basel Classic Book at smaller sizes or for body copy; its narrow kerning and tight leading are not suitable for readability at scale.","Avoid using multiple accent colors; stick to Genius Yellow and Sky Violet for deliberate emphasis.","Do not introduce hard, sharp corners; all significant interactive or content elements should use 8px or 1440px radii.","Do not use box shadows for elevation; rely on color shifts (Inkwell Black for backgrounds, Porcelain Gray for elevated sections) to create depth instead.","Do not add unnecessary borders to cards or main content sections; use background color changes to define boundaries."]}}