Skip to content

Euphoria Theme

Design System & Style Guide

A comprehensive reference for colors, typography, components, and spacing — the complete Euphoria visual language.

Color System

Brand Palette

Three colors. One identity. Every interface element is derived from these three precise values.

Vanilla Custard

#FFF9EB

Primary background, cards, light surfaces

Misty Sage

#9FB2AC

Secondary bg, muted accents, hovers

Bloodstone

#5D0D18

Primary CTA, headings accent, footer

Ink

#130508

Foreground — body text and headings

Muted Rose

#7A5860

Muted text — captions and secondary copy

Typography

Type Scale

H1 Display

72px · Bodoni Moda · Weight 600

H2 Heading

56px · Bodoni Moda · Weight 600

H3 Section

42px · Bodoni Moda · Weight 600

H4 Subhead

32px · Bodoni Moda · Weight 500

H5 Card Title

24px · Bodoni Moda · Weight 500

H6 Label

20px · Bodoni Moda · Weight 500


Body text at 18px

18px · DM Sans Regular

Body text at 16px

16px · DM Sans Regular

Body text at 14px

14px · DM Sans Regular

Cards

Card Components

Media / blog

Feature

Editorial Typography

Bodoni Moda display with DM Sans body — a pairing that feels like a luxury magazine.

Swiss Grid System

12-column layout with deliberate whitespace and a disciplined content rhythm.

Luxury Motion

Scroll reveals and micro-interactions timed for editorial calm, not noise.

Service

01 Theme

Brand Customization

Full visual identity integration within Euphoria’s refined design system.

Learn more
02 Build

Module Library

Configurable HubSpot modules built for architecture and design studios.

Learn more
03 Launch

Marketplace Ready

Clean code, rich fields, and standards-aligned delivery for client sites.

Learn more

Spacing

Spacing Scale

4px

8px

12px

16px

24px

32px

48px

64px

80px

Radius

Border Radius Scale

Small — 12px

Medium — 20px

Large — 32px

XL — 48px

FAQ

Accordion Component

What is Euphoria?

Euphoria is a premium HubSpot theme for architecture and design studios — built around editorial typography, a restrained three-color palette, and 80+ configurable modules.

Which HubSpot tier is required?

Euphoria works on HubSpot CMS Hub Professional and above. Some modules rely on forms, blogs, and advanced menu features available on those tiers.

Can I customize the color palette?

Yes. Primary, secondary, background, foreground, and muted colors are all editable in Theme Settings → Global colors, and map across the entire design system.

Contact Form

Form Component

The same HubSpot form used on the Contact page — ready for style-guide reference.

We respond within one business day. No spam, ever.

Get Started

Ready to Transform Your Digital Presence?

Join hundreds of architectural studios already using Euphoria.

Book a Consultation