<!-- Generated by ExtractVibe — https://extractvibe.com/brand/medipiel.com.co -->
<!-- Extracted: 2026-10-28T15:42:12.491Z | Schema: v1 | Quality: 100/100 -->
---
version: alpha
name: "MDP by Medipiel | Tienda dermatológica y cosmética"
description: "MDP by Medipiel projects a friendly yet professional image, focusing on accessibility and well-being in the dermatological and cosmetic space. It combines a clean, modern aesthetic with an enthusiastic, approachable tone to inspire confidence and comfort in its customers."
colors:
  primary: "#01606d"
  tertiary: "#d6ff9e"
  neutral: "#333333"
  surface: "#efefef"
  on-surface: "#000000"
  on-surface-secondary: "#333333"
  border: "#a9c4c4"
  link: "#007078"
typography:
  display-lg:
    fontFamily: "Baloo 2"
    fontSize: "0px"
    fontWeight: "700"
    lineHeight: "0px"
  headline-lg:
    fontFamily: "Baloo 2"
    fontSize: "24px"
    fontWeight: "700"
    lineHeight: "27.6px"
  headline-md:
    fontFamily: "Baloo 2"
    fontSize: "15.2px"
    fontWeight: "500"
    lineHeight: "17.48px"
  body-md:
    fontFamily: "Baloo 2"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "18.4px"
rounded:
  sm: "5px"
  md: "20px"
  lg: "999px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "#0000ee"
    rounded: "0px"
    padding: "0px"
    fontSize: "16px"
    fontWeight: "400"
    borderColor: "#0000ee"
  button-outline:
    textColor: "#3fb4c6"
    rounded: "20.8px"
    padding: "0px"
    fontSize: "0px"
    fontWeight: "500"
    borderWidth: "2px"
  button-primary:
    backgroundColor: "#01606d"
    textColor: "#0000ee"
    rounded: "20px"
    padding: "0px"
    fontSize: "16px"
    fontWeight: "400"
    borderColor: "#0000ee"
---

# MDP by Medipiel | Tienda dermatológica y cosmética — Design System

## Overview

MDP by Medipiel establishes a design atmosphere rooted in the archetypes of The Caregiver and The Innocent. This translates into a visual language that is inherently approachable, modern, and trustworthy, directly supporting its mission as a dermatological and cosmetic retailer focused on well-being. The aesthetic draws inspiration from brands like La Roche-Posay, Vichy, Dermstore, and Lookfantastic, emphasizing clarity, professionalism, and a user-friendly experience. Design elements prioritize ease of navigation and a sense of calm, ensuring customers feel confident and comfortable exploring products. The visual tone is enthusiastic without being overwhelming, balancing expert authority with a friendly demeanor.

This design system explicitly avoids overly clinical or sterile aesthetics that might alienate users seeking a more personal connection. It is not a luxury-exclusive brand, nor does it employ overly playful or childish graphics. The design does not rely on stark minimalism that could feel cold or uninviting. Instead, it cultivates an environment that feels supportive and informative, reflecting a commitment to customer health and satisfaction. Every visual decision reinforces the brand's dedication to accessibility and a positive user journey, ensuring the interface is intuitive and reassuring.

**Key characteristics:**

- Vibe — dermatological, cosmetic, approachable, modern, friendly, trustworthy
- Archetypes — The Caregiver, The Innocent
- Comparable to — La Roche-Posay, Vichy, Dermstore, Lookfantastic
- Design era — flat-2.0-with-subtle-depth
- Emotional tone — friendly-reassuring
- Target audience — Individuals seeking reliable, accessible dermatological and cosmetic products, valuing both efficacy and a pleasant shopping experience, likely in a mid-to-upper-income bracket.
- Visual energy — 6/10 (moderate)

## Colors

The primary color, #01606d, anchors the MDP by Medipiel brand with a deep, reassuring teal that signifies trust, professionalism, and a connection to health and nature. This choice immediately communicates the dermatological and cosmetic focus while maintaining an approachable warmth. Paired with a clean #ffffff surface color, the palette ensures clarity, readability, and a sense of purity. This combination reflects the brand's commitment to transparency and efficacy, creating an inviting yet authoritative visual presence.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#01606d` | Teal |
| accent / tertiary | `#d6ff9e` | Khaki |
| surface | `#efefef` | White Smoke |
| background | `#ffffff` | White |
| text | `#000000` | Black |
| secondary text | `#333333` | Charcoal |
| border | `#a9c4c4` | Silver |
| link | `#007078` | Teal |
| muted | `#333333` | Charcoal |

## Typography

Baloo 2 is the singular typeface for MDP by Medipiel, chosen for its friendly yet professional character. Its rounded forms contribute to the approachable and innocent archetype, making the brand feel welcoming and easy to engage with. The consistent use of Baloo 2 across all typographic elements ensures a unified and coherent visual voice. Hierarchy is established through size, weight, and color variations, guiding the user through content effortlessly. This system communicates clarity, warmth, and reliability, reinforcing the brand's trustworthy and caring persona.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Baloo 2 | body | self-hosted | 300, 400, 500, 700 |
| Baloo 2 | heading | self-hosted | 500, 700 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Baloo 2 | 0px | 700 | 0px | — |
| Heading 2 | Baloo 2 | 24px | 700 | 27.6px | — |
| Heading 3 | Baloo 2 | 15.2px | 500 | 17.48px | — |
| Body | Baloo 2 | 16px | 400 | 18.4px | — |

