Building on
the Cinebody brand.
A complete reference for colors, typography, components, and usage guidelines for cinebody.com and all web touchpoints.
Color System
Three core brand colors define Cinebody's visual identity. Teal is the dominant action color, Yellow activates CTAs, and Pink delivers punch. Every web component draws from this palette.
Primary Brand Colors
Neutral & Background Colors
Approved Color Combinations
Typography
Open Sans is the sole typeface for all web touchpoints. It is loaded via Google Fonts at weights 300, 400, 600, 700, and 800. No other typefaces are used.
Google Fonts Import
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap');
Type Scale
800 weight
700 weight
700 weight
400 weight · 16px
400 weight · 14px
800 weight · XL
700 weight · 14px
700 · UPPERCASE · 11px
White text
Responsive Sizing — CSS Clamp
Use clamp() for fluid type that scales between breakpoints:
/* Section titles */ font-size: clamp(2rem, 4.5vw, 3rem); /* Hero display */ font-size: clamp(2.4rem, 5vw, 3.8rem); /* Sub-headers */ font-size: clamp(1.2rem, 2.5vw, 1.7rem);
Buttons & CTAs
All buttons use Open Sans 700, 14px, with border-radius: 6px and a translateY(-2px) hover lift. No button uses scale() on hover.
Standard button CSS:
.cb-btn {
display: inline-block;
padding: 14px 28px;
border-radius: 6px;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
font-size: 0.875rem;
letter-spacing: 0.02em;
text-decoration: none;
border: none;
cursor: pointer;
transition: transform 0.18s, box-shadow 0.18s;
}
.cb-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
Use Teal button as the primary CTA on white/light sections. Use Yellow button on dark or grey sections for maximum contrast.
Don't use Yellow buttons on white backgrounds — the contrast is insufficient. Don't use more than 2 CTAs per section.
Spacing & Layout
All sections use a 1200px max-width container, centered with auto margins. Section padding is consistent at 80px vertical on desktop, reducing to 40px on mobile.
Vertical Spacing Scale
Max-Width Container Rule
All content is capped at max-width: 1200px with margin: 0 auto and padding: 0 20px on the sides. Section backgrounds may bleed full-width using the full-width technique: width: 100vw; left: 50%; transform: translateX(-50%); on the section wrapper, with a centered inner container.
Global Components
Site-wide elements that appear across multiple pages. These should be implemented exactly once per page, typically in the site header or footer injection.
10px animated teal → yellow → pink bar. Used at top and bottom of the site. Must be full-width (100vw) with Squarespace padding reset applied.
Single-row auto-scrolling marquee with 16 client logos. Grayscale by default, full color on hover. Dark background. Infinite loop.
Homepage Components
Core conversion components built for the cinebody.com homepage. Each is a self-contained HTML file for Squarespace Code Blocks with Squarespace padding resets applied.
4 animated stats on teal background with count-up animation (2.4s). Cascading start with pulse animation on numbers. Dividers between stats.
4-card grid on dark background. Hover: card lifts, teal glow, icon rotates. Icons shift teal → yellow on hover. 1200px max-width.
Step-by-step process diagram. Three stages: Shot List → Film → Deliver. Includes creative services cross-sell. Light grey background.
3-tier pricing with toggle for monthly/annual. Includes cross-sell to creative services at the bottom. Core conversion component.
4 case study cards (Nike, Point.me, Royal Caribbean, Georgia-Pacific). 3:4.2 aspect ratio cards. Hover reveals CTA. Brand names align horizontally.
Expandable FAQ with smooth open/close animation. Light grey background. Used on homepage and support pages. Pre-loaded with 8 common questions.
Case Study Components
Reusable patterns built for Point.me, Royal Caribbean, and Nike case study pages. Each case study uses a hero → stats → video showcase → CTA structure.
Content left, image right. 700px max-height image with teal accent frame offset behind image. Partner logos with + divider. White background. Hidden image on mobile.
Hero CTV video at top, 4 vertical videos branching below with teal connection lines and dots. Dark grey bg. Click-to-unmute. Mobile: 2×2 grid, trunk/drops hidden.
1 horizontal video left, content right. Grey background variant. Click-to-unmute Vimeo embed with teal play button (bottom-left). Yellow border glow on hover.
2 vertical videos left, content right. White background. Pair of vertical phone-ratio clips. Click-to-unmute pattern applied to each.
3 tabs with SVG line icons (white default, yellow active). 2 vertical videos per tab, centered. Red pulsing "Always On" live indicator. Dark background.
Mirror of cs2 variant. Content on left, 2 vertical videos right. Grey background. Completes the alternating left/right video layout pattern.
3–4 client-specific stats on dark background. Pop-in animations with dividers between each stat. Built per client. Example: Royal Caribbean (10+ Ships, Always On, 0 Production Crews).
CTA Components
Every page ends with a yellow CTA block. The headline is client-specific or action-oriented. Button links to the booking calendar.
Yellow background CTA. Headline + subheadline + black button. Used at the end of every case study page and homepage. Button links to Calendly booking URL.
Teal background CTA for general homepage use. White text + white button. Used for non-case-study pages. Fade-in animation on scroll.
Layout Rules
Consistent layout patterns that ensure every component integrates cleanly into Squarespace and looks pixel-perfect across breakpoints.
The Full-Width Bleed Technique
When a section background needs to extend edge-to-edge (past Squarespace's container), apply this to the wrapper: width: 100vw; position: relative; left: 50%; transform: translateX(-50%); — then place the inner content container at max-width: 1200px; margin: 0 auto; padding: 0 20px;. On mobile, always reset with width: 100%; position: static; transform: none;
Squarespace Padding Reset
All code blocks require this at the top of their CSS to remove Squarespace's default padding: .sqs-block-code { padding: 0 !important; } .sqs-block { padding: 0 !important; }
Mobile Breakpoint
All components switch layouts at @media (max-width: 768px). Hero images are hidden on mobile. Multi-column grids collapse to single column. The full-width bleed technique reverts to static positioning. Font sizes shift to mobile-appropriate values.
Background Alternation Pattern
Pages alternate sections using these backgrounds to create visual rhythm. Never stack two white sections or two dark sections back-to-back.
Video Style & Embed Rules
All video embeds use Vimeo with background=1 and autoplay. A transparent overlay handles click-to-unmute. Play buttons are always teal, bottom-left, with yellow border glow on hover.
Click-to-Unmute Pattern
Vimeo iframes load with ?background=1&autoplay=1&loop=1&muted=1. A full-size overlay div sits on top. On click, the overlay hides and Vimeo's JS API toggles setVolume(1) to unmute. The teal play button in the corner indicates sound is available.
Play Button Spec
Play button specifications:
- Size:
36×36px,border-radius: 8px - Background:
linear-gradient(135deg, #00bcf1, #0080aa) - Position:
bottom: 10px; left: 10px - Hover border:
box-shadow: 0 0 0 2px #ffec03 - Icon: solid white triangle, 2px left offset for optical centering
Do's & Don'ts
Brand guardrails to keep every web touchpoint consistent and on-brand. When in doubt, refer back to these rules.
Color Usage
Use Teal (#00bcf1) as the primary action color for buttons, links, icons, and interactive elements on white or light backgrounds.
Don't use Yellow CTAs on white backgrounds — the contrast ratio fails accessibility and the color reads as weak on light surfaces.
Use Yellow (#ffec03) for CTA section backgrounds, icon hover states, and active tab indicators on dark sections.
Don't use Pink (#eb008b) as a background color for entire sections. Pink is an accent only — sparingly used for indicators and highlights.
Alternate section backgrounds (White → Light Grey → Dark → Yellow) to create visual rhythm down the page.
Don't stack two sections of the same background color. No white-on-white, no dark-on-dark consecutive sections.
Typography
Use only Open Sans across all components. Load via Google Fonts with weights 300, 400, 600, 700, and 800 to support the full type hierarchy.
Don't use system fonts (Arial, Helvetica, -apple-system) or other brand fonts. Open Sans is the only permitted web typeface.
Use font-weight 800 for hero headlines and stats. 700 for section titles. 400 for body copy. 600 for UI labels and navigation items.
Don't use font-weight 400 for buttons or CTAs. All interactive text uses 700 minimum to convey confidence and urgency.
Components & Layout
Apply the Squarespace padding reset to every code block (.sqs-block { padding: 0 !important; }) to ensure components render flush.
Don't allow Squarespace's default padding to remain on sections with full-width backgrounds — it causes visible gaps at the edges.
Cap all content at max-width: 1200px with a centered container. Backgrounds may bleed full-width but content should never stretch beyond 1200px.
Don't use scale() transform on hover for cards or buttons. Always use translateY(-2px) with a box-shadow for the hover lift effect.
Use the signature color bar (teal → yellow → pink) at the top of the site header and at the bottom of the footer, always animated.
Don't place more than 2 CTA buttons in a single section. One primary action is always preferred over multiple competing options.
Video & Media
Use the click-to-unmute pattern on all Vimeo embeds. Videos autoplay muted, and the teal play button signals that audio is available on click.
Don't embed videos that autoplay with sound. Always use background=1 in the Vimeo URL to ensure silent autoplay by default.
Use the teal accent frame (offset 6–8px behind image, top-right or bottom-left) on hero images in case study headers to add brand depth.
Don't display hero images on mobile. Hide the image column entirely and let content take the full width for a cleaner mobile experience.