# Radiomemory.com.br Design System

> Clinical precision meets oceanic depth through light-weight Roboto headers and high-contrast teal accents on a sterile white canvas.

**Source:** https://radiomemory.com.br | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Radiomemory utilizes a clinical, professional aesthetic defined by a "monochrome-plus-one" strategy. The foundation is a pure white canvas (`#ffffff`) with deep charcoal text (`#333333`), punctuated by a primary brand teal (`#6ca7b9`) used for primary calls to action and iconography. Typography is anchored by Montserrat for structured headings and Roboto for technical or display moments, notably utilizing a signature light weight (300) for large-scale typography. Layouts are spacious, using generous 40px to 60px gaps to maintain a medical-grade clarity.

## Signature DNA
1. **The Technical Display Serif** (Roboto at weight 300 is used for massive display sizes up to 190px, signaling precision and modern technology on the homepage and error states.)
2. **Oceanic Primary Accent** (The use of `#6ca7b9` as the sole chromatic driver for buttons and active UI elements against a strictly achromatic background.)
3. **Softened Clinical Geometry** (A mix of sharp 0px containers for structural sections and ultra-soft 40px-60px radii for feature cards and primary buttons.)

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
| :--- | :--- | :--- | :--- | :--- |
| Radiomemory (Parent) | #000000 | Clinical Photography | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.white}` | `#ffffff` | Page background, button text | 75 | 1.0 | `--wp--preset--color--white` |
| `{color.charcoal}` | `#333333` | Primary body text | 39 | 1.0 | `--cmplz_button_settings_text_color` |
| `{color.black}` | `#000000` | Borders, primary buttons | 6 | 1.0 | `--wp--preset--color--black` |
| `{color.gray.dark}` | `#707070` | Secondary text | 66 | 0.8 | `computed_style` |
| `{color.gray.light}` | `#f5f5f5` | Surface backgrounds | 4 | 1.0 | `--cmplz_button_deny_background_color` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.primary}` | `#6ca7b9` | Primary CTA background | 33 | 0.8 | `computed_style` |
| `{color.accent.deep}` | `#005a85` | Deep blue text/surfaces | 19 | 0.8 | `computed_style` |
| `{color.accent.warm}` | `#ffa029` | Decorative text | 4 | 0.6 | `computed_style` (decorative_only) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Montserrat | 400, 500, 600, 700 | Primary Headings, Buttons | Montserrat (Google) | SIL Open Font |
| Roboto | 300, 400 | Display, Hero Subtitles | Roboto (Google) | Apache 2.0 |
| Arial | 400, 700 | System Fallback, UI labels | N/A | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display.mega}` | 190px | 190px | normal | 300 | Error page hero | `h1.error_title` |
| `{type.display.lg}` | 69px | 69px | normal | 600 | Counter numbers | `span.elementor-counter-number-prefix` |
| `{type.h2}` | 32px | 38.4px | normal | 500 | Section headers | `h2` |
| `{type.h3}` | 28px | 33.6px | normal | 500 | Subsection headers | `h3` |
| `{type.h4}` | 24px | 28.8px | normal | 500 | Small headers | `h4` |
| `{type.body.lg}` | 17px | 17px | normal | 700 | Primary buttons | `a.elementor-button` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Standard body | `section.elementor-section` |
| `{type.caption}` | 12px | 18px | normal | 700 | Read more links | `a.elementor-post__read-more` |

### Principles
1. **Display weight is light.** Large headers (190px, 28px) consistently use Roboto at weight 300.
2. **Buttons are bold.** All interactive button labels use weight 700 for maximum legibility.
3. **Tight display leading.** Large display type uses 1:1 line-height (190px/190px) to maintain visual density.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 8px | 13 |
| `{space.sm}` | 16px | 13 |
| `{space.md}` | 25px | 18 |
| `{space.lg}` | 40px | 8 |
| `{space.xl}` | 60px | 5 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.none}` | 0px | Structural sections | 220 occurrences |
| `{radius.sm}` | 5px | Inputs, small cards | `Card`, `Text Input` |
| `{radius.lg}` | 40px | Primary buttons | `Rounded Button` (observed) |
| `{radius.xl}` | 60px | Feature cards | `Card` (observed) |
| `{radius.full}` | 1000px | Pill buttons | `pill` role |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{shadow.flat}` | none | Default state | Most components |
| `{shadow.card}` | `rgba(0, 0, 0, 0.1) 1px 2px 4px 0px` | Surface elevation | `Surface` component |
| `{shadow.deep}` | `rgba(0, 0, 0, 0.02) 2px 44px 32px 0px` | Floating hero cards | Observed on homepage |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary site actions
**Pages observed:** https://radiomemory.com.br/pricing, https://radiomemory.com.br/about
**Spec:** Background `{color.primary}` (#6ca7b9) | Text `{color.white}` (#ffffff) | Radius 40px | Padding 20px | Typography `{type.body.lg}` (17px/700)
**States observed:** Default | Hover: captured | Focus: not captured | Active: captured | Disabled: not captured

#### Text Input
**Role:** Form fields
**Pages observed:** https://radiomemory.com.br/pricing, https://radiomemory.com.br/about
**Spec:** Background `#fdfdfd` | Text `#707070` | Border 1px `#707070` | Radius 5px | Padding 7px
**States observed:** Default | Hover: not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Services and solutions display
**Pages observed:** https://radiomemory.com.br/pricing, https://radiomemory.com.br/about
**Spec:** Background `{color.white}` (#ffffff) | Radius 60px | Padding 40px 30px | Shadow `{shadow.deep}`
**States observed:** Default | Hover: captured

#### Footer
**Role:** Global site navigation and contact
**Pages observed:** https://radiomemory.com.br/pricing, https://radiomemory.com.br/about
**Spec:** Background `#3d3d3d` | Text `#707070` | Radius 0px | Typography 13px
**States observed:** Default

### Tier 3: Surface-specific

#### Pricing Card
**Role:** Plan selection
**Pages observed:** https://radiomemory.com.br/pricing, https://radiomemory.com.br/about
**Spec:** Background `{color.white}` (#ffffff) | Border 2px `rgba(0, 0, 0, 0.2)` | Radius 0px | Padding 40px
**States observed:** Default

#### Status Badge
**Role:** Visual indicators
**Pages observed:** https://radiomemory.com.br/pricing, https://radiomemory.com.br/about
**Spec:** Background `#2cc3d5` | Radius 50% | Shadow `{shadow.card}`
**States observed:** Default

## Layout
| Property | Value |
| :--- | :--- |
| Max Width | 1140px (inferred from standard Elementor) |
| Section Gap | 60px |
| Column Gap | 25px |

## Do's
- Use **Roboto 300** for all headlines exceeding 24px.
- Apply **40px radius** to all primary teal buttons.
- Maintain a **pure white (#ffffff)** background for all primary content sections.
- Use **#6ca7b9** as the primary interaction color for buttons and icons.
- Ensure all body text uses **Montserrat** at 16px for standard readability.

## Don'ts
- **Don't** use saturated colors for the page background; the system is strictly monochrome-foundation.
- **Don't** use bold weights (700) for display headers; keep to the signature 300 weight.
- **Don't** mix the primary teal (`#6ca7b9`) with the sub-brand blue (`#005a85`) in the same component.
- **Wrong:** Using `#005a85` as a primary button background. **Right:** Use `#6ca7b9`. **Reason:** `#005a85` is an accent/text color, not a primary action token.

## Similar brands
- Philips Healthcare
- GE HealthCare
- Siemens Healthineers
- Straumann Group

## Quick start

```css
/* CSS Custom Properties */
:root {
  --rm-color-primary: #6ca7b9;
  --rm-color-accent-deep: #005a85;
  --rm-color-white: #ffffff;
  --rm-color-charcoal: #333333;
  --rm-font-display: 'Roboto', sans-serif;
  --rm-font-body: 'Montserrat', sans-serif;
  --rm-radius-button: 40px;
  --rm-radius-card: 60px;
}
```

## Known gaps
- Hover states for secondary navigation items were not fully captured in the bulk run.
- Mobile-specific typography scaling for the 190px display size was not observed.
- Form validation (error/success) color tokens were not present in the analyzed pages.