<!-- Generated by ExtractVibe — https://extractvibe.com/brand/storemisericordie.it -->
<!-- Extracted: 2026-09-14T11:32:38.988Z | Schema: v1 | Quality: 80/100 -->
---
version: alpha
name: "Misericordie Official Store &ndash; Benvenuto nello store delle Misericordie d'Italia"
description: "Misericordie Official Store – Benvenuto nello store delle Misericordie d'Italia presents a professional web presence."
colors:
  primary: "#ffed00"
  tertiary: "#f78da7"
  neutral: "#009ee0"
  surface: "#f5f5f5"
  on-surface: "#333333"
  on-surface-secondary: "#009ee0"
  border: "#abb8c3"
  link: "#404040"
  surface-dark: "#009ee0"
typography:
  headline-lg:
    fontFamily: "DM Sans"
    fontSize: "47.3719px"
    fontWeight: "700"
    lineHeight: "51.749px"
  headline-md:
    fontFamily: "DM Sans"
    fontSize: "26.66px"
    fontWeight: "700"
    lineHeight: "30.8733px"
  headline-sm:
    fontFamily: "DM Sans"
    fontSize: "15.0038px"
    fontWeight: "700"
    lineHeight: "19.12px"
  body-md:
    fontFamily: "DM Sans"
    fontSize: "18px"
    fontWeight: "400"
    lineHeight: "24.144px"
rounded:
  sm: "64px"
  lg: "450px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-primary:
    backgroundColor: "#ffed00"
    textColor: "#404040"
    rounded: "450px"
    padding: "15.3px 27.2px"
    fontSize: "17px"
    fontWeight: "500"
    borderColor: "#ffed00"
    borderWidth: "1px"
  button-ghost:
    textColor: "#333333"
    rounded: "0px"
    padding: "0px"
    fontSize: "18px"
    fontWeight: "400"
    borderColor: "#333333"
---

# Misericordie Official Store &ndash; Benvenuto nello store delle Misericordie d'Italia — Design System

## Overview

The visual identity of the Misericordie Official Store is anchored in a rigorous, professional aesthetic that prioritizes clarity and institutional trust. The design atmosphere is clean, structured, and authoritative, reflecting the serious nature of the Italian Misericordie organizations. It avoids decorative excess, opting instead for a minimalist framework that lets the content and the brand's mission take center stage. The interface feels established and reliable, akin to a modern digital archive or a high-end institutional portal. It is not playful, whimsical, or overly trendy; it does not utilize soft gradients, rounded corners for the sake of friendliness, or chaotic layouts. The design is strictly functional yet dignified, creating a sense of order and respect. The layout is grid-based and spacious, ensuring readability and ease of navigation for users seeking information or merchandise. The overall impression is one of stability and heritage, translated into a contemporary digital experience that respects the weight of the organization's history while remaining accessible to a modern audience.

**Key characteristics:**

- Vibe — professional
- Design era — contemporary
- Emotional tone — professional
- Target audience — general audience
- Visual energy — 5/10 (moderate)

## Colors

The palette leverages #ffed00 as a bold, authoritative accent against a neutral #f5f5f5 surface. This high-contrast combination signals energy and visibility without sacrificing professionalism. The yellow acts as a highlight for critical actions and brand markers, drawing attention to key elements, while the light gray background ensures a calm, readable canvas. This restraint prevents visual fatigue and reinforces the brand's serious, organized character.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#ffed00` | Yellow |
| accent / tertiary | `#f78da7` | Hot Pink |
| background | `#f5f5f5` | White Smoke |
| text | `#333333` | Charcoal |
| secondary text | `#009ee0` | Dodger Blue |
| border | `#abb8c3` | Silver |
| link | `#404040` | Charcoal |
| muted | `#009ee0` | Dodger Blue |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| surface | `#009ee0` | Dodger Blue |

## Typography

DM Sans is the exclusive typeface, chosen for its geometric clarity and modern neutrality. Its clean lines and open apertures ensure high legibility across devices, supporting the brand's professional tone. The hierarchy is established through weight and size rather than varied fonts, creating a unified visual voice. This consistent typographic system communicates efficiency and modernity, aligning with the straightforward, no-nonsense approach of the Misericordie's digital presence.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| DM Sans | body | self-hosted | 400, 500 |
| DM Sans | heading | self-hosted | 700 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Heading 2 | DM Sans | 47.3719px | 700 | 51.749px | — |
| Heading 3 | DM Sans | 26.66px | 700 | 30.8733px | — |
| Heading 4 | DM Sans | 15.0038px | 700 | 19.12px | — |
| Body | DM Sans | 18px | 400 | 24.144px | — |

### Conventions

- Heading case — uppercase
- Body line-height — 24.144px

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| card | `rgba(0, 0, 0, 0.35) 0px 24px 38px -34px` |

### Gradients

- `linear-gradient(90deg, rgb(0, 158, 224) 0%, rgb(1, 54, 102) 100%)`
- `linear-gradient(rgba(0, 158, 224, 0.1), rgba(0, 0, 0, 0))`

## Shapes

Border-radius scale:

- `sm` — 64px
- `lg` — 450px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Primary**

- Background — `#ffed00`
- Text — `#404040`
- Radius — `450px`
- Padding — `15.3px 27.2px`
- Font size — `17px`
- Font weight — `500`
- Border — `1px solid #ffed00`
- Sample copy — "Contattaci"

**Ghost**

- Text — `#333333`
- Radius — `0px`
- Padding — `0px`
- Font size — `18px`
- Font weight — `400`
- Border — ` solid #333333`

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 6/10 | balanced |
| Playful ↔ Serious | 3/10 | playful |
| Enthusiastic ↔ Matter-of-fact | 5/10 | balanced |
| Respectful ↔ Irreverent | 2/10 | respectful |
| Technical ↔ Accessible | 7/10 | accessible |

### Copywriting style

- Avg. sentence length — 8 words
- Vocabulary — moderate
- Jargon — some
- CTA style — direct imperative verbs with specific action targets
- Rhetorical devices — repetition, parallelism, rhetorical question

### Sample copy

> La storia si indossa. Il futuro si innova.

> Se è Official, lo riconosci subito!

> Vesti Official! La tua storia, la nostra divisa.

> Qualità garantita, identità riconosciuta.

> Scegli il partner ufficiale che protegge chi opera in prima linea

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/storemisericordie.it) | 100% |
| primary | — | svg | [link](brands/storemisericordie.it/logo-0.svg) | 85% |
| secondary | — | svg | [link](brands/storemisericordie.it/logo-1.svg) | 85% |

## Sources

- Official brand guidelines — https://www.simpler.so/media-kit
- Live brand page — https://extractvibe.com/brand/storemisericordie.it
- Raw JSON — https://extractvibe.com/api/brand/storemisericordie.it
- DESIGN.md (this file) — https://extractvibe.com/api/brand/storemisericordie.it/design.md
- Extracted — 2026-09-14T11:32:38.988Z
- Generator — ExtractVibe vv1
- Quality score — 80/100