### Conventions

- Heading case — sentence-case
- Body line-height — 18.4px

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| modal | `rgba(0, 0, 0, 0.2) 0px 4px 8px 0px, rgba(0, 0, 0, 0.19) 0px 6px 20px 0px` |
| button | `rgba(0, 0, 0, 0.16) 0px 0px 5px 1px` |

### Gradients

- `linear-gradient(90deg, rgb(224, 224, 224) 25%, rgb(245, 245, 245) 50%, rgb(224, 224, 224) 75%)`

## Shapes

Border-radius scale:

- `sm` — 5px
- `md` — 20px
- `lg` — 999px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Secondary**

- Background — `#ffffff`
- Text — `#0000ee`
- Radius — `0px`
- Padding — `0px`
- Font size — `16px`
- Font weight — `400`
- Border — ` solid #0000ee`

**Outline**

- Text — `#3fb4c6`
- Radius — `20.8px`
- Padding — `0px`
- Font size — `0px`
- Font weight — `500`

**Primary**

- Background — `#01606d`
- Text — `#0000ee`
- Radius — `20px`
- Padding — `0px`
- Font size — `16px`
- Font weight — `400`
- Border — ` solid #0000ee`
- Sample copy — "OBSEQUIOS"

## Do's and Don'ts

### Do

- Utilize Baloo 2 font for all text, specifically Baloo 2 500 or 700 for headings in sentence-case, and Baloo 2 300 or 400 for body text with a line-height of 18.4px.
- Employ the primary brand color #01606d for key branding elements and primary button backgrounds, ensuring high contrast with text.
- Implement a clean, white (#ffffff) background for most content areas, using #000000 for standard text.
- Design primary buttons with a #01606d background, #0000ee text, and a 20px border-radius, featuring a subtle shadow (rgba(0, 0, 0, 0.16) 0px 0px 5px 1px).
- Use the accent color #d6ff9e sparingly for highlights or playful elements to add visual interest.
- Apply rounded border radii consistently: small at 5px, medium at 20px for buttons and cards, and large at 999px for pill-shaped elements.
- Incorporate a subtle linear gradient (linear-gradient(90deg, rgb(224, 224, 224) 25%, rgb(245, 245, 245) 50%, rgb(224, 224, 224))) for background sections or loading states to add depth.
- Utilize a multi-layer shadow (rgba(0, 0, 0, 0.2) 0px 4px 8px 0px, rgba(0, 0, 0, 0.19) 0px 6px 20px 0px) for modals and prominent UI elements to create clear hierarchy.
- Maintain a conversational and enthusiastic tone in copy, frequently using emojis and exclamation points, especially in CTAs and benefit-focused phrases.
- Craft CTAs using action-oriented imperative verbs and clearly state benefits, such as 'ENVÍO GRATIS' or 'Recíbelo en máximo 24 horas'.

### Don't

- Avoid using sharp, square corners; all elements should adhere to the established border radii of 5px, 20px, or 999px.
- Do not use title case or all caps for headings; maintain sentence-case as per brand convention.
- Refrain from using complex or overly technical jargon; keep vocabulary simple and accessible, even when discussing dermatological products.
- Do not design buttons with a 0px border-radius or without any padding, as all observed buttons have rounded corners and implied padding.
- Avoid a monochrome color palette; integrate the accent color #d6ff9e to provide visual breaks and a touch of playfulness.
- Do not use heavy, opaque shadows across all elements; reserve the multi-layer shadow for modals and the subtle single-layer shadow for buttons.
- Do not use serif fonts; the brand exclusively uses the sans-serif Baloo 2 font family.
- Avoid overly serious or dry language; the brand's voice is a blend of formal and casual, leaning towards playful and enthusiastic.
- Do not neglect the use of emojis and exclamations in marketing copy, as they are a strong characteristic of the brand's engaging tone.
- Avoid flat design without any depth; subtle shadows and gradients are integral to the brand's visual style.

*Source — inferred*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 7/10 | casual |
| Playful ↔ Serious | 6/10 | balanced |
| Enthusiastic ↔ Matter-of-fact | 5/10 | balanced |
| Respectful ↔ Irreverent | 8/10 | irreverent |
| Technical ↔ Accessible | 8/10 | accessible |

### Copywriting style

- Avg. sentence length — 9 words
- Vocabulary — simple
- Jargon — some
- CTA style — action-oriented imperative verbs and benefit-focused phrases
- Rhetorical devices — repetition

### Sample copy

> ¡En Medipiel nos inspira que te sientas bien!

> MDP by Medipiel: expertos en skincare, capilar, maquillaje y fragancias

> ENVÍO GRATIS | Recíbelo en máximo 24 horas comprando en ciudades principales. Aplica TyC

> BONO DE $20.000 PARA TU PRIMERA COMPRA ONLINE

> Quiero mi descuento

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| favicon | — | png | [link](brands/medipiel.com.co/logo-0.png) | 95% |

## Sources

- Official brand guidelines — https://www.canva.com/docs/media-kits/
- Live brand page — https://extractvibe.com/brand/medipiel.com.co
- Raw JSON — https://extractvibe.com/api/brand/medipiel.com.co
- DESIGN.md (this file) — https://extractvibe.com/api/brand/medipiel.com.co/design.md
- Extracted — 2026-10-28T15:42:12.491Z
- Generator — ExtractVibe vv1
- Quality score — 100/100