Design Specifications - lahave.io

Color Palette

Text Colors

• White Text: Used in hero section (sqsrte-text-color--white)
• Primary Text: Standard text color (to be determined from live site)
• Highlighted Text: Text highlighting feature used for “LaHave.io”

Background Colors

• Hero Background: Dark/colored background (exact color to be determined)
• Page Background: Standard page background (to be determined)
• Footer Background: (to be determined)

Accent Colors

• Primary Color: (to be extracted from live site)
• Secondary Color: (to be extracted from live site)

Typography

Font Families

• Primary Font: (To be determined from live site - likely system fonts or custom)
• Font Stack: Squarespace typically uses system fonts

Font Sizes

• Large Text: sqsrte-large class
• Headings: h1, h2, h3 with various styles
• Body Text: Standard paragraph text

Font Weights

• Bold/Strong: Used for names and emphasis
• Regular: Standard body text

Layout

Header

• Layout: Logo left, navigation right (logoLeftNavRight)
• Navigation: Right-aligned (navRight)
• Mobile: Hamburger menu with overlay

Grid System

• Squarespace Fluid Engine
• 12-column grid system
• Responsive breakpoints

Spacing

• Standard Squarespace spacing system
• Content sections with appropriate padding/margins

Components

Buttons

• Primary button style
• Form submit buttons with label style

Forms

• Field style: Solid
• Field shape: Square
• Border: All sides
• Hover/focus outline enabled

Images

• Responsive image loading
• Object-fit: cover
• Object-position: 50% 50%

Notes

• Design uses clean, minimal aesthetic
• White text on colored/dark backgrounds in hero sections
• Professional, modern look
• Responsive design with mobile considerations

Next Steps

1. Visit live site to extract exact color values
2. Identify font families used
3. Document exact spacing values
4. Capture any animations or transitions
5. Document button and form styling in detail