MDP by Medipiel | Tienda dermatológica y cosmética

<!-- 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 an interface that is inherently friendly, trustworthy, and approachable, mirroring the brand's commitment to accessibility and well-being in dermatological and cosmetic care. The visual language draws inspiration from brands like La Roche-Posay, Vichy, Dermstore, and Lookfantastic, emphasizing a clean, modern aesthetic without sacrificing warmth. Components prioritize clarity and ease of use, ensuring customers feel confident and comfortable navigating product selections and information. The design actively avoids clinical coldness or overly luxurious exclusivity; instead, it fosters an enthusiastic yet professional environment that invites engagement and builds trust through transparency and genuine care.

The design system prioritizes a sense of calm and reliability, ensuring that every interaction reinforces the brand's core values. Elements are crafted to be intuitive and reassuring, guiding users through their journey with a gentle hand. Visual cues promote a feeling of safety and efficacy, aligning with the dermatological focus. This is not a brand that shouts for attention with bold, aggressive visuals or complex, abstract layouts. Instead, it speaks with a clear, confident voice, using thoughtful design to communicate expertise and a genuine desire to improve customer well-being. The aesthetic is bright, optimistic, and grounded, reflecting a modern approach to health and beauty that is both effective and deeply human.

**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, trustworthy teal that signifies professionalism and calm. This hue is deliberately chosen to evoke feelings of reliability and expertise, essential for a dermatological brand. Paired with a clean #ffffff surface color, the palette maintains a modern and approachable aesthetic. This high contrast ensures legibility and a fresh feel, reinforcing the brand's commitment to clarity and user comfort without resorting to overly sterile or clinical tones.

### 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 sole typeface for MDP by Medipiel, chosen for its friendly yet professional character. Its rounded forms convey approachability and warmth, aligning perfectly with The Innocent and The Caregiver archetypes. Hierarchy is established through weight and size variations of Baloo 2, ensuring clear differentiation between headings, body text, and calls to action. This consistent typographic approach reinforces brand cohesion and readability, communicating information with an enthusiastic, easy-to-digest clarity that fosters trust and comfort.

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

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md