Design Spec: Sip 'n' Serve Society¶

Produced: 2026-05-25 For: codebuilder-2 (home page), codebuilder-3 (subpages), codebuilder-1 (enhancements) Source: research.md (verified from live site HTML + CSS)

1. Color System¶

Tailwind Custom Color Tokens¶

Add to tailwind.config.js under theme.extend.colors:

colors: {
  orange:  '#FE5D0E',   // site background, "bright" sections
  accent:  '#E83A08',   // buttons, strokes, links, CTA bg
  cream:   '#FFFBE0',   // image overlays, light card bg
  neon:    '#F5FA02',   // one-off section bg (neon yellow-lime)
  white:   '#FFFFFF',   // "light-bold" sections, text on dark
  black:   '#000000',   // body text, headings
}

Section Theme Map¶

Theme name	Background	Text color	Usage
`bright`	`bg-orange`	`text-black`	Sections 1, 2, 4, 6
`light-bold`	`bg-white`	`text-black`	Sections 3, 5, 7
`neon`	`bg-neon`	`text-black`	Reserve for special one-off section if needed

2. Typography¶

Google Fonts Import¶

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Poppins:wght@500&display=swap" rel="stylesheet">

Tailwind Font Families¶

fontFamily: {
  display: ['Anton', 'sans-serif'],
  body:    ['Poppins', 'sans-serif'],
}

Type Scale¶

Role	Font	Weight	Size (desktop)	Size (mobile)	Tailwind classes
Hero h1	Anton	400	72–96px (`clamp(56px, 8vw, 96px)`)	48px	`font-display text-[clamp(3rem,8vw,6rem)]`
Section h2	Anton	400	56px	36px	`font-display text-5xl md:text-7xl` (approx)
Section h3	Anton	400	36px	28px	`font-display text-3xl md:text-4xl`
Body	Poppins	500	16px	15px	`font-body text-base`
Nav links	Poppins	500	14px	14px	`font-body text-sm uppercase tracking-widest`
Button text	Poppins	500	13px	13px	`font-body text-xs uppercase tracking-widest`
Pullquote	Anton	400	32–40px	24px	`font-display text-3xl md:text-4xl italic`
Attribution	Poppins	500	13px	13px	`font-body text-xs uppercase tracking-widest`

Note: Anton renders naturally condensed and bold. No letter-spacing needed for display headings. The original site uses all-lowercase headings for sections 1/2/4/5/6 — match this in content, not CSS (actual text is lowercase in copy).

3. Layout System¶

Container¶

max-width: 1500px;
margin: 0 auto;
padding: 0 4vw;   /* desktop gutter */

Mobile (<768px): padding: 0 6vw;

Grid¶

Desktop: 24-column implicit grid via CSS grid or Tailwind grid-cols-12
Mobile: 8-column (single or two column layouts)
Column/row gap: 11px (use gap-[11px] in Tailwind)
Breakpoint: md: = 768px

Section Sizing¶

All sections: w-full (full-bleed)
Section inner content: max-w-[1500px] mx-auto px-[4vw] md:px-[4vw]
Section vertical padding: py-20 md:py-28 (80px/112px)
Hero: custom height, min-h-[90vh] desktop, min-h-[70vh] mobile

4. Component Specs¶

4.1 Header (Glassmorphism, sticky)¶

Position: sticky top-0 z-50
Background: rgba(254, 93, 14, 0.6)  [orange at 60% opacity]
backdrop-filter: blur(15px)
-webkit-backdrop-filter: blur(15px)
Height: ~64px desktop, ~56px mobile

Desktop: logo left (h-10 logo img), nav links right, flex justify-between items-center
Mobile: logo center, hamburger icon left (tripleLineHamburger = 3 horizontal bars, 22px wide, 2px stroke)
Nav links: font-body text-sm uppercase tracking-widest text-white hover:text-cream transition-colors
Cart icon: Heroicons ShoppingBagIcon or similar, 20px, white
Mobile nav: full-screen overlay, bg-orange, links stacked vertically, centered, 32px Anton

