Skip to content
melottogroup.com logo

Melotto Group

melottogroup.com

“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.”

authoritative
academic
clean
trustworthy
professional
minimalist
structured

Color Palette

Colors

#130b46

primary

#ffffff

background

#2f2a51

text

#130b46

secondaryText

#333333

link

#130b46

muted

#2f2a51

accent

#afacc3

border

Typography

Fonts

Inter

body
400
500
600
google-fonts

sans-serif

Generalsans

heading
600
self-hosted

sans-serif

body

The quick brown fox

h1

The quick brown fox

h2

The quick brown fox

h3

The quick brown fox

h4

The quick brown fox

h5

The quick brown fox

Components

Design System

Home
secondary
6px
#f6f6f9#130b46
Get In Touch
outline
8px
#130b46
Speak with Hannah
primary
8px
#130b46#ffffff
card
box-shadow

rgba(47, 42, 81, 0.08) 68px 68px 148px -24px

Voice & Tone

Personality

Visual Energy

3/10

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.

Comparable Brands

McKinsey & Company
The New York Times
Stripe (Enterprise)
Harvard Business Review

Brand Rules

Dos & 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.

Design Assets

Visual Elements

Design asset
svg114×57
Design asset
svg118×95
Design asset
svg86×83
Design asset
svg95×95
Design asset
svg114×57
Design asset
svg52×52
Design asset
svg52×52
Design asset
svg52×52
Design asset
png580×888
Design asset
png392×560

DESIGN.md

AI-ready

Drop into any project root. Cursor, Claude Code, v0, Lovable, and other AI coding agents read this file to generate on-brand UI. Spec

Download
DESIGN.md not yet generated for this brand.
How to use this file

1. Save this file as DESIGN.md in your project root (sibling to README.md).

2. AI agents that read project files (Claude Code, Cursor, v0, Lovable, Bolt, Windsurf) will discover it automatically.

3. Validate or export tokens with the official CLI:

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md
Developer Access
cURL
# Fetch the full brand kit
curl https://extractvibe.com/api/brand/melottogroup.com \
  -H "x-api-key: ev_your_key"

# Export as CSS variables
curl https://extractvibe.com/api/extract/JOB_ID/export/css \
  -H "x-api-key: ev_your_key"

# Export as Tailwind config
curl https://extractvibe.com/api/extract/JOB_ID/export/tailwind \
  -H "x-api-key: ev_your_key"

Extract your own brand kit

Get colors, fonts, voice, and personality from any website in seconds. Open source.

Get started free