{"id":"3e52dd36-6ab1-48c6-bc40-47ef6d33abc2","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","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":"monopo saigon","summary":"Shifting gradient depths on frosted glass","description":"monopo saigon operates with a sophisticated dark aesthetic, employing a backdrop of organic, shifting gradients that give the impression of fluid, sculpted surfaces. The UI elements are minimal and translucent, appearing as if etched onto or floating within this rich, atmospheric background. Typography is stark white against dark, providing a strong contrast for readability while maintaining an understated elegance. The overall impression is one of artful depth and a restrained, almost ethereal digital presence.","industry":"agency","colorScheme":"dark","colors":[{"name":"Midnight Canvas","hex":"#000000","role":"Primary background for pages, cards, and dark-themed sections","group":"neutral"},{"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"},{"name":"Deep Shadow","hex":"#181818","role":"Secondary text in footers and less prominent information. Subtly darker borders","group":"neutral"},{"name":"Whisper Gray","hex":"#6d6d6d","role":"Muted body text and auxiliary text where lower contrast is desired","group":"neutral"},{"name":"Misty Gray","hex":"#636363","role":"Background for subtle, low-contrast interactive elements like the cookie consent button","group":"neutral"},{"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))"}],"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"}],"typeScale":[{"role":"caption","size":11,"lineHeight":1.58},{"role":"body","size":16,"lineHeight":1.25},{"role":"subheading","size":18,"lineHeight":1.22},{"role":"heading-sm","size":29,"lineHeight":1.21},{"role":"heading","size":39,"lineHeight":1.15},{"role":"heading-lg","size":54,"lineHeight":1.39},{"role":"display","size":225,"lineHeight":0.7}],"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."]},"components":[{"name":"Ghost Button - Light Border","role":"Interactive element allowing light interaction without dominating the dark background. Features a very subtle border."},{"name":"Text Link Button","role":"Minimal interactive element, appearing as simple text. Used for navigation and tertiary actions."},{"name":"Filled Cookie Consent Button","role":"Primary action button within transient UI elements like cookie consent pop-ups. Offers a clear, actionable contrast."},{"name":"Dark Text Link Button","role":"Minimal interactive element for navigation and tertiary actions, in context where text color should be white."},{"name":"Information Card Overlay","role":"Base card element for presenting content. Designed to blend seamlessly into the background, letting content take precedence."}],"customSections":[{"title":"Agent Prompt Guide","content":"Quick Color Reference:\ntext: #ffffff\nbackground: #000000\nborder: rgba(255, 255, 255, 0.3)\naccent: none observed\nprimary action: no distinct CTA color\n\nExample Component Prompts:\n1. Create a primary page section: Full-bleed background with Deep Ocean Gradient. Headline 'United, Unbound' using Roobert weight 400 at 54px, color Frost White (#ffffff), centered within the 1078px max-width content area.\n2. Create a ghost navigation button: Text 'WORK' using Roobert weight 400 at 16px, color #000000. Background transparent. Top border 1px solid rgba(255, 255, 255, 0.3). Radius 75.024px. Padding 1px 6px.\n3. Create a cookie consent dialog button: Text 'Accept' using Roobert weight 400 at 16px, color Frost White (#ffffff). Background Misty Gray (#636363). Border 1px solid Frost White (#ffffff). Radius 75.024px. Padding 11.232px 33.696px."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777515314411-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1777515314411-thumb.jpg"},"similarStyleIds":["4d4772a3-e1da-415f-a6d7-658dcefdcecd","7b083729-e694-4b66-82a3-befb08451722","9fecf7d6-b717-49ca-8edc-b10d6110b21c","1f0cc2ef-9de0-4cbb-909f-ca120ef6d0ae","9117a4f5-6171-44ad-aa85-a387a5d80620","c3ceca5c-d329-4559-b947-016172941ba2","62e8e59e-17a5-4eba-a6c6-1c7f67ded518","b8a8976c-52d9-4ebb-95ea-4c40f4a9acab","c14bfde7-6f08-4b54-bd9b-39989d10cfef","fb459c9d-c089-4d0b-b5b0-d147b1c4ebd7","e13dcc7e-27fa-46dd-a9a2-cee09c822793","39098e34-b911-4ad3-bcb5-ee80a392cd95","a1b78a21-a304-482b-8ce5-f612d95d44fe","a7530405-e523-4268-bba5-ef13549fd61c","f68dd3d8-e8fa-4d2c-8c59-28aba06c9d8a","8401cb26-91a3-4b46-941e-1c75790821eb","408a149c-702f-4442-99df-bea49d9c0d9b","4e1ac04c-02ae-41cf-b588-3f6226a882f8","10654184-eb92-4b75-a7af-bd92bc6cdc5c","dba3eb4f-c1c2-437f-beb2-708e9d074729"],"exports":{"designMdUrl":"/references/refero/3e52dd36-6ab1-48c6-bc40-47ef6d33abc2/design.md","tokensJsonUrl":"/references/refero/3e52dd36-6ab1-48c6-bc40-47ef6d33abc2/tokens.json","tailwindV4Url":"/references/refero/3e52dd36-6ab1-48c6-bc40-47ef6d33abc2/tailwind-v4.css","cssVariablesUrl":"/references/refero/3e52dd36-6ab1-48c6-bc40-47ef6d33abc2/tailwind-v4.css"}}