monopo saigon

Shifting gradient depths on frosted glass

Original site Source record

monopo saigon interface preview — Captured interface · source-attributed preview

6palette signals

3type signals

5component notes

darkcolor scheme

01 / COLOR

Palette

6 captured

Midnight Canvas#000000

Primary background for pages, cards, and dark-themed sections

Frost White#ffffff

Primary text color, link defaults, borders for ghost components, and accents against dark backgrounds. Used for text on primary buttons

Deep Shadow#181818

Secondary text in footers and less prominent information. Subtly darker borders

Whisper Gray#6d6d6d

Muted body text and auxiliary text where lower contrast is desired

Misty Gray#636363

Background for subtle, low-contrast interactive elements like the cookie consent button

Deep Ocean Gradient#a0e0ab

Atmospheric background for hero sections and full-bleed visual elements, creating an immersive, fluid environment

03 / SYSTEM

Type & geometry

FontsNot captured

Spacingradius: [object Object] · elementGap: 14px · sectionGap: 46px · cardPadding: 34px · pageMaxWidth: 1078px

Radiuscards: 10px · buttons: 75.024px

Shadowsphilosophy: 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.

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

04 / PRACTICE

Use with judgment.

Keep

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.

Avoid

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.