<!-- Generated by ExtractVibe — https://extractvibe.com/brand/melottogroup.com -->
<!-- Extracted: 2026-09-04T09:09:57.290Z | Schema: v1 | Quality: 90/100 -->
---
version: alpha
name: "Melotto Group"
description: "Melotto Group projects a sophisticated, intellectual, and trustworthy presence, blending the authority of academic research with the clarity of modern corporate communication. The aesthetic is clean, structured, and understated, relying on deep navy tones and generous whitespace to convey precision and credibility."
colors:
  primary: "#130b46"
  tertiary: "#2f2a51"
  neutral: "#130b46"
  surface: "#ffffff"
  on-surface: "#2f2a51"
  on-surface-secondary: "#130b46"
  border: "#afacc3"
  link: "#333333"
typography:
  display-lg:
    fontFamily: "Generalsans"
    fontSize: "64px"
    fontWeight: "600"
    lineHeight: "72px"
    letterSpacing: "-1.92px"
  headline-lg:
    fontFamily: "Generalsans"
    fontSize: "56px"
    fontWeight: "600"
    lineHeight: "64px"
    letterSpacing: "-1.68px"
  headline-md:
    fontFamily: "Generalsans"
    fontSize: "48px"
    fontWeight: "600"
    lineHeight: "56px"
    letterSpacing: "-1.44px"
  headline-sm:
    fontFamily: "Generalsans"
    fontSize: "40px"
    fontWeight: "600"
    lineHeight: "48px"
    letterSpacing: "-0.8px"
  body-md:
    fontFamily: "Inter"
    fontSize: "14px"
    fontWeight: "400"
    lineHeight: "20px"
rounded:
  sm: "6px"
  lg: "8px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-secondary:
    backgroundColor: "#f6f6f9"
    textColor: "#130b46"
    rounded: "6px"
    padding: "10px 20px"
    fontSize: "14px"
    fontWeight: "500"
    borderColor: "#130b46"
  button-outline:
    textColor: "#130b46"
    rounded: "8px"
    padding: "8px 24px"
    fontSize: "14px"
    fontWeight: "500"
    borderColor: "#130b46"
    borderWidth: "1px"
  button-primary:
    backgroundColor: "#130b46"
    textColor: "#ffffff"
    rounded: "8px"
    padding: "12px 24px"
    fontSize: "14px"
    fontWeight: "600"
    borderColor: "#ffffff"
---

# Melotto Group — Design System

## Overview

The Melotto Group design system embodies the intersection of rigorous academic inquiry and modern corporate precision. Rooted in the archetypes of The Sage and The Ruler, the interface projects an atmosphere of intellectual authority and unwavering trust. The visual language is clean, structured, and deliberately understated, utilizing deep navy tones and generous whitespace to create a sense of calm competence. This aesthetic mirrors the clarity found in The New York Times and the enterprise-grade reliability of Stripe, ensuring that every interaction feels both credible and sophisticated. The design avoids decorative excess, prioritizing content hierarchy and readability to guide the user through complex information with ease. By relying on a minimalist framework, the system ensures that the brand’s message remains the focal point, fostering a connection with users who value expertise and transparency. The overall experience is one of quiet confidence, where every element serves a functional purpose while contributing to a cohesive, professional identity. This approach distinguishes Melotto Group from competitors by offering a digital environment that feels both timeless and contemporary, reinforcing the brand’s position as a leader in its field through visual consistency and thoughtful detail.

**Key characteristics:**

- Vibe — authoritative, academic, clean, trustworthy, professional, minimalist
- Archetypes — The Sage, The Ruler
- Comparable to — McKinsey & Company, The New York Times, Stripe (Enterprise), Harvard Business Review
- Design era — contemporary-minimal
- Emotional tone — trustworthy-premium
- Target audience — C-suite executives, marketing directors, and organizational leaders seeking high-level strategic communications, research-backed content, and clear messaging.
- Visual energy — 3/10 (calm/understated)

## Colors

The color palette is anchored by #130b46, a deep navy that conveys stability, depth, and intellectual rigor, serving as the primary vessel for brand authority. This is balanced against #ffffff, a pure white surface that provides maximum contrast and readability, reinforcing the brand’s commitment to clarity and honesty. The high-contrast relationship between these two colors eliminates visual noise, ensuring that information is processed quickly and accurately. This minimalist chromatic strategy signals professionalism and trust, avoiding distractions to focus entirely on content integrity and user comprehension.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#130b46` | Midnight Blue |
| accent / tertiary | `#2f2a51` | Charcoal |
| background | `#ffffff` | White |
| text | `#2f2a51` | Charcoal |
| secondary text | `#130b46` | Midnight Blue |
| border | `#afacc3` | Dark Silver |
| link | `#333333` | Charcoal |
| muted | `#130b46` | Midnight Blue |

## Typography

