{"id":"3e52dd36-6ab1-48c6-bc40-47ef6d33abc2","name":"monopo saigon","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/3e52dd36-6ab1-48c6-bc40-47ef6d33abc2","originalSiteUrl":"https://monopo.vn","capturedAt":"2026-04-30T02:15:35.869Z","colors":[{"name":"Midnight Canvas","hex":"#000000","role":"Primary background for pages, cards, and dark-themed sections","group":"neutral","cssVariable":"--color-midnight-canvas"},{"name":"Frost White","hex":"#ffffff","role":"Primary text color, link defaults, borders for ghost components, and accents against dark backgrounds. Used for text on primary buttons","group":"neutral","cssVariable":"--color-frost-white"},{"name":"Deep Shadow","hex":"#181818","role":"Secondary text in footers and less prominent information. Subtly darker borders","group":"neutral","cssVariable":"--color-deep-shadow"},{"name":"Whisper Gray","hex":"#6d6d6d","role":"Muted body text and auxiliary text where lower contrast is desired","group":"neutral","cssVariable":"--color-whisper-gray"},{"name":"Misty Gray","hex":"#636363","role":"Background for subtle, low-contrast interactive elements like the cookie consent button","group":"neutral","cssVariable":"--color-misty-gray"},{"name":"Deep Ocean Gradient","hex":"#a0e0ab","role":"Atmospheric background for hero sections and full-bleed visual elements, creating an immersive, fluid environment","group":"brand","gradient":"linear-gradient(90deg, rgb(160, 224, 171), rgb(255, 172, 46) 50%, rgb(165, 45, 37))","cssVariable":"--color-deep-ocean-gradient"}],"typography":[{"role":"Primary brand typeface for all headings, body text, links, and buttons. Its wide range of weights and sizes supports a detailed typographic hierarchy, from subtle metadata to commanding display text. The default 'normal' letter spacing keeps it highly legible.","sizes":"11px, 12px, 16px, 18px, 29px, 30px, 39px, 45px, 54px, 78px, 94px, 225px","family":"Roobert","weight":"300, 400, 600","weights":[300,400,600],"lineHeight":"0.70, 0.76, 1.10, 1.15, 1.19, 1.21, 1.22, 1.24, 1.25, 1.36, 1.39, 1.58, 1.82","substitute":"system-ui, sans-serif","letterSpacing":"normal"},{"role":"Used for specific heading elements, providing an alternative, slightly more classic feel than Roobert.","sizes":"54px","family":"Raleway","weight":"400","weights":[400],"lineHeight":"1.39","substitute":"serif","letterSpacing":"normal"},{"role":"system-ui — detected in extracted data but not described by AI","sizes":"9px, 16px","family":"system-ui","weight":"400","lineHeight":"1.15, 1.32"}],"spacing":{"radius":{"cards":"10px","buttons":"75.024px"},"elementGap":"14px","sectionGap":"46px","cardPadding":"34px","pageMaxWidth":"1078px"},"radius":{"cards":"10px","buttons":"75.024px"},"shadows":{"philosophy":"The design intentionally avoids traditional box-shadows. Instead, depth and hierarchy are communicated through the use of rich, organic background gradients and nuanced color tints on textual and interactive elements, giving the impression of elements floating or subtly recessed within a volumetric space rather than casting shadows upon a flat surface."},"guidelines":{"do":["Prioritize Roobert as the primary typeface for all textual content, utilizing its diverse weights to establish hierarchy.","Maintain a spacious layout with a base unit of 4px and aim for an element gap of 14px to ensure visual breathing room.","Use Midnight Canvas (#000000) for all primary backgrounds and Frost White (#ffffff) for primary text to ensure high contrast.","Apply a border-radius of 75.024px to all buttons for a distinctly rounded, pill-like appearance.","Implement the Deep Ocean Gradient (linear-gradient(90deg, rgb(160, 224, 171), rgb(255, 172, 46) 50%, rgb(165, 45, 37))) as a background for hero and large interactive sections.","Ensure interactive elements like buttons and links use Frost White (#ffffff) text against dark backgrounds unless a specific muted tone (Whisper Gray #6d6d6d) is explicitly called for.","Use a subtle 1px border with rgba(255, 255, 255, 0.3) for ghost buttons to maintain a minimalist aesthetic."],"dont":["Avoid using harsh, saturated accent colors that would disrupt the site's subdued and atmospheric palette.","Do not introduce square or sharp borders on interactive elements; button radii should always be 75.024px.","Refrain from using strong box-shadows or heavy elevation, as the design relies on gradient depth rather than layered elements.","Do not deviate from the specified Roobert and Raleway font families; avoid generic system fonts for branding elements.","Avoid tight information density; maintain spacious relationships between elements and sections.","Do not treat #636363 as a primary action color; reserve it for specific, muted interactive elements like secondary consent buttons.","Never use solid color backgrounds in feature sections where the organic gradient is intended to create atmosphere."]}}