style guide

emphasizes craftsmanship, elegance, and approachability

1. Color Palette

Inspired by the vibrant translucency of stained glass, the palette features rich, luxurious jewel tones balanced with soft neutrals for friendliness. Use Squarespace's Color Themes to apply these globally.

• Primary Colors (for accents, CTAs, and highlights):

  Color breakdown

  • #23383b: A very dark, ashy cyan that offers a cool, grounding base.

    • RGB: (35, 56, 59)

    • HSL: 188°, 26%, 18%

  • #246068: A dark cyan with slightly more saturation, bringing depth and coolness to the mix.

    • RGB: (36, 96, 104)

    • HSL: 187°, 49%, 27%

  • #3aa1aa: A moderate, prominent shade of cyan/teal that adds a bright, refreshing element.

    • RGB: (58, 161, 170)

    • HSL: 185°, 49%, 45%

  • #e29000: A saturated, pure orange or gold color that provides a striking, warm contrast.

    • RGB: (226, 144, 0)

    • HSL: 38°, 100%, 44%

  • #fadb67: A soft, light yellow that brings a touch of warmth and brightness to the palette.

    • RGB: (250, 219, 103)

    • HSL: 47°, 94%, 69% 

Typography

2. Typography

• Headings (luxury feel):

  • Font: Playfair Display (serif, elegant and artistic)

  • Weights: Regular (400) for H1-H2, Italic (400) for emphasis

  • Sizes: H1: 48px (desktop), 32px (mobile); H2: 36px; H3: 24px

  • Line Height: 1.2

  • Letter Spacing: 0.05em

• Body Text (friendly readability):

  • Font: Lato (sans-serif, modern and approachable)

  • Weights: Regular (400) for paragraphs, Bold (700) for emphasis

  • Sizes: 16px (desktop), 14px (mobile)

  • Line Height: 1.6

  • Letter Spacing: 0.02em

• Accents (captions, buttons):

  • Font: Lato Italic (for quotes or testimonials)

  • Size: 14px