# Design Reference - monopo saigon
> Shifting gradient depths on frosted glass

## Source
- Original site: https://monopo.vn
- Captured: 2026-04-30T02:15:35.869Z

## Tags
- No tags captured

## Colors
| Name | Value | Group | Role |
|------|-------|-------|------|
| Midnight Canvas | `#000000` | neutral | Primary background for pages, cards, and dark-themed sections |
| Frost White | `#ffffff` | neutral | Primary text color, link defaults, borders for ghost components, and accents against dark backgrounds. Used for text on primary buttons |
| Deep Shadow | `#181818` | neutral | Secondary text in footers and less prominent information. Subtly darker borders |
| Whisper Gray | `#6d6d6d` | neutral | Muted body text and auxiliary text where lower contrast is desired |
| Misty Gray | `#636363` | neutral | Background for subtle, low-contrast interactive elements like the cookie consent button |
| Deep Ocean Gradient | `#a0e0ab` | brand | Atmospheric background for hero sections and full-bleed visual elements, creating an immersive, fluid environment |

## 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 And Radius
```json
{
  "spacing": {
    "radius": {
      "cards": "10px",
      "buttons": "75.024px"
    },
    "elementGap": "14px",
    "sectionGap": "46px",
    "cardPadding": "34px",
    "pageMaxWidth": "1078px"
  },
  "radius": {
    "cards": "10px",
    "buttons": "75.024px"
  }
}
```

## Component Patterns
- 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.

## 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.

## Don't
- 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.