# Vmtecnologia Design System

> High-contrast industrial yellow and deep charcoal interface for autonomous retail management.

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

## TL;DR
Vmtecnologia utilizes a high-voltage "Soluções" yellow (#faca08) as its primary brand signal, contrasted against a foundation of pure white (#ffffff) and deep charcoal (#262626). The system is built on the Inter typeface, ranging from ultra-heavy 800 weights for display headlines to light 300 weights for secondary body descriptions. Geometry is defined by generous 20px and 30px corner radii on cards, creating a friendly but professional "smart retail" aesthetic. Components frequently use solid yellow backgrounds with black text to ensure maximum visibility for primary calls to action.

## Signature DNA
1. **The Amber Alert Canvas** (Large-scale use of #faca08 as a section background to denote "Diferenciais" and "Presença," paired with black #000000 text for industrial-grade legibility.)
2. **Inter Weight Extremes** (The juxtaposition of 800-weight display titles at 44px against 300-weight body text at 14px, creating a clear hierarchy between machine-like authority and human-centric detail.)
3. **Soft-Industrial Radii** (A consistent application of 10px to 30px border radii on all interactive surfaces and content containers, softening the high-contrast color palette.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Primary page background, card surfaces | 252 | 1.0 | Computed |
| `{color.black}` | `#000000` | Primary text, button text, borders | 360 | 1.0 | Computed |
| `{color.charcoal}` | `#262626` | Dark section backgrounds, footer base | 30 | 1.0 | Computed |
| `{color.gray.light}` | `#f4f4f4` | Secondary section backgrounds | 27 | 1.0 | Computed |
| `{color.gray.mid}` | `#e2e2e2` | Disabled or inactive card surfaces | 12 | 1.0 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#faca08` | Primary CTAs, brand sections, highlight text | 129 | 1.0 | Brand Page |
| `{color.link}` | `#337ab7` | Inline text links, secondary accents | 254 | 0.8 | Computed |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Inter | 300, 400, 500, 600, 700, 800 | All headlines, body copy, and UI | Inter (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{text.display}` | 44px | 56px | normal | 800 | Hero H1 | `h1` |
| `{text.h2.bold}` | 34px | 44px | normal | 800 | Section Headings | `h2` |
| `{text.h2.semi}` | 34px | 44px | normal | 600 | Tagged Headings | `h2.boxTag` |
| `{text.h3.bold}` | 30px | 33px | normal | 800 | Subsection Headings | `h3` |
| `{text.body.lg}` | 24px | 34px | normal | 300 | Hero Subtitles | `p` |
| `{text.footer.title}` | 20px | 26px | normal | 700 | Footer Column Heads | `span.tituloFooter` |
| `{text.body.md}` | 18px | 28px | normal | 400 | Standard Paragraphs | `p` |
| `{text.nav}` | 14px | 24px | normal | 400 | Header Navigation | `li#menu-item-207` |
| `{text.label}` | 14px | 14px | 0.5px | 700 | Pre-titles / Badges | `span.preTitulo` |

### Principles
1. **Heavyweight Headers:** Use Inter 800 for all primary and secondary section titles to establish brand authority.
2. **Lightweight Context:** Use Inter 300 for descriptive text under headers to provide high-contrast density.
3. **Tight Navigation:** Navigation items use 14px/24px sizing with regular weight to maintain a clean utility bar.

## Spacing
**Base unit:** 5px (derived from common multiples)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 5px | 21 |
| `{space.sm}` | 10px | 159 |
| `{space.md}` | 15px | 201 |
| `{space.lg}` | 20px | 81 |
| `{space.xl}` | 50px | 21 |
| `{space.section}` | 70px | 15 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers | 668 occurrences |
| `{radius.sm}` | 6px | Primary Buttons | 33 occurrences |
| `{radius.md}` | 10px | Feature Cards | 192 occurrences |
| `{radius.lg}` | 20px | Content Panels | 27 occurrences |
| `{radius.xl}` | 30px | Dark Mode Cards | 3 occurrences |
| `{radius.full}` | 50px | Pill shapes / Badges | 12 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main site actions (e.g., "Quero falar com especialista")
**Pages observed:** All
**Spec:** Background `{color.primary}` (#faca08) / Text `{color.black}` (#000000) / Radius `{radius.sm}` (6px) / Padding 8px 15px / Typography Inter 14px 500
**States observed:** Default | Hover: Not captured | Active: Not captured

#### Ghost Button
**Role:** Secondary actions on white backgrounds
**Pages observed:** 3
**Spec:** Background transparent / Text `{color.black}` (#000000) / Border 2px solid #000000 / Radius `{radius.sm}` (6px) / Padding 10px 30px
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Feature Card (Light)
**Role:** Displaying solutions or benefits
**Pages observed:** 3
**Spec:** Background `{color.white}` (#ffffff) / Text `{color.black}` (#000000) / Radius `{radius.lg}` (20px) / Padding 20px
**States observed:** Default

#### Solution Card (Yellow)
**Role:** Highlighting specific market segments
**Pages observed:** 3
**Spec:** Background `{color.primary}` (#faca08) / Text `{color.black}` (#000000) / Radius `{radius.md}` (12px) / Padding 0px
**States observed:** Default

### Tier 3: Surface-specific

#### Dark Hero Card
**Role:** Content blocks on dark charcoal sections
**Pages observed:** 3
**Spec:** Background `{color.charcoal}` (#262626) / Text `{color.white}` (#ffffff) / Radius `{radius.xl}` (30px) / Padding 40px
**States observed:** Default

#### Segment Selector
**Role:** Vertical list of market segments (Vending, Micromercado, etc.)
**Pages observed:** 3
**Spec:** Background `{color.gray.mid}` (#e2e2e2) / Text `{color.black}` (#000000) / Radius `{radius.md}` (10px) / Padding 15px
**States observed:** Default | Active: Background `{color.primary}` (#faca08)

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Section Vertical Padding | 70px |
| Card Grid Gap | 20px |

## Imagery & decoration
- **Iconography:** Uses thin-stroke yellow icons (#faca08) on white or dark backgrounds.
- **Photography:** Features real-world usage of vending and micromarket technology, often with high-key lighting.
- **Graphic Motif:** A world map composed of yellow dots is used as a background element in the hero section.

## Do's
- Use **Inter 800** for all primary section headers.
- Apply **#faca08** as the background for the most important site CTA.
- Ensure all cards have at least a **10px border radius**.
- Use **#262626** for footer and high-impact dark sections.
- Pair yellow backgrounds with **black text** (#000000) for legibility.

## Don'ts
- **Don't** use blue (#337ab7) for primary buttons; it is reserved for links and secondary UI signals.
- **Don't** use sharp 0px corners for interactive cards or buttons.
- **Don't** use light gray text on yellow backgrounds; contrast must remain high.
- **Don't** mix multiple sans-serif families; stick strictly to Inter.

## Similar brands
- Caterpillar (CAT)
- DeWalt
- Stanley
- Nikon

## Quick start

```css
:root {
  --vm-primary: #faca08;
  --vm-black: #000000;
  --vm-white: #ffffff;
  --vm-charcoal: #262626;
  --vm-gray-light: #f4f4f4;
  
  --vm-radius-card: 20px;
  --vm-radius-button: 6px;
  
  --vm-font-main: 'Inter', sans-serif;
}
```

## Known gaps
- Hover and Active states for primary buttons were not explicitly captured in the static evidence.
- Mobile-specific navigation transitions (hamburger menu behavior) were not detailed in the source.
- Shadow tokens are missing from the CSS variables, suggesting a flat or border-only elevation system.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://vmtecnologia.io | Desktop 1440 | 2026-06-06 |
| Pricing | https://vmtecnologia.io/pricing | Desktop 1440 | 2026-06-06 |
| About | https://vmtecnologia.io/about | Mobile 390 | 2026-06-06 |