CottageHop

Identity

Brand Guidelines

The CottageHop visual identity — logo usage, color palette, typography, and component styles.

Logos

Logo Variations

Logo (SVG)
cottagehop_logo.svg
Logo (PNG)
cottagehop_logo.png
Badge
CottageHop Logo.png
With Text
cottagehop_logo_wtext.png
Banner
cottagehop_logo_banner.png

On Dark Background

Logo (SVG)
cottagehop_logo.svg
Logo (PNG)
cottagehop_logo.png
Badge
CottageHop Logo.png
With Text
cottagehop_logo_wtext.png
Banner
cottagehop_logo_banner.png

Colors

Color Palette

Brand, semantic, and derived colors

Brand Colors

Primary
#365314
Secondary
#D4A76A
Accent
#4A7C2E

Semantic Colors

Error
#C62828
Warning
#E6A817
Info
#4A7C2E
Success
#2E7D32

Derived Colors

Gradient Dark
#243B0D
Light Tint 1
#f4f7f0
Light Tint 2
#e8f0e0
Sand
#f0e6d5

Components

Button Styles

Filled

Outlined

Tonal

Text

Sizes

With Icons

Type

Typography

Headings

.text-h1
Heading 1
.text-h2
Heading 2
.text-h3
Heading 3
.text-h4
Heading 4
.text-h5
Heading 5
.text-h6
Heading 6

Body & Subtitles

.text-subtitle-1
Subtitle 1 — Used for card titles and section labels
.text-subtitle-2
Subtitle 2 — Used for smaller card titles and labels
.text-body-1
Body 1 — Primary body text used for paragraphs and descriptions across the application.
.text-body-2
Body 2 — Secondary body text used for captions, labels, and supplementary information.
.text-caption
Caption — Fine print, timestamps, and metadata
.text-overline
Overline — Section labels and category tags

Brand Font

Abril Fatface — Headlines & Brand
The quick brown fox jumps over the lazy dog

Feedback

Chips & Alerts

Chips

primary
secondary
accent
error
warning
success

Alerts