4.2 Section 1 — Hero¶

Layout pattern: Full-bleed image with text + CTA overlay

Container: relative, min-h-[90vh] (desktop), min-h-[70vh] (mobile)
Background image: 20241026-DSCF6223+(1)+Large.jpeg (object-cover, object-center)
Overlay: none (text sits on image directly or with subtle gradient)

Content block (positioned bottom-left or centered, absolute bottom-16 left-[4vw] or centered): - Small label: "your favorite volleyball community" — Poppins 500, 12px, uppercase, tracking-widest, white or cream - CTA Button: see Button spec below, text UPCOMING PICKUP & EVENTS →, links to /calendar

Marquee ticker (directly below hero, full-bleed strip): - Background: bg-black or bg-accent — confirm from live; use bg-black text-white - Height: py-3 (~48px) - Text: MAKE NEW FRIENDS ✦ PLAY GOOD VOLLEYBALL ✦ BREAK A SWEAT ✦ repeated 3x in one line - Animation: @keyframes marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } } infinite linear ~25s - Fade edges: mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%) - Font: Poppins 500, 13px, uppercase, tracking-wider

4.3 Section 2 — Welcome / About¶

Layout pattern: Two-column split (text left, image right) on desktop; stacked on mobile

Desktop: grid grid-cols-2 gap-[11px]
Mobile: grid grid-cols-1

Left column (text): - Heading: sip 'n' serve society — Anton, ~64px, lowercase, black - Body: Poppins 500, 16px, black, max-w prose - CTA Button: UPCOMING PICKUP & EVENTS →

Right column (image): - volleys-23.jpg — w-full h-full object-cover, aspect ratio ~4:3

Section theme: bright (orange bg)

4.4 Section 3 — Meet Your Hosts¶

Layout pattern: Heading centered above 8-photo grid

Heading: "MEET YOUR HOSTS" — Anton, ~56px, uppercase, black, text-center, mb-8
Grid: grid grid-cols-4 gap-[11px] (desktop)
      grid grid-cols-2 gap-[11px] (mobile)

Photos: square-cropped (aspect-square object-cover w-full), no captions

Section theme: light-bold (white bg)

4.5 Section 4 — FAQ¶

Layout pattern: Two-column (accordion left, image right) on desktop; stacked on mobile

Desktop: grid grid-cols-2 gap-16
Mobile: grid grid-cols-1

Left column: - Heading: FAQ — Anton, ~56px, black - Accordion items (2 Q&As): - Question row: Poppins 500, 16px, black, flex justify-between items-center, border-b border-black py-4 cursor-pointer - Answer: Poppins 500, 14px, black, pb-4 revealed on toggle - Chevron icon: rotates 180deg on open, transition-transform 200ms - Inline membership CTA: after Q&A 2, TELL ME ABOUT MEMBERSHIP. — underlined, links to /membership - Follow-up text: Poppins, 14px, italic or regular

Right column: - jan31-15+(1).jpg — w-full h-full object-cover

Section theme: bright (orange bg)

4.6 Section 5 — Testimonial¶

Layout pattern: Centered pullquote, full-bleed background image with dark overlay

Background image: nov6-72.jpg, object-cover
Overlay: rgba(0,0,0,0.45) (darkens image for legibility)
Text: white, centered

Quote: Anton, ~36px desktop / 24px mobile, italic, max-w-3xl mx-auto
Attribution: Poppins 500, 13px, uppercase, tracking-widest, white, mt-6

Section theme: light-bold with image overlay (effectively dark)

4.7 Section 6 — Contact CTA¶

Layout pattern: Centered text over background image

Background image: sep+13-20.jpg, object-cover
Overlay: rgba(254, 93, 14, 0.6) [orange overlay to maintain brand color]
Min-height: 40vh
Text: centered, white

