{"id":"7ad5549e-9baa-4fda-ac43-79d568a86b98","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","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":"All-In-One Salon","summary":"Crisp digital ledger, with neon highlights guiding the way.","description":"GlossGenius feels like a sophisticated, yet approachable digital assistant for beauty professionals. Ultra-clean typography and a largely monochromatic palette create an immediate sense of clarity and organization. Unexpected pops of vivid yellow-green and pastel violet-blue provide energetic accents, reflecting the vibrancy of the beauty industry without being overwhelming. The soft, rounded elements contrast with the sharp Basel Grotesk text, balancing professionalism with user-friendliness.","tags":["clean","professional","approachable","modern","minimalist","vibrant-accents","rounded-forms","high-contrast-text","salon-tech","editorial-typography"],"industry":"saas","colorScheme":"light","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"},{"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"},{"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"},{"name":"Obsidian Black","hex":"#000000","role":"Navigation text, icons, button outlines. Used for the sharpest contrast elements, often interactive.","group":"neutral"},{"name":"Silver Mist","hex":"#e2e2e2","role":"Subtle borders and dividers for section separation.","group":"neutral"},{"name":"Genius Yellow","hex":"#cccc25","role":"Calls to Action, active state indicators. This vibrant yellow gives an immediate energetic and positive feel.","group":"brand"},{"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))"},{"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"},{"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))"}],"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."]},"components":[{"name":"Hero CTA Button Group","role":""},{"name":"Feature Card — Boost Online Traffic","role":""},{"name":"FAQ Accordion","role":""},{"name":"Primary Call to Action Button","role":"Interactive element"},{"name":"Secondary Ghost Button","role":"Interactive element"},{"name":"Pill Accent Button","role":"Interactive element"},{"name":"Rounded White Button","role":"Interactive element"},{"name":"Feature Card with 8px Radius","role":"Content container"},{"name":"Informational Badge","role":"Categorization/Label"},{"name":"Outline Badge","role":"Categorization/Label"},{"name":"Hero CTA Button","role":"Primary user action"},{"name":"Dark Section CTA Button","role":"Secondary action in dark sections"}],"customSections":[{"title":"Type Scale","content":"caption: 13px/1.05 (Basel Grotesk Book 400, ls=0.056px)\nbody-sm: 14px/1.05 (Basel Grotesk Book 400, ls=0.031px)\nbody: 16px/1.05 (Basel Grotesk Book 400, ls=0.071px)\nsubheading: 18px/1.13 (Basel Grotesk Book 500, ls=-0.01px)\nheading-sm: 22px/1.13 (Basel Grotesk Book 500, ls=-0.015px)\nheading: 32px/1.13 (Basel Grotesk Book 600, ls=-0.02px)\nheading-lg: 40px/1.10 (Basel Grotesk Book 600, ls=-0.03px)\ndisplay: 48px/1.02 (Basel Grotesk Book 600, ls=-0.03px)\ndisplay-xl: 72px/0.97 (Basel Grotesk Book 600, ls=-0.04px)\ndisplay-hero: 96px/0.90 (Basel Classic Book 400, ls=-0.03px)\ndisplay-hero-xl: 144px/0.80 (Basel Classic Book 400, ls=-0.03px)"},{"title":"Agent Prompt Guide","content":"Quick Color Reference:\n- Text: #17150 (Inkwell Black)\n- Background: #ffffff (Cloud White)\n- CTA: #cccc25 (Genius Yellow)\n- Border: #e2e2e2 (Silver Mist)\n- Accent: #9fa6ff (Sky Violet)\n\nExample Component Prompts:\n1. Create a Primary Call to Action Button: background #ffffff, text #000000, border rgba(0, 0, 0, 0.05), border-radius 42px, padding 0px 13px. Text 'Start Free Trial' using Basel Grotesk Book, weight 500.\n2. Design a Feature Card with text: background #f0f7f6, border-radius 8px, no shadow, with 20px padding. Inside, use a subheading 'Boost online traffic' at 18px Basel Grotesk Book 500, #17150, and body text 'Rank higher for client searches and get more reviews.' at 16px Basel Grotesk Book 400, #17150e.\n3. Implement a Hero Banner: full-width background #9fa6ff (Sky Violet). Overlay a headline 'One system that earns you more' at 96px Basel Classic Book 400, #17150, line-height 0.90, letter-spacing -0.03em. Include a link 'Learn More' in #17150, using Basel Grotesk Book 400 at 16px."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775933493846-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1775933493846-thumb.jpg","previewVideoUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/7ad5549e-9baa-4fda-ac43-79d568a86b98-1777568312754-preview.mp4","previewVideoPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/7ad5549e-9baa-4fda-ac43-79d568a86b98-1777568312754-preview-poster.jpg","previewVideoDetailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/7ad5549e-9baa-4fda-ac43-79d568a86b98-1777568312754-preview-detail.mp4","previewVideoDetailPosterUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/7ad5549e-9baa-4fda-ac43-79d568a86b98-1777568312754-preview-detail-poster.jpg"},"similarStyleIds":["066625ba-0d8d-472e-8240-4026ed7bb94e","47c9e353-bed3-4d6c-8316-63a2db5cc377","12255b63-e506-4bc1-a4cd-d05487de32f3","736830b5-90b1-47b0-99dd-d79454a0d22a","2eab438d-32cd-40c2-b160-1e4127dac569","6024d069-8a74-4534-917f-5f5b11224cc5","aeefc294-a8f7-443d-b76a-538dddc29afe","d7fb1721-1878-4cbb-a24b-051800557c75","5d7aa503-8cfa-49a4-bd3b-0c2f0f075c70","83b71dd8-de08-4c57-80b2-9fced17a0ca5","e9f5e976-53f7-42f5-a882-4e63b3c2f734","ced1c98f-d489-48f7-a01f-1fa59a07b706","9342e89b-c2fe-4acf-9993-53b44e0c13b5","376baf20-9ace-405d-bf4a-086016f2b1e3","efcb73cb-b84a-4ae7-9a2b-e1116f79f130","0ab4c544-6147-4998-8365-3a0f6191e54f","68d18deb-bb09-4258-8024-001af9c844c0","f4ef80f4-f6e5-4aea-8045-f99efaf208b8","86a6814d-2485-4fad-b6fd-56c2d0a23620","123a15b8-4e17-4812-83ec-899cce45db5b"],"exports":{"designMdUrl":"/references/refero/7ad5549e-9baa-4fda-ac43-79d568a86b98/design.md","tokensJsonUrl":"/references/refero/7ad5549e-9baa-4fda-ac43-79d568a86b98/tokens.json","tailwindV4Url":"/references/refero/7ad5549e-9baa-4fda-ac43-79d568a86b98/tailwind-v4.css","cssVariablesUrl":"/references/refero/7ad5549e-9baa-4fda-ac43-79d568a86b98/tailwind-v4.css"}}