The type system utilizes Inter and Generalsans to establish a clear, modern hierarchy that supports dense informational content. Inter provides excellent legibility for body text, ensuring that complex data is accessible, while Generalsans adds a distinctive, contemporary character to headings and UI elements. The hierarchy is strictly defined by weight and size, creating a visual rhythm that guides the eye through structured content without relying on color or decoration. This typographic discipline communicates precision and order, reflecting the brand’s academic roots and corporate sophistication through a clean, readable, and authoritative text structure.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Inter | body | google-fonts | 400, 500, 600 |
| Generalsans | heading | self-hosted | 600 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Generalsans | 64px | 600 | 72px | -1.92px |
| Heading 2 | Generalsans | 56px | 600 | 64px | -1.68px |
| Heading 3 | Generalsans | 48px | 600 | 56px | -1.44px |
| Heading 4 | Generalsans | 40px | 600 | 48px | -0.8px |
| Body | Inter | 14px | 400 | 20px | — |

### Conventions

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

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| card | `rgba(47, 42, 81, 0.08) 68px 68px 148px -24px` |

## Shapes

Border-radius scale:

- `sm` — 6px
- `lg` — 8px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Secondary**

- Background — `#f6f6f9`
- Text — `#130b46`
- Radius — `6px`
- Padding — `10px 20px`
- Font size — `14px`
- Font weight — `500`
- Border — ` solid #130b46`
- Sample copy — "Home"

**Outline**

- Text — `#130b46`
- Radius — `8px`
- Padding — `8px 24px`
- Font size — `14px`
- Font weight — `500`
- Border — `1px solid #130b46`
- Sample copy — "Get In Touch"

**Primary**

- Background — `#130b46`
- Text — `#ffffff`
- Radius — `8px`
- Padding — `12px 24px`
- Font size — `14px`
- Font weight — `600`
- Border — ` solid #ffffff`
- Sample copy — "Speak with Hannah"

## Do's and Don'ts

### Do

- Use Generalsans at 600 weight for all headings, strictly in sentence-case, to maintain a modern yet authoritative voice.
- Use Inter at weights 400, 500, and 600 for body copy, ensuring a consistent line-height of 20px for optimal readability.
- Apply the primary brand color #130b46 to all primary CTA buttons, using white (#ffffff) text, 8px border-radius, and 12px 24px padding.
- Style secondary buttons with a #f6f6f9 background, #130b46 text, 6px border-radius, and 10px 20px padding to create visual hierarchy.
- Use outline buttons for secondary actions like 'Get In Touch', featuring #130b46 text and borders with 8px border-radius and 8px 24px padding.
- Apply a subtle card shadow using rgba(47, 42, 81, 0.08) with an offset of 68px 68px 148px -24px to add depth without clutter.
- Maintain a strict flat design approach by avoiding all gradients, relying instead on solid color blocks and spacing for visual interest.
- Use light emoji usage and frequent exclamations sparingly in copy to inject approachability without undermining professional seriousness.

### Don't

- Do not use title case for headings; the brand strictly adheres to sentence-case conventions.
- Do not use serif fonts; the brand is entirely sans-serif, utilizing Generalsans and Inter exclusively.
- Do not use vibrant or saturated accent colors; stick to the deep navy #130b46 and muted purple-grey #2f2a51.
- Do not use gradients on any UI elements or backgrounds; the design language is flat and solid.
- Do not use sharp 0px corners; minimum border radius is 6px for small elements and 8px for buttons/cards.
- Do not use excessive jargon; keep vocabulary moderate and accessible to ensure clarity for a broad executive audience.
- Do not use heavy or multi-layered shadows; limit shadows to the single specified card style to maintain a clean aesthetic.
- Do not use playful or irreverent tone; maintain a serious, matter-of-fact voice with high credibility.

*Source — inferred*

## Voice

### Tone (1–10 scale)

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

### Copywriting style

- Avg. sentence length — 14 words
- Vocabulary — moderate
- Jargon — some
- CTA style — direct action verbs with benefit-oriented context
- Rhetorical devices — repetition, parallelism, alliteration

### Sample copy

> Helping organizations communicate.

> Expert writing, research, and strategic communications for organizations that value clarity, credibility, and impact.

> Trust & precision

> Content built for ambitious brands.

> Our founder, Hannah Melotto, leads every project herself to ensure the work stays focused, consistent, and firmly on brand from first concept through final delivery.

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/melottogroup.com) | 100% |
| favicon | — | png | [link](brands/melottogroup.com/logo-0.png) | 95% |
| favicon | — | png | [link](brands/melottogroup.com/logo-1.png) | 95% |
| favicon | — | png | [link](brands/melottogroup.com/logo-2.png) | 95% |
| favicon | — | png | [link](brands/melottogroup.com/logo-3.png) | 95% |
| favicon | — | png | [link](brands/melottogroup.com/logo-4.png) | 95% |
| favicon | — | png | [link](brands/melottogroup.com/logo-5.png) | 95% |

## Sources

- Live brand page — https://extractvibe.com/brand/melottogroup.com
- Raw JSON — https://extractvibe.com/api/brand/melottogroup.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/melottogroup.com/design.md
- Extracted — 2026-09-04T09:09:57.290Z
- Generator — ExtractVibe vv1
- Quality score — 90/100