Text: need something else? let's chat . — Anton, ~48px, lowercase, white
let's chat portion: underlined link, href="mailto:[email protected]" (best guess; replace if actual URL found)

Section theme: bright but with bg image

Layout pattern: Centered, single-column

max-w-lg mx-auto text-center

Heading: "THE SIP" — Anton, ~48px, black (quotation marks included in text)
Subheading: JOIN OUR (NOT SO REGULAR) NEWSLETTER WHERE WE SHARE UPCOMING TOURNAMENTS & OTHER NEWS. — Poppins 500, 14px, uppercase, tracking-wide, black, mt-4 mb-8
Form: three fields stacked (First Name, Last Name, Email Address)
Input style: w-full border border-black bg-transparent px-4 py-3 font-body text-sm placeholder:text-black/50 focus:outline-none focus:ring-2 focus:ring-accent mb-3
Submit button: full-width, primary button style (see below)
Success state: replace form with "You're in! Last step: confirm your email newsletter subscription in your inbox." — Poppins, 14px, centered
Social icons (Instagram, Facebook): 20px, inline-flex gap-4, below form, text-black hover:text-accent

Section theme: light-bold (white bg)

5. Spacing and Sizing¶

Section Padding¶

Context	Value
Section vertical (desktop)	`py-28` (112px)
Section vertical (mobile)	`py-16` (64px)
Section horizontal (desktop)	`px-[4vw]`
Section horizontal (mobile)	`px-[6vw]`

Grid Gaps¶

Context	Value
Photo grid (Hosts)	`gap-[11px]`
Two-column layouts	`gap-[11px]` (tight, Squarespace style) or `gap-12` (breathing room) — use `gap-12` for text/image pairs
Marquee	no gap

Button Styles¶

Primary button (dark, used on orange sections):

bg-black text-white font-body text-xs uppercase tracking-widest
px-8 py-3 (32px x 12px)
border-radius: 0 (square corners — matches Squarespace style)
hover:bg-accent hover:text-white transition-colors duration-200

Secondary button (outline, used on white sections if needed):

border border-black text-black font-body text-xs uppercase tracking-widest
px-8 py-3
hover:bg-black hover:text-white transition-colors duration-200

Arrow suffix → is part of button text content, not an icon.

6. Interactive States¶

Nav Links¶

Default: text-white
Hover: text-cream (pale cream #FFFBE0), transition-colors duration-150
Active page: underline or slight opacity increase

Primary Button¶

Default: bg-black text-white
Hover: bg-accent (#E83A08) + text-white
Active/press: scale-[0.98] subtle shrink

Accordion (FAQ)¶

Closed: answer max-h-0 overflow-hidden opacity-0
Open: answer max-h-[500px] opacity-100, transition duration-300 ease-in-out
Chevron: rotate-0 closed, rotate-180 open, transition-transform duration-300

Icon: 3 bars (22x18px, 2px stroke, white)
Open state: morphs to X or stays as bars (keep simple — just toggle visibility)
Nav overlay: fixed inset-0 bg-orange z-40 flex flex-col items-center justify-center gap-8
Links: Anton, 36px, black, uppercase

Form Inputs¶

Focus: ring-2 ring-accent (red-orange ring)
Error: border-accent

7. Image Usage¶

All images hotlinked from Squarespace CDN at appropriate responsive sizes. Pattern:

https://images.squarespace-cdn.com/content/v1/6722b2043679f24bccad7ffb/<UUID>/<filename>?format=<Nw>

Use format=1000w for desktop, format=750w for mobile via <img srcset> or sizes attribute.

Section	Image file	UUID	Recommended size
Hero (main)	`20241026-DSCF6223+(1)+Large.jpeg`	`0ec464fb-8219-4670-b985-48db57e4372c`	1500w
Hero (secondary)	`jan31-23.jpg`	`a47445e0-8ee8-4630-9250-ea8249fa6491`	1000w
About/Welcome	`volleys-23.jpg`	`081be4c2-d4ba-4a94-aef5-7b568cdafd28`	1000w
Hosts 1	`smash-3.jpg`	`881daf87-b4f5-4669-ae78-d64275344152`	500w
Hosts 2	`CH_07143.jpg`	`93984bc2-e592-4493-a614-b07a7841428a`	500w
Hosts 3	`IMG_8858.JPG`	`ae31a367-63ac-4e43-ac01-400f4db33be1`	500w
Hosts 4	`nov6-72.jpg`	`7994d0ab-e658-426d-af31-6b5cc4d572a1`	500w
Hosts 5	`sipnserve-5-10-29.jpg`	`326ea5fd-7b49-465c-87d2-c0202f41ed22`	500w
Hosts 6	`sep+13-1.jpg`	`45ccf70a-b9c6-4e45-b3d3-316e9a2ca9df`	500w
Hosts 7	`jan3-33.jpg`	`eeaada7c-ac71-4e7c-838c-6c3e4b2ceb02`	500w
Hosts 8	`sip+nov+11-26.jpg`	`1e93a778-2b4b-407b-8ec4-300ed3a6cfa9`	500w
FAQ	`jan31-15+(1).jpg`	`e7264669-20b8-47ea-9669-1f7b278a2a4a`	1000w
Contact BG	`sep+13-20.jpg`	`66831d1e-ce70-4754-98ef-199575563f89`	1500w
Testimonial BG	`nov6-72.jpg`	`7994d0ab-e658-426d-af31-6b5cc4d572a1`	1500w

Logo URL (white transparent, for header):

https://static1.squarespace.com/static/6722b2043679f24bccad7ffb/t/67b35ca13fbabe2916803a19/1739807905105/sip_n_serve_MainLogo_White_Transparent.png

Render at h-10 (40px tall), auto width.

8. SEO and Meta Tags¶

Implement in <head> of all pages:

<title>Sip 'n' Serve Society | Volleyball Pickup &amp; Tourneys in Austin, TX</title>
<meta name="description" content="Sip 'n' Serve Society is a volleyball community in Austin, Texas that offers weekly pickup sessions &amp; monthly tournaments. Join our community to play volleyball, break a sweat, &amp; make new friends!">
<link rel="canonical" href="https://www.sipnservesociety.com/">
<meta property="og:title" content="Sip 'n' Serve Society | Volleyball Pickup &amp; Tourneys in Austin, TX">
<meta property="og:description" content="Sip 'n' Serve Society is a volleyball community in Austin, Texas...">
<meta property="og:image" content="[logo URL above]">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary">
<meta name="viewport" content="width=device-width, initial-scale=1">

9. Tailwind Config Summary¶

// tailwind.config.js
module.exports = {
  content: ['./**/*.html'],
  theme: {
    extend: {
      colors: {
        orange: '#FE5D0E',
        accent: '#E83A08',
        cream:  '#FFFBE0',
        neon:   '#F5FA02',
      },
      fontFamily: {
        display: ['Anton', 'sans-serif'],
        body:    ['Poppins', 'sans-serif'],
      },
      maxWidth: {
        site: '1500px',
      },
      animation: {
        marquee: 'marquee 25s linear infinite',
      },
      keyframes: {
        marquee: {
          '0%':   { transform: 'translateX(0)' },
          '100%': { transform: 'translateX(-50%)' },
        },
      },
    },
  },
  plugins: [],
}

10. File Structure (for codebuilder-1 scaffold)¶

sites/sip-n-serve/
  index.html          — home page (7 sections)
  membership.html     — /membership placeholder
  store.html          — /store product grid
  calendar.html       — /calendar placeholder
  assets/
    images/           — downloaded CDN images (fallback if hotlinks break)
    logo.png          — downloaded logo
  css/
    output.css        — Tailwind compiled output
  js/
    main.js           — accordion toggle, mobile nav, marquee (if not CSS-only)
  tailwind.config.js
  package.json