Color Palette
Colors
Light Mode
Dark Mode
Typography
Fonts
Arial
body
400
system
sans-serif
eldwin-script
heading
700
self-hosted
sans-serif
Montserrat
body
700
google-fonts
sans-serif
body
The quick brown fox
14pxh1
The quick brown fox
36pxh2
The quick brown fox
36pxComponents
Design System
Sign up for your next adventure HERE
primary
10px#2e93a1#ffffff
Voice & Tone
Personality
Visual Energy
5/10
Design Era
contemporary
Emotional Tone
professional
Target Audience
general audience
Design Assets
Visual Elements
<!-- Generated by ExtractVibe — https://extractvibe.com/brand/harmonyexplorers.com -->
<!-- Extracted: 2026-09-27T06:59:12.801Z | Schema: v1 | Quality: 65/100 -->
---
version: alpha
name: "Home New"
description: "Home New presents a professional web presence."
colors:
primary: "#2e93a1"
tertiary: "#f47d62"
neutral: "#2e93a1"
surface: "#ffffff"
on-surface: "#333333"
on-surface-secondary: "#2e93a1"
border: "#e7e0dd"
surface-dark: "#6abccb"
typography:
display-lg:
fontFamily: "eldwin-script"
fontSize: "36px"
fontWeight: "700"
lineHeight: "44px"
headline-lg:
fontFamily: "eldwin-script"
fontSize: "36px"
fontWeight: "700"
lineHeight: "44px"
body-md:
fontFamily: "Arial"
fontSize: "14px"
fontWeight: "400"
lineHeight: "20px"
rounded:
md: "10px"
full: "9999px"
spacing:
base: "2px"
xs: "1px"
sm: "2px"
md: "4px"
lg: "6px"
xl: "8px"
components:
button-primary:
backgroundColor: "#2e93a1"
textColor: "#ffffff"
rounded: "10px"
padding: "10px 24px"
fontSize: "16px"
fontWeight: "700"
borderColor: "#ffffff"
---
# Home New — Design System
## Overview
Home New presents a professional web presence.
Key characteristics: professional.
**Key characteristics:**
- Vibe — professional
- Design era — contemporary
- Emotional tone — professional
- Target audience — general audience
- Visual energy — 5/10 (moderate)
## Colors
The palette draws on 14 distinct colors observed across the site, organized into semantic roles below.
### Light mode
| Role | Hex | Name |
|------|-----|------|
| primary | `#2e93a1` | Steel Blue |
| accent / tertiary | `#f47d62` | Salmon |
| surface | `#ffffff` | White |
| background | `#835f57` | Dim Gray |
| text | `#333333` | Charcoal |
| secondary text | `#2e93a1` | Steel Blue |
| border | `#e7e0dd` | Gainsboro |
| muted | `#2e93a1` | Steel Blue |
### Dark mode
| Role | Hex | Name |
|------|-----|------|
| surface | `#6abccb` | Medium Aquamarine |
## Typography
Type is set in Arial, eldwin-script, Montserrat, with hierarchy expressed through size and weight contrast rather than family-switching.
### Font families
| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Arial | body | system | 400 |
| eldwin-script | heading | self-hosted | 700 |
| Montserrat | body | google-fonts | 700 |
### Type scale
| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | eldwin-script | 36px | 700 | 44px | — |
| Heading 2 | eldwin-script | 36px | 700 | 44px | — |
| Body | Arial | 14px | 400 | 20px | — |
### Conventions
- Heading case — title-case
- Body line-height — 20px
## Layout
- Base spacing unit — `2px`
## Shapes
Border-radius scale:
- `md` — 10px
- `full` — 9999px (pill / circular)
## Components
### Buttons
**Primary**
- Background — `#2e93a1`
- Text — `#ffffff`
- Radius — `10px`
- Padding — `10px 24px`
- Font size — `16px`
- Font weight — `700`
- Border — ` solid #ffffff`
- Sample copy — "Sign up for your next adventure HERE"
## Voice
### Tone (1–10 scale)
| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 5/10 | balanced |
| Playful ↔ Serious | 5/10 | balanced |
| Enthusiastic ↔ Matter-of-fact | 5/10 | balanced |
| Respectful ↔ Irreverent | 3/10 | respectful |
| Technical ↔ Accessible | 5/10 | balanced |
### Copywriting style
- Avg. sentence length — 12 words
- Vocabulary — moderate
- Jargon — some
- CTA style — direct
## Logos
| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/harmonyexplorers.com) | 100% |
| favicon | — | png | [link](brands/harmonyexplorers.com/logo-0.png) | 95% |
| favicon | — | png | [link](brands/harmonyexplorers.com/logo-1.png) | 95% |
| favicon | — | png | [link](brands/harmonyexplorers.com/logo-2.png) | 95% |
| favicon | — | png | [link](brands/harmonyexplorers.com/logo-3.png) | 95% |
| favicon | — | png | [link](brands/harmonyexplorers.com/logo-4.png) | 95% |
| favicon | — | png | [link](brands/harmonyexplorers.com/logo-5.png) | 95% |
## Sources
- Official brand guidelines — https://filecamp.com/blog/brand-guidelines/
- Live brand page — https://extractvibe.com/brand/harmonyexplorers.com
- Raw JSON — https://extractvibe.com/api/brand/harmonyexplorers.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/harmonyexplorers.com/design.md
- Extracted — 2026-09-27T06:59:12.801Z
- Generator — ExtractVibe vv1
- Quality score — 65/100
183 lines · 4,699 bytesView raw
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/harmonyexplorers